feat(ui): improve password validation display with detailed requirements
- Enhance PasswordStrengthIndicator with visual checkmarks for each requirement - Add explicit validation for uppercase, lowercase, and number requirements - Show clear pass/fail indicators (CheckCircle/XCircle icons) for each criterion - Add front-end validation matching production password policy - Display specific error messages listing all missing requirements - Align with production standards (8+ chars, uppercase, lowercase, number)
This commit is contained in:
@@ -174,14 +174,29 @@ const RegisterPage = () => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
// Validation
|
||||
// Validation - passwords match
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
setError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validation - password requirements (production standards)
|
||||
const passwordErrors = [];
|
||||
if (formData.password.length < 8) {
|
||||
setError('Password must be at least 8 characters long');
|
||||
passwordErrors.push('at least 8 characters');
|
||||
}
|
||||
if (!/[A-Z]/.test(formData.password)) {
|
||||
passwordErrors.push('one uppercase letter');
|
||||
}
|
||||
if (!/[a-z]/.test(formData.password)) {
|
||||
passwordErrors.push('one lowercase letter');
|
||||
}
|
||||
if (!/[0-9]/.test(formData.password)) {
|
||||
passwordErrors.push('one number');
|
||||
}
|
||||
|
||||
if (passwordErrors.length > 0) {
|
||||
setError(`Password must contain ${passwordErrors.join(', ')}`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user