feat: Add waiting animation for email verification polling
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions

- Pulsing green dot with 'Oczekuje na aktywacje...' text
- Changes to 'Aktywowano! Przekierowuje...' when verified
- Visual feedback that page is actively checking
This commit is contained in:
Maciej Pienczyn 2026-02-02 19:32:35 +01:00
parent d656f75f35
commit d52aaaba9c

View File

@ -178,6 +178,43 @@
background: var(--primary); background: var(--primary);
color: white; color: white;
} }
.waiting-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background-color: #ecfdf5;
border: 1px solid #10b981;
border-radius: var(--radius);
margin-bottom: var(--spacing-md);
color: #065f46;
font-size: var(--font-size-xs);
}
.waiting-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.waiting-indicator.verified {
background-color: #d1fae5;
border-color: #059669;
}
.waiting-indicator.verified .waiting-dot {
animation: none;
background: #059669;
}
</style> </style>
{% endblock %} {% endblock %}
@ -214,6 +251,11 @@
</ol> </ol>
</div> </div>
<div class="waiting-indicator" id="waitingIndicator">
<span class="waiting-dot"></span>
<span id="waitingText">Oczekuje na aktywacje...</span>
</div>
<div class="timer-box"> <div class="timer-box">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
@ -236,13 +278,19 @@
(function() { (function() {
const email = '{{ email }}'; const email = '{{ email }}';
const checkUrl = '{{ url_for("auth.check_verification_status") }}?email=' + encodeURIComponent(email); const checkUrl = '{{ url_for("auth.check_verification_status") }}?email=' + encodeURIComponent(email);
const indicator = document.getElementById('waitingIndicator');
const waitingText = document.getElementById('waitingText');
function checkVerification() { function checkVerification() {
fetch(checkUrl) fetch(checkUrl)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.verified && data.redirect) { if (data.verified && data.redirect) {
window.location.href = data.redirect; indicator.classList.add('verified');
waitingText.textContent = 'Aktywowano! Przekierowuje...';
setTimeout(() => {
window.location.href = data.redirect;
}, 500);
} }
}) })
.catch(() => {}); .catch(() => {});