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

60 lines
2.1 KiB
JavaScript

function initRegisterEffects() {
// Workspace slug preview
const ws = document.getElementById('reg-workspace');
const slugEl = document.getElementById('reg-slug-preview');
if (ws && slugEl && !ws.dataset.bound) {
ws.dataset.bound = '1';
const slugify = s => s.toLowerCase().trim()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-|-$/g, '')
.slice(0, 32) || 'dein-team';
ws.addEventListener('input', () => { slugEl.textContent = slugify(ws.value); });
}
// Email valid checkmark
const emailInput = document.getElementById('reg-email');
const emailWrap = document.getElementById('reg-email-wrap');
if (emailInput && emailWrap && !emailInput.dataset.bound) {
emailInput.dataset.bound = '1';
emailInput.addEventListener('input', () => {
emailWrap.classList.toggle('valid', /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value));
});
}
// Password strength meter + rules
const pwd = document.getElementById('reg-password');
const meter = document.getElementById('reg-pw-meter');
if (pwd && meter && !pwd.dataset.bound) {
pwd.dataset.bound = '1';
pwd.addEventListener('input', () => {
const v = pwd.value;
const tests = {
len: v.length >= 10,
upper: /[A-Z]/.test(v),
num: /[0-9]/.test(v),
sym: /[^A-Za-z0-9]/.test(v),
};
let score = 0;
Object.keys(tests).forEach(k => {
const ok = tests[k];
const el = document.querySelector('.clu-pw-rule[data-rule="' + k + '"]');
if (el) { el.classList.toggle('ok', ok); }
if (ok) score++;
});
meter.className = 'clu-pw-meter' + (v.length ? ' s' + score : '');
});
}
// Password eye toggle
const eyeBtn = document.getElementById('reg-toggle-eye');
if (pwd && eyeBtn && !eyeBtn.dataset.bound) {
eyeBtn.dataset.bound = '1';
eyeBtn.addEventListener('click', () => {
pwd.type = pwd.type === 'password' ? 'text' : 'password';
});
}
}
document.addEventListener('DOMContentLoaded', initRegisterEffects);
document.addEventListener('livewire:navigated', initRegisterEffects);