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
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:
parent
d656f75f35
commit
d52aaaba9c
@ -178,6 +178,43 @@
|
||||
background: var(--primary);
|
||||
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>
|
||||
{% endblock %}
|
||||
|
||||
@ -214,6 +251,11 @@
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="waiting-indicator" id="waitingIndicator">
|
||||
<span class="waiting-dot"></span>
|
||||
<span id="waitingText">Oczekuje na aktywacje...</span>
|
||||
</div>
|
||||
|
||||
<div class="timer-box">
|
||||
<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"/>
|
||||
@ -236,13 +278,19 @@
|
||||
(function() {
|
||||
const email = '{{ email }}';
|
||||
const checkUrl = '{{ url_for("auth.check_verification_status") }}?email=' + encodeURIComponent(email);
|
||||
const indicator = document.getElementById('waitingIndicator');
|
||||
const waitingText = document.getElementById('waitingText');
|
||||
|
||||
function checkVerification() {
|
||||
fetch(checkUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
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(() => {});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user