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:
Radosław Gierwiało
2025-12-06 18:34:03 +01:00
parent 54e8e513ee
commit 640ca2a563
2 changed files with 95 additions and 22 deletions

View File

@@ -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;
}