WealthLedger/frontend
5
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: align frontend ownership boundaries

Browse Source 
Close audit gaps across API drift, query policy, UI, and tests.
This commit is contained in:
ksv741
2026-09-06 18:20:05 +03:00
parent 175727bc93
commit c97f62bd98
118 changed files with 2190 additions and 2254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/auth/index.ts
+1
View File
@@ -1,3 +1,4 @@
export { AuthProvider, useAuth } from "./model/auth";
export { AuthPageLayout } from "./ui/AuthPageLayout";
export { LoginForm } from "./ui/LoginForm";
export { RegisterForm } from "./ui/RegisterForm";
src/features/auth/model/auth.tsx
+1 -2
View File
@@ -8,8 +8,7 @@ import {
useRef,
useState,
} from "react";
import { apiClient, configureAuthClient } from "@/shared/api";
import type { paths } from "@/shared/api/generated/schema";
import { apiClient, configureAuthClient, type paths } from "@/shared/api";
type User =
paths["/api/v1/auth/me"]["get"]["responses"][200]["content"]["application/json"];
src/features/auth/model/validation.ts
+48
View File
@@ -0,0 +1,48 @@
import { z } from "zod";
import { validationMessage } from "@/shared/i18n";
function isEmailCharacterInvalid(character: string): boolean {
return (
/\s/.test(character) ||
character.charCodeAt(0) < 32 ||
character.charCodeAt(0) === 127
);
}
const email = z
.string()
.trim()
.toLowerCase()
.max(254)
.refine(
(value) =>
value.split("@").length === 2 &&
value.split("@").every(Boolean) &&
!value.split("").some(isEmailCharacterInvalid),
validationMessage("auth.validation.invalidEmail"),
);
const password = z
.string()
.refine(
(value) =>
new TextEncoder().encode(value).length >= 12 &&
new TextEncoder().encode(value).length <= 72,
validationMessage("auth.validation.invalidPasswordLength"),
);
const loginSchema = z.object({
email,
password,
passwordConfirmation: z.string().optional(),
});
const registerSchema = loginSchema.refine(
(value) => value.password === value.passwordConfirmation,
(value) => ({
path: ["passwordConfirmation"],
...validationMessage("auth.validation.passwordsDoNotMatch")(value),
}),
);
type AuthFormValues = z.input<typeof loginSchema>;
export { type AuthFormValues, loginSchema, registerSchema };
src/features/auth/ui/AuthForm.module.css
+4
View File
@@ -0,0 +1,4 @@
.fieldset {
border: 0;
padding: 0;
}
src/features/auth/ui/AuthForm.test.tsx
+2 -10
View File
@@ -1,18 +1,10 @@
import { MantineProvider } from "@mantine/core";
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { afterEach, describe, expect, it, vi } from "vitest";
import { describe, expect, it, vi } from "vitest";
import { AuthForm } from "./AuthForm";
describe("AuthForm", () => {
afterEach(cleanup);
it("does not submit registration when password confirmation differs", async () => {
const onSubmit = vi.fn();
render(
src/features/auth/ui/AuthForm.tsx
+7 -46
View File
@@ -5,52 +5,13 @@ import { useState } from "react";
import { FormProvider, type Resolver, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { z } from "zod";
import {
type AuthFormValues,
loginSchema,
registerSchema,
} from "../model/validation";
import classes from "./AuthForm.module.css";
import { validationMessage } from "@/shared/i18n";
function isEmailCharacterInvalid(character: string): boolean {
return (
/\s/.test(character) ||
character.charCodeAt(0) < 32 ||
character.charCodeAt(0) === 127
);
}
const email = z
.string()
.trim()
.toLowerCase()
.max(254)
.refine(
(value) =>
value.split("@").length === 2 &&
value.split("@").every(Boolean) &&
!value.split("").some(isEmailCharacterInvalid),
validationMessage("auth.validation.invalidEmail"),
);
const password = z
.string()
.refine(
(value) =>
new TextEncoder().encode(value).length >= 12 &&
new TextEncoder().encode(value).length <= 72,
validationMessage("auth.validation.invalidPasswordLength"),
);
const loginSchema = z.object({
email,
password,
passwordConfirmation: z.string().optional(),
});
const registerSchema = loginSchema.refine(
(value) => value.password === value.passwordConfirmation,
(value) => ({
path: ["passwordConfirmation"],
...validationMessage("auth.validation.passwordsDoNotMatch")(value),
}),
);
type AuthFormValues = z.input<typeof loginSchema>;
type AuthFormProps = {
register?: true;
onSubmit: (email: string, password: string) => Promise<void>;
@@ -79,7 +40,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
}
})}
>
<fieldset disabled={isSubmitting}>
<fieldset className={classes.fieldset} disabled={isSubmitting}>
<Stack>
<TextInput
label={t("auth.email")}
src/features/auth/ui/AuthPageLayout.module.css
+12
View File
@@ -0,0 +1,12 @@
.page {
align-items: center;
display: flex;
justify-content: center;
min-height: 100dvh;
padding: var(--mantine-spacing-xl);
}
.card {
box-shadow: 0 12px 32px rgba(30, 41, 59, 0.1);
width: min(100%, 26rem);
}
src/features/auth/ui/AuthPageLayout.tsx
+21
View File
@@ -0,0 +1,21 @@
import { Paper, Stack, Title } from "@mantine/core";
import type { FC, PropsWithChildren } from "react";
import classes from "./AuthPageLayout.module.css";
type AuthPageLayoutProps = PropsWithChildren<{ title: string }>;
const AuthPageLayout: FC<AuthPageLayoutProps> = (props) => {
const { children, title } = props;
return (
<main className={classes.page}>
<Paper className={classes.card} p="xl" radius="lg" withBorder>
<Stack gap="lg">
<Title order={1}>{title}</Title>
{children}
</Stack>
</Paper>
</main>
);
};
export { AuthPageLayout };
src/features/tbank-connection/model/connection-boundary.ts
+1 -2
View File
@@ -1,6 +1,5 @@
import type { QueryClient } from "@tanstack/react-query";
import { apiQueryClient } from "@/shared/api";
import type { paths } from "@/shared/api/generated/schema";
import { apiQueryClient, type paths } from "@/shared/api";
type TbankConnectionStatus =
paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
src/features/tbank-connection/ui/TbankConnectionSection.test.tsx
+8 -15
View File
@@ -1,24 +1,12 @@
import { MantineProvider } from "@mantine/core";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { HttpResponse, http } from "msw";
import { afterEach, describe, expect, it, vi } from "vitest";
import { apiQueryClient } from "@/shared/api";
import { describe, expect, it, vi } from "vitest";
import { apiQueryClient, configureAuthClient } from "@/shared/api";
import { server } from "@/test/server";
import { TbankConnectionSection } from "./TbankConnectionSection";
vi.mock("@/features/auth", () => ({
useAuth: () => ({ accessToken: "test-token" }),
}));
afterEach(cleanup);
const brokerageAccountsQueryKey = apiQueryClient.queryOptions(
"get",
"/api/v1/brokerage-accounts",
@@ -39,6 +27,11 @@ const unrelatedQueryKey = apiQueryClient.queryOptions(
).queryKey;
function renderSection(client: QueryClient) {
configureAuthClient({
accessToken: () => "test-token",
refresh: async () => true,
clear: vi.fn(),
});
return render(
<MantineProvider>
<QueryClientProvider client={client}>
src/features/tbank-connection/ui/TbankConnectionSection.tsx
+1 -142
View File
@@ -1,36 +1,10 @@
import {
Alert,
Button,
Modal,
PasswordInput,
Stack,
Text,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import type { FC } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { apiQueryClient } from "@/shared/api";
import {
commitTbankConnectionBoundary,
type TbankConnectionStatus,
} from "../model/connection-boundary";
import {
TbankConnectionError,
TbankConnectionLoading,
} from "./TbankConnectionSection.view";
import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
type TbankConnectionSectionLoadedProps = {
status: TbankConnectionStatus;
};
function errorCode(error: unknown): string | undefined {
return typeof error === "object" && error !== null && "code" in error
? String(error.code)
: undefined;
}
import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
const TbankConnectionSection: FC = () => {
const viewModel = useTbankConnectionViewModel();
@@ -40,119 +14,4 @@ const TbankConnectionSection: FC = () => {
return <TbankConnectionSectionLoaded status={viewModel.status} />;
};
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
props,
) => {
const { status } = props;
const { t } = useTranslation();
const queryClient = useQueryClient();
const [deleteOpened, setDeleteOpened] = useState(false);
const [requestError, setRequestError] = useState<string | null>(null);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<{ token: string }>();
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
onSuccess: (data) => {
commitTbankConnectionBoundary(queryClient, data);
reset();
},
onError: (error) => setRequestError(errorCode(error) ?? "REQUEST_ERROR"),
});
const remove = apiQueryClient.useMutation(
"delete",
"/api/v1/tbank-connection",
{
onSuccess: () => {
commitTbankConnectionBoundary(queryClient, {
connected: false,
connectedAt: null,
});
setDeleteOpened(false);
},
onError: () => setRequestError("REQUEST_ERROR"),
},
);
const pending = update.isPending || remove.isPending;
const connected = status.connected;
return (
<Stack mt="xl">
<Text fw={600}>{t("tbank.title")}</Text>
<Text size="sm">
{connected
? t("tbank.connected", {
date: new Date(String(status.connectedAt)).toLocaleDateString(
"ru-RU",
),
})
: t("tbank.disconnected")}
</Text>
<Text size="sm" c="dimmed">
{t("tbank.hint")}
</Text>
<form
onSubmit={handleSubmit(({ token }) => {
setRequestError(null);
update.mutate({ body: { token } });
})}
>
<fieldset disabled={pending}>
<Stack>
<PasswordInput
label={t("tbank.token")}
{...register("token", { required: t("tbank.tokenRequired") })}
error={errors.token?.message}
/>
{requestError && (
<Alert color="red">
{t(
requestError === "INVALID_TBANK_TOKEN"
? "tbank.invalidToken"
: requestError === "TBANK_UNAVAILABLE"
? "tbank.unavailable"
: "tbank.requestError",
)}
</Alert>
)}
<Button type="submit" loading={update.isPending}>
{t(connected ? "tbank.replace" : "tbank.connect")}
</Button>
{connected && (
<Button
variant="outline"
color="red"
onClick={() => setDeleteOpened(true)}
>
{t("tbank.delete")}
</Button>
)}
</Stack>
</fieldset>
</form>
<Modal
opened={deleteOpened}
onClose={() => !pending && setDeleteOpened(false)}
title={t("tbank.deleteTitle")}
closeOnClickOutside={!pending}
closeOnEscape={!pending}
>
<Stack>
<Text>{t("tbank.deleteText")}</Text>
<Button
color="red"
loading={remove.isPending}
disabled={pending}
onClick={() => remove.mutate({})}
>
{t("tbank.deleteConfirm")}
</Button>
</Stack>
</Modal>
</Stack>
);
};
export { TbankConnectionSection };
src/features/tbank-connection/ui/TbankConnectionSection.vm.ts
+2 -5
View File
@@ -1,12 +1,9 @@
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "@/features/auth";
import { useAuthenticatedQuery } from "@/shared/api";
import { tbankConnectionQueryOptions } from "../model/connection-boundary";
function useTbankConnectionViewModel() {
const { accessToken } = useAuth();
const status = useQuery({
const status = useAuthenticatedQuery({
...tbankConnectionQueryOptions(),
enabled: Boolean(accessToken),
});
if (status.isPending) return { state: "loading" as const };
if (status.isError)
src/features/tbank-connection/ui/TbankConnectionSectionLoaded.tsx
+139
View File
@@ -0,0 +1,139 @@
import {
Alert,
Button,
Modal,
PasswordInput,
Stack,
Text,
} from "@mantine/core";
import { useQueryClient } from "@tanstack/react-query";
import type { FC } from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { apiErrorCode, apiQueryClient } from "@/shared/api";
import {
commitTbankConnectionBoundary,
type TbankConnectionStatus,
} from "../model/connection-boundary";
type TbankConnectionSectionLoadedProps = {
status: TbankConnectionStatus;
};
const TbankConnectionSectionLoaded: FC<TbankConnectionSectionLoadedProps> = (
props,
) => {
const { status } = props;
const { t } = useTranslation();
const queryClient = useQueryClient();
const [deleteOpened, setDeleteOpened] = useState(false);
const [requestError, setRequestError] = useState<string | null>(null);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<{ token: string }>();
const update = apiQueryClient.useMutation("put", "/api/v1/tbank-connection", {
onSuccess: (data) => {
commitTbankConnectionBoundary(queryClient, data);
reset();
},
onError: (error) => setRequestError(apiErrorCode(error) ?? "REQUEST_ERROR"),
});
const remove = apiQueryClient.useMutation(
"delete",
"/api/v1/tbank-connection",
{
onSuccess: () => {
commitTbankConnectionBoundary(queryClient, {
connected: false,
connectedAt: null,
});
setDeleteOpened(false);
},
onError: () => setRequestError("REQUEST_ERROR"),
},
);
const pending = update.isPending || remove.isPending;
const connected = status.connected;
return (
<Stack mt="xl">
<Text fw={600}>{t("tbank.title")}</Text>
<Text size="sm">
{connected
? t("tbank.connected", {
date: new Date(status.connectedAt ?? "").toLocaleDateString(
"ru-RU",
),
})
: t("tbank.disconnected")}
</Text>
<Text size="sm" c="dimmed">
{t("tbank.hint")}
</Text>
<form
onSubmit={handleSubmit(({ token }) => {
setRequestError(null);
update.mutate({ body: { token } });
})}
>
<fieldset disabled={pending}>
<Stack>
<PasswordInput
label={t("tbank.token")}
{...register("token", { required: t("tbank.tokenRequired") })}
error={errors.token?.message}
/>
{requestError && (
<Alert color="red">
{t(
requestError === "INVALID_TBANK_TOKEN"
? "tbank.invalidToken"
: requestError === "TBANK_UNAVAILABLE"
? "tbank.unavailable"
: "tbank.requestError",
)}
</Alert>
)}
<Button type="submit" loading={update.isPending}>
{t(connected ? "tbank.replace" : "tbank.connect")}
</Button>
{connected && (
<Button
variant="outline"
color="red"
onClick={() => setDeleteOpened(true)}
>
{t("tbank.delete")}
</Button>
)}
</Stack>
</fieldset>
</form>
<Modal
opened={deleteOpened}
onClose={() => !pending && setDeleteOpened(false)}
title={t("tbank.deleteTitle")}
closeOnClickOutside={!pending}
closeOnEscape={!pending}
>
<Stack>
<Text>{t("tbank.deleteText")}</Text>
<Button
color="red"
loading={remove.isPending}
disabled={pending}
onClick={() => remove.mutate({})}
>
{t("tbank.deleteConfirm")}
</Button>
</Stack>
</Modal>
</Stack>
);
};
export { TbankConnectionSectionLoaded };