feat: add tbank tokens

src/features/tbank-connection/index.ts

@@ -0,0 +1 @@
+export { TbankConnectionSection } from "./ui/TbankConnectionSection";

src/features/tbank-connection/ui/TbankConnectionSection.tsx

@@ -0,0 +1,167 @@
+import {
+	Alert,
+	Button,
+	Modal,
+	PasswordInput,
+	Stack,
+	Text,
+} from "@mantine/core";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "../../../shared/api";
+import type { paths } from "../../../shared/api/generated/schema";
+import { useAuth } from "../../auth";
+
+type Status =
+	paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
+
+function errorCode(error: unknown): string | undefined {
+	return typeof error === "object" && error !== null && "code" in error
+		? String(error.code)
+		: undefined;
+}
+
+export function TbankConnectionSection() {
+	const { t } = useTranslation();
+	const { accessToken } = useAuth();
+	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 headers = { Authorization: `Bearer ${accessToken}` };
+	const status = useQuery({
+		queryKey: ["tbank-connection"],
+		queryFn: async () => {
+			const { data, error } = await apiClient.GET("/api/v1/tbank-connection", {
+				headers,
+			});
+			if (error) throw error;
+			return data as Status;
+		},
+	});
+	const update = useMutation({
+		mutationFn: async ({ token }: { token: string }) => {
+			const { data, error } = await apiClient.PUT("/api/v1/tbank-connection", {
+				headers,
+				body: { token },
+			});
+			if (error) throw error;
+			return data as Status;
+		},
+		onSuccess: (data) => {
+			queryClient.setQueryData(["tbank-connection"], data);
+			reset();
+		},
+		onError: (error) => setRequestError(errorCode(error)),
+	});
+	const remove = useMutation({
+		mutationFn: async () => {
+			const { error } = await apiClient.DELETE("/api/v1/tbank-connection", {
+				headers,
+			});
+			if (error) throw error;
+		},
+		onSuccess: () => {
+			queryClient.setQueryData<Status>(["tbank-connection"], {
+				connected: false,
+				connectedAt: null,
+			});
+			setDeleteOpened(false);
+		},
+		onError: () => setRequestError("REQUEST_ERROR"),
+	});
+	const pending = update.isPending || remove.isPending;
+
+	if (status.isPending) return <Text>{t("states.loadingText")}</Text>;
+	if (status.isError)
+		return (
+			<Alert color="red" title={t("tbank.statusError")}>
+				<Button variant="subtle" onClick={() => status.refetch()}>
+					{t("tbank.retry")}
+				</Button>
+			</Alert>
+		);
+	const connected = status.data.connected;
+	return (
+		<Stack mt="xl">
+			<Text fw={600}>{t("tbank.title")}</Text>
+			<Text size="sm">
+				{connected
+					? t("tbank.connected", {
+							date: new Date(
+								String(status.data.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({ 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>
+	);
+}

src/pages/settings/ui/SettingsPage.tsx

@@ -2,6 +2,7 @@ import { Button, Stack, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 import { useAuth } from "../../../features/auth";
+import { TbankConnectionSection } from "../../../features/tbank-connection";
 import { StateView } from "../../../shared/ui/StateView";
 
 export function SettingsPage() {
@@ -11,6 +12,7 @@ export function SettingsPage() {
 	return (
 		<Stack>
 			<Title order={1}>{t("settings.title")}</Title>
+			<TbankConnectionSection />
 			<Button
 				onClick={async () => {
 					await logout();

src/shared/api/generated/schema.d.ts

@@ -84,6 +84,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/tbank-connection": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["TbankConnectionController_status"];
+        put: operations["TbankConnectionController_put"];
+        post?: never;
+        delete: operations["TbankConnectionController_delete"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -102,6 +118,14 @@ export interface components {
             accessToken: string;
             user: components["schemas"]["UserDto"];
         };
+        TbankConnectionStatusDto: {
+            connected: boolean;
+            /** Format: date-time */
+            connectedAt: Record<string, never> | null;
+        };
+        PutTbankConnectionDto: {
+            token: string;
+        };
     };
     responses: never;
     parameters: never;
@@ -212,4 +236,63 @@ export interface operations {
             };
         };
     };
+    TbankConnectionController_status: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TbankConnectionStatusDto"];
+                };
+            };
+        };
+    };
+    TbankConnectionController_put: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["PutTbankConnectionDto"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["TbankConnectionStatusDto"];
+                };
+            };
+        };
+    };
+    TbankConnectionController_delete: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
 }

src/shared/i18n/locales/ru.ts

@@ -21,6 +21,26 @@ export const ru = {
 		accounts: { title: "Счета" },
 		account: { title: "Счет" },
 		settings: { title: "Настройки" },
+		tbank: {
+			title: "T-Bank Invest",
+			disconnected: "Не подключено",
+			connected: "Подключено с {{date}}",
+			hint: "Укажите read-only token T-Bank Invest.",
+			token: "Token T-Bank",
+			tokenRequired: "Введите token",
+			connect: "Подключить",
+			replace: "Заменить token",
+			delete: "Удалить подключение",
+			deleteTitle: "Удалить подключение?",
+			deleteText: "Backend сразу потеряет доступ к данным T-Bank.",
+			deleteConfirm: "Удалить",
+			invalidToken: "Проверьте token и его права.",
+			unavailable: "T-Bank временно недоступен. Повторите попытку позже.",
+			requestError: "Не удалось выполнить запрос. Попробуйте ещё раз.",
+			statusError:
+				"Не удалось загрузить статус подключения. Обновите страницу.",
+			retry: "Повторить",
+		},
 		notFound: { title: "Страница не найдена", action: "К счетам" },
 		states: {
 			loadingTitle: "Загрузка",