feat(web): AccountsPage — CRUD учёток, secret-форма, инструкция Selectel

web/src/App.tsx

@@ -1,5 +1,6 @@
 import { Routes, Route, Navigate } from "react-router-dom"
 import { Layout } from "@/components/Layout"
+import { AccountsPage } from "@/pages/AccountsPage"
 import { DomainDiffPage } from "@/pages/DomainDiffPage"
 import { DomainsPage } from "@/pages/DomainsPage"
 
@@ -14,7 +15,7 @@ export function App() {
         <Route path="/" element={<Navigate to="/domains" replace />} />
         <Route path="/domains" element={<DomainsPage />} />
         <Route path="/domains/:id" element={<DomainDiffPage />} />
-        <Route path="/accounts" element={<Placeholder name="Accounts" />} />
+        <Route path="/accounts" element={<AccountsPage />} />
         <Route path="/templates" element={<Placeholder name="Templates" />} />
       </Routes>
     </Layout>

web/src/pages/AccountsPage.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MemoryRouter } from "react-router-dom"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { AccountsPage } from "./AccountsPage"
+import { api } from "@/api/client"
+import { vi, beforeEach, test, expect } from "vitest"
+import type { Account } from "@/api/types"
+
+const accounts: Account[] = [
+  { id: "acc1", provider: "selectel", comment: "Main" },
+  { id: "acc2", provider: "selectel", comment: "Backup" },
+]
+
+function renderPage() {
+  const qc = new QueryClient()
+  return render(
+    <QueryClientProvider client={qc}>
+      <MemoryRouter initialEntries={["/accounts"]}>
+        <AccountsPage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  )
+}
+
+beforeEach(() => {
+  vi.spyOn(api, "listAccounts").mockResolvedValue(accounts)
+})
+
+test("отрисовывает список учёток без секрета", async () => {
+  renderPage()
+
+  expect(await screen.findByText("Main")).toBeInTheDocument()
+  expect(screen.getByText("Backup")).toBeInTheDocument()
+  expect(screen.getAllByText("selectel").length).toBeGreaterThan(0)
+})
+
+test("форма создания вызывает api.createAccount с введённым secret и не показывает его после", async () => {
+  const createSpy = vi.spyOn(api, "createAccount").mockResolvedValue({
+    id: "acc3",
+    provider: "selectel",
+    comment: "New account",
+  })
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Main")
+
+  const secretInput = screen.getByLabelText(/api-ключ/i)
+  expect(secretInput).toHaveAttribute("type", "password")
+
+  await user.type(secretInput, "super-secret-token-123")
+  await user.type(screen.getByLabelText(/комментарий/i), "New account")
+
+  await user.click(screen.getByRole("button", { name: /добавить учётку/i }))
+
+  await waitFor(() =>
+    expect(createSpy).toHaveBeenCalledWith({
+      provider: "selectel",
+      secret: "super-secret-token-123",
+      comment: "New account",
+    }),
+  )
+
+  await waitFor(() => expect(secretInput).toHaveValue(""))
+  expect(screen.queryByText("super-secret-token-123")).not.toBeInTheDocument()
+  expect(screen.queryByDisplayValue("super-secret-token-123")).not.toBeInTheDocument()
+})
+
+test("содержит ссылку-инструкцию получения ключа Selectel", async () => {
+  renderPage()
+  await screen.findByText("Main")
+
+  const link = screen.getByRole("link", { name: /selectel/i })
+  expect(link).toHaveAttribute("href", expect.stringContaining("selectel.ru"))
+})
+
+test("ошибка создания учётки отображается пользователю", async () => {
+  vi.spyOn(api, "createAccount").mockRejectedValue(new Error("Не удалось создать учётку"))
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Main")
+
+  await user.type(screen.getByLabelText(/api-ключ/i), "token-xyz")
+  await user.type(screen.getByLabelText(/комментарий/i), "Test")
+  await user.click(screen.getByRole("button", { name: /добавить учётку/i }))
+
+  expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось создать учётку")
+})
+
+test("удаление учётки вызывает api.deleteAccount", async () => {
+  const deleteSpy = vi.spyOn(api, "deleteAccount").mockResolvedValue(undefined)
+  vi.spyOn(window, "confirm").mockReturnValue(true)
+  const user = userEvent.setup()
+  renderPage()
+
+  await screen.findByText("Main")
+
+  await user.click(screen.getByRole("button", { name: /удалить.*main/i }))
+
+  await waitFor(() => expect(deleteSpy).toHaveBeenCalledWith("acc1"))
+})

web/src/pages/AccountsPage.tsx

