Skip to content

Commit

Permalink
Merge pull request #113 from VinayLodhi1712/feature/passwordshowhide
Browse files Browse the repository at this point in the history 
Feature/passwordshowhide : Done Password toggle button added for show and hide password #93 done
  • Loading branch information
@Luson045
Luson045 authored Oct 3, 2024
2 parents c613b8f + d7d2605 commit ea8ba03
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 116 deletions.
261 changes: 146 additions & 115 deletions client/src/modules/common/AuthForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useLocation } from "react-router-dom";
import Navbar from "../common/Navbar";
import { notify } from "./notification";
import "../../styles/Login.css";
import { FaEye, FaEyeSlash } from "react-icons/fa";

const AuthPage = () => {
const [isRegistering, setIsRegistering] = useState(false);
Expand All @@ -21,6 +22,11 @@ const AuthPage = () => {
backend: {},
});

const [showPassword, setShowPassword] = useState({
password: false,
confirmPassword: false,
});

const location = useLocation();

useEffect(() => {
Expand Down Expand Up @@ -128,151 +134,176 @@ const AuthPage = () => {
}
};

const togglePasswordVisibility = (field) => {
setShowPassword((prev) => ({
...prev,
[field]: !prev[field],
}));
};

return (
<div className="login_background">
<Navbar />
<div className="auth-maindiv">
<div className="auth-container">
<h2>{isRegistering ? "Register" : "Login"}</h2>
<form onSubmit={handleSubmit} className="auth-form">
<div className="form-section">
<label>User Type:</label>
<select name="type" value={formData.type} onChange={handleChange}>
<option value="user">User</option>
<option value="hospital">Hospital</option>
</select>
</div>
<div className="auth-container">
<h2>{isRegistering ? "Register" : "Login"}</h2>
<form onSubmit={handleSubmit} className="auth-form">
<div className="form-section">
<label>User Type:</label>
<select name="type" value={formData.type} onChange={handleChange}>
<option value="user">User</option>
<option value="hospital">Hospital</option>
</select>
</div>

{isRegistering && (
<>
<div className="form-section">
<label>Name:</label>
<input
type="text"
{isRegistering && (
<>
<div className="form-section">
<label>Name:</label>
<input
type="text"
name="name"
placeholder="John Doe"
value={formData.name}
onChange={handleChange}
required
/>
{errors.frontend.name && (
<span className="error">{errors.frontend.name}</span>
)}
{errors.backend.name && (
<span className="error">{errors.backend.name}</span>
)}
</div>
value={formData.name}
onChange={handleChange}
required
/>
{errors.frontend.name && (
<span className="error">{errors.frontend.name}</span>
)}
{errors.backend.name && (
<span className="error">{errors.backend.name}</span>
)}
</div>

<div className="form-section">
<label>Phone:</label>
<input
type="text"
<div className="form-section">
<label>Phone:</label>
<input
type="text"
name="phone"
placeholder="9898989898"
value={formData.phone}
onChange={handleChange}
required
/>
{errors.frontend.phone && (
<span className="error">{errors.frontend.phone}</span>
)}
{errors.backend.phone && (
<span className="error">{errors.backend.phone}</span>
)}
</div>
value={formData.phone}
onChange={handleChange}
required
/>
{errors.frontend.phone && (
<span className="error">{errors.frontend.phone}</span>
)}
{errors.backend.phone && (
<span className="error">{errors.backend.phone}</span>
)}
</div>

<div className="form-section">
<label>Address:</label>
<input
type="text"
<div className="form-section">
<label>Address:</label>
<input
type="text"
name="address"
placeholder="Enter address"
value={formData.address}
onChange={handleChange}
required
/>
{errors.frontend.address && (
<span className="error">{errors.frontend.address}</span>
)}
{errors.backend.address && (
<span className="error">{errors.backend.address}</span>
)}
</div>
</>
)}

<div className="form-section">
<label>Email:</label>
<input
type="email"
name="email"
placeholder="[email protected]"
value={formData.email}
onChange={handleChange}
required
/>
{errors.frontend.email && (
<span className="error">{errors.frontend.email}</span>
value={formData.address}
onChange={handleChange}
required
/>
{errors.frontend.address && (
<span className="error">{errors.frontend.address}</span>
)}
{errors.backend.address && (
<span className="error">{errors.backend.address}</span>
)}
</div>
</>
)}
{errors.backend.email && (
<span className="error">{errors.backend.email}</span>
)}
</div>

<div className="form-section">
<label>Password:</label>
<input
type="password"
name="password"
placeholder="password"
value={formData.password}
onChange={handleChange}
required
/>
{errors.frontend.password && (
<span className="error">{errors.frontend.password}</span>
)}
{errors.backend.password && (
<span className="error">{errors.backend.password}</span>
)}
</div>

{isRegistering && (
<div className="form-section">
<label>Confirm Password:</label>
<label>Email:</label>
<input
type="password"
name="confirmPassword"
placeholder="Re-type password"
value={formData.confirmPassword}
type="email"
name="email"
placeholder="[email protected]"
value={formData.email}
onChange={handleChange}
required
/>
{errors.frontend.confirmPassword && (
<span className="error">
{errors.frontend.confirmPassword}
</span>
{errors.frontend.email && (
<span className="error">{errors.frontend.email}</span>
)}
{errors.backend.confirmPassword && (
<span className="error">{errors.backend.confirmPassword}</span>
{errors.backend.email && (
<span className="error">{errors.backend.email}</span>
)}
</div>
)}

<div className="register-button">
<div className="form-section">
<label>Password:</label>
<div className="password-wrapper">
<input
type={showPassword.password ? "text" : "password"}
name="password"
placeholder="password"
value={formData.password}
onChange={handleChange}
required
/>
<button
type="button"
onClick={() => togglePasswordVisibility("password")}
className="password-toggle"
>
{showPassword.password ? <FaEyeSlash /> : <FaEye />}
</button>
</div>
{errors.frontend.password && (
<span className="error">{errors.frontend.password}</span>
)}
{errors.backend.password && (
<span className="error">{errors.backend.password}</span>
)}
</div>

{isRegistering && (
<div className="form-section">
<label>Confirm Password:</label>
<div className="password-wrapper">
<input
type={showPassword.confirmPassword ? "text" : "password"}
name="confirmPassword"
placeholder="Re-type password"
value={formData.confirmPassword}
onChange={handleChange}
required
/>
<button
type="button"
onClick={() => togglePasswordVisibility("confirmPassword")}
className="password-toggle"
>
{showPassword.confirmPassword ? <FaEyeSlash /> : <FaEye />}
</button>
</div>
{errors.frontend.confirmPassword && (
<span className="error">
{errors.frontend.confirmPassword}
</span>
)}
{errors.backend.confirmPassword && (
<span className="error">{errors.backend.confirmPassword}</span>
)}
</div>
)}

<div className="register-button">
<button type="submit" className="auth-button">
{isRegistering ? "Register" : "Login"}
</button>
</div>
</form>
</form>

<button onClick={toggleAuthMode} className="toggle-auth-button">
{isRegistering
? "Already have an account? Login"
: "Don't have an account? Register"}
</button>
</div>
<button onClick={toggleAuthMode} className="toggle-auth-button">
{isRegistering
? "Already have an account? Login"
: "Don't have an account? Register"}
</button>
</div>
</div>
</div>
);
};
Expand Down
28 changes: 27 additions & 1 deletion client/src/styles/Login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,30 @@

background: radial-gradient(circle, pink, white);

}
}

.password-wrapper {
position: relative;
display: flex;
align-items: center;
}

.password-wrapper input {
width: 100%;
padding-right: 2.5rem; /* Leave space for the icon */
}

.password-toggle {
position: absolute;
right: 0.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: gray;
}

.password-toggle:hover {
background-color: white; /* Change background color on hover */

}

0 comments on commit ea8ba03

Please sign in to comment.