clupilot/app/resources/js/login-effects.js

48 lines
3.0 KiB
JavaScript

function initLoginEffects() {
const eyeBtn = document.getElementById('toggle-eye');
const pwd = document.getElementById('password');
if (eyeBtn && pwd && !eyeBtn.dataset.bound) {
eyeBtn.dataset.bound = '1';
eyeBtn.addEventListener('click', () => {
pwd.type = pwd.type === 'password' ? 'text' : 'password';
});
}
const body = document.getElementById('term-body');
if (!body || body.dataset.bound) return;
body.dataset.bound = '1';
const lines = [
['09:42:18', '<span class="clu-term-acc font-semibold">$</span> <span class="clu-term-dim">clupilot</span> status --cluster=acme'],
['09:42:18', '<span class="clu-term-ok">✓</span> 87/87 sites <span class="clu-term-dim">healthy</span> · <span class="clu-term-acc">142ms</span> ø response'],
['09:42:19', '<span class="clu-term-ok">✓</span> backup eu-prod-02 → <span class="clu-term-pkg">s3://clupilot-backups</span> <span class="clu-term-dim">248 MB</span>'],
['09:42:21', '<span class="clu-term-acc">→</span> deploying <span class="clu-term-pkg">Yoast-SEO@22.5</span> to <span class="clu-term-dim">3 sites…</span>'],
['09:42:23', '<span class="clu-term-ok">✓</span> agentur-helio.com <span class="clu-term-dim">(312ms)</span>'],
['09:42:24', '<span class="clu-term-ok">✓</span> blog.fintech-radar.io <span class="clu-term-dim">(287ms)</span>'],
['09:42:24', '<span class="clu-term-ok">✓</span> docs.opencrate.dev <span class="clu-term-dim">(298ms)</span>'],
['09:42:26', '<span class="clu-term-warn">!</span> classic.tonhoff-bau.de <span class="clu-term-dim">PHP 7.4 EOL — migration queued</span>'],
['09:42:28', '<span class="clu-term-err">✗</span> fw <span class="clu-term-dim">blocked</span> 17 attempts from <span class="clu-term-acc">185.220.101.18</span> <span class="clu-term-dim">(TOR)</span>'],
['09:42:30', '<span class="clu-term-ok">✓</span> SSL renewed: <span class="clu-term-pkg">*.kunde-mueller.de</span> <span class="clu-term-dim">until 2026-08-25</span>'],
['09:42:32', '<span class="clu-term-acc font-semibold">$</span> <span class="clu-term-dim">tail -f /var/log/clupilot/audit.log</span><span class="clu-cursor"></span>'],
];
let i = 0;
function addLine() {
if (i >= lines.length) {
setTimeout(() => { body.innerHTML = ''; i = 0; addLine(); }, 5000);
return;
}
const [t, html] = lines[i++];
const el = document.createElement('div');
el.className = 'clu-term-line';
el.innerHTML =
'<div class="clu-term-dim flex-none text-[10.5px] pt-[1px]" style="width:60px;">' + t + '</div>' +
'<div style="color:#cccddd;flex:1;min-width:0;word-break:break-word;">' + html + '</div>';
body.appendChild(el);
body.scrollTop = body.scrollHeight;
while (body.children.length > 11) body.removeChild(body.firstChild);
setTimeout(addLine, 600 + Math.random() * 450);
}
addLine();
}
document.addEventListener('DOMContentLoaded', initLoginEffects);
document.addEventListener('livewire:navigated', initLoginEffects);