Reset password - reset password dialog

src/components/PageLayout/Authentication/Authentication.tsx

@@ -6,7 +6,7 @@ import {AuthContainer} from '@/utils/AuthContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Overlay} from '../../Overlay/Overlay'
-import {LoginForm} from '../LoginForm/LoginForm'
+import {LoginFormWrapper} from '../LoginFormWrapper/LoginFormWrapper'
 import styles from './Authentication.module.scss'
 
 export const Authentication: FC = () => {
@@ -38,7 +38,7 @@ export const Authentication: FC = () => {
         <Overlay display={displayAuthenticationOverlay} closeOverlay={toggleDisplayLoginOverlay}>
           <div className={styles.authenticationContainer}>
             <div className={styles.content}>
-              <LoginForm closeOverlay={toggleDisplayLoginOverlay} />
+              <LoginFormWrapper closeOverlay={toggleDisplayLoginOverlay} />
             </div>
           </div>
         </Overlay>

src/components/PageLayout/LoginForm/LoginForm.tsx

@@ -7,6 +7,8 @@ import {Button} from '@/components/Clickable/Button'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {AuthContainer} from '@/utils/AuthContainer'
 
+import {ILoginFormWrapper} from '../LoginFormWrapper/LoginFormWrapper'
+
 type LoginFormValues = {
   email: string
   password: string
@@ -17,11 +19,7 @@ const defaultValues: LoginFormValues = {
   password: '',
 }
 
-interface ILoginForm {
-  closeOverlay: () => void
-}
-
-export const LoginForm: FC<ILoginForm> = ({closeOverlay}) => {
+export const LoginForm: FC<ILoginFormWrapper> = ({closeOverlay}) => {
   const {login} = AuthContainer.useContainer()
   const {handleSubmit, control} = useForm<LoginFormValues>({defaultValues})
 

src/components/PageLayout/LoginFormWrapper/LoginFormWrapper.tsx

@@ -0,0 +1,38 @@
+import {useRouter} from 'next/router'
+import {FC, useState} from 'react'
+
+import {Button} from '@/components/Clickable/Button'
+
+import {LoginForm} from '../LoginForm/LoginForm'
+import {PasswordResetRequestForm} from '../PasswordResetRequest/PasswordResetRequest'
+
+export interface ILoginFormWrapper {
+  closeOverlay: () => void
+}
+
+export const LoginFormWrapper: FC<ILoginFormWrapper> = ({closeOverlay}) => {
+  const router = useRouter()
+  const [form, changeForm] = useState('login')
+
+  if (form === 'login')
+    return (
+      <>
+        <LoginForm closeOverlay={closeOverlay} />
+        <Button
+          onClick={() => {
+            changeForm('reset')
+          }}
+        >
+          Zabudnuté heslo
+        </Button>
+      </>
+    )
+
+  return (
+    <PasswordResetRequestForm
+      closeOverlay={() => {
+        router.push('/verifikacia')
+      }}
+    />
+  )
+}

src/components/PageLayout/PasswordReset/PasswordResetRequest.tsx

@@ -0,0 +1,58 @@
+import {useMutation} from '@tanstack/react-query'
+import axios from 'axios'
+import {FC} from 'react'
+import {SubmitHandler, useForm} from 'react-hook-form'
+
+import {Button} from '@/components/Clickable/Button'
+import {FormInput} from '@/components/FormItems/FormInput/FormInput'
+import {IGeneralPostResponse} from '@/types/api/general'
+
+import {ILoginFormWrapper} from '../LoginFormWrapper/LoginFormWrapper'
+
+type PasswordResetRequestFormValues = {
+  email: string
+}
+
+const defaultValues: PasswordResetRequestFormValues = {
+  email: '',
+}
+
+export const PasswordResetRequestForm: FC<ILoginFormWrapper> = ({closeOverlay}) => {
+  const {handleSubmit, control} = useForm<PasswordResetRequestFormValues>({defaultValues})
+
+  const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
+
+  const {mutate: submitFormData} = useMutation({
+    mutationFn: (data: PasswordResetRequestFormValues) => {
+      return axios.post<IGeneralPostResponse>('/api/user/password/reset/', data)
+    },
+
+    onError: (error, variables, context) => {},
+
+    onSuccess: () => {
+      closeOverlay()
+    },
+  })
+
+  const onSubmit: SubmitHandler<PasswordResetRequestFormValues> = (data) => {
+    submitFormData(data)
+  }
+
+  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>
+    </form>
+  )
+}

src/components/PageLayout/PasswordResetRequest/PasswordResetRequest.tsx

@@ -0,0 +1,58 @@
+import {useMutation} from '@tanstack/react-query'
+import axios from 'axios'
+import {FC} from 'react'
+import {SubmitHandler, useForm} from 'react-hook-form'
+
+import {Button} from '@/components/Clickable/Button'
+import {FormInput} from '@/components/FormItems/FormInput/FormInput'
+import {IGeneralPostResponse} from '@/types/api/general'
+
+import {ILoginFormWrapper} from '../LoginFormWrapper/LoginFormWrapper'
+
+type PasswordResetRequestFormValues = {
+  email: string
+}
+
+const defaultValues: PasswordResetRequestFormValues = {
+  email: '',
+}
+
+export const PasswordResetRequestForm: FC<ILoginFormWrapper> = ({closeOverlay}) => {
+  const {handleSubmit, control} = useForm<PasswordResetRequestFormValues>({defaultValues})
+
+  const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
+
+  const {mutate: submitFormData} = useMutation({
+    mutationFn: (data: PasswordResetRequestFormValues) => {
+      return axios.post<IGeneralPostResponse>('/api/user/password/reset/', data)
+    },
+
+    onError: (error, variables, context) => {},
+
+    onSuccess: () => {
+      closeOverlay()
+    },
+  })
+
+  const onSubmit: SubmitHandler<PasswordResetRequestFormValues> = (data) => {
+    submitFormData(data)
+  }
+
+  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>
+    </form>
+  )
+}