import { Alert, Button, Card, Flex, Group, Stepper, Table, Text, Title } from '@mantine/core'; import { useForm, zodResolver } from '@mantine/form'; import { IconArrowLeft, IconCheck, IconInfoCircle, IconKey, IconMail, IconMailCheck, IconUser, IconUserPlus, } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; import { useState } from 'react'; import { z } from 'zod'; import { CreateAccountStep, createAccountStepValidationSchema, } from '~/components/Admin/CreateNewUser/create-account-step'; import { CreateAccountSecurityStep, createAccountSecurityStepValidationSchema, } from '~/components/Admin/CreateNewUser/security-step'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { api } from '~/utils/api'; const CreateNewUserPage = () => { const [active, setActive] = useState(0); const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current)); const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current)); const form = useForm({ initialValues: { account: { username: '', eMail: '', }, security: { password: '', }, }, validate: zodResolver( z.object({ account: createAccountStepValidationSchema, security: createAccountSecurityStepValidationSchema, }) ), }); const context = api.useContext(); const { mutateAsync, isLoading } = api.user.createUser.useMutation({ onSettled: () => { void context.user.getAll.invalidate(); }, onSuccess: () => { nextStep(); }, }); return ( Create user • Homarr } label="First step" description="Create account" > { form.setFieldValue('account', value); nextStep(); }} /> } label="Second step" description="Password" > { form.setFieldValue('security', value); nextStep(); }} prevStep={prevStep} /> } label="Final step" description="Save to 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?
Property Value
Username {form.values.account.username}
E-Mail {form.values.account.eMail ? ( {form.values.account.eMail} ) : ( Not set )}
Password Valid
User has been created in the database. They can now log in. ); }; export default CreateNewUserPage;