Add link to forgot password in login page

Author: njxue

frontend/src/presentation/components/LoginForm/LoginForm.module.css

@@ -10,10 +10,10 @@
     gap: 4vh;
     align-items: center;
     padding: 10vh;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     background: #fff;
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     height: 100%;
     width: 100%;
 }
@@ -62,3 +62,7 @@
 .button:hover {
     background-color: #555;
 }
+
+.forgotPasswordLink {
+    margin-right: auto;
+}

frontend/src/presentation/components/LoginForm/LoginForm.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styles from "./LoginForm.module.css";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { handleError } from "presentation/utils/errorHandler";
 import { useAuth } from "domain/context/AuthContext";
 
@@ -52,6 +52,9 @@ export const LoginForm: React.FC = () => {
                 <button type="submit" className={styles.button}>
                     Sign In
                 </button>
+                <Link to="/forgot-password" className={styles.forgotPasswordLink}>
+                    Forgot password?
+                </Link>
             </form>
         </div>
     );

frontend/src/presentation/pages/layout/Layout.module.css

@@ -47,4 +47,4 @@
     font-size: 24px;
     margin-left: 8px;
     cursor: pointer;
-}
+}