From afb622b55f02b53eaf2c997c431108b9c81fe2d1 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Thu, 9 Mar 2023 14:47:47 +0700
Subject: [PATCH] [#17] Add PasswordReset page and form

---
 public/locales/en/translation.json      |   6 ++
 src/adapters/authAdapter.ts             |   9 +++
 src/assets/images/bell-notification.png | Bin 0 -> 331 bytes
 src/routes/index.tsx                    |   5 ++
 src/screens/Login/index.tsx             |   6 +-
 src/screens/ResetPassword/index.tsx     | 101 ++++++++++++++++++++++++
 6 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/images/bell-notification.png
 create mode 100644 src/screens/ResetPassword/index.tsx

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 332ce1f..5da4f66 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -7,5 +7,11 @@
     "invalid-email": "Email has invalid format",
     "invalid-password": "Password should be at least {{passwordMinLength}}",
     "generic-server-error": "There was a problem receiving a response from the server"
+  },
+  "reset-password": {
+    "recovery-email": "Send Recovery Email",
+    "header": "Enter your email to receive instructions for resetting your password.",
+    "success-message": "We've emailed you instructions to reset your password",
+    "check-email": "Check your email"
   }
 }
diff --git a/src/adapters/authAdapter.ts b/src/adapters/authAdapter.ts
index b7729b7..fa6cd33 100644
--- a/src/adapters/authAdapter.ts
+++ b/src/adapters/authAdapter.ts
@@ -47,6 +47,15 @@ class AuthAdapter extends BaseAdapter {
     return this.prototype.postRequest('oauth/revoke', { data: requestParams });
   }
 
+  static resetPassword(email: string) {
+    const requestParams = {
+      ...commonParams,
+      user: { email: email },
+    };
+
+    return this.prototype.postRequest('passwords', { data: requestParams });
+  }
+
   static getUser() {
     return this.prototype.getRequest('me', {});
   }
diff --git a/src/assets/images/bell-notification.png b/src/assets/images/bell-notification.png
new file mode 100644
index 0000000000000000000000000000000000000000..329b93a2eedafadeec8c03e2dab93f541136f018
GIT binary patch
literal 331
zcmeAS@N?(olHy`uVBq!ia0vp^;y^6H!3HD+Ytl-A6lZ})WHAE+w=f7ZGR&GI0Tg5`
z4sv&5Sa(k5C6L3C?&#~tz_78O`%fY(kpIBb#WAFUaqHBxf=vbjZsw<Ay*xOlIcRDg
zo?X%)o1s2UK{myv>Js0zUOhggXXQWBra83j5&z~OlENaGEftfwDo*oj!zF<&3$23h
zezX?XV&1v%sBGI~6|2_Q2i$x5pKj}HZZ9!>FeB`b_ug*}-%Z{q*l(Z8e#a@Y#C3u0
z-5qjYZC=ik);PZ`=|aGyo%_~p`7QSJa*fF$rr)1so0yDmYcM);?-Su@N|>w3(Zsv2
z-ex6}{ftEQx|?bohaOx!XXq%vF2~8Y=fYgGG!uLE3kp+LGAuC`JTlipl4&=`99G8<
Z!vDVYGCX+C^BU+^22WQ%mvv4FO#p&Ec~}4d

literal 0
HcmV?d00001

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fd3fb3a..7689d25 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -3,12 +3,17 @@ import { RouteObject } from 'react-router-dom';
 import PrivateRoutes from 'components/PrivateRoutes';
 import HomeScreen from 'screens/Home';
 import LoginScreen from 'screens/Login';
+import ResetPasswordScreen from 'screens/ResetPassword';
 
 const routes: RouteObject[] = [
   {
     path: '/login',
     element: <LoginScreen />,
   },
+  {
+    path: '/reset-password',
+    element: <ResetPasswordScreen />,
+  },
   {
     element: <PrivateRoutes />,
     children: [
diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx
index a891d12..1cbd43e 100644
--- a/src/screens/Login/index.tsx
+++ b/src/screens/Login/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 
 import { AxiosError } from 'axios';
 
@@ -116,9 +116,9 @@ function LoginScreen() {
           />
 
           {/* TODO: Change to React Router Link when implement #17 */}
-          <a href="." className="absolute left-60 top-5 my-8 text-white opacity-50">
+          <Link to="/reset-password" className="absolute left-60 top-5 my-8 text-white opacity-50">
             {t('login.forgot-password')}
-          </a>
+          </Link>
         </div>
         <Button text={t('login.sign-in')} className="h-14 w-80" type="submit" disabled={formSubmitted} />
       </form>
diff --git a/src/screens/ResetPassword/index.tsx b/src/screens/ResetPassword/index.tsx
new file mode 100644
index 0000000..f03fcbe
--- /dev/null
+++ b/src/screens/ResetPassword/index.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { AxiosError } from 'axios';
+
+import AuthAdapter from 'adapters/authAdapter';
+import bellNotification from 'assets/images/bell-notification.png';
+import Button from 'components/Button';
+import Input from 'components/Input';
+import { isEmailValid } from 'helpers/validators';
+
+function ResetPasswordScreen() {
+  const { t } = useTranslation('translation');
+
+  const [email, setEmail] = useState('');
+  const [errors, setErrors] = useState<string[]>([]);
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
+  const [formSubmitted, setFormSubmitted] = useState(false);
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const performPasswordReset = async () => {
+    try {
+      const resetPasswordResponse = await AuthAdapter.resetPassword(email);
+
+      console.log(resetPasswordResponse);
+    } catch (error) {
+      let errorMessage = t('login.generic-server-error');
+
+      if (error instanceof Error) {
+        errorMessage = (error as AxiosError).response?.data?.errors[0]?.detail || error.cause || errorMessage;
+      }
+      setErrors([errorMessage]);
+    } finally {
+      setFormSubmitted(false);
+      setShowSuccessMessage(true);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const formErrors = [];
+
+    if (!isEmailValid(email)) {
+      formErrors.push(t('login.invalid-email'));
+    }
+
+    setErrors(formErrors);
+
+    if (formErrors.length === 0) {
+      performPasswordReset();
+      setFormSubmitted(true);
+    } else {
+      setShowSuccessMessage(false);
+    }
+  };
+
+  return (
+    <>
+      <p data-test-id="login-header" className="mb-8 w-80 text-center text-white opacity-50">
+        {t('reset-password.header')}
+      </p>
+
+      <div className="errors">
+        {errors.length > 0 &&
+          errors.map((error) => {
+            return (
+              <p className="text-center text-red-700" key={error.toString()}>
+                {error}
+              </p>
+            );
+          })}
+      </div>
+
+      {showSuccessMessage && (
+        <div className="my-3 w-80 rounded-xl bg-stone-800/60 p-5">
+          <img className="inline-block" src={bellNotification} alt="notification-bell"></img>
+          <p className="inline-block p-3 font-semibold text-white">{t('reset-password.check-email')}</p>
+          <p className="right-10 inline-block p-3 text-white opacity-60">{t('reset-password.success-message')}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <Input
+          name="email"
+          label={t('login.email')}
+          type="text"
+          value={email}
+          className="my-3 block h-14 w-80"
+          onInputChange={handleEmailChange}
+        />
+        <Button text={t('reset-password.recovery-email')} className="h-14 w-80" type="submit" disabled={formSubmitted} />
+      </form>
+    </>
+  );
+}
+
+export default ResetPasswordScreen;