Merge pull request #160 from nishant0708/pyq

[Feature Request]: Enhancing Ui of PYQ Section #152

env-example

@@ -0,0 +1 @@
+Server_Base_url="http://localhost:4000"  #it is example replace it with your server Url

src/components/login/LoginSignup.jsx

@@ -14,52 +14,17 @@ const LoginSignup = () => {
     password: "",
     email: "",
   });
-
-  const [errors, setErrors] = useState({
-    username: "",
-    password: "",
-    email: "",
-  });
-
   const handleSignInWithGoogle = () => {
-    window.location.href = 'http://localhost:4000/auth/google'; // Redirect to the server route for Google OAuth login
+    window.location.href = `${process.env.Server_Base_url}/auth/google`; // Redirect to the server route for Google OAuth login
   };
 
   const ChangeHandler = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
-    setErrors({ ...errors, [e.target.name]: "" });
-  };
-
-  const validate = () => {
-    let isValid = true;
-    const newErrors = {
-      username: "",
-      password: "",
-      email: "",
-    };
-
-    if (state === "Sign Up" && !formData.username) {
-      newErrors.username = "Please enter your name.";
-      isValid = false;
-    }
-    if (!formData.email) {
-      newErrors.email = "Please enter your email.";
-      isValid = false;
-    }
-    if (!formData.password) {
-      newErrors.password = "Please enter your password.";
-      isValid = false;
-    }
-
-    setErrors(newErrors);
-    return isValid;
   };
-
   const login = async () => {
-    if (!validate()) return;
     console.log("login");
     let responseData;
-    await fetch("http://localhost:4000/login", {
+    await fetch(`${process.env.Server_Base_url}/login`, {
       method: "POST",
       headers: {
         Accept: 'application/form-data',
@@ -76,73 +41,77 @@ const LoginSignup = () => {
     }
   };
   const signup = async () => {
-    if (!validate()) return;
     console.log("Sign up");
     let responseData;
-    await fetch("http://localhost:4000/signup", {
+    await fetch(`${process.env.Server_Base_url}/signup`, {
       method: "POST",
       headers: {
         Accept: 'application/form-data',
         'content-Type': 'application/json'
       },
       body: JSON.stringify(formData)
-    }).then((response) => response.json()).then((data) => responseData = data);
+    }).then((response) => response.json()).then((data) => responseData = data)
     if (responseData.success) {
       localStorage.setItem('auth-token', responseData.token);
-      window.location.replace("/");
-    } else {
+      window.location.replace("/")
+    }
+    else {
       alert(responseData.errors);
     }
   };
+
   return (
     <div className={`${theme=='dark'?"active":""} loginsignup`}>
 
-      <Link to="/" className="back-icon" style={{ position: 'absolute', top: '15px', left: '35px', fontSize: '42px' }}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="42"
-          height="42"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          style={{
+<Link to="/" className="back-icon" style={{ position: 'absolute', top: '15px', left: '35px', fontSize: '42px' }}>
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          width="42" 
+          height="42" 
+          fill="currentColor" 
+          viewBox="0 0 16 16" 
+          style={{ 
             fontWeight: 'bold',
-            position: 'fixed',
-            top: 20,
+            position: 'fixed', 
+            top: 20, 
             left: 20
           }}
         >
-          <path
-            fillRule="evenodd"
+          <path 
+            fillRule="evenodd" 
             d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"
           />
         </svg>
       </Link>
-
+      
       <div className="loginsignup-cointainer">
+
+
+
         <h1>{state}</h1>
         <div className="loginsignup-fields">
           {state === "Sign Up" ? (
             <>
               <p className="label-login">Name</p>
-              <input type="text" name="username" value={formData.username} onChange={ChangeHandler} placeholder="Your Name" />              {errors.username && <div className="error-message">{errors.username}</div>}</>
+              <input type="text" name="username" value={formData.username} onChange={ChangeHandler} placeholder="Your Name" /></>
           ) : (
             <></>
           )}
           <p className="label-login">Email</p>
           <input type="email" name="email" value={formData.email} onChange={ChangeHandler} placeholder="Email Address" />
-          {errors.email && <div className="error-message ">{errors.email}</div>}
+
           <p className="label-login">Password</p>
-          <input type={`${isVisible ? "text" : "password"}`} name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />          {errors.password && <div className="error-message">{errors.password}</div>}
-          {isVisible ? <FaEye color="white" className={`${state == 'Sign Up' ? "eye1" : "eye"}`} onClick={() => setIsVisible(false)} /> : <FaEyeSlash className={`${state == 'Sign Up' ? "eye1" : "eye"}`} color="white" onClick={() => setIsVisible(true)} />}
-        </div>
+          <input type={`${isVisible?"text":"password"}`} name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />
+          {isVisible?<FaEye color="white" className={`${state=='Sign Up'?"eye1":"eye"}`} onClick={()=>setIsVisible(false)} />:<FaEyeSlash className={`${state=='Sign Up'?"eye1":"eye"}`} color="white" onClick={()=>setIsVisible(true)}/>}
+          </div>
         <button
           onClick={() => {
             state === "Login" ? login() : signup();
           }}
         >
-
-
-          {state === "Login" ? "Login" : "Sign Up"}
+        
+          
+         {state === "Login" ? "Login" : "Sign Up"}
         </button>
         {state === "Sign Up" ? (
           <p className="loginsignup-login">
@@ -176,4 +145,4 @@ const LoginSignup = () => {
     </div>
   );
 };
-export default LoginSignup;
+export default LoginSignup;