Updated the UI of Forgot Password Component

Vin205 · Oct 25, 2024 · 9233cc9 · 9233cc9
1 parent ee0360d
commit 9233cc9
Show file tree

Hide file tree

Showing 70 changed files with 80 additions and 409 deletions.
diff --git a/.github/workflows/Greetings.yml b/.github/workflows/Greetings.yml
diff --git a/frontend/public/favicons/android-chrome-192x192.png b/frontend/public/favicons/android-chrome-192x192.png
diff --git a/frontend/public/favicons/android-chrome-512x512.png b/frontend/public/favicons/android-chrome-512x512.png
diff --git a/frontend/public/favicons/apple-touch-icon.png b/frontend/public/favicons/apple-touch-icon.png
diff --git a/frontend/public/images/1.jpg b/frontend/public/images/1.jpg
diff --git a/frontend/public/images/11.jpg b/frontend/public/images/11.jpg
diff --git a/frontend/public/images/12.jpg b/frontend/public/images/12.jpg
diff --git a/frontend/public/images/13.jpg b/frontend/public/images/13.jpg
diff --git a/frontend/public/images/2.jpg b/frontend/public/images/2.jpg
diff --git a/frontend/public/images/3.jpg b/frontend/public/images/3.jpg
diff --git a/frontend/public/images/4.jpg b/frontend/public/images/4.jpg
diff --git a/frontend/public/images/4.png b/frontend/public/images/4.png
diff --git a/frontend/public/images/5.jpg b/frontend/public/images/5.jpg
diff --git a/frontend/public/images/50.jpg b/frontend/public/images/50.jpg
diff --git a/frontend/public/images/51.jpg b/frontend/public/images/51.jpg
diff --git a/frontend/public/images/52.jpg b/frontend/public/images/52.jpg
diff --git a/frontend/public/images/8.jpg b/frontend/public/images/8.jpg
diff --git a/frontend/public/images/aboutimage.png b/frontend/public/images/aboutimage.png
diff --git a/frontend/public/images/b.jpg b/frontend/public/images/b.jpg
diff --git a/frontend/public/images/b14.png b/frontend/public/images/b14.png
diff --git a/frontend/public/images/b2.jpg b/frontend/public/images/b2.jpg
diff --git a/frontend/public/images/b5.jpg b/frontend/public/images/b5.jpg
diff --git a/frontend/public/images/b6.jpg b/frontend/public/images/b6.jpg
diff --git a/frontend/public/images/b8.png b/frontend/public/images/b8.png
diff --git a/frontend/public/images/c.png b/frontend/public/images/c.png
diff --git a/frontend/public/images/contact.jpg b/frontend/public/images/contact.jpg
diff --git a/frontend/public/images/d.jpg b/frontend/public/images/d.jpg
diff --git a/frontend/public/images/e.jpg b/frontend/public/images/e.jpg
diff --git a/frontend/public/images/e1.png b/frontend/public/images/e1.png
diff --git a/frontend/public/images/e11.jpg b/frontend/public/images/e11.jpg
diff --git a/frontend/public/images/e13.jpg b/frontend/public/images/e13.jpg
diff --git a/frontend/public/images/e14.jpg b/frontend/public/images/e14.jpg
diff --git a/frontend/public/images/e15.png b/frontend/public/images/e15.png
diff --git a/frontend/public/images/e16.png b/frontend/public/images/e16.png
diff --git a/frontend/public/images/e17.jpg b/frontend/public/images/e17.jpg
diff --git a/frontend/public/images/e18pg.jpg b/frontend/public/images/e18pg.jpg
diff --git a/frontend/public/images/e2.png b/frontend/public/images/e2.png
diff --git a/frontend/public/images/e20.jpg b/frontend/public/images/e20.jpg
diff --git a/frontend/public/images/e21.jpg b/frontend/public/images/e21.jpg
diff --git a/frontend/public/images/e22.jpg b/frontend/public/images/e22.jpg
diff --git a/frontend/public/images/e23.jpg b/frontend/public/images/e23.jpg
diff --git a/frontend/public/images/e23jpg.jpg b/frontend/public/images/e23jpg.jpg
diff --git a/frontend/public/images/e3.png b/frontend/public/images/e3.png
diff --git a/frontend/public/images/e4.png b/frontend/public/images/e4.png
diff --git a/frontend/public/images/e5.png b/frontend/public/images/e5.png
diff --git a/frontend/public/images/e6.png b/frontend/public/images/e6.png
diff --git a/frontend/public/images/e7.png b/frontend/public/images/e7.png
diff --git a/frontend/public/images/e8.png b/frontend/public/images/e8.png
diff --git a/frontend/public/images/e9.png b/frontend/public/images/e9.png
diff --git a/frontend/public/images/f1.png b/frontend/public/images/f1.png
diff --git a/frontend/public/images/f2.png b/frontend/public/images/f2.png
diff --git a/frontend/public/images/f3.png b/frontend/public/images/f3.png
diff --git a/frontend/public/images/g1.png b/frontend/public/images/g1.png
diff --git a/frontend/public/images/g2.png b/frontend/public/images/g2.png
diff --git a/frontend/public/images/g3.png b/frontend/public/images/g3.png
diff --git a/frontend/public/images/l.jpg b/frontend/public/images/l.jpg
diff --git a/frontend/public/images/l.png b/frontend/public/images/l.png
diff --git a/frontend/public/images/log.jpg b/frontend/public/images/log.jpg
diff --git a/frontend/public/images/login.jpg b/frontend/public/images/login.jpg
diff --git a/frontend/public/images/m.png b/frontend/public/images/m.png
diff --git a/frontend/public/images/moon.png b/frontend/public/images/moon.png
diff --git a/frontend/public/images/r.jpg b/frontend/public/images/r.jpg
diff --git a/frontend/public/images/r.png b/frontend/public/images/r.png
diff --git a/frontend/public/images/sun.png b/frontend/public/images/sun.png
diff --git a/frontend/public/images/w.jpg b/frontend/public/images/w.jpg
diff --git a/frontend/public/images/y.png b/frontend/public/images/y.png
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;