finished designs for forgot password frontend

TritonSE · Jun 4, 2024 · ba74db1 · ba74db1
1 parent c50601b
commit ba74db1
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 2,142 deletions.
diff --git a/admin-portal-frontend/src/app/forgot-password/page.tsx b/admin-portal-frontend/src/app/forgot-password/page.tsx
@@ -5,13 +5,18 @@ import { useRouter } from "next/navigation";
 import React, { ChangeEvent, FormEvent, useState } from "react";
 
 import { auth } from "../firebase-config";
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function ForgotPassword() {
   const [email, setEmail] = useState<string>("");
   const [message, setMessage] = useState<string>("");
   const [error, setError] = useState<string>("");
   const router = useRouter();
 
+  const buttonStyle =
+  email ? { backgroundColor: "#00629B" } : { backgroundColor: "#6C6C6C", cursor: "not-allowed" };
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
   };
@@ -32,32 +37,49 @@ export default function ForgotPassword() {
 
   return (
     <div className="flex items-center justify-center min-h-screen">
-      <div className="w-full max-w-md bg-white shadow-xl rounded-lg p-8 flex flex-col items-center mx-4">
-        <h2 className="text-blue-950 text-lg sm:text-xl font-bold my-4">Reset Your Password</h2>
+      <div className="w-full max-w-md bg-white shadow-xl rounded-lg p-8 flex flex-col mx-4">
+        <a className="text-sm self-start text-sky-700 mt-4" href="/">
+          <FontAwesomeIcon className=" mr-2"icon={faArrowLeft}/>
+          {" "}
+          Back to Sign In
+        </a>
+        <h2 className="text-blue-950 text-lg sm:text-xl font-bold mt-4">Reset Your Password</h2>
+        <div className="block text-sm sm:text-base font-medium my-2">
+          Enter the email associated with your account and we'll send you a link to reset your password. 
+        </div>
         <form onSubmit={handleSubmit} className="w-full">
           <div className="mb-4">
-            <label htmlFor="email" className="block text-sm sm:text-base font-medium mb-1">
+            <label htmlFor="email" className="block text-sm sm:text-base font-medium my-2">
               Email
             </label>
             <input
-              className="mb-4 p-2 border w-full rounded border-black border-opacity-40"
+              className="mb-2 p-2 border w-full rounded border-black border-opacity-40"
               type="email"
               name="email"
               id="email"
-              placeholder="Enter your email address"
+              placeholder="Enter an email"
               onChange={handleInputChange}
               required
             />
           </div>
-          <button type="submit" className="p-2 w-full text-white font-bold rounded bg-dfm-blue">
-            Send Reset Email
+          <button 
+            type="submit" 
+            style={buttonStyle} 
+            className={`mb-2 p-2 w-full text-white font-medium rounded ${email ? "hover:bg-blue-700" : ""}`}
+            disabled={!email}
+            >
+            Continue
           </button>
           {message && <p className="text-green-600 text-sm mt-2">{message}</p>}
           {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
         </form>
-        <a className="text-sm self-start text-sky-700 mt-4" href="/">
-          Back to Login
-        </a>
+        <div className="mt-1 self-start text-sm">
+          <span>Don&apos;t have an account?</span>
+          <a className="text-sky-700" href="/signup">
+            {" "}
+            Create a new account.
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/admin-portal-frontend/src/app/globals.css b/admin-portal-frontend/src/app/globals.css
@@ -19,6 +19,9 @@
 body {
   color: rgb(var(--foreground-rgb));
   background-color: rgb(var(--background-start-rgb));
+  a {
+    text-decoration: none;
+  }
 }
 
 @layer utilities {