Skip to content

Implement Strong Password Validation with Character and Length Requirements #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anushreekhatri028-coder wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implement Strong Password Validation with Character and Length Requirements #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions frontend/src/components/auth/ForgotPassword.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ export default function ForgotPassword() {

const navigate = useNavigate();

const isPasswordValid = newPassword.length >= 6;
const passwordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/;

const isPasswordValid = passwordRegex.test(newPassword);
const isOtpValid = otp.trim().length === 6;

const doPasswordsMatch =
Expand Down Expand Up @@ -80,7 +83,9 @@ export default function ForgotPassword() {
}

if (!isPasswordValid) {
setError("Password must be at least 6 characters");
setError(
"Password must be at least 8 characters long and include an uppercase letter, lowercase letter, number, and special character."
);
return;
}

Expand Down Expand Up @@ -253,7 +258,7 @@ export default function ForgotPassword() {
<input
type="password"
autoComplete="new-password"
minLength={6}
minLength={8}
aria-invalid={newPassword.length > 0 && !isPasswordValid}
value={newPassword}
id="new-password"
Expand All @@ -268,12 +273,21 @@ export default function ForgotPassword() {
role="alert"
className="text-xs font-black uppercase tracking-widest text-red-600"
>
Password must be at least 6 characters
Password must be at least 8 characters and contain uppercase,
lowercase, number, and special character
</p>
)}
</div>
</div>

<div className="text-xs text-gray-600 space-y-1">
<p>✓ Minimum 8 characters</p>
<p>✓ One uppercase letter (A-Z)</p>
<p>✓ One lowercase letter (a-z)</p>
<p>✓ One number (0-9)</p>
<p>✓ One special character (!@#$%^&*)</p>
</div>

<div className="flex flex-col space-y-3">
<label
htmlFor="confirm-password"
Expand Down
29 changes: 24 additions & 5 deletions frontend/src/pages/SignupPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,16 @@ export default function SignupPage() {

const { login, isAuthenticated } = useAuth();
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const isPasswordValid = password.length >= 6;
const [searchParams] = useSearchParams();
const passwordChecks = {
length: password.length >= 8,
uppercase: /[A-Z]/.test(password),
lowercase: /[a-z]/.test(password),
number: /\d/.test(password),
special: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
};

const isPasswordValid = Object.values(passwordChecks).every(Boolean);
// Show GitHub OAuth errors forwarded from the callback
useEffect(() => {
const ghError = searchParams.get("githubAuthError") || searchParams.get("error");
Expand Down Expand Up @@ -59,7 +66,9 @@ export default function SignupPage() {
return;
}
if (!isPasswordValid) {
setError("Password must be at least 6 characters");
setError(
"Password must be at least 8 characters long and contain an uppercase letter, lowercase letter, number, and special character."
);
return;
}

Expand Down Expand Up @@ -201,17 +210,27 @@ export default function SignupPage() {
<input
type="password"
value={password}
minLength={6}
minLength={8}
onChange={(e) => setPassword(e.target.value)}
aria-invalid={password.length > 0 && !isPasswordValid}
className="w-full p-5 border-4 border-black rounded-none text-black font-bold focus:outline-none focus:ring-0 focus:border-gray-500"
placeholder="••••••••"
required
/>

<ul className="text-xs font-bold space-y-1 text-gray-600">
<li>{passwordChecks.length ? "✓" : "✗"} Minimum 8 characters</li>
<li>{passwordChecks.uppercase ? "✓" : "✗"} One uppercase letter</li>
<li>{passwordChecks.lowercase ? "✓" : "✗"} One lowercase letter</li>
<li>{passwordChecks.number ? "✓" : "✗"} One number</li>
<li>{passwordChecks.special ? "✓" : "✗"} One special character</li>
</ul>

<div className="min-h-[16px]">
{password && !isPasswordValid && (
<p role="alert" className="text-xs font-black uppercase tracking-widest text-red-600">
Password must be at least 6 characters
Password must be at least 8 characters and include uppercase,
lowercase, number, and special character
</p>
)}
</div>
Expand Down
Loading