Create user • Homarr

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'; 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 { MainLayout } from '~/components/layout/admin/main-admin.layout'; 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 { mutateAsync, isSuccess } = api.user.createUser.useMutation(); 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" > User creation has been prepared. Do you want to create the user and store it in the database? Completed, click back button to get to previous step ); }; export default CreateNewUserPage;