Merge pull request #508 from Vaishnavi7854/updatedForgotPassword

Updated the UI of Forgot Password Component
Vin205 · Oct 26, 2024 · ae59178 · ae59178
2 parents 46af2b7 + 9233cc9
commit ae59178
Showing 1 changed file with 68 additions and 50 deletions.
diff --git a/frontend/src/components/ForgotPassword/ForgotPassword.js b/frontend/src/components/ForgotPassword/ForgotPassword.js
@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { auth } from "../Firebase/firebase";
 import { sendPasswordResetEmail } from "firebase/auth";
+import Footer from "../Footer/Footer";
 
-function Login() {
+function ForgotPassword() {
     const [email, setEmail] = useState("");
     const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState("");
@@ -25,58 +26,75 @@ function Login() {
     };
 
     return (
-        <div
-            className="container mt-5 justify-content-center"
-            style={{ height: "auto" }}
-        >
-            <div className="row justify-content-center" style={{ width: "100%" }}>
-                <div className="col-md-6">
-                    <div className="card shadow">
-                        <div className="card-body">
-                            <h2 className="text-center mb-4">Forgot Password</h2>
-                            {error && <div className="alert alert-danger">{error}</div>}
-                            {message && (
-                                <div className="alert alert-success">{message}</div>
-                            )}
-                            <form onSubmit={handleResetPassword}>
-                                <div className="mb-3">
-                                    <label htmlFor="email" className="form-label">
-                                        Email:
-                                    </label>
-                                    <input
-                                        type="email"
-                                        id="email"
-                                        className="form-control"
-                                        placeholder="Enter your email"
-                                        value={email}
-                                        onChange={(e) => setEmail(e.target.value)}
-                                        required
-                                    />
-                                </div>
-                                <button
-                                    type="submit"
-                                    className="btn btn-primary w-100"
-                                    disabled={loading}
-                                >
-                                    {loading ? "Requesting..." : "Request password link"}
-                                </button>
-                            </form>
-                            <p className="mt-3 text-center">
-                                Remember you password {" "}
-                                <span
-                                    className="text-primary"
-                                    style={{ cursor: "pointer" }}
-                                    onClick={() => navigate("/login")}
-                                >
-                                    Login
-                                </span>
-                            </p>
+        <>
+            <style>
+                {`.forgot-password-card {
+                    background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
+                    border-radius: 20px;
+                    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+                    padding: 2rem;
+                    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+                }
+                .forgot-password-card:hover {
+                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
+                    transform: translateY(-5px);
+                }
+                .forgot-password-title {
+                    font-size: 1.8rem;
+                    font-weight: bold;
+                    color: #333;
+                    text-align: center;
+                    margin-bottom: 1.5rem;
+                }
+                `}
+            </style>
+            <div className="container mx-auto mt-5 flex flex-col justify-center bg-cyan-500" style={{ height: "auto" }}>
+                <div className="row justify-content-center" style={{ width: "100%" }}>
+                    <div className="col-md-6">
+                        <div className="card shadow forgot-password-card">
+                            <div className="card-body">
+                                <h2 className="forgot-password-title">Forgot Password</h2>
+                                {error && <div className="alert alert-danger">{error}</div>}
+                                {message && <div className="alert alert-success">{message}</div>}
+                                <form onSubmit={handleResetPassword}>
+                                    <div className="mb-3">
+                                        <label htmlFor="email" className="form-label">Email:</label>
+                                        <input
+                                            type="email"
+                                            id="email"
+                                            className="form-control"
+                                            placeholder="Enter your email"
+                                            value={email}
+                                            onChange={(e) => setEmail(e.target.value)}
+                                            required
+                                        />
+                                    </div>
+                                    <button
+                                        type="submit"
+                                        className="btn btn-primary w-100"
+                                        disabled={loading}
+                                    >
+                                        {loading ? "Requesting..." : "Request password link"}
+                                    </button>
+                                </form>
+                                <p className="mt-3 text-center">
+                                    Remember your password?{" "}
+                                    <span
+                                        className="text-primary"
+                                        style={{ cursor: "pointer" }}
+                                        onClick={() => navigate("/login")}
+                                    >
+                                        Login
+                                    </span>
+                                </p>
+                            </div>
                         </div>
                     </div>
                 </div>
+                <Footer />
             </div>
-        </div>
+        </>
     );
 }
 
-export default Login;
+export default ForgotPassword;