maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: prominent password match indicator and disabled button styling
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Large red/green indicator below confirm field shows match status.
Submit button is visually gray when disabled, turns green with shadow
when all conditions met.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-02-23 10:28:06 +01:00
parent 3886147bd7
commit ca2da75d3b
1 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
templates/auth/reset_password.html
View File

@ -173,13 +173,70 @@
width: 100%; width: 100%;
} }
.btn-success { /* Match indicator under confirm field */
background-color: var(--success); .match-indicator {
color: white; display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 10px 14px;
border-radius: var(--radius);
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
} }
.btn-success:hover { .match-indicator.mismatch {
background: #fef2f2;
border: 2px solid #ef4444;
color: #dc2626;
}
.match-indicator.match {
background: #f0fdf4;
border: 2px solid #22c55e;
color: #16a34a;
}
.match-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: white;
flex-shrink: 0;
}
.match-indicator.mismatch .match-icon {
background: #ef4444;
}
.match-indicator.match .match-icon {
background: #22c55e;
}
/* Submit button states */
#submitBtn {
background-color: #d1d5db;
color: #9ca3af;
cursor: not-allowed;
transition: all 0.3s ease;
}
#submitBtn:not(:disabled) {
background-color: var(--success);
color: white;
cursor: pointer;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}
#submitBtn:not(:disabled):hover {
background-color: #059669; background-color: #059669;
box-shadow: 0 6px 16px rgba(22, 163, 74, 0.5);
} }
.auth-footer { .auth-footer {
@ -298,10 +355,6 @@
<span class="checkbox-icon"></span> <span class="checkbox-icon"></span>
<span class="requirement-text">Cyfra</span> <span class="requirement-text">Cyfra</span>
</li> </li>
<li id="req-match">
<span class="checkbox-icon"></span>
<span class="requirement-text">Hasła są identyczne</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -331,10 +384,14 @@
</svg> </svg>
</button> </button>
</div> </div>
<div id="matchIndicator" class="match-indicator" style="display:none;">
<span class="match-icon" id="matchIcon"></span>
<span class="match-text" id="matchText"></span>
</div>
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button type="submit" class="btn btn-success btn-lg btn-full" id="submitBtn" disabled> <button type="submit" class="btn btn-lg btn-full" id="submitBtn" disabled>
Zmien haslo Zmien haslo
</button> </button>
</div> </div>
@ -431,6 +488,10 @@
} }
} }
const matchIndicator = document.getElementById('matchIndicator');
const matchIcon = document.getElementById('matchIcon');
const matchText = document.getElementById('matchText');
function checkFormValidity() { function checkFormValidity() {
const password = passwordInput.value; const password = passwordInput.value;
const confirm = passwordConfirm.value; const confirm = passwordConfirm.value;
@ -441,7 +502,21 @@
const hasDigit = /\d/.test(password); const hasDigit = /\d/.test(password);
const passwordsMatch = password === confirm && confirm.length > 0; const passwordsMatch = password === confirm && confirm.length > 0;
updateRequirement('req-match', passwordsMatch); // Show match indicator only when user started typing confirmation
if (confirm.length > 0) {
matchIndicator.style.display = 'flex';
if (passwordsMatch) {
matchIndicator.className = 'match-indicator match';
matchIcon.textContent = '\u2713';
matchText.textContent = 'Hasła są identyczne';
} else {
matchIndicator.className = 'match-indicator mismatch';
matchIcon.textContent = '\u2717';
matchText.textContent = 'Hasła nie są identyczne';
}
} else {
matchIndicator.style.display = 'none';
}
submitBtn.disabled = !(hasLength && hasUpper && hasLower && hasDigit && passwordsMatch); submitBtn.disabled = !(hasLength && hasUpper && hasLower && hasDigit && passwordsMatch);
} }