diff --git a/src/components/Admin/CreateNewUser/security-step.tsx b/src/components/Admin/CreateNewUser/security-step.tsx index 0ba0a9d50..d096b05a5 100644 --- a/src/components/Admin/CreateNewUser/security-step.tsx +++ b/src/components/Admin/CreateNewUser/security-step.tsx @@ -1,6 +1,6 @@ import { Button, Card, Flex, Group, PasswordInput } from '@mantine/core'; import { useForm, zodResolver } from '@mantine/form'; -import { IconArrowLeft, IconArrowRight, IconPassword } from '@tabler/icons-react'; +import { IconArrowLeft, IconArrowRight, IconDice, IconKey } from '@tabler/icons-react'; import { z } from 'zod'; interface CreateAccountSecurityStepProps { @@ -23,22 +23,25 @@ export const CreateAccountSecurityStep = ({ return ( - + } + icon={} + style={{ + flexGrow: 1, + }} label="Password" variant="filled" mb="md" withAsterisk - style={{ - flexGrow: 1, - }} {...form.getInputProps('password')} /> diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx index bf09576d2..3d0ced3c3 100644 --- a/src/pages/manage/users/create.tsx +++ b/src/pages/manage/users/create.tsx @@ -1,13 +1,23 @@ -import { Button, Card, Flex, Group, Stepper, Text, TextInput } from '@mantine/core'; +import { + Alert, + Button, + Card, + Flex, + Group, + PasswordInput, + Stepper, + Table, + Text, + Title, +} from '@mantine/core'; import { useForm, zodResolver } from '@mantine/form'; import { - IconArrowRight, - IconAt, + IconArrowLeft, IconCheck, - IconLock, + IconInfoCircle, + IconKey, + IconMail, IconMailCheck, - IconPremiumRights, - IconSignRight, IconUser, } from '@tabler/icons-react'; import Head from 'next/head'; @@ -49,10 +59,13 @@ const CreateNewUserPage = () => { }); const context = api.useContext(); - const { mutateAsync, isSuccess } = api.user.createUser.useMutation({ + const { mutateAsync, isSuccess, isLoading } = api.user.createUser.useMutation({ onSettled: () => { void context.user.getAll.invalidate(); - } + }, + onSuccess: () => { + nextStep(); + }, }); return ( @@ -79,7 +92,7 @@ const CreateNewUserPage = () => { } + icon={} label="Second step" description="Password" > @@ -99,10 +112,64 @@ const CreateNewUserPage = () => { description="Save to database" > - - User creation has been prepared. Do you want to create the user and store it in the - database? + Review your inputs + + After you submit your data to the database, the user will be able to log in. Are you + sure that you want to store this user in the database and activate the login? + + + + + + + + + + + + + + + + + + + + + + +
PropertyValue
+ + + Username + + {form.values.account.username}
+ + + E-Mail + + + {form.values.account.eMail ? ( + {form.values.account.eMail} + ) : ( + + + Not set + + )} +
+ + + Password + + + + + Valid + +
+
- Completed, click back button to get to previous step + + + User has been created in the database. They can now log in. + + + + );