Close and back button in profile changes (#222)

* add Back button * add close button * add reset and change order of buttons
ZdruzenieSTROM · Dec 8, 2023 · dfa1efe · dfa1efe
1 parent 5ee3145
commit dfa1efe
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/components/Profile/PasswordChangeForm.tsx b/src/components/Profile/PasswordChangeForm.tsx
@@ -60,6 +60,11 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
     submitFormData(data)
   }
 
+  const onClose = () => {
+    reset()
+    close()
+  }
+
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
 
   return (
@@ -104,9 +109,12 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
         </form>
       }
       actions={
-        <Button type="submit" onClick={handleSubmit(onSubmit)}>
-          Potvrdiť
-        </Button>
+        <>
+          <Button onClick={onClose}>Zavrieť</Button>
+          <Button type="submit" onClick={handleSubmit(onSubmit)}>
+            Potvrdiť
+          </Button>
+        </>
       }
     />
   )

diff --git a/src/components/Profile/ProfileForm.tsx b/src/components/Profile/ProfileForm.tsx
@@ -1,3 +1,4 @@
+import {Stack, Typography} from '@mui/material'
 import {useMutation, useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -96,6 +97,10 @@ export const ProfileForm: FC = () => {
     submitFormData(data)
   }
 
+  const returnBack = () => {
+    router.push(`/${seminar}/profil`)
+  }
+
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
   const phoneRule = {
     validate: (val?: string) => {
@@ -112,9 +117,14 @@ export const ProfileForm: FC = () => {
         <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
         <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
         <p style={{fontWeight: 'bold'}}>* takto označéné polia sú povinné</p>
-        <Button type="submit" onClick={scrollToTop}>
-          Uložiť údaje
-        </Button>
+        <Stack direction={'row'} mt={3} spacing={2}>
+          <Button onClick={returnBack}>
+            <Typography variant="button2"> Späť </Typography>
+          </Button>
+          <Button type="submit" onClick={scrollToTop}>
+            <Typography variant="button2"> Uložiť údaje </Typography>
+          </Button>
+        </Stack>
       </form>
     </div>
   )