Modified Error Handling

aadarsh012 · Sep 19, 2021 · 60465c4 · 60465c4
1 parent 5125a61
commit 60465c4
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 33 deletions.
diff --git a/client/src/Components/ForgotPassword/ForgotPassword.js b/client/src/Components/ForgotPassword/ForgotPassword.js
@@ -7,6 +7,12 @@ const ForgotPassword = (props) => {
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    if (localStorage.getItem("authToken")) {
+      props.history.push("/");
+    }
+  }, [props.history]);
+
   const sendEmailHandler = async (event) => {
     event.preventDefault();
     const config = {
@@ -17,6 +23,7 @@ const ForgotPassword = (props) => {
 
     try {
       const data = await axios.post("/api/auth/forgotpassword", { email }, config);
+      localStorage.setItem("resetToken", data.data.resetToken);
       setSuccess(data.data);
     } catch (error) {
       console.log(error.response.data.error);

diff --git a/client/src/Components/Login/Login.js b/client/src/Components/Login/Login.js
@@ -8,6 +8,12 @@ const Login = (props) => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    if (localStorage.getItem("authToken")) {
+      props.history.push("/");
+    }
+  }, [props.history]);
+
   const loginHandler = async (event) => {
     event.preventDefault();
 

diff --git a/client/src/Components/Register/Register.js b/client/src/Components/Register/Register.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import classes from "./Register.module.css";
 
@@ -9,9 +9,11 @@ const Register = (props) => {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
 
-  // useEffect(()=>{
-  //     if(!localStorage.getItem(authToken))
-  // },[props.history])
+  useEffect(() => {
+    if (localStorage.getItem("authToken")) {
+      props.history.push("/");
+    }
+  }, [props.history]);
 
   const registerHandler = async (event) => {
     event.preventDefault();
@@ -27,9 +29,7 @@ const Register = (props) => {
       setTimeout(() => {
         setError("");
       }, 2000);
-    }
-
-    if (password.length < 8) {
+    } else if (password.length < 8) {
       setError("Weak Password");
       setTimeout(() => {
         setError("");
@@ -44,7 +44,9 @@ const Register = (props) => {
       );
       localStorage.setItem("authToken", data.token);
       props.history.push("/");
-    } catch (error) {}
+    } catch (error) {
+      setError(error.response.data.error);
+    }
   };
 
   return (

diff --git a/client/src/Components/ResetPassword/ResetPassword.js b/client/src/Components/ResetPassword/ResetPassword.js
@@ -1,12 +1,21 @@
 import axios from "axios";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import classes from "./ResetPassword.module.css";
 
 const ResetPassword = (props) => {
   const [password, setPassword] = useState("");
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
+  const [errorPage, setErrorPage] = useState(false);
+
+  useEffect(() => {
+    const resetToken = localStorage.getItem("resetToken");
+    if (resetToken !== props.match.params.resetToken) {
+      localStorage.removeItem("resetToken");
+      setErrorPage(true);
+    }
+  }, [props.match]);
 
   const resetPasswordHandler = async (event) => {
     event.preventDefault();
@@ -24,8 +33,8 @@ const ResetPassword = (props) => {
         config
       );
       setSuccess(data.data);
+      localStorage.removeItem("resetToken");
     } catch (error) {
-      console.log(error.response.data.error);
       setSuccess(false);
       setError("Weak Password!");
       setTimeout(() => {
@@ -34,25 +43,36 @@ const ResetPassword = (props) => {
     }
   };
 
-  return (
-    <div className={classes.resetPassword}>
-      <span className={classes.error}>{error}</span>
-      <form onSubmit={resetPasswordHandler} className={classes.resetPassword__form}>
-        <label htmlFor="resetPassword__password">New Password</label>
-        <input
-          id="resetPassword__password"
-          type="text"
-          value={password}
-          onChange={(event) => setPassword(event.target.value)}
-        />
-        {success && (
-          <span>
-            Successful! <Link to="/login">Login</Link>
-          </span>
-        )}
-        <button type="submit">Reset</button>
-      </form>
-    </div>
-  );
+  if (errorPage) {
+    return (
+      <div className={classes.errorPage}>
+        <h2>IT SEEMS LIKE THE PASSWORD HAS ALREADY BEEN RESET.</h2>
+        <p>
+          Please <Link to="/login">click here</Link> to Login.
+        </p>
+      </div>
+    );
+  } else {
+    return (
+      <div className={classes.resetPassword}>
+        <span className={classes.error}>{error}</span>
+        <form onSubmit={resetPasswordHandler} className={classes.resetPassword__form}>
+          <label htmlFor="resetPassword__password">New Password</label>
+          <input
+            id="resetPassword__password"
+            type="text"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+          />
+          {success && (
+            <span>
+              Successful! <Link to="/login">Login</Link>
+            </span>
+          )}
+          <button type="submit">Reset</button>
+        </form>
+      </div>
+    );
+  }
 };
 export default ResetPassword;
diff --git a/client/src/Components/ResetPassword/ResetPassword.module.css b/client/src/Components/ResetPassword/ResetPassword.module.css
@@ -60,6 +60,21 @@
   font-weight: bold;
 }
 
+.errorPage {
+  display: flex;
+  flex-direction: column;
+  color: #5cdb95;
+  background-color: #edf5e1;
+  box-shadow: inset 4px 4px 8px 0 rgba(255, 255, 255, 1), 2px 2px 5px 0 rgba(0, 0, 0, 0.5);
+  height: 10em;
+  padding: 30px;
+  border-radius: 10px;
+}
+
+.errorPage p {
+  color: #05305c;
+}
+
 @media (max-width: 500px) {
   .resetPassword {
     width: 17em;
@@ -77,4 +92,9 @@
     width: 10em;
     margin: 15px 0;
   }
+
+  .errorPage {
+    width: 15em;
+    height: 14em;
+  }
 }
diff --git a/client/src/Components/routes/PrivateRoute.js b/client/src/Components/routes/PrivateRoute.js
@@ -1,4 +1,4 @@
-import { Switch, Route, Redirect } from "react-router-dom";
+import { Route, Redirect } from "react-router-dom";
 import Private from "../PrivateComponent/Private";
 
 const PrivateRoute = (props) => {

diff --git a/controllers/auth.js b/controllers/auth.js
@@ -70,7 +70,7 @@ exports.forgotPassword = async (req, res, next) => {
         subject: "Reset Password",
         text: message
       });
-      res.status(200).json({ success: true, data: "Email Sent" });
+      res.status(200).json({ success: true, resetToken });
     } catch (error) {
       user.resetPasswordToken = undefined;
       user.resetPasswordDate = undefined;
@@ -105,7 +105,7 @@ exports.resetPassword = async (req, res, next) => {
 
     await user.save();
 
-    res.status(200).json({ success: true, data: "Password has been reset." });
+    res.status(200).json({ success: true, data: "password Reset" });
   } catch (error) {
     next(error);
   }