feat(web): Selectel service-user account form (IAM credentials)
Replace the single API-key field with 4 IAM service-user fields (username, password, account_id, project_name) matching the new backend contract; map 400 "invalid provider credentials" to a user-facing message. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BwxdSt4reTm7Dj1oxRvpP3
This commit is contained in:
+117
-22
@@ -26,17 +26,41 @@ 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, "Укажите комментарий"),
|
||||
username: z.string().min(1, "Укажите имя сервисного пользователя"),
|
||||
password: z.string().min(1, "Укажите пароль"),
|
||||
accountId: z.string().min(1, "Укажите номер аккаунта"),
|
||||
projectName: z.string().min(1, "Укажите имя проекта"),
|
||||
comment: z.string(),
|
||||
})
|
||||
|
||||
type CreateAccountForm = z.infer<typeof createAccountSchema>
|
||||
|
||||
// API возвращает generic "invalid provider credentials" (нарочно, чтобы не
|
||||
// палить детали) — переводим в понятную пользователю формулировку.
|
||||
function createAccountErrorMessage(message: string): string {
|
||||
if (message.toLowerCase().includes("invalid provider credentials")) {
|
||||
return "Selectel отклонил учётные данные — проверьте логин, пароль, номер аккаунта и имя проекта."
|
||||
}
|
||||
return message
|
||||
}
|
||||
|
||||
const EMPTY_FORM: CreateAccountForm = {
|
||||
provider: "selectel",
|
||||
username: "",
|
||||
password: "",
|
||||
accountId: "",
|
||||
projectName: "",
|
||||
comment: "",
|
||||
}
|
||||
|
||||
export function AccountsPage() {
|
||||
const accounts = useAccounts()
|
||||
const createAccount = useCreateAccount()
|
||||
const deleteAccount = useDeleteAccount()
|
||||
const secretFieldId = useId()
|
||||
const usernameFieldId = useId()
|
||||
const passwordFieldId = useId()
|
||||
const accountIdFieldId = useId()
|
||||
const projectNameFieldId = useId()
|
||||
const commentFieldId = useId()
|
||||
|
||||
const accountList = accounts.data ?? []
|
||||
@@ -48,13 +72,23 @@ export function AccountsPage() {
|
||||
formState: { errors },
|
||||
} = useForm<CreateAccountForm>({
|
||||
resolver: zodResolver(createAccountSchema),
|
||||
defaultValues: { provider: "selectel", secret: "", comment: "" },
|
||||
defaultValues: EMPTY_FORM,
|
||||
})
|
||||
|
||||
function onSubmit(values: CreateAccountForm) {
|
||||
createAccount.mutate(values, {
|
||||
onSuccess: () => reset({ provider: "selectel", secret: "", comment: "" }),
|
||||
})
|
||||
createAccount.mutate(
|
||||
{
|
||||
provider: "selectel",
|
||||
comment: values.comment,
|
||||
secret: {
|
||||
username: values.username.trim(),
|
||||
password: values.password,
|
||||
account_id: values.accountId.trim(),
|
||||
project_name: values.projectName.trim(),
|
||||
},
|
||||
},
|
||||
{ onSuccess: () => reset(EMPTY_FORM) },
|
||||
)
|
||||
}
|
||||
|
||||
function onDelete(id: string, comment: string) {
|
||||
@@ -74,28 +108,88 @@ export function AccountsPage() {
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
noValidate
|
||||
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>
|
||||
<FieldGroup className="flex-row flex-wrap items-start gap-3">
|
||||
<Field className="w-56">
|
||||
<FieldLabel htmlFor={usernameFieldId}>Имя сервисного пользователя</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="secret"
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={secretFieldId}
|
||||
type="password"
|
||||
id={usernameFieldId}
|
||||
autoComplete="off"
|
||||
placeholder="••••••••••••"
|
||||
aria-invalid={!!errors.secret}
|
||||
placeholder="service-dns"
|
||||
aria-invalid={!!errors.username}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.secret]} />
|
||||
<FieldError errors={[errors.username]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field className="w-56">
|
||||
<FieldLabel htmlFor={passwordFieldId}>Пароль</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={passwordFieldId}
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
placeholder="••••••••••••"
|
||||
aria-invalid={!!errors.password}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.password]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field className="w-48">
|
||||
<FieldLabel htmlFor={accountIdFieldId}>Номер аккаунта</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="accountId"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={accountIdFieldId}
|
||||
className="font-dns"
|
||||
placeholder="123456"
|
||||
aria-invalid={!!errors.accountId}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.accountId]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
<Field className="w-48">
|
||||
<FieldLabel htmlFor={projectNameFieldId}>Имя проекта</FieldLabel>
|
||||
<FieldContent>
|
||||
<Controller
|
||||
control={control}
|
||||
name="projectName"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
id={projectNameFieldId}
|
||||
placeholder="default"
|
||||
aria-invalid={!!errors.projectName}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[errors.projectName]} />
|
||||
</FieldContent>
|
||||
</Field>
|
||||
|
||||
@@ -122,16 +216,17 @@ export function AccountsPage() {
|
||||
<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-ключи» — и используется только для
|
||||
запроса, храниться в открытом виде он не будет.{" "}
|
||||
Провайдер: <span className="font-dns text-foreground">selectel</span>. Создайте
|
||||
сервисного пользователя в панели управления Selectel, выдайте ему роль на нужный
|
||||
проект и укажите здесь его логин, пароль, номер аккаунта и имя проекта. Пароль
|
||||
хранится в зашифрованном виде.{" "}
|
||||
<a
|
||||
href="https://my.selectel.ru/profile/apikeys"
|
||||
href="https://my.selectel.ru/iam/users"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center gap-1"
|
||||
>
|
||||
Получить ключ на my.selectel.ru
|
||||
Пользователи и роли на my.selectel.ru
|
||||
<ExternalLink className="size-3" strokeWidth={1.75} />
|
||||
</a>
|
||||
</span>
|
||||
@@ -141,7 +236,7 @@ export function AccountsPage() {
|
||||
<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}
|
||||
{createAccountErrorMessage(createAccount.error.message)}
|
||||
</span>
|
||||
)}
|
||||
<Button type="submit" disabled={createAccount.isPending} className="ml-auto">
|
||||
|
||||
Reference in New Issue
Block a user