From 5b1b36eecc9765067df7e737e65485aef603580c Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Sat, 5 Aug 2023 15:09:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Remember=20current=20values=20as?=
 =?UTF-8?q?=20default=20in=20create=20user=20stepper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Manage/User/Create/create-account-step.tsx    |  8 +++++---
 .../Manage/User/Create/security-step.tsx          |  4 +++-
 src/components/layout/header/AvatarMenu.tsx       |  2 +-
 src/pages/manage/users/create.tsx                 | 15 +++++++++++++--
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Manage/User/Create/create-account-step.tsx b/src/components/Manage/User/Create/create-account-step.tsx
index b06531559..d2fda30c6 100644
--- a/src/components/Manage/User/Create/create-account-step.tsx
+++ b/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,
diff --git a/src/components/Manage/User/Create/security-step.tsx b/src/components/Manage/User/Create/security-step.tsx
index afccbacd6..17143faa5 100644
--- a/src/components/Manage/User/Create/security-step.tsx
+++ b/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,
diff --git a/src/components/layout/header/AvatarMenu.tsx b/src/components/layout/header/AvatarMenu.tsx
index 0ee06a83b..c3bbcb47d 100644
--- a/src/components/layout/header/AvatarMenu.tsx
+++ b/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';
diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx
index 92962fa7b..d8d1631a2 100644
--- a/src/pages/manage/users/create.tsx
+++ b/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>