Users should be presented with a reset password link

.eslintrc.json

@@ -16,9 +16,10 @@
     "airbnb-typescript",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
     "plugin:storybook/recommended"
   ],
-  "ignorePatterns":["jest.config.ts"],
+  "ignorePatterns": ["jest.config.ts"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
@@ -58,7 +59,12 @@
     "no-param-reassign": "off",
     "arrow-body-style": ["warn", "as-needed"],
     "jsx-a11y/no-static-element-interactions": "off",
-    "max-len": "off"
+    "max-len": "off",
+    "jsx-a11y/label-has-associated-control": ["error", {
+      "required": {
+        "some": ["nesting", "id"]
+      }
+    }]
   },
   "settings": {
     "react": {
@@ -72,4 +78,4 @@
       }
     }
   }
-}
+}

package.json

@@ -10,6 +10,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@reduxjs/toolkit": "^2.2.5",
     "axios": "^1.7.2",
     "html-webpack-plugin": "^5.6.0",

src/App.scss

@@ -0,0 +1 @@
+@import '../src/styles/reset-password.scss'

src/App.tsx

@@ -2,11 +2,12 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import AppRouter from './router';
+import './App.scss';
 
 const App: React.FC = () => (
   <Router>
     <AppRouter />
   </Router>
 );
 
-export default App;
+export default App;

src/components/layout/Footer.tsx

@@ -14,4 +14,4 @@ const Footer: React.FC = () => (
   </footer>
 );
 
-export default Footer;
+export default Footer;

src/components/layout/Header.tsx

@@ -14,4 +14,4 @@ const Header: React.FC = () => (
   </header>
 );
 
-export default Header;
+export default Header;

src/index.tsx

@@ -10,4 +10,4 @@ root.render(
   <Provider store={store}>
     <App />
   </Provider>
-);
+);

src/pages/LandingPage.tsx

@@ -4,7 +4,6 @@ import { loadWelcomeMessage } from '../store/features/welcomeSlice';
 import { IWelcomeMessage } from '../utils/types/store';
 import Header from '../components/layout/Header';
 import Footer from '../components/layout/Footer';
-import '../styles/LandingPage.scss';
 
 const LandingPage: React.FC = () => {
   const dispatch = useAppDispatch();

src/pages/NotFound.tsx

@@ -7,4 +7,4 @@ const NotFound: React.FC = () => (
   </main>
 );
 
-export default NotFound;
+export default NotFound;

src/pages/ResetPassword.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import Button from '../components/buttons/Button';
+import Header from '../components/layout/Header';
+
+const ResetPassword: React.FC = () => {
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const newPasswordVisibility = () => {
+    setShowNewPassword(!showNewPassword);
+  };
+
+  const confirmPasswordVisibility = () => {
+    setShowConfirmPassword(!showConfirmPassword);
+  };
+
+  return (
+    <main>
+      <Header />
+      <form className="resetPasswordForm">
+        <h1>Reset password</h1>
+        <div className="input-containers">
+          <div className="input-container1">
+            <input
+              type={showNewPassword ? 'text' : 'password'}
+              className="input-field1"
+              placeholder=" "
+              id="newPassword"
+              required
+            />
+            <label className="input-label1" htmlFor="newPassword">New password</label>
+            <button
+              type="button"
+              className="toggle-password"
+              onClick={newPasswordVisibility}
+            >
+              <FontAwesomeIcon icon={showNewPassword ? faEyeSlash : faEye} />
+            </button>
+          </div>
+          <div className="input-container2">
+            <input
+              type={showConfirmPassword ? 'text' : 'password'}
+              className="input-field2"
+              placeholder=" "
+              id="confirmPassword"
+              required
+            />
+            <label className="input-label2" htmlFor="confirmPassword">Confirm password</label>
+            <button
+              type="button"
+              className="toggle-password"
+              onClick={confirmPasswordVisibility}
+            >
+              <FontAwesomeIcon icon={showConfirmPassword ? faEyeSlash : faEye} />
+            </button>
+          </div>
+          <div className="reset-Button">
+            <Button title="Reset Password" />
+          </div>
+        </div>
+      </form>
+    </main>
+  );
+};
+
+export default ResetPassword;

src/pages/SendResetPasswordLink.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Header from '../components/layout/Header';
+import Button from '../components/buttons/Button';
+
+const SendResetPasswordLink:React.FC = () => (
+  <>
+    <Header />
+    <main>
+      <div className="resetPassword-Container">
+        <h1>Get Reset Password Link</h1>
+
+        <div className="input-container">
+          <input type="email" className="input-field" placeholder=" " id="email" required />
+          <label className="input-label" htmlFor="email">Email Address</label>
+        </div>
+
+        <div className="reset-Button">
+          <Button title="Get Reset Link" />
+        </div>
+
+      </div>
+    </main>
+  </>
+);
+
+export default SendResetPasswordLink;

src/router.tsx

@@ -5,17 +5,20 @@ import { Route, Routes } from 'react-router-dom';
 import LandingPage from './pages/LandingPage';
 import Login from './pages/Login';
 import NotFound from './pages/NotFound';
+import SendResetPasswordLink from './pages/SendResetPasswordLink';
+import ResetPassword from './pages/ResetPassword';
 
 const AppRouter: React.FC = () => {
   return (
     <div>
       <Routes>
         <Route path="/" element={<LandingPage />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/send-reset-password-link" element={<SendResetPasswordLink />} />
+        <Route path="/reset-password" element={<ResetPassword />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
     </div>
   );
 };
-
-export default AppRouter;
+export default AppRouter;

src/styles/colors.scss

@@ -0,0 +1,4 @@
+$primary-color: #FF6D18;
+$button-bg-color: #FF6D18;
+$button-text-color: #fff;
+$text-color: #000000;