diff --git a/src/app/main/authPages/authPagesConfigs.js b/src/app/main/authPages/authPagesConfigs.js index a522960..cda9bdf 100644 --- a/src/app/main/authPages/authPagesConfigs.js +++ b/src/app/main/authPages/authPagesConfigs.js @@ -1,7 +1,8 @@ +import ForgotPasswordConfig from './forgot-password/ForgotPasswordConfig'; import SignInConfig from './sign-in/SignInConfig'; import SignOutConfig from './sign-out/SignOutConfig'; import SignUpConfig from './sign-up/SignUpConfig'; -const authPagesConfigs = [SignInConfig, SignOutConfig, SignUpConfig]; +const authPagesConfigs = [SignInConfig, SignOutConfig, SignUpConfig, ForgotPasswordConfig]; export default authPagesConfigs; diff --git a/src/app/main/authPages/forgot-password/ForgotPasswordConfig.js b/src/app/main/authPages/forgot-password/ForgotPasswordConfig.js new file mode 100644 index 0000000..c577997 --- /dev/null +++ b/src/app/main/authPages/forgot-password/ForgotPasswordConfig.js @@ -0,0 +1,28 @@ +import i18next from 'i18next'; + +import ForgotPasswordPage from './ForgotPasswordPage'; +import authRoles from '../../../auth/authRoles'; +import en from './i18n/en'; + +i18next.addResourceBundle('en', 'forgotPasswordPage', en); + +const ForgotPasswordConfig = { + settings: { + layout: { + config: { + navbar: { + display: false, + }, + }, + }, + }, + auth: authRoles.onlyGuest, + routes: [ + { + path: 'forgot-password', + element: , + }, + ], +}; + +export default ForgotPasswordConfig; diff --git a/src/app/main/authPages/forgot-password/ForgotPasswordPage.js b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js new file mode 100644 index 0000000..550507c --- /dev/null +++ b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js @@ -0,0 +1,105 @@ +import { yupResolver } from '@hookform/resolvers/yup'; +import _ from '@lodash'; +import Button from '@mui/material/Button'; +import Paper from '@mui/material/Paper'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; +import { Controller, useForm } from 'react-hook-form'; +import { withTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import * as yup from 'yup'; +import LeftSideCanvas from '../shared-components/LeftSideCanvas'; + +const defaultValues = { + email: '', +}; + +function ForgotPasswordPage({ t }) { + const schema = yup.object().shape({ + email: yup.string().email(t('email_error')).required(t('email_error')), + }); + + const { control, formState, handleSubmit, reset } = useForm({ + mode: 'onChange', + defaultValues, + resolver: yupResolver(schema), + }); + + const { isValid, dirtyFields, errors } = formState; + + function onSubmit() { + reset(defaultValues); + } + + return ( +
+ + + theme.palette.background?.authPaper }} + > +
+ + {t('forgot_password')} + +
+ {t('suggestion')} +
+ +
+ ( + theme.palette.background.paper, + }, + }} + /> + )} + /> + +
+ +
+ + + {t('return')} + + {t('sign_in')} + + + +
+
+
+ ); +} + +export default withTranslation('forgotPasswordPage')(ForgotPasswordPage);