From 70c39387574613b0436f515a0e2644a18e348c56 Mon Sep 17 00:00:00 2001
From: dharshib <Dharshib.8@gmail.com>
Date: Sun, 23 Jun 2024 15:35:17 +0530
Subject: [PATCH] add resetpassword feature

---
 src/App.js                                    |  8 ++
 src/Components/Login.css                      |  9 ++
 src/Components/Login.js                       |  1 +
 .../auth/resetPassword/EmailVerification.js   | 51 +++++++++++
 .../auth/resetPassword/OTPVerification.js     | 89 +++++++++++++++++++
 .../auth/resetPassword/ResetPassword.js       | 76 ++++++++++++++++
 .../auth/resetPassword/resetPassword.css      | 43 +++++++++
 7 files changed, 277 insertions(+)
 create mode 100644 src/Components/auth/resetPassword/EmailVerification.js
 create mode 100644 src/Components/auth/resetPassword/OTPVerification.js
 create mode 100644 src/Components/auth/resetPassword/ResetPassword.js
 create mode 100644 src/Components/auth/resetPassword/resetPassword.css

diff --git a/src/App.js b/src/App.js
index 36d8c551..3e474f48 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,9 @@ import Profile from "./Components/Profile/profile";
 import Licensing from "./Components/footer_section/Legal/Licensing";
 import TermsConditions from "./Components/footer_section/Legal/TermsandConditions";
 import PrivacyPolicy from "./Components/footer_section/Legal/PrivacyPolicy";
