Merge pull request #148 from kitcc-org/71-users-add-page

ユーザー作成ページの実装

frontend/app/components/header/HeaderUsersMenu.tsx

@@ -21,9 +21,9 @@ const HeaderUsersMenu = () => {
 				</Menu.Item>
 				<Menu.Item
 					leftSection={<FaUserPlus />}
-					onClick={() => navigate('/home/user-add')}
+					onClick={() => navigate('/home/users/create')}
 				>
-					ユーザー追加
+					ユーザー作成
 				</Menu.Item>
 			</Menu.Dropdown>
 		</Menu>

frontend/app/components/login/LoginFormComponent.tsx

@@ -9,13 +9,11 @@ import LoginPasswordForm from './LoginPasswordForm';
 import LoginSubmitButton from './LoginSubmitButton';
 
 interface LoginFormComponentProps {
-	isPending: boolean;
 	form: UseFormReturnType<LoginBody, (values: LoginBody) => LoginBody>;
 	handleSubmit: (props: LoginBody) => void;
 }
 
 const LoginFormComponent = ({
-	isPending,
 	form,
 	handleSubmit,
 }: LoginFormComponentProps) => {
@@ -25,7 +23,7 @@ const LoginFormComponent = ({
 				<LoginFormTitle />
 				<LoginEmailForm form={form} />
 				<LoginPasswordForm form={form} />
-				<LoginSubmitButton isPending={isPending} />
+				<LoginSubmitButton />
 				<LoginFormHelpText />
 			</FormLayout>
 		</FormBaseLayout>

frontend/app/components/login/LoginSubmitButton.tsx

@@ -1,15 +1,7 @@
 import { Button } from '@mantine/core';
 
-interface LoginSubmitButtonProps {
-	isPending: boolean;
-}
-
-const LoginSubmitButton = ({ isPending }: LoginSubmitButtonProps) => {
-	return (
-		<Button type="submit" disabled={isPending}>
-			ログイン
-		</Button>
-	);
+const LoginSubmitButton = () => {
+	return <Button type="submit">ログイン</Button>;
 };
 
 export default LoginSubmitButton;

frontend/app/components/user-create/PasswordCopyButton.tsx

@@ -0,0 +1,43 @@
+import { ActionIcon, CopyButton, Tooltip } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { CreateUserBody } from 'client/client.schemas';
+import { IoCheckmark, IoCopyOutline } from 'react-icons/io5';
+import { successNotification } from '~/utils/notification';
+
+interface PasswordCopyButtonProps {
+	form: UseFormReturnType<
+		CreateUserBody,
+		(values: CreateUserBody) => CreateUserBody
+	>;
+	generated: boolean; // パスワードがすでに生成されているかどうか
+}
+
+const PasswordCopyButton = ({ form, generated }: PasswordCopyButtonProps) => {
+	return (
+		<CopyButton value={form.getValues().password} timeout={2000}>
+			{({ copied, copy }) => (
+				<Tooltip
+					label={
+						copied ? 'パスワードをコピーしました' : 'パスワードをコピーする'
+					}
+					withArrow
+					position="right"
+				>
+					<ActionIcon
+						color={copied ? 'teal' : 'black'}
+						variant="subtle"
+						disabled={!generated}
+						onClick={() => {
+							copy();
+							successNotification('パスワードをコピーしました');
+						}}
+					>
+						{copied ? <IoCheckmark /> : <IoCopyOutline />}
+					</ActionIcon>
+				</Tooltip>
+			)}
+		</CopyButton>
+	);
+};
+
+export default PasswordCopyButton;

frontend/app/components/user-create/PasswordGenerateButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@mantine/core';
+import { FaKey } from 'react-icons/fa';
+
+interface PasswordGenerateButtonProps {
+	handlePasswordGenButtonClick: () => void;
+}
+
+const PasswordGenerateButton = ({
+	handlePasswordGenButtonClick,
+}: PasswordGenerateButtonProps) => {
+	return (
+		<Button
+			onClick={() => handlePasswordGenButtonClick()}
+			leftSection={<FaKey />}
+		>
+			パスワードを生成する
+		</Button>
+	);
+};
+
+export default PasswordGenerateButton;

frontend/app/components/user-create/PasswordValidCountComponent.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@mantine/core';
+import PasswordValidProgress from './PasswordValidProgress';
+
+interface PasswordValidCountComponentProps {
+	counts: number;
+}
+
+const PasswordValidCountComponent = ({
+	counts,
+}: PasswordValidCountComponentProps) => {
+	const fmtedCounts = counts.toString().padStart(2, ' ');
+	return (
+		<Button
+			disabled
+			leftSection={<PasswordValidProgress counts={counts} />}
+		>{`パスワードの有効時間：${fmtedCounts}秒`}</Button>
+	);
+};
+
+export default PasswordValidCountComponent;

frontend/app/components/user-create/PasswordValidProgress.tsx

@@ -0,0 +1,18 @@
+import { RingProgress } from '@mantine/core';
+
+interface PasswordValidProgressProps {
+	counts: number;
+}
+
+const PasswordValidProgress = ({ counts }: PasswordValidProgressProps) => {
+	return (
+		<RingProgress
+			size={30}
+			thickness={5}
+			transitionDuration={1000}
+			sections={[{ value: Math.floor((counts / 30) * 100), color: 'gray' }]}
+		/>
+	);
+};
+
+export default PasswordValidProgress;

frontend/app/components/user-create/UserCreateComponent.tsx

@@ -0,0 +1,48 @@
+import FormLayout from '../layouts/FormLayout';
+import { CreateUserBody } from 'client/client.schemas';
+import { UseFormReturnType } from '@mantine/form';
+import UserCreateTitle from './UserCreateTitle';
+import UserCreateEmailForm from './UserCreateEmailForm';
+import UserCreateNameForm from './UserCreateNameForm';
+import { Container } from '@mantine/core';
+import UserCreatePasswordForm from './UserCreatePasswordForm';
+import UserCreateSubmitButton from './UserCreateSubmitButton';
+import UserCreatePasswordComponent from './UserCreatePasswordComponent';
+
+interface UserCreateComponentProps {
+	form: UseFormReturnType<
+		CreateUserBody,
+		(values: CreateUserBody) => CreateUserBody
+	>;
+	handleSubmit: (props: CreateUserBody) => void;
+	handlePasswordGenButtonClick: () => void;
+	copied: boolean;
+	counts: number;
+}
+
+const UserCreateComponent = ({
+	form,
+	handleSubmit,
+	handlePasswordGenButtonClick,
+	copied,
+	counts,
+}: UserCreateComponentProps) => {
+	return (
+		<Container size="sm">
+			<FormLayout<CreateUserBody> form={form} handleSubmit={handleSubmit}>
+				<UserCreateTitle />
+				<UserCreateNameForm form={form} />
+				<UserCreateEmailForm form={form} />
+				<UserCreatePasswordForm form={form} copied={copied} />
+				<UserCreatePasswordComponent
+					handlePasswordGenButtonClick={handlePasswordGenButtonClick}
+					copied={copied}
+					counts={counts}
+				/>
+				<UserCreateSubmitButton copied={copied} />
+			</FormLayout>
+		</Container>
+	);
+};
+
+export default UserCreateComponent;

frontend/app/components/user-create/UserCreateEmailForm.tsx

@@ -0,0 +1,25 @@
+import { TextInput } from '@mantine/core';
+import type { UseFormReturnType } from '@mantine/form';
+import type { CreateUserBody } from 'client/client.schemas';
+
+interface UserCreateEmailFormProps {
+	form: UseFormReturnType<
+		CreateUserBody,
+		(values: CreateUserBody) => CreateUserBody
+	>;
+}
+
+const UserCreateEmailForm = ({ form }: UserCreateEmailFormProps) => {
+	return (
+		<TextInput
+			label="メールアドレス"
+			withAsterisk
+			autoComplete="email"
+			key={form.key('email')}
+			aria-label="メールアドレス"
+			{...form.getInputProps('email')}
+		/>
+	);
+};
+
+export default UserCreateEmailForm;

frontend/app/components/user-create/UserCreateNameForm.tsx

@@ -0,0 +1,25 @@
+import { TextInput } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { CreateUserBody } from 'client/client.schemas';
+
+interface UserCreateNameFormProps {
+	form: UseFormReturnType<
+		CreateUserBody,
+		(values: CreateUserBody) => CreateUserBody
+	>;
+}
+
+const UserCreateNameForm = ({ form }: UserCreateNameFormProps) => {
+	return (
+		<TextInput
+			label="ユーザー名"
+			withAsterisk
+			autoComplete="username"
+			key={form.key('name')}
+			aria-label="ユーザー名"
+			{...form.getInputProps('name')}
+		/>
+	);
+};
+
+export default UserCreateNameForm;

frontend/app/components/user-create/UserCreatePasswordComponent.tsx

@@ -0,0 +1,26 @@
+import PasswordGenerateButton from './PasswordGenerateButton';
+import PasswordValidCountComponent from './PasswordValidCountComponent';
+
+interface UserCreatePasswordComponentProps {
+	handlePasswordGenButtonClick: () => void;
+	copied: boolean;
+	counts: number;
+}
+
+const UserCreatePasswordComponent = ({
+	handlePasswordGenButtonClick,
+	copied,
+	counts,
+}: UserCreatePasswordComponentProps) => {
+	if (copied) {
+		return <PasswordValidCountComponent counts={counts} />;
+	} else {
+		return (
+			<PasswordGenerateButton
+				handlePasswordGenButtonClick={handlePasswordGenButtonClick}
+			/>
+		);
+	}
+};
+
+export default UserCreatePasswordComponent;

frontend/app/components/user-create/UserCreatePasswordForm.tsx

@@ -0,0 +1,32 @@
+import { TextInput } from '@mantine/core';
+import type { UseFormReturnType } from '@mantine/form';
+import type { CreateUserBody } from 'client/client.schemas';
+import PasswordCopyButton from './PasswordCopyButton';
+
+interface UserCreatePasswordFormProps {
+	form: UseFormReturnType<
+		CreateUserBody,
+		(values: CreateUserBody) => CreateUserBody
+	>;
+	copied: boolean;
+}
+
+const UserCreatePasswordForm = ({
+	form,
+	copied,
+}: UserCreatePasswordFormProps) => {
+	return (
+		<TextInput
+			disabled
+			label="パスワード"
+			withAsterisk
+			autoComplete="current-password"
+			key={form.key('password')}
+			aria-label="パスワード"
+			rightSection={<PasswordCopyButton form={form} generated={copied} />}
+			{...form.getInputProps('password')}
+		/>
+	);
+};
+
+export default UserCreatePasswordForm;

frontend/app/components/user-create/UserCreateSubmitButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@mantine/core';
+import { RiUserAddFill } from 'react-icons/ri';
+
+interface UserCreateSubmitButtonProps {
+	copied: boolean;
+}
+
+const UserCreateSubmitButton = ({ copied }: UserCreateSubmitButtonProps) => {
+	return (
+		<Button
+			type="submit"
+			color="yellow"
+			leftSection={<RiUserAddFill />}
+			disabled={!copied}
+		>
+			{copied ? '作成' : 'パスワードを生成してください'}
+		</Button>
+	);
+};
+
+export default UserCreateSubmitButton;

frontend/app/components/user-create/UserCreateTitle.tsx

@@ -0,0 +1,15 @@
+import { Center, Group, Title } from '@mantine/core';
+import { RiUserAddFill } from 'react-icons/ri';
+
+const UserCreateTitle = () => {
+	return (
+		<Center>
+			<Group justify="center" align="center">
+				<RiUserAddFill size="3.5ch" />
+				<Title order={1}>ユーザー作成</Title>
+			</Group>
+		</Center>
+	);
+};
+
+export default UserCreateTitle;

frontend/app/components/users/UserAddButton.tsx → frontend/app/components/users/UserCreateButton.tsx

@@ -1,19 +1,19 @@
 import { Button } from '@mantine/core';
 import { RiUserAddFill } from 'react-icons/ri';
 
-const UserAddButton = () => {
+const UserCreateButton = () => {
 	return (
 		<Button
 			color="blue"
 			variant="filled"
 			radius="xl"
 			leftSection={<RiUserAddFill />}
 			component="a"
-			href="users/add"
+			href="users/create"
 		>
-			ユーザー追加
+			ユーザーを作成する
 		</Button>
 	);
 };
 
-export default UserAddButton;
+export default UserCreateButton;

frontend/app/components/users/UsersListComponent.tsx

@@ -6,7 +6,7 @@ import PaginationComponent from '../common/pagination/PaginationComponent';
 import ErrorComponent from '../common/error/ErrorComponent';
 import { getUsersResponse } from 'client/client';
 import UsersListTable from './UsersListTable';
-import UserAddButton from './UserAddButton';
+import UserCreateButton from './UserCreateButton';
 
 interface UsersListComponentProps {
 	paginationProps: PaginationProps;
@@ -42,7 +42,7 @@ const UsersListComponent = ({
 				) : (
 					<ErrorComponent message={'ユーザー情報を取得できませんでした。'} />
 				)}
-				<UserAddButton />
+				<UserCreateButton />
 				<PaginationComponent
 					total={paginationProps.total}
 					page={paginationProps.page}