Merge pull request #652 from srilekha279/login-page-update

Fixed the login page
Priyaaa1 · Jul 30, 2024 · 746cf1c · 746cf1c
2 parents 83b4e09 + 3b15528
commit 746cf1c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
  "rimraf": "^5.0.7",
  "svgo": "^3.3.2",
  "tailwindcss": "^3.4.3",
- "vite": "^5.3.3",
+ "vite": "^5.3.5",
  "webpack": "^5.92.1",
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^5.0.4"

diff --git a/src/Components/Login/Login.css b/src/Components/Login/Login.css
@@ -3,7 +3,7 @@
  justify-content: center;
  align-items: center;
  height: auto;
- margin-top: 100px; /* Adjust this value to move the login box down */
+ margin-top: 100px;
  padding-bottom: 10px;
 }
 
@@ -12,93 +12,94 @@
  background-image: linear-gradient(315deg, #ffffff 0%, #91a6ff 74%);
  width: 400px;
  margin: 0 auto;
- padding: 10px 10px 20px 10px;
+ padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.login-container > input {
- outline: none;
-}
-
-.input {
- padding: 20px;
- border: none;
-}
-
 h2 {
  font-size: 28px;
- margin-bottom: 10px;
- padding: 20px;
+ margin-bottom: 20px;
+ padding: 10px 0;
+}
+
+.input-container {
+ width: 100%;
+ position: relative;
+ margin-bottom: 5px;
 }
 
 input {
  width: 100%;
- margin-bottom: 20px;
- padding: 8px;
+ padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-sizing: border-box;
- border: none;
  outline: none;
 }
 
 button {
- width: 50%;
- padding: 20px;
+ width: 90%;
+ padding: 15px;
  border: none;
  border-radius: 10px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
+ font-size: 16px;
+ margin-bottom: 20px;
 }
 
 button:hover {
- background-color: #007bff;
+ background-color: #0056b3;
 }
 
 .login-container p {
  margin-top: 10px;
  text-align: center;
- padding-bottom: 20px;
+ padding-bottom: 10px;
 }
 
 p a {
  color: #007bff;
  text-decoration: none;
- margin-top: 12px;
 }
 
 p a:hover {
  color: #0056b3;
  text-decoration: underline;
 }
+
 .googlelogin {
- padding: 20px;
- margin-top: 12px;
- width: 50%;
- text-align: center;
- margin-left: 50px;
+ width: 100%;
+ justify-content: center;
+ margin-top: 10px;
+}
+
+.googlelogin button:hover,
+.googlelogin div:hover {
+ background-color: #dbedf8b9;
+ transition: background-color 0.3s ease;
 }
+
 .warningmsg {
- margin: 0;
+ margin: 3px 0;
  text-align: left;
- padding: 0;
- margin-bottom: 10px;
- /* justify-content: center;
- display: flex; */
+ color: red;
 }
+
 .eye {
  float: right;
- left:-9px;
+ left: -9px;
  margin-top: -45px;
+ margin-right: 10px;
  position: relative;
- z-index: 2;
- width: 14px; /*Desired width*/
- height: 14px; /*Desired height*/
+ width: 14px;
+ height: 14px;
 }
+
 .eye:hover {
  color: #007efc;
  cursor: pointer;

diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx
@@ -1,25 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate, NavLink } from "react-router-dom";
 import "./Login.css";
 import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; /*react libraries used 
- for importing eye icon */
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 
-
-const Login = () => {
+const Login = ({ isDarkMode }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [warnings, setWarnings] = useState({ email: "", password: "" });
- const [isVisible,setVisible] = useState(false);
+ const [isVisible, setVisible] = useState(false);
  const navigate = useNavigate();
 
- const eye = <FontAwesomeIcon icon={faEye} />;
-
- const togglePasswordFunction=()=>{ //toggling function for visibility of password
- setVisible(isVisible?false:true)
+ const togglePasswordFunction = () => {
+ setVisible(!isVisible);
  };
-
 
  const handleLogin = () => {
  let emailWarning = "";
@@ -57,12 +52,21 @@ const Login = () => {
  console.log("Login Failed");
  };
 
+ useEffect(() => {
+ const body = document.body;
+ if (isDarkMode) {
+ body.classList.add("dark-mode");
+ } else {
+ body.classList.remove("dark-mode");
+ }
+ }, [isDarkMode]);
+
  return (
  <GoogleOAuthProvider clientId="784513715091-aa0p18bmv854re0amstgj2up3656cvsd.apps.googleusercontent.com">
  <div className="login-outerContainer">
- <div className="login-container">
+ <div className={`login-container ${isDarkMode ? 'dark-mode' : ''}`}>
  <h2>Login</h2>
- <div className="input">
+ <div className="input-container">
  <input
  type="email"
  placeholder="Email"
@@ -78,41 +82,48 @@ const Login = () => {
  }}
  />
  {warnings.email && <p style={{ color: "red" }} className="warningmsg">{warnings.email}</p>}
-
- <input
- type={ isVisible ? "text" : "password"}
- className="pasword"
- placeholder="Password"
- value={password}
- onChange={(e) => {
- setPassword(e.target.value);
- setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" }));
- }}
- onBlur={(e) => {
- if (!e.target.value) {
- setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" }));
- }
- }}
- />
- <i className = "eye" onClick={togglePasswordFunction}>{eye}</i>{" "} 
 
+ <div className="input-container">
+ <input
+ type={isVisible ? "text" : "password"}
+ placeholder="Password"
+ value={password}
+ onChange={(e) => {
+ setPassword(e.target.value);
+ setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" }));
+ }}
+ onBlur={(e) => {
+ if (!e.target.value) {
+ setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" }));
+ }
+ }}
+ />
+ <i
+ className="eye"
+ onClick={togglePasswordFunction}
+ >
+ <FontAwesomeIcon icon={isVisible ? faEyeSlash : faEye} />
+ </i>
+ </div>
  {warnings.password && <p style={{ color: "red" }} className="warningmsg">{warnings.password}</p>}
  </div>
  <button onClick={handleLogin}>Login</button>
  <p>
- Forgot your password? <NavLink to="/forgot-password">Reset it here</NavLink>
- </p>
+  Forgot your password? <NavLink to="/forgot-password">Reset it here</NavLink>
+  </p>
  <p>
  Don't have an account? <NavLink to="/signup">Sign up</NavLink>
  </p>
- <GoogleLogin
- onSuccess={handleGoogleLoginSuccess}
- onError={handleGoogleLoginFailure}
- />
+ <div className="googlelogin">
+ <GoogleLogin
+ onSuccess={handleGoogleLoginSuccess}
+ onError={handleGoogleLoginFailure}
+ />
+ </div>
  </div>
  </div>
  </GoogleOAuthProvider>
  );
 };
 
-export default Login;
+export default Login;