+import EmailVerification from "./Components/auth/resetPassword/EmailVerification";
+import OTPVerification from "./Components/auth/resetPassword/OTPVerification";
+import ResetPassword from "./Components/auth/resetPassword/ResetPassword";
 
 function App() {
   return (
@@ -48,6 +51,11 @@ function App() {
           <Route path="/projects" element={<MyProjects />} />
           <Route path="/new/project" element={<NewProject />} />
           <Route path="/profile" element={<Profile />} />
+          <Route path="/verifyEmail" element={<EmailVerification />} />
+          <Route path="/otpVerification/:email" element={<OTPVerification />} />
+          <Route path="/resetPassword/:email" element={<ResetPassword />} />
+
+          
 
         </Routes>
         <Footer />
diff --git a/src/Components/Login.css b/src/Components/Login.css
index 35166b12..989a1a7a 100644
--- a/src/Components/Login.css
+++ b/src/Components/Login.css
@@ -317,6 +317,15 @@ form.sign-in-form {
 .container1.sign-up-mode .right-panel {
   pointer-events: all;
 }
+.reset-link {
+  display: inline-block;
+  color: #00ced1;
+  cursor: pointer;
+  margin: 15px 0;
+}
+.reset-link:hover {
+  text-decoration: underline;
+}
 
 @media (max-width: 870px) {
   .container {
diff --git a/src/Components/Login.js b/src/Components/Login.js
index 32ff6d01..ae3bb1ab 100644
--- a/src/Components/Login.js
+++ b/src/Components/Login.js
@@ -103,6 +103,7 @@ const LogIn = () => {
                 {showPassword ? <i className="fas fa-eye-slash"></i> : <i className="fas fa-eye"></i>}
               </button>
             </div>
+            <p><Link to="/verifyEmail" className='reset-link'>Forgot password?</Link></p>
             <input type="submit" value="Login" className="btn1 solid" />
             <p className="social-text">Connect with Social Magic</p>
             <div className="social-media">
diff --git a/src/Components/auth/resetPassword/EmailVerification.js b/src/Components/auth/resetPassword/EmailVerification.js
new file mode 100644
index 00000000..fd9eadd1
--- /dev/null
+++ b/src/Components/auth/resetPassword/EmailVerification.js
@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import './resetPassword.css'
+import { Link, useNavigate } from 'react-router-dom';
+
+function EmailVerification() {
+
+    const [email, setEmail] = useState("")
+    const [error, setError] = useState(null);
+    const navigate = useNavigate()
+
+    const onInputChange = (e) => {
+        setEmail(e.target.value)
+    }
+
+
+    const onVerify = (e) => {
+        e.preventDefault();
+
+        console.log(email);
+        
+        // call backend api  to verify the email
+        // if sucess, redirect to otp verification
+        // navigate(`/otpVerification/${email}`)
+        // if fails, update the error => setError()
+
+    }
+
+    return (
+        <section className="auth-container">
+
+            <form onSubmit={onVerify}>
+                <h2>Email verification</h2>
+                <p>To secure your account security, we need to verify your identity.</p>
+                <p>Please enter the email registered with us.</p>
+                { error && <div className='err'>{error}</div> }
+                <input 
+                    type='email'
+                    placeholder='Enter your email'
+                    value={email}
+                    onChange={onInputChange}
+                />
+                <button>Verify Email</button>
+                <p><Link to="/login" className='link'>Back to Login</Link></p>
+            </form>
+
+        </section>
+    );
+
+}
+
+export default EmailVerification;
\ No newline at end of file
diff --git a/src/Components/auth/resetPassword/OTPVerification.js b/src/Components/auth/resetPassword/OTPVerification.js
new file mode 100644
index 00000000..c6e79f2d
--- /dev/null
+++ b/src/Components/auth/resetPassword/OTPVerification.js
@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import './resetPassword.css'
+import { useNavigate, useParams } from 'react-router-dom';
+
+function OTPVerification() {
+
+    const { email } = useParams()
+    const [OTP, setOTP] = useState("")
+    const [timeRemaining, setTimeRemaining] = useState(60);
+    const [noOfAttempts, setNoOfAttempts] = useState(1);
+    const [error, setError] = useState(null);
+    const navigate = useNavigate()
+
+    const onInputChange = (e) => {
+        setOTP(e.target.value)
+    }
+
+    useEffect(() => {
+        if (noOfAttempts > 3) {
+            return;
+        }
+        if (timeRemaining >= 1) {
+            setTimeout(() => {
+                setTimeRemaining(prev => prev - 1)
+            }, 1000)
+        }
+    }, [noOfAttempts, timeRemaining])
+
+    const onResend = () => {
+
+        // call backend api to send otp again
+        // in backend if number of attempts <= 3 send the otp or
+        // send a bad request.
+        // if success,
+        // update the no of attempts and time remaining 
+        // setNoOfAttempts()
+        // setTimeRemaining(60)
+        // if fails, update the error => setError()
+    }
+
+
+    const onVerify = (e) => {
+        e.preventDefault();
+
+        console.log(OTP);
+
+        // call backend api  to verify the otp
+        // if otp is valid redirect to reset password
+        // navigate(`/resetPassword/${email}`)
+        // if fails, update the error => setError()
+
+    }
+
+    return (
+        <section className="auth-container">
+
+            <form onSubmit={onVerify}>
+                <h2>OTP verification</h2>
+                <p>In order to verify your identity, we have sent an one time code to your email <strong>{email}</strong>. </p>
+                
+                { error && <div className='err'>{error}</div> }
+                
+                <input
+                    type='text'
+                    placeholder='Enter OTP code'
+                    value={OTP}
+                    onChange={onInputChange}
+                />
+                <button>Verify Code</button>
+                <p>
+                    {
+                        noOfAttempts > 3 ? <>You have tried maximum no of attempts.</> :
+
+                            timeRemaining >= 1 ? <>Resend OTP in {timeRemaining} seconds</> :
+
+                                <span 
+                                    className='link'
+                                    onClick={onResend}
+                                >Resend OTP</span>
+                    }
+                </p>
+            </form>
+
+        </section>
+    );
+
+}
+
+export default OTPVerification;
\ No newline at end of file
diff --git a/src/Components/auth/resetPassword/ResetPassword.js b/src/Components/auth/resetPassword/ResetPassword.js
new file mode 100644
index 00000000..05dfeee9
--- /dev/null
+++ b/src/Components/auth/resetPassword/ResetPassword.js
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import './resetPassword.css'
+import { useNavigate, useParams } from 'react-router-dom';
+
+function ResetPassword() {
+
+    const { email } = useParams()
+    const [inputs, setInputs] = useState({ password: "", cpassword: "" })
+    const [error, setError] = useState(null);
+    const navigate = useNavigate()
+
+    const onInputChange = (e) => {
+        const { name, value } = e.target;
+
+        setInputs(prev => {
+            return { ...prev, [name]: value }
+        });
+    }
+
+    const onReset = (e) => {
+        e.preventDefault()
+        console.log(inputs)
+        const err = validateInputs(inputs)
+        setError(err)
+        if (err) {
+            return
+        }
+        console.log("valid")
+
+        // call backend api to reset password
+        // is success redirect to login
+        // navigate("/login")
+        // if fails, set the error by => setError()
+    }
+
+    return (
+        <section className="auth-container">
+
+            <form onSubmit={onReset}>
+                <h2>Reset Password</h2>
+                <p>Your account has been verified! You can reset your password.</p>
+                {error && <div className='err'>{error}</div>}
+                <input
+                    type='password'
+                    placeholder='Enter new password'
+                    name='password'
+                    value={inputs.password}
+                    onChange={onInputChange}
+                />
+                <input
+                    type='password'
+                    placeholder='Re enter new password'
+                    name='cpassword'
+                    value={inputs.cpassword}
+                    onChange={onInputChange}
+                />
+                <button>Reset password</button>
+            </form>
+
+        </section>
+    );
+
+}
+
+export default ResetPassword;
+
+
+function validateInputs({password, cpassword}) {
+    if (password.trim().length < 6) {
+        return "Password must have atleat 6 characters!"
+    }
+    if (password.trim() !== cpassword.trim()) {
+        return "Passwords do not match"
+    }
+    return null
+}
\ No newline at end of file
diff --git a/src/Components/auth/resetPassword/resetPassword.css b/src/Components/auth/resetPassword/resetPassword.css
new file mode 100644
index 00000000..a92cee33
--- /dev/null
+++ b/src/Components/auth/resetPassword/resetPassword.css
@@ -0,0 +1,43 @@
+.auth-container {
+    min-height: 100dvh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+}
+.auth-container form {
+    width: 100%;
+    max-width: 400px;
+    padding: 15px;
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgb(60, 59, 71);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+}
+.auth-container form p {
+    text-align: center;
+    color: rgb(186, 186, 186);
+    font-size: 14px;
+}
+.auth-container form button {
+    width: 100%;
+}
+p .link {
+    color: #cf00a3;
+    cursor: pointer;
+}
+p .link:hover {
+    text-decoration: underline;
+}
+.err {
+    width: 100%;
+    padding: 7px;
+    text-align: center;
+    border-radius: 4px;
+    color: red;
+    background-color: rgb(255, 230, 230);
+    font-size: 14px;
+}
\ No newline at end of file