2023-07-29 17:29:57 +02:00
|
|
|
import { Button, Card, Flex, Group, Stepper, Text, TextInput } from '@mantine/core';
|
|
|
|
|
import { useForm, zodResolver } from '@mantine/form';
|
|
|
|
|
import {
|
|
|
|
|
IconArrowRight,
|
|
|
|
|
IconAt,
|
|
|
|
|
IconCheck,
|
|
|
|
|
IconLock,
|
|
|
|
|
IconMailCheck,
|
|
|
|
|
IconPremiumRights,
|
|
|
|
|
IconSignRight,
|
|
|
|
|
IconUser,
|
|
|
|
|
} from '@tabler/icons-react';
|
2023-07-29 16:17:34 +02:00
|
|
|
import Head from 'next/head';
|
2023-07-29 17:29:57 +02:00
|
|
|
import Link from 'next/link';
|
2023-07-29 16:17:34 +02:00
|
|
|
import { useState } from 'react';
|
2023-07-29 17:29:57 +02:00
|
|
|
import { z } from 'zod';
|
|
|
|
|
import {
|
|
|
|
|
CreateAccountStep,
|
|
|
|
|
createAccountStepValidationSchema,
|
|
|
|
|
} from '~/components/Admin/CreateNewUser/create-account-step';
|
|
|
|
|
import {
|
|
|
|
|
CreateAccountSecurityStep,
|
|
|
|
|
createAccountSecurityStepValidationSchema,
|
|
|
|
|
} from '~/components/Admin/CreateNewUser/security-step';
|
2023-07-29 16:17:34 +02:00
|
|
|
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
|
2023-07-29 17:29:57 +02:00
|
|
|
import { api } from '~/utils/api';
|
2023-07-29 16:17:34 +02:00
|
|
|
|
|
|
|
|
const CreateNewUserPage = () => {
|
2023-07-29 17:29:57 +02:00
|
|
|
const [active, setActive] = useState(0);
|
2023-07-29 16:17:34 +02:00
|
|
|
const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
|
|
|
|
|
const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
|
|
|
|
|
|
2023-07-29 17:29:57 +02:00
|
|
|
const form = useForm({
|
|
|
|
|
initialValues: {
|
|
|
|
|
account: {
|
|
|
|
|
username: '',
|
|
|
|
|
eMail: '',
|
|
|
|
|
},
|
|
|
|
|
security: {
|
|
|
|
|
password: '',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
validate: zodResolver(
|
|
|
|
|
z.object({
|
|
|
|
|
account: createAccountStepValidationSchema,
|
|
|
|
|
security: createAccountSecurityStepValidationSchema,
|
|
|
|
|
})
|
|
|
|
|
),
|
|
|
|
|
});
|
|
|
|
|
|
2023-07-29 20:12:49 +02:00
|
|
|
const context = api.useContext();
|
|
|
|
|
const { mutateAsync, isSuccess } = api.user.createUser.useMutation({
|
|
|
|
|
onSettled: () => {
|
|
|
|
|
void context.user.getAll.invalidate();
|
|
|
|
|
}
|
|
|
|
|
});
|
2023-07-29 17:29:57 +02:00
|
|
|
|
2023-07-29 16:17:34 +02:00
|
|
|
return (
|
|
|
|
|
<MainLayout>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Create user • Homarr</title>
|
|
|
|
|
</Head>
|
|
|
|
|
|
2023-07-29 17:29:57 +02:00
|
|
|
<Stepper active={active} onStepClick={setActive} breakpoint="sm" mih="100%">
|
2023-07-29 16:17:34 +02:00
|
|
|
<Stepper.Step
|
|
|
|
|
allowStepClick={false}
|
|
|
|
|
allowStepSelect={false}
|
|
|
|
|
icon={<IconUser />}
|
|
|
|
|
label="First step"
|
2023-07-29 17:29:57 +02:00
|
|
|
description="Create account"
|
2023-07-29 16:17:34 +02:00
|
|
|
>
|
2023-07-29 17:29:57 +02:00
|
|
|
<CreateAccountStep
|
|
|
|
|
nextStep={(value) => {
|
|
|
|
|
form.setFieldValue('account', value);
|
|
|
|
|
nextStep();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2023-07-29 16:17:34 +02:00
|
|
|
</Stepper.Step>
|
|
|
|
|
<Stepper.Step
|
|
|
|
|
allowStepClick={false}
|
|
|
|
|
allowStepSelect={false}
|
2023-07-29 17:29:57 +02:00
|
|
|
icon={<IconLock />}
|
2023-07-29 16:17:34 +02:00
|
|
|
label="Second step"
|
2023-07-29 17:29:57 +02:00
|
|
|
description="Password"
|
2023-07-29 16:17:34 +02:00
|
|
|
>
|
2023-07-29 17:29:57 +02:00
|
|
|
<CreateAccountSecurityStep
|
|
|
|
|
nextStep={(value) => {
|
|
|
|
|
form.setFieldValue('security', value);
|
|
|
|
|
nextStep();
|
|
|
|
|
}}
|
|
|
|
|
prevStep={prevStep}
|
|
|
|
|
/>
|
2023-07-29 16:17:34 +02:00
|
|
|
</Stepper.Step>
|
|
|
|
|
<Stepper.Step
|
|
|
|
|
allowStepClick={false}
|
|
|
|
|
allowStepSelect={false}
|
2023-07-29 17:29:57 +02:00
|
|
|
icon={<IconMailCheck />}
|
2023-07-29 16:17:34 +02:00
|
|
|
label="Final step"
|
2023-07-29 17:29:57 +02:00
|
|
|
description="Save to database"
|
2023-07-29 16:17:34 +02:00
|
|
|
>
|
2023-07-29 17:29:57 +02:00
|
|
|
<Card mih={400}>
|
|
|
|
|
<Text>
|
|
|
|
|
User creation has been prepared. Do you want to create the user and store it in the
|
|
|
|
|
database?
|
|
|
|
|
</Text>
|
|
|
|
|
<Flex justify="end" wrap="nowrap">
|
|
|
|
|
<Button
|
|
|
|
|
onClick={async () => {
|
|
|
|
|
if (isSuccess) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
await mutateAsync({
|
|
|
|
|
username: form.values.account.username,
|
|
|
|
|
password: form.values.security.password,
|
|
|
|
|
email: form.values.account.eMail === '' ? undefined : form.values.account.eMail,
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
component={Link}
|
|
|
|
|
href="/manage/users"
|
|
|
|
|
rightIcon={<IconCheck size="1rem" />}
|
|
|
|
|
variant="light"
|
|
|
|
|
px="xl"
|
|
|
|
|
>
|
|
|
|
|
Finish
|
|
|
|
|
</Button>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Card>
|
2023-07-29 16:17:34 +02:00
|
|
|
</Stepper.Step>
|
|
|
|
|
<Stepper.Completed>Completed, click back button to get to previous step</Stepper.Completed>
|
|
|
|
|
</Stepper>
|
|
|
|
|
</MainLayout>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default CreateNewUserPage;
|