@@ -0,0 +1,201 @@
+import { useId } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { ExternalLink, Inbox, KeyRound, Loader2, Plus, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+} from "@/components/ui/field"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { useAccounts, useCreateAccount, useDeleteAccount } from "@/hooks/useApi"
+
+const createAccountSchema = z.object({
+  provider: z.literal("selectel"),
+  secret: z.string().min(1, "Укажите API-ключ"),
+  comment: z.string().min(1, "Укажите комментарий"),
+})
+
+type CreateAccountForm = z.infer<typeof createAccountSchema>
+
+export function AccountsPage() {
+  const accounts = useAccounts()
+  const createAccount = useCreateAccount()
+  const deleteAccount = useDeleteAccount()
+  const secretFieldId = useId()
+  const commentFieldId = useId()
+
+  const accountList = accounts.data ?? []
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<CreateAccountForm>({
+    resolver: zodResolver(createAccountSchema),
+    defaultValues: { provider: "selectel", secret: "", comment: "" },
+  })
+
+  function onSubmit(values: CreateAccountForm) {
+    createAccount.mutate(values, {
+      onSuccess: () => reset({ provider: "selectel", secret: "", comment: "" }),
+    })
+  }
+
+  function onDelete(id: string, comment: string) {
+    if (window.confirm(`Удалить учётную запись «${comment}»? Действие необратимо.`)) {
+      deleteAccount.mutate(id)
+    }
+  }
+
+  return (
+    <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
+      <header className="flex flex-col gap-1">
+        <span className="font-dns text-[11px] tracking-wider text-muted-foreground uppercase">
+          providers
+        </span>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">Учётные записи</h1>
+      </header>
+
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col gap-4 rounded-xl border border-border bg-card/60 p-4"
+      >
+        <FieldSet className="gap-3">
+          <FieldGroup className="gap-3 sm:flex-row sm:items-start">
+            <Field className="sm:max-w-56">
+              <FieldLabel htmlFor={secretFieldId}>API-ключ Selectel</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="secret"
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      id={secretFieldId}
+                      type="password"
+                      autoComplete="off"
+                      placeholder="••••••••••••"
+                      aria-invalid={!!errors.secret}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.secret]} />
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor={commentFieldId}>Комментарий</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="comment"
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      id={commentFieldId}
+                      placeholder="Например, основной аккаунт"
+                      aria-invalid={!!errors.comment}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.comment]} />
+              </FieldContent>
+            </Field>
+          </FieldGroup>
+
+          <FieldDescription className="flex items-start gap-2 rounded-lg border border-border/60 bg-background/40 px-3 py-2.5">
+            <KeyRound className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" strokeWidth={1.75} />
+            <span>
+              Провайдер: <span className="font-dns text-foreground">selectel</span>. Ключ создаётся
+              в панели управления Selectel — раздел «API-ключи» — и используется только для
+              запроса, храниться в открытом виде он не будет.{" "}
+              <a
+                href="https://my.selectel.ru/profile/apikeys"
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1"
+              >
+                Получить ключ на my.selectel.ru
+                <ExternalLink className="size-3" strokeWidth={1.75} />
+              </a>
+            </span>
+          </FieldDescription>
+        </FieldSet>
+
+        <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+          {createAccount.isError && (
+            <span role="alert" className="font-dns text-xs text-destructive">
+              {createAccount.error.message}
+            </span>
+          )}
+          <Button type="submit" disabled={createAccount.isPending} className="ml-auto">
+            {createAccount.isPending ? (
+              <Loader2 className="size-4 animate-spin" strokeWidth={1.75} />
+            ) : (
+              <Plus className="size-4" strokeWidth={1.75} />
+            )}
+            Добавить учётку
+          </Button>
+        </div>
+      </form>
+
+      {deleteAccount.isError && (
+        <span role="alert" className="font-dns text-xs text-destructive">
+          {deleteAccount.error.message}
+        </span>
+      )}
+
+      {accountList.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border px-4 py-12 text-center text-sm text-muted-foreground">
+          <Inbox className="size-6" strokeWidth={1.5} />
+          Учётных записей пока нет — добавьте первую выше.
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Провайдер</TableHead>
+              <TableHead>Комментарий</TableHead>
+              <TableHead className="text-right">Действия</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {accountList.map((a) => (
+              <TableRow key={a.id}>
+                <TableCell className="font-dns">{a.provider}</TableCell>
+                <TableCell>{a.comment}</TableCell>
+                <TableCell className="text-right">
+                  <Button
+                    variant="destructive"
+                    size="icon-sm"
+                    aria-label={`Удалить учётку ${a.comment}`}
+                    onClick={() => onDelete(a.id, a.comment)}
+                    disabled={deleteAccount.isPending}
+                  >
+                    <Trash2 className="size-3.5" strokeWidth={1.75} />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  )
+}