Maciej Pienczyn
d52aaaba9c
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
303 lines
8.2 KiB
HTML
303 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Rejestracja zakonczona - Norda Biznes Partner{% endblock %}
|
|
|
|
{% block container_class %}container-narrow{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.auth-container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-md) 0;
|
|
}
|
|
|
|
.auth-card {
|
|
background-color: var(--surface);
|
|
padding: var(--spacing-lg);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.success-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: linear-gradient(135deg, #10b981, #059669);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto var(--spacing-md);
|
|
animation: scaleIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
.success-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
color: white;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.success-subtitle {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--spacing-md);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.email-box {
|
|
background-color: #f0f9ff;
|
|
border: 2px solid #0ea5e9;
|
|
border-radius: var(--radius);
|
|
padding: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.email-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #0ea5e9;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.email-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.email-info {
|
|
text-align: left;
|
|
}
|
|
|
|
.email-label {
|
|
font-size: var(--font-size-xs);
|
|
color: #0369a1;
|
|
}
|
|
|
|
.email-address {
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: #0c4a6e;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.steps-box {
|
|
background-color: var(--background);
|
|
border-radius: var(--radius);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
margin-bottom: var(--spacing-sm);
|
|
text-align: left;
|
|
}
|
|
|
|
.steps-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.steps-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.step-number {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--primary);
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.timer-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm);
|
|
background-color: #fef3c7;
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--spacing-md);
|
|
color: #92400e;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.timer-box svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.resend-section {
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.resend-text {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 2px solid var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
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 %}
|
|
|
|
{% block content %}
|
|
<div class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="success-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="success-title">Rejestracja zakonczona!</h1>
|
|
<p class="success-subtitle">Aktywuj konto klikajac link w mailu.</p>
|
|
|
|
<div class="email-box">
|
|
<div class="email-icon">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="email-info">
|
|
<div class="email-label">Link wyslany na:</div>
|
|
<div class="email-address">{{ email }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="steps-box">
|
|
<ol class="steps-list">
|
|
<li><span class="step-number">1</span><span>Otworz skrzynke</span></li>
|
|
<li><span class="step-number">2</span><span>Znajdz mail od Norda</span></li>
|
|
<li><span class="step-number">3</span><span>Kliknij "Aktywuj konto"</span></li>
|
|
<li><span class="step-number">4</span><span>Zostaniesz zalogowany</span></li>
|
|
</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"/>
|
|
</svg>
|
|
<span>Link wazny <strong>24h</strong> · Sprawdz tez folder SPAM</span>
|
|
</div>
|
|
|
|
<div class="resend-section">
|
|
<p class="resend-text">Nie otrzymales maila?</p>
|
|
<a href="{{ url_for('resend_verification') }}" class="btn btn-outline">
|
|
Wyslij ponownie
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
// Poll for email verification status - redirect when verified
|
|
(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) {
|
|
indicator.classList.add('verified');
|
|
waitingText.textContent = 'Aktywowano! Przekierowuje...';
|
|
setTimeout(() => {
|
|
window.location.href = data.redirect;
|
|
}, 500);
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
|
|
// Check every 3 seconds
|
|
setInterval(checkVerification, 3000);
|
|
})();
|
|
{% endblock %}
|