login and signup validation sucessfully added

AbhiDiva96 · Jun 2, 2024 · bf8f105 · bf8f105
1 parent c67605a
commit bf8f105
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 32 deletions.
diff --git a/src/components/login/LoginSignup.css b/src/components/login/LoginSignup.css
@@ -117,4 +117,13 @@
     font-size: 16px;
 }
 
-}
+}
+
+/* LoginSignup.css */
+
+.error-message {
+    color: red;
+    font-size: 12px;
+    margin-top: 5px;
+  }
+
diff --git a/src/components/login/LoginSignup.jsx b/src/components/login/LoginSignup.jsx
@@ -2,56 +2,80 @@ import React, { useState } from "react";
 import "./LoginSignup.css";
 
 const LoginSignup = () => {
-
-
   const [state, setState] = useState("Sign Up");
   const [formData, setFormData] = useState({
     username: "",
     password: "",
     email: "",
   });
+  const [errors, setErrors] = useState({});
+
   const handleSignInWithGoogle = () => {
     window.location.href = 'http://localhost:4000/auth/google'; // Redirect to the server route for Google OAuth login
   };
 
-  const ChangeHandler=(e)=>{
-    setFormData({...formData,[e.target.name]:e.target.value})
+  const ChangeHandler = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+    setErrors({ ...errors, [e.target.name]: '' }); // Clear error message on field change
   }
+
+  const validateForm = () => {
+    let formErrors = {};
+    if (state === "Sign Up" && !formData.username) formErrors.username = "Please fill in your name.";
+    if (!formData.email) formErrors.email = "Please fill in your email.";
+    if (!formData.password) formErrors.password = "Please fill in your password.";
+    return formErrors;
+  }
+
+  const handleSubmit = async () => {
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+    } else {
+      if (state === "Login") {
+        login();
+      } else {
+        signup();
+      }
+    }
+  };
+
   const login = async () => {
-    console.log("logim");
+    console.log("login");
     let responseData;
-    await fetch("http://localhost:4000/login",{
+    await fetch("http://localhost:4000/login", {
       method: "POST",
-      headers:{
-        Accept:'application/form-data',
-        'content-Type':'application/json'
+      headers: {
+        Accept: 'application/form-data',
+        'content-Type': 'application/json'
       },
       body: JSON.stringify(formData)
-    }).then((response)=>response.json()).then((data)=>responseData=data)
-    if(responseData.success){
-      localStorage.setItem('auth-token',responseData.token);
+    }).then((response) => response.json()).then((data) => responseData = data);
+    if (responseData.success) {
+      localStorage.setItem('auth-token', responseData.token);
       window.location.replace("/")
     }
-    else{
+    else {
       alert(responseData.errors);
     }
   };
+
   const signup = async () => {
     console.log("Sign up");
     let responseData;
-    await fetch("http://localhost:4000/signup",{
+    await fetch("http://localhost:4000/signup", {
       method: "POST",
-      headers:{
-        Accept:'application/form-data',
-        'content-Type':'application/json'
+      headers: {
+        Accept: 'application/form-data',
+        'content-Type': 'application/json'
       },
       body: JSON.stringify(formData)
-    }).then((response)=>response.json()).then((data)=>responseData=data)
-    if(responseData.success){
-      localStorage.setItem('auth-token',responseData.token);
+    }).then((response) => response.json()).then((data) => responseData = data);
+    if (responseData.success) {
+      localStorage.setItem('auth-token', responseData.token);
       window.location.replace("/")
     }
-    else{
+    else {
       alert(responseData.errors);
     }
   };
@@ -62,17 +86,24 @@ const LoginSignup = () => {
         <h1>{state}</h1>
         <div className="loginsignup-fields">
           {state === "Sign Up" ? (
-            <input type="text" name="username" value={formData.username} onChange={ChangeHandler} placeholder="Your Name" />
+            <div>
+              <input type="text" name="username" value={formData.username} onChange={ChangeHandler} placeholder="Your Name" />
+              {errors.username && <p style={{width:'200px'}}className="error-message">{errors.username}</p>}
+            </div>
           ) : (
             <></>
           )}
-          <input type="email" name="email" value={formData.email} onChange={ChangeHandler} placeholder="Email Address" />
-          <input type="password" name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />
+          <div>
+            <input type="email" name="email" value={formData.email} onChange={ChangeHandler} placeholder="Email Address" />
+            {errors.email && <p style={{width:'200px'}}className="error-message">{errors.email}</p>}
+          </div>
+          <div>
+            <input type="password" name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />
+            {errors.password && <p style={{width:'200px'}}className="error-message">{errors.password}</p>}
+          </div>
         </div>
         <button
-          onClick={() => {
-            state === "Login" ? login() : signup();
-          }}
+          onClick={handleSubmit}
         >
           Continue
         </button>
@@ -82,6 +113,7 @@ const LoginSignup = () => {
             <span
               onClick={() => {
                 setState("Login");
+                setErrors({});
               }}
             >
               Login Here
@@ -93,17 +125,18 @@ const LoginSignup = () => {
             <span
               onClick={() => {
                 setState("Sign Up");
+                setErrors({});
               }}
             >
               Click Here
             </span>
           </p>
         )}
         <div>
-        {state === "Sign Up" ?
-        <button onClick={handleSignInWithGoogle}>Sign Up with Google</button>:
-        <button onClick={handleSignInWithGoogle}>Login with Google</button>}
-      </div>
+          {state === "Sign Up" ?
+            <button onClick={handleSignInWithGoogle}>Sign Up with Google</button> :
+            <button onClick={handleSignInWithGoogle}>Login with Google</button>}
+        </div>
 
       </div>
     </div>