/packages/react_ui/src/pages/root/InitialAdminCreation.tsx at fc159b1517d0ed184bcd00d32cd926d153aa64ee

// SPDX-FileCopyrightText: 2025 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { type MessageInitShape } from "@bufbuild/protobuf";
import { createClient } from "@connectrpc/connect";
import { CheckCircledIcon } from "@radix-ui/react-icons";
import { Button, Flex, TextField } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { CreateInitialAdminRequestSchema } from "@yamori/proto/yamori/workspace/v2/create_initial_admin_request_pb.js";
import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
import { type FC } from "react";
import { useForm } from "react-hook-form";

import { ManagedErrorCallout } from "../../components/ErrorCallout.ts";
import * as FormField from "../../components/FormField.ts";
import { useConnectTransport } from "../../contexts/ConnectTransport.tsx";
import { useToast } from "../../contexts/Toast.tsx";
import { IllegalMessageError } from "../../errors/IllegalMessageError.ts";

import { Layout } from "./Layout.tsx";

class PasswordExpiredError extends Error {
	constructor() {
		super("Setup password is expired");
	}
}

export interface InitialAdminCreationProps {
	onCreated?(): void;

	onPasswordExpired?(): void;
}

export const InitialAdminCreation: FC<InitialAdminCreationProps> = ({
	onCreated,
	onPasswordExpired,
}) => {
	const toast = useToast();

	const form = useForm<{
		name: string;
		displayName: string;
		loginPassword: string;
		setupPassword: string;
	}>({
		defaultValues: {
			name: "",
			displayName: "",
			loginPassword: "",
			setupPassword: "",
		},
		mode: "onBlur",
	});

	const transport = useConnectTransport();
	const client = createClient(WorkspaceService, transport);

	const creation = useMutation({
		async mutationFn(req: MessageInitShape<typeof CreateInitialAdminRequestSchema>) {
			const resp = await client.createInitialAdmin(req);

			if (resp.result.case === "ok") {
				return resp.result.value;
			}

			if (resp.result.case === "passwordExpired") {
				toast.open({
					severity: "info",
					title: "既に管理者を作成済みです、ログインしてください",
					dismissible: true,
					type: "foreground",
				});

				onPasswordExpired?.();

				throw new PasswordExpiredError();
			}

			if (typeof resp.result.case === "string") {
				throw resp.result.value;
			}

			throw new IllegalMessageError(resp);
		},
		onSuccess(user) {
			onCreated?.();

			toast.open({
				icon: <CheckCircledIcon />,
				severity: "success",
				title: `管理者ユーザ「${user.displayName}」を作成しました`,
				dismissible: true,
				type: "foreground",
			});
		},
	});

	return (
		<Layout title="初期管理者作成">
			<Flex asChild direction="column" gap="5" mt="2">
				<form
					onSubmit={form.handleSubmit(
						({ name, displayName, loginPassword, setupPassword }) => {
							creation.mutate({
								name,
								displayName,
								password: loginPassword,
								initialAdminPassword: setupPassword,
							});
						},
					)}
				>
					{creation.error ? (
						<ManagedErrorCallout
							error={creation.error}
							actions={
								<Button
									size="1"
									variant="outline"
									type="button"
									onClick={() => void creation.reset()}
								>
									閉じる
								</Button>
							}
							title="作成に失敗しました"
						/>
					) : (
						<div />
					)}
					<FormField.Root>
						<FormField.Label htmlFor="c_name">ユーザ名</FormField.Label>
						<TextField.Root
							id="c_name"
							disabled={creation.isPending}
							placeholder="hanako_nihon"
							color={form.formState.errors.name ? "red" : undefined}
							aria-invalid={!!form.formState.errors.name}
							autoComplete="username"
							{...form.register("name", {
								required: "必須です",
								setValueAs(value: string) {
									return value.trim();
								},
							})}
						/>
						<FormField.Description error={form.formState.errors.name?.message}>
							ログイン時に利用するユーザ名です。 前後の空白は無視されます。
						</FormField.Description>
					</FormField.Root>
					<FormField.Root>
						<FormField.Label htmlFor="c_displayName">表示名</FormField.Label>
						<TextField.Root
							id="c_displayName"
							disabled={creation.isPending}
							placeholder="日本 花子"
							color={form.formState.errors.displayName ? "red" : undefined}
							aria-invalid={!!form.formState.errors.displayName}
							autoComplete="off"
							{...form.register("displayName", {
								setValueAs(value: string) {
									return value.trim();
								},
							})}
						/>
						<FormField.Description error={form.formState.errors.displayName?.message}>
							他のユーザも閲覧可能な画面上の表示名です。
							未指定の場合はユーザ名が設定されます。 前後の空白は無視されます。
						</FormField.Description>
					</FormField.Root>
					<FormField.Root>
						<FormField.Label htmlFor="c_loginPassword">
							ログインパスワード
						</FormField.Label>
						<TextField.Root
							id="c_loginPassword"
							disabled={creation.isPending}
							color={form.formState.errors.loginPassword ? "red" : undefined}
							aria-invalid={!!form.formState.errors.loginPassword}
							type="password"
							autoComplete="new-password"
							{...form.register("loginPassword", {
								required: "必須です",
								minLength: {
									value: 8,
									message: "8文字以上を入力してください",
								},
							})}
						/>
						<FormField.Description error={form.formState.errors.loginPassword?.message}>
							新たに作成されるユーザが利用するログインパスワードです。
						</FormField.Description>
					</FormField.Root>
					<FormField.Root>
						<FormField.Label htmlFor="c_setupPassword">
							初期管理者作成パスワード
						</FormField.Label>
						<TextField.Root
							id="c_setupPassword"
							disabled={creation.isPending}
							color={form.formState.errors.setupPassword ? "red" : undefined}
							aria-invalid={!!form.formState.errors.setupPassword}
							type="password"
							autoComplete="off"
							{...form.register("setupPassword", {
								required: "必須です",
							})}
						/>
						<FormField.Description error={form.formState.errors.setupPassword?.message}>
							管理者の初回作成用パスワードです。
							システム起動時に発行されたパスワードを入力してください。
						</FormField.Description>
					</FormField.Root>
					<Button loading={creation.isPending}>作成</Button>
				</form>
			</Flex>
		</Layout>
	);
};