Implement forgotten password funcitonality (#997)

* forgotten password

* change password

* display link in login form that redirect to forgotten password

* changed API endpoint

* translation

public/locales/bg/auth.json

@@ -2,7 +2,11 @@
   "alerts": {
     "welcome": "Добре дошли!",
     "invalid-login": "Грешен потребител / парола.",
-    "re-login": "Моля, влезте отново в профила си."
+    "re-login": "Моля, влезте отново в профила си.",
+    "forgotten-password-error": "Потребителя не е намерен, моля опитайте отново!",
+    "forgotten-password-success": "Моля проверете имейла си!",
+    "change-password-error": "Възникна грешка, моля опитайте отново или се свържете с [email protected]!",
+    "change-password-success": "Може да се логнете с новата парола."
   },
   "cta": {
     "login": "Вход",
@@ -28,6 +32,7 @@
   },
   "account": {
     "email": "Email",
+    "forgotten-password": "Забравена парола",
     "new-password": "Нова парола",
     "confirm-password": "Потвърди парола",
     "previous-password": "Стара парола",

public/locales/en/auth.json

@@ -2,7 +2,11 @@
   "alerts": {
     "welcome": "Welcome!",
     "invalid-login": "Wrong username / password.",
-    "re-login": "Please login into your account."
+    "re-login": "Please login into your account.",
+    "forgotten-password-error": "User not found, please try again!",
+    "forgotten-password-success": "Please check your email!",
+    "change-password-error": " Тhere was an error, try again or contact [email protected]!",
+    "change-password-success": "You can log in with the new password."
   },
   "cta": {
     "login": "Login",
@@ -28,6 +32,7 @@
   },
   "account": {
     "email": "Email",
+    "forgotten-password": "Forgotten password",
     "new-password": "New password",
     "confirm-password": "Confirm password",
     "previous-password": "Previous password",

src/common/util/useCurrentPerson.ts

@@ -7,6 +7,8 @@ import { endpoints } from 'service/apiEndpoints'
 import { Person, UpdatePerson } from 'gql/person'
 import { authConfig, authQueryFnFactory } from 'service/restRequests'
 import { Credentials } from 'components/auth/profile/UpdatePasswordModal'
+import { ForgottenPasswordForm } from 'components/auth/forgottenPassword/ForgottenPasswordForm'
+import { ChangePasswordFormData } from 'components/auth/changePassword/ChangePasswordForm'
 
 type CurrentPerson = {
   user: Person
@@ -51,6 +53,24 @@ export function updateCurrentPersonPassword() {
   }
 }
 
+export function forgottenPassword() {
+  return async (data: ForgottenPasswordForm) => {
+    return await apiClient.post<ForgottenPasswordForm, AxiosResponse<boolean>>(
+      endpoints.account.forgottenPassword.url,
+      data,
+    )
+  }
+}
+
+export function resetPassword() {
+  return async (data: ChangePasswordFormData) => {
+    return await apiClient.post<ChangePasswordFormData, AxiosResponse<boolean>>(
+      endpoints.account.resetPassword.url,
+      data,
+    )
+  }
+}
+
 export function disableCurrentPerson() {
   const { data: session } = useSession()
   return async () => {

src/components/auth/changePassword/ChangePasswordForm.tsx

@@ -1,15 +1,24 @@
-import React from 'react'
+import React, { useState } from 'react'
 import * as yup from 'yup'
 import { Grid } from '@mui/material'
 
 import { customValidators } from 'common/form/useForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import GenericForm from 'components/common/form/GenericForm'
-import FormTextField from 'components/common/form/FormTextField'
+import { routes } from 'common/routes'
+import { useRouter } from 'next/router'
+import { useMutation } from 'react-query'
+import { AxiosError, AxiosResponse } from 'axios'
+import { ApiErrors } from 'service/apiErrors'
+import PasswordField from 'components/common/form/PasswordField'
+import { resetPassword } from 'common/util/useCurrentPerson'
+import { AlertStore } from 'stores/AlertStore'
+import { useTranslation } from 'next-i18next'
 
 export type ChangePasswordFormData = {
   password: string
   confirmPassword: string
+  token?: string | string[]
 }
 
 const validationSchema: yup.SchemaOf<ChangePasswordFormData> = yup
@@ -22,20 +31,45 @@ const validationSchema: yup.SchemaOf<ChangePasswordFormData> = yup
       .min(6, customValidators.passwordMin)
       .required()
       .oneOf([yup.ref('password'), null], 'validation:password-match'),
+    token: yup.string(),
   })
 
 const defaults: ChangePasswordFormData = {
   password: '',
   confirmPassword: '',
+  token: '',
 }
 
 export type ChangePasswordFormProps = {
   initialValues?: ChangePasswordFormData
 }
 
 export default function ChangePasswordForm({ initialValues = defaults }: ChangePasswordFormProps) {
-  const onSubmit = (values: ChangePasswordFormData) => {
-    console.log(values)
+  const [loading, setLoading] = useState<boolean>(false)
+  const router = useRouter()
+  const token = router.query.token
+  const { t } = useTranslation()
+
+  const mutation = useMutation<AxiosResponse, AxiosError<ApiErrors>, ChangePasswordFormData>({
+    mutationFn: resetPassword(),
+    onError: () => AlertStore.show(t('auth:alerts.change-password-error'), 'error'),
+    onSuccess: () => AlertStore.show(t('auth:alerts.change-password-success'), 'success'),
+  })
+  const onSubmit = async (values: ChangePasswordFormData) => {
+    values.token = token
+    try {
+      setLoading(true)
+      const res = await mutation.mutateAsync(values)
+      console.log(res)
+      if (!res) {
+        throw new Error(res)
+      }
+      router.push(routes.login)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -45,17 +79,17 @@ export default function ChangePasswordForm({ initialValues = defaults }: ChangeP
       validationSchema={validationSchema}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
-          <FormTextField type="password" label="auth:fields.password" name="password" />
+          <PasswordField type="password" label="auth:fields.password" name="password" />
         </Grid>
         <Grid item xs={12}>
-          <FormTextField
+          <PasswordField
             type="password"
             label="auth:fields.confirm-password"
             name="confirmPassword"
           />
         </Grid>
         <Grid item xs={12}>
-          <SubmitButton fullWidth label="auth:cta.reset" />
+          <SubmitButton loading={loading} fullWidth label="auth:cta.reset" />
         </Grid>
       </Grid>
     </GenericForm>

src/components/auth/forgottenPassword/ForgottenPasswordForm.tsx

@@ -1,11 +1,16 @@
-import React from 'react'
+import React, { useState } from 'react'
 import * as yup from 'yup'
 import { useTranslation } from 'next-i18next'
 import { Typography, Grid } from '@mui/material'
 
 import SubmitButton from 'components/common/form/SubmitButton'
 import GenericForm from 'components/common/form/GenericForm'
 import FormTextField from 'components/common/form/FormTextField'
+import { useMutation } from 'react-query'
+import { AxiosError, AxiosResponse } from 'axios'
+import { ApiErrors } from 'service/apiErrors'
+import { AlertStore } from 'stores/AlertStore'
+import { forgottenPassword } from 'common/util/useCurrentPerson'
 
 export type ForgottenPasswordForm = {
   email: string
@@ -27,9 +32,23 @@ export default function ForgottenPasswordForm({
   initialValues = defaults,
 }: ForgottenPasswordFormProps) {
   const { t } = useTranslation()
+  const [loading, setLoading] = useState<boolean>(false)
 
-  const onSubmit = (values: ForgottenPasswordForm) => {
-    console.log(values)
+  const mutation = useMutation<AxiosResponse, AxiosError<ApiErrors>, ForgottenPasswordForm>({
+    mutationFn: forgottenPassword(),
+    onError: () => AlertStore.show(t('auth:alerts.forgotten-password-error'), 'error'),
+    onSuccess: () => AlertStore.show(t('auth:alerts.forgotten-password-success'), 'success'),
+  })
+
+  const onSubmit = async (values: ForgottenPasswordForm) => {
+    try {
+      setLoading(true)
+      await mutation.mutateAsync(values)
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
@@ -45,7 +64,7 @@ export default function ForgottenPasswordForm({
           <FormTextField type="text" label="auth:fields.email" name="email" />
         </Grid>
         <Grid item xs={12}>
-          <SubmitButton fullWidth label="auth:cta.send" />
+          <SubmitButton loading={loading} fullWidth label="auth:cta.send" />
         </Grid>
       </Grid>
     </GenericForm>

src/components/auth/login/LoginForm.tsx

@@ -14,6 +14,7 @@ import FormTextField from 'components/common/form/FormTextField'
 import Google from 'common/icons/Google'
 import PasswordField from 'components/common/form/PasswordField'
 import { email, password } from 'common/form/validation'
+import LinkButton from 'components/common/LinkButton'
 
 export type LoginFormData = {
   email: string
@@ -78,6 +79,11 @@ export default function LoginForm({ initialValues = defaults }: LoginFormProps)
         <Grid item xs={12}>
           <PasswordField />
         </Grid>
+        <Grid container justifyContent="flex-end">
+          <LinkButton href={routes.forgottenPassword}>
+            {t('auth:account.forgotten-password')}
+          </LinkButton>
+        </Grid>
         <Grid item xs={12}>
           <SubmitButton fullWidth label="auth:cta.login" loading={loading} />
         </Grid>

src/service/apiEndpoints.ts

@@ -167,6 +167,8 @@ export const endpoints = {
     me: <Endpoint>{ url: '/account/me', method: 'GET' },
     update: <Endpoint>{ url: '/account/me', method: 'PATCH' },
     updatePassword: <Endpoint>{ url: '/account/me/credentials', method: 'PATCH' },
+    forgottenPassword: <Endpoint>{ url: '/login/forgot-password', method: 'POST' },
+    resetPassword: <Endpoint>{ url: '/login/reset-password', method: 'POST' },
     delete: <Endpoint>{ url: '/account/me', method: 'DELETE' },
     new: <Endpoint>{ url: '/account/new', method: 'GET' },
   },