karso/front/src/scene/account/ManageAccountPage.tsx

162 lines
5.3 KiB
TypeScript

import { Button, Table, Text } from '@chakra-ui/react';
import { z as zod } from 'zod';
import { UserCreateWrite, ZodUserCreateWrite } from '@/back-api';
import { PageLayout } from '@/components/Layout/PageLayout';
import { ParameterLayout } from '@/components/ParameterLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { FormInput } from '@/components/form/FormInput';
import { FormPassword } from '@/components/form/FormPassword';
import { Formidable, zodResolver } from '@/components/formidable';
import { useFormidable } from '@/components/formidable/FormidableConfig';
import { UserService } from '@/service/user.service';
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
//timeZoneName: "short",
};
export const ManageAccountPage = () => {
const { data: users } = UserService.useGets();
return (
<>
<TopBar title="Manage accounts" />
<PageLayout>
<ParameterLayout.Root>
<ParameterLayout.HeaderBase
title="Users"
description="List of all users"
/>
<ParameterLayout.Content>
<Table.Root size="sm" variant="outline" interactive>
<Table.Header>
<Table.Row>
<Table.ColumnHeader>id</Table.ColumnHeader>
<Table.ColumnHeader>Login</Table.ColumnHeader>
<Table.ColumnHeader>e-mail</Table.ColumnHeader>
<Table.ColumnHeader>blocked</Table.ColumnHeader>
<Table.ColumnHeader>avatar</Table.ColumnHeader>
<Table.ColumnHeader textAlign="end">
Last connection
</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{users?.map((data) => (
<Table.Row key={data.id}>
<Table.Cell>{data.id}</Table.Cell>
<Table.Cell>{data.login}</Table.Cell>
<Table.Cell>{data.email}</Table.Cell>
<Table.Cell>{data.blocked ? 'true' : 'false'}</Table.Cell>
<Table.Cell>{data.avatar ? 'yes' : 'no'}</Table.Cell>
<Table.Cell textAlign="end">
{data.lastConnection
? new Date(data.lastConnection).toLocaleDateString(
'fr-FR',
options
)
: ''}
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</ParameterLayout.Content>
<ParameterLayout.Footer />
</ParameterLayout.Root>
<CreateUserComponent />
</PageLayout>
</>
);
};
const passwordSchema = zod
.string()
.min(8, 'The password must be at least 8 characters long.')
.max(128, 'The password must not exceed 128 characters.')
.refine((value) => /[a-z]/.test(value), {
message: 'The password must contain at least one lowercase letter.',
})
.refine((value) => /[A-Z]/.test(value), {
message: 'The password must contain at least one uppercase letter.',
})
.refine((value) => /\d/.test(value), {
message: 'The password must contain at least one number.',
})
.refine(
//(value) => /[]/.test(value),
(value) => /[-_@()\{\}\[\]=+\*\/\<\>!$=\'\|`&~"#²\:\/;\.,\?]/.test(value),
{
message:
'The password must contain at least one special character in: -_@(){}[]=+*/<>!$=\'|`&~"#²:/;.,?',
}
)
.refine((value) => !/\s/.test(value), {
message: 'The password must not contain spaces.',
});
export const ZodUserCreateWithNewPassword = ZodUserCreateWrite.omit({
password: true,
}).extend({
password: passwordSchema,
});
export const CreateUserComponent = () => {
const form = useFormidable<UserCreateWrite>({
initialValues: {
login: '',
email: '',
password: '',
},
configuration: {
enableModifyNotification: false,
enableReset: false,
singleLineForm: true,
},
resolver: zodResolver(ZodUserCreateWithNewPassword),
});
//const { connect, lastError, isConnectionLoading } = useLogin();
const userCreate = UserService.useCreate({});
const onSubmit = () => {
userCreate.call(form.values);
};
return (
<Formidable.From form={form}>
<ParameterLayout.Root>
<ParameterLayout.HeaderBase
title="Create a users"
description="Add a new user on the server"
/>
<ParameterLayout.Content>
{userCreate.error && (
<Text colorPalette="@danger">{userCreate.error.message}</Text>
)}
<FormInput name="login" isRequired label="Username" />
<FormInput name="email" isRequired label="E-mail" />
<FormPassword name="password" isRequired label="Password" />
</ParameterLayout.Content>
<ParameterLayout.Footer>
<Button
marginLeft="auto"
marginTop="10px"
variant="solid"
background="green"
width="250px"
maxWidth="45%"
disabled={userCreate.isCalling}
onClick={onSubmit}
>
Login
</Button>
</ParameterLayout.Footer>
</ParameterLayout.Root>
</Formidable.From>
);
};