🚸 Remember current values as default in create user stepper

src/components/Manage/User/Create/create-account-step.tsx

@@ -5,13 +5,15 @@ import { z } from 'zod';
 
 interface CreateAccountStepProps {
   nextStep: ({ eMail, username }: { username: string; eMail: string }) => void;
+  defaultUsername: string;
+  defaultEmail: string;
 }
 
-export const CreateAccountStep = ({ nextStep }: CreateAccountStepProps) => {
+export const CreateAccountStep = ({ defaultEmail, defaultUsername, nextStep }: CreateAccountStepProps) => {
   const form = useForm({
     initialValues: {
-      username: '',
-      eMail: '',
+      username: defaultUsername,
+      eMail: defaultEmail,
     },
     validateInputOnBlur: true,
     validateInputOnChange: true,

src/components/Manage/User/Create/security-step.tsx

@@ -43,17 +43,19 @@ function getStrength(password: string) {
 }
 
 interface CreateAccountSecurityStepProps {
+  defaultPassword: string;
   nextStep: ({ password }: { password: string }) => void;
   prevStep: () => void;
 }
 
 export const CreateAccountSecurityStep = ({
+  defaultPassword,
   nextStep,
   prevStep,
 }: CreateAccountSecurityStepProps) => {
   const form = useForm({
     initialValues: {
-      password: '',
+      password: defaultPassword,
     },
     validateInputOnBlur: true,
     validateInputOnChange: true,

src/components/layout/header/AvatarMenu.tsx

@@ -8,7 +8,7 @@ import {
   IconLogout,
   IconMoonStars,
   IconSun,
-  IconUserCog
+  IconUserCog,
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { User } from 'next-auth';

src/pages/manage/users/create.tsx

@@ -73,6 +73,8 @@ const CreateNewUserPage = () => {
           description="Create account"
         >
           <CreateAccountStep
+            defaultUsername={form.values.account.username}
+            defaultEmail={form.values.account.eMail}
             nextStep={(value) => {
               form.setFieldValue('account', value);
               nextStep();
@@ -87,6 +89,7 @@ const CreateNewUserPage = () => {
           description="Password"
         >
           <CreateAccountSecurityStep
+            defaultPassword={form.values.security.password}
             nextStep={(value) => {
               form.setFieldValue('security', value);
               nextStep();
@@ -160,7 +163,15 @@ const CreateNewUserPage = () => {
               </tbody>
             </Table>
 
-            <Flex justify="end" wrap="nowrap">
+            <Group position="apart" noWrap>
+              <Button
+                leftIcon={<IconArrowLeft size="1rem" />}
+                onClick={prevStep}
+                variant="light"
+                px="xl"
+              >
+                Previous
+              </Button>
               <Button
                 onClick={async () => {
                   await mutateAsync({
@@ -176,7 +187,7 @@ const CreateNewUserPage = () => {
               >
                 Confirm
               </Button>
-            </Flex>
+            </Group>
           </Card>
         </Stepper.Step>
         <Stepper.Completed>