solved issue #88

Vin205 · Oct 6, 2024 · 11cc9f9 · 11cc9f9
1 parent 733bcf8
commit 11cc9f9
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 7 deletions.
diff --git a/frontend/src/components/Login/Login.js b/frontend/src/components/Login/Login.js
@@ -6,6 +6,7 @@ function Login() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
   const handleLogin = (e) => {
@@ -32,6 +33,11 @@ function Login() {
     navigate('/signup');
   };
 
+  const handleOnClick = () => { // Define the handleOnClick function
+    setShowPassword(!showPassword); // Toggle the showPassword state
+  };
+
+
   return (
     <div className="container mt-5 justify-content-center" style={{ height: 'auto'}}>
       <div className="row justify-content-center" style={{ width: '100%'}}>
@@ -56,15 +62,26 @@ function Login() {
                 <div className="mb-3">
                   <label htmlFor="password" className="form-label">Password:</label>
                   <input
-                    type="password"
+                    type={showPassword ? 'text' : 'password'} // Toggle input type based on showPassword state
                     id="password"
                     className="form-control"
                     placeholder="Enter your password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
                   />
-                </div>
+                  <button onClick={handleOnClick} style={{
+                    backgroundColor: '#fff',
+                    position: 'relative',
+                    bottom: '30px',
+                    left: '550px',
+                    height: '1px'
+                  }}>
+                    <span style={{ color: "black", position: 'relative', bottom: '10px' }} className="material-symbols-outlined">
+                      {showPassword ? 'visibility_off' : 'visibility'} {/* Toggle eye icon based on showPassword state */}
+                    </span>
+                  </button>
+                  </div>
                 <button type="submit" className="btn btn-primary w-100">Login</button>
               </form>
               <p className="mt-3 text-center">
@@ -83,4 +100,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default Login;
diff --git a/frontend/src/components/Signup/Signup.js b/frontend/src/components/Signup/Signup.js
@@ -11,6 +11,18 @@ function Signup() {
   const [successMessage, setSuccessMessage] = useState('');
   const navigate = useNavigate();
 
+const [showPassword, setShowPassword] = useState(false);
+const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+const handlePasswordVisibility = () => {
+  setShowPassword(!showPassword);
+};
+
+const handleConfirmPasswordVisibility = () => {
+  setShowConfirmPassword(!showConfirmPassword);
+};
+
+
   const handleSignup = (e) => {
     e.preventDefault();
 
@@ -25,7 +37,7 @@ function Signup() {
     }
 
     // Replace with actual signup logic
-    console.log('Signing up with:', { username, email, password: '****' });
+    console.log('Signing up with:', { username, email, password: '' });
 
     // Clear fields and show success message
     setUsername('');
@@ -78,26 +90,48 @@ function Signup() {
                 <div className="mb-3">
                   <label htmlFor="password" className="form-label">Password:</label>
                   <input
-                    type="password"
+                    type={showPassword ? 'text' : 'password'}
                     id="password"
                     className="form-control"
                     placeholder="Enter your password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
                   />
+                  <button onClick={handlePasswordVisibility} style={{
+                    backgroundColor: '#fff',
+                    position: 'relative',
+                    bottom: '30px',
+                    left: '550px',
+                    height: '1px'
+                  }}>
+                    <span style={{ color: "black", position: 'relative', bottom: '10px' }} className="material-symbols-outlined">
+                      {showPassword ? 'visibility_off' : 'visibility'} {/* Toggle eye icon based on showPassword state */}
+                    </span>
+                  </button>
                 </div>
                 <div className="mb-3">
                   <label htmlFor="confirmPassword" className="form-label">Confirm Password:</label>
                   <input
-                    type="password"
+                    type={showConfirmPassword ? 'text' : 'password'}
                     id="confirmPassword"
                     className="form-control"
                     placeholder="Confirm your password"
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     required
                   />
+                  <button onClick={handleConfirmPasswordVisibility} style={{
+                    backgroundColor: '#fff',
+                    position: 'relative',
+                    bottom: '30px',
+                    left: '550px',
+                    height: '1px'
+                  }}>
+                    <span style={{ color: "black", position: 'relative', bottom: '10px' }} className="material-symbols-outlined">
+                      {showConfirmPassword ? 'visibility_off' : 'visibility'} {/* Toggle eye icon based on showPassword state */}
+                    </span>
+                  </button>
                 </div>
                 <button type="submit" className="btn btn-primary w-100">Sign Up</button>
               </form>
@@ -111,4 +145,4 @@ function Signup() {
     </div>
   );
 }
-export default Signup;
+export default Signup;