feat(pass-reset): changed styles and messages

ZdruzenieSTROM · Dec 10, 2023 · c80c6a0 · c80c6a0
1 parent a7eed72
commit c80c6a0
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 54 deletions.
diff --git a/src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx b/src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx
@@ -1,3 +1,4 @@
+import {Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
@@ -27,10 +28,6 @@ export const PasswordResetRequestForm: FC<LoginFormWrapperProps> = ({closeOverla
       return axios.post<IGeneralPostResponse>('/api/user/password/reset', data)
     },
 
-    onError: (error) => {
-      alert(error.message)
-    },
-
     onSuccess: () => {
       closeOverlay()
     },
@@ -42,19 +39,25 @@ export const PasswordResetRequestForm: FC<LoginFormWrapperProps> = ({closeOverla
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <FormInput
-        control={control}
-        name="email"
-        label="Email"
-        rules={{
-          ...requiredRule,
-          pattern: {
-            value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
-            message: '* Vložte správnu emailovú adresu.',
-          },
-        }}
-      />
-      <Button type="submit">Resetovať heslo</Button>
+      <Stack gap={2}>
+        <FormInput
+          control={control}
+          name="email"
+          label="Email"
+          rules={{
+            ...requiredRule,
+            pattern: {
+              value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
+              message: '* Vložte správnu emailovú adresu.',
+            },
+          }}
+        />
+        <Stack alignItems="center" mt={2}>
+          <Button variant="button2" type="submit">
+            Resetovať heslo
+          </Button>
+        </Stack>
+      </Stack>
     </form>
   )
 }
diff --git a/src/components/PasswordReset/PasswordReset.tsx b/src/components/PasswordReset/PasswordReset.tsx
@@ -1,4 +1,4 @@
-import {Typography} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
@@ -46,9 +46,6 @@ export const PasswordResetForm: FC<PasswordResetFormProps> = ({uid, token}) => {
     mutationFn: (data: PasswordResetForm) => {
       return axios.post<IGeneralPostResponse>('/api/user/password/reset/confirm', transformFormData(data))
     },
-    onError: (error) => {
-      alert(error.name)
-    },
   })
 
   const onSubmit: SubmitHandler<PasswordResetForm> = (data) => {
@@ -58,44 +55,52 @@ export const PasswordResetForm: FC<PasswordResetFormProps> = ({uid, token}) => {
   if (isReset)
     return (
       <>
-        <Typography variant="body1">Heslo úspešne zmenené, môžeš sa prihlásiť</Typography>
-        <LoginForm
-          closeOverlay={() => {
-            router.push('/')
-          }}
-        />
+        <Stack gap={2}>
+          <Typography variant="body1">Heslo úspešne zmenené, môžeš sa prihlásiť</Typography>
+          <LoginForm
+            closeOverlay={() => {
+              router.push('/')
+            }}
+          />
+        </Stack>
       </>
     )
 
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <FormInput
-          control={control}
-          name="password1"
-          label="heslo*"
-          type="password"
-          rules={{
-            ...requiredRule,
-            minLength: {
-              value: 8,
-              message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
-            },
-          }}
-        />
-        <FormInput
-          control={control}
-          name="password2"
-          label="potvrdenie hesla*"
-          type="password"
-          rules={{
-            ...requiredRule,
-            validate: (val) => {
-              if (val !== getValues().password1) return '* Zadané heslá sa nezhodujú.'
-            },
-          }}
-        />
-        <Button type="submit">Resetovať heslo</Button>
+        <Stack gap={2}>
+          <FormInput
+            control={control}
+            name="password1"
+            label="heslo*"
+            type="password"
+            rules={{
+              ...requiredRule,
+              minLength: {
+                value: 8,
+                message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
+              },
+            }}
+          />
+          <FormInput
+            control={control}
+            name="password2"
+            label="potvrdenie hesla*"
+            type="password"
+            rules={{
+              ...requiredRule,
+              validate: (val) => {
+                if (val !== getValues().password1) return '* Zadané heslá sa nezhodujú.'
+              },
+            }}
+          />
+          <Stack alignItems="center" mt={2}>
+            <Button variant="button2" type="submit">
+              Resetovať heslo
+            </Button>
+          </Stack>
+        </Stack>
       </form>
     </>
   )

diff --git a/src/components/PasswordResetSent/PasswordResetSent.tsx b/src/components/PasswordResetSent/PasswordResetSent.tsx
@@ -0,0 +1,10 @@
+import {Typography} from '@mui/material'
+import {FC} from 'react'
+
+export const PasswordResetSent: FC = () => {
+  return (
+    <Typography variant="body1">
+      Ak existuje účet so zadaným e-mailom, poslali sme ti naňho link pre zmenu hesla.
+    </Typography>
+  )
+}
diff --git a/src/components/Verification/Verification.tsx b/src/components/Verification/Verification.tsx
@@ -1,5 +1,6 @@
+import {Typography} from '@mui/material'
 import {FC} from 'react'
 
 export const Verification: FC = () => {
-  return <div>Verifikačný e-mail bol odoslaný na zadanú e-mailovú adresu.</div>
+  return <Typography variant="body1">Verifikačný e-mail bol odoslaný na zadanú e-mailovú adresu.</Typography>
 }
diff --git a/src/pages/malynar/reset-sent/index.tsx b/src/pages/malynar/reset-sent/index.tsx
@@ -0,0 +1,15 @@
+import {NextPage} from 'next'
+
+import {PasswordResetSent} from '@/components/PasswordResetSent/PasswordResetSent'
+
+import {PageLayout} from '../../../components/PageLayout/PageLayout'
+
+const Verifikacia: NextPage = () => {
+  return (
+    <PageLayout title="Zabudnuté heslo" contentWidth={2}>
+      <PasswordResetSent />
+    </PageLayout>
+  )
+}
+
+export default Verifikacia
diff --git a/src/pages/matik/reset-sent/index.tsx b/src/pages/matik/reset-sent/index.tsx
@@ -0,0 +1,15 @@
+import {NextPage} from 'next'
+
+import {PasswordResetSent} from '@/components/PasswordResetSent/PasswordResetSent'
+
+import {PageLayout} from '../../../components/PageLayout/PageLayout'
+
+const Verifikacia: NextPage = () => {
+  return (
+    <PageLayout title="Zabudnuté heslo" contentWidth={2}>
+      <PasswordResetSent />
+    </PageLayout>
+  )
+}
+
+export default Verifikacia
diff --git a/src/pages/strom/reset-sent/index.tsx b/src/pages/strom/reset-sent/index.tsx
@@ -0,0 +1,15 @@
+import {NextPage} from 'next'
+
+import {PasswordResetSent} from '@/components/PasswordResetSent/PasswordResetSent'
+
+import {PageLayout} from '../../../components/PageLayout/PageLayout'
+
+const Verifikacia: NextPage = () => {
+  return (
+    <PageLayout title="Zabudnuté heslo" contentWidth={2}>
+      <PasswordResetSent />
+    </PageLayout>
+  )
+}
+
+export default Verifikacia