fix: replace browser confirm() with inline modal for enrichment start
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

- Custom modal with icon, safety info bullets, and styled buttons
- Error feedback shows in live panel instead of alert()
- Clean UX consistent with rest of admin panel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-12 08:53:24 +01:00
parent ce5a259749
commit cd61c51f91

View File

@ -552,6 +552,42 @@
</div>
<style>@keyframes spin { to { transform: rotate(360deg); } }</style>
<!-- Confirm modal -->
<div id="enrichConfirm" style="display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.4); display:none; align-items:center; justify-content:center;">
<div style="background:white; border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(0,0,0,0.3); max-width:480px; width:90%; padding:var(--spacing-xl);">
<div style="display:flex; align-items:center; gap:var(--spacing-md); margin-bottom:var(--spacing-lg);">
<div style="width:48px; height:48px; border-radius:50%; background:#eff6ff; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
<svg width="24" height="24" fill="none" stroke="#2563eb" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
<div>
<h3 style="margin:0; font-size:var(--font-size-lg);">Uruchomić skanowanie?</h3>
<p style="margin:4px 0 0; font-size:var(--font-size-sm); color:var(--text-secondary);">Audyt social media dla wszystkich firm</p>
</div>
</div>
<div style="font-size:var(--font-size-sm); color:var(--text-secondary); margin-bottom:var(--spacing-lg);">
<div style="display:flex; align-items:flex-start; gap:8px; margin-bottom:8px;">
<svg width="16" height="16" fill="none" stroke="#22c55e" viewBox="0 0 24 24" style="flex-shrink:0; margin-top:2px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
<span>Dane <strong>nie zostaną zapisane</strong> bez Twojej zgody — najpierw zobaczysz raport ze zmianami</span>
</div>
<div style="display:flex; align-items:flex-start; gap:8px; margin-bottom:8px;">
<svg width="16" height="16" fill="none" stroke="#3b82f6" viewBox="0 0 24 24" style="flex-shrink:0; margin-top:2px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
<span>Profile z danymi z OAuth API nie będą nadpisywane</span>
</div>
<div style="display:flex; align-items:flex-start; gap:8px;">
<svg width="16" height="16" fill="none" stroke="#f59e0b" viewBox="0 0 24 24" style="flex-shrink:0; margin-top:2px;"><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>Proces działa w tle — możesz obserwować postęp na bieżąco</span>
</div>
</div>
<div style="display:flex; gap:var(--spacing-sm); justify-content:flex-end;">
<button class="btn btn-outline btn-sm" onclick="document.getElementById('enrichConfirm').style.display='none'">Anuluj</button>
<button class="btn btn-primary btn-sm" onclick="document.getElementById('enrichConfirm').style.display='none'; doStartEnrichment();">
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
Uruchom skanowanie
</button>
</div>
</div>
</div>
<!-- Summary Stats -->
<div class="stats-grid">
<div class="stat-card">
@ -1009,8 +1045,10 @@ var _enrichSince = 0;
var _enrichPendingCount = 0;
function startEnrichment() {
if (!confirm('Uruchomić skanowanie social media dla wszystkich firm?\n\nProces działa w tle. Dane NIE zostaną zapisane bez Twojej zgody.\nPo zakończeniu zobaczysz raport ze zmianami do zatwierdzenia.')) return;
document.getElementById('enrichConfirm').style.display = 'flex';
}
function doStartEnrichment() {
var btn = document.getElementById('enrichBtn');
btn.disabled = true;
btn.textContent = 'Uruchamianie...';
@ -1032,13 +1070,20 @@ function startEnrichment() {
document.getElementById('enrichMiniStatus').textContent = 'Skanowanie...';
pollEnrichment();
} else {
alert(data.error || 'Błąd uruchamiania');
document.getElementById('enrichPanel').style.display = 'block';
document.getElementById('enrichTitle').textContent = data.error || 'Błąd uruchamiania';
document.getElementById('enrichTitle').style.color = '#dc2626';
document.getElementById('enrichSubtitle').textContent = '';
document.getElementById('enrichSpinner').style.display = 'none';
btn.disabled = false;
btn.textContent = 'Uruchom audyt';
}
})
.catch(function(e) {
alert('Błąd: ' + e.message);
document.getElementById('enrichPanel').style.display = 'block';
document.getElementById('enrichTitle').textContent = 'Błąd połączenia: ' + e.message;
document.getElementById('enrichTitle').style.color = '#dc2626';
document.getElementById('enrichSpinner').style.display = 'none';
btn.disabled = false;
btn.textContent = 'Uruchom audyt';
});