RC-2: create forgot password page and forgot password config

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;

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: <ForgotPasswordPage />,
+    },
+  ],
+};
+
+export default ForgotPasswordConfig;

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 (
+    <div className="h-full flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0">
+      <LeftSideCanvas title={t('title')} subtitle={t('subtitle')} text={t('text')} />
+
+      <Paper
+        className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
+        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+      >
+        <div className="w-full mx-auto sm:mx-0">
+          <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
+            {t('forgot_password')}
+          </Typography>
+          <div className="flex items-baseline mt-10 font-medium">
+            <Typography>{t('suggestion')}</Typography>
+          </div>
+
+          <form
+            name="forgotPasswordForm"
+            noValidate
+            className="flex flex-col justify-center w-full mt-48"
+            onSubmit={handleSubmit(onSubmit)}
+          >
+            <Controller
+              name="email"
+              control={control}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label={t('email')}
+                  type="email"
+                  error={!!errors.email}
+                  helperText={errors?.email?.message}
+                  variant="outlined"
+                  required
+                  fullWidth
+                  InputProps={{
+                    sx: {
+                      background: (theme) => theme.palette.background.paper,
+                    },
+                  }}
+                />
+              )}
+            />
+
+            <div className="flex justify-center w-full">
+              <Button
+                variant="contained"
+                color="secondary"
+                className="w-[300px] mt-32 text-base uppercase rounded-xl"
+                aria-label="Register"
+                disabled={_.isEmpty(dirtyFields) || !isValid}
+                type="submit"
+                size="large"
+              >
+                {t('forgot_password_btn')}
+              </Button>
+            </div>
+
+            <Typography className="mt-32 font-medium" color="text.secondary">
+              <span>{t('return')}</span>
+              <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
+                {t('sign_in')}
+              </Link>
+            </Typography>
+          </form>
+        </div>
+      </Paper>
+    </div>
+  );
+}
+
+export default withTranslation('forgotPasswordPage')(ForgotPasswordPage);