login changes
This commit is contained in:
roman
@@ -30,9 +30,18 @@
|
||||
.auth-logo .logo-icon { font-size: 1.8rem; }
|
||||
.auth-logo h1 { font-size: 1.45rem; color: #58a6ff; font-weight: 700; letter-spacing: -0.3px; }
|
||||
.auth-card > p { color: #8b949e; font-size: 0.88rem; margin-bottom: 1.75rem; padding-left: 2.4rem; }
|
||||
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
|
||||
.tab-btn { flex: 1; padding: 0.5rem; border: 1px solid #30363d; border-radius: 7px; background: transparent; color: #8b949e; cursor: pointer; font-size: 0.9rem; transition: all 0.15s; }
|
||||
.tab-btn.active { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 600; }
|
||||
.forgot-link { font-size: 0.8rem; color: #58a6ff; cursor: pointer; text-align: right; margin-top: -0.5rem; margin-bottom: 1rem; display: block; background: none; border: none; padding: 0; }
|
||||
.forgot-link:hover { text-decoration: underline; }
|
||||
.back-link { font-size: 0.8rem; color: #8b949e; cursor: pointer; background: none; border: none; padding: 0; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.3rem; }
|
||||
.back-link:hover { color: #c9d1d9; }
|
||||
.reset-title { font-size: 0.95rem; font-weight: 600; color: #c9d1d9; margin-bottom: 0.25rem; }
|
||||
.reset-subtitle { font-size: 0.82rem; color: #8b949e; margin-bottom: 1.25rem; }
|
||||
.send-code-row { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
|
||||
.send-code-row input { flex: 1; }
|
||||
.btn-send-code { padding: 0.6rem 0.85rem; background: #1f6feb22; border: 1px solid #1f6feb55; border-radius: 7px; color: #58a6ff; cursor: pointer; font-size: 0.82rem; white-space: nowrap; transition: all 0.15s; }
|
||||
.btn-send-code:hover { background: #1f6feb44; }
|
||||
.btn-send-code:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.code-section { display: none; }
|
||||
.fg { margin-bottom: 0.9rem; }
|
||||
.fg label { display: block; font-size: 0.8rem; color: #8b949e; margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.4px; }
|
||||
.fg input { width: 100%; padding: 0.6rem 0.85rem; background: #0d1117; border: 1px solid #30363d; border-radius: 7px; color: #e1e4e8; font-size: 0.95rem; outline: none; transition: border-color 0.15s; }
|
||||
@@ -349,23 +358,38 @@
|
||||
<h1>Calendar Reminder</h1>
|
||||
</div>
|
||||
<p>Správa udalostí s emailovými notifikáciami</p>
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="showTab('login')">Prihlásiť sa</button>
|
||||
<button class="tab-btn" onclick="showTab('register')">Registrácia</button>
|
||||
</div>
|
||||
|
||||
<!-- LOGIN -->
|
||||
<div id="login-form">
|
||||
<div class="fg"><label>Email</label><input type="email" id="l-email" placeholder="vas@email.com" /></div>
|
||||
<div class="fg"><label>Email alebo meno</label><input type="text" id="l-email" placeholder="admin" /></div>
|
||||
<div class="fg"><label>Heslo</label><input type="password" id="l-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()" /></div>
|
||||
<button class="btn-primary" onclick="doLogin()">Prihlásiť sa</button>
|
||||
<button class="forgot-link" onclick="showReset()">Zabudol som heslo</button>
|
||||
<div class="err" id="l-err"></div>
|
||||
</div>
|
||||
<div id="register-form" style="display:none">
|
||||
<div class="fg"><label>Meno</label><input type="text" id="r-name" placeholder="Ján Novák" /></div>
|
||||
<div class="fg"><label>Email</label><input type="email" id="r-email" placeholder="vas@email.com" /></div>
|
||||
<div class="fg"><label>Heslo</label><input type="password" id="r-pass" placeholder="min. 6 znakov" onkeydown="if(event.key==='Enter')doRegister()" /></div>
|
||||
<button class="btn-primary" onclick="doRegister()">Vytvoriť účet</button>
|
||||
|
||||
<!-- RESET HESLA -->
|
||||
<div id="reset-form" style="display:none">
|
||||
<button class="back-link" onclick="showLogin()">← Späť na prihlásenie</button>
|
||||
<div class="reset-title">Obnova hesla</div>
|
||||
<div class="reset-subtitle" id="reset-subtitle">Zadaj email a nové heslo.</div>
|
||||
|
||||
<div class="send-code-row">
|
||||
<input type="email" id="r-email" placeholder="Email *" />
|
||||
<button class="btn-send-code" id="btn-send-code" onclick="sendResetCode()">Zaslať kód</button>
|
||||
</div>
|
||||
|
||||
<!-- Kód — skrytý, zobrazí sa po aktivácii mailovej služby -->
|
||||
<div class="code-section" id="code-section">
|
||||
<div class="fg"><label>Kód z emailu (8 znakov)</label><input type="text" id="r-code" placeholder="XXXXXXXX" maxlength="8" style="text-transform:uppercase;letter-spacing:0.3rem;font-weight:700" /></div>
|
||||
</div>
|
||||
|
||||
<div class="fg"><label>Nové heslo</label><input type="password" id="r-newpass" placeholder="min. 6 znakov" /></div>
|
||||
<div class="fg"><label>Potvrď heslo</label><input type="password" id="r-newpass2" placeholder="zopakuj heslo" onkeydown="if(event.key==='Enter')doResetPassword()" /></div>
|
||||
<button class="btn-primary" onclick="doResetPassword()">Zmeniť heslo</button>
|
||||
<div class="err" id="r-err"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -499,28 +523,79 @@ calMonth = now0.getMonth();
|
||||
if (token) showApp();
|
||||
|
||||
// ═══ AUTH ═══
|
||||
function showTab(t) {
|
||||
document.querySelectorAll('.tab-btn').forEach((b,i) => b.classList.toggle('active', i===(t==='login'?0:1)));
|
||||
document.getElementById('login-form').style.display = t==='login' ? 'block':'none';
|
||||
document.getElementById('register-form').style.display = t==='register' ? 'block':'none';
|
||||
function showLogin() {
|
||||
document.getElementById('login-form').style.display = 'block';
|
||||
document.getElementById('reset-form').style.display = 'none';
|
||||
document.getElementById('l-err').textContent = '';
|
||||
}
|
||||
|
||||
function showReset() {
|
||||
document.getElementById('login-form').style.display = 'none';
|
||||
document.getElementById('reset-form').style.display = 'block';
|
||||
document.getElementById('r-err').textContent = '';
|
||||
document.getElementById('reset-subtitle').textContent = 'Zadaj email a nové heslo.';
|
||||
}
|
||||
|
||||
async function doLogin() {
|
||||
const err = document.getElementById('l-err');
|
||||
err.textContent = '';
|
||||
const res = await fetch(`${API}/auth/login`, {
|
||||
method:'POST', headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ email: v('l-email'), password: v('l-pass') })
|
||||
});
|
||||
if (res.ok) { const d = await res.json(); saveAuth(d); showApp(); }
|
||||
else document.getElementById('l-err').textContent = await res.text();
|
||||
else err.textContent = await res.text();
|
||||
}
|
||||
|
||||
async function doRegister() {
|
||||
const res = await fetch(`${API}/auth/register`, {
|
||||
// Zaslanie kódu — aktivuje sa keď bude mailová služba funkčná
|
||||
const RESET_WITH_CODE = true;
|
||||
|
||||
async function sendResetCode() {
|
||||
const email = v('r-email').trim();
|
||||
if (!email) { document.getElementById('r-err').textContent = 'Zadaj email.'; return; }
|
||||
const btn = document.getElementById('btn-send-code');
|
||||
btn.disabled = true;
|
||||
const res = await fetch(`${API}/auth/send-reset-code`, {
|
||||
method:'POST', headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ username: v('r-name'), email: v('r-email'), password: v('r-pass') })
|
||||
body: JSON.stringify({ email })
|
||||
});
|
||||
if (res.ok) { const d = await res.json(); saveAuth(d); showApp(); }
|
||||
else document.getElementById('r-err').textContent = await res.text();
|
||||
btn.disabled = false;
|
||||
if (res.ok) {
|
||||
document.getElementById('code-section').style.display = 'block';
|
||||
document.getElementById('reset-subtitle').textContent = 'Kód bol odoslaný na email. Zadaj ho nižšie.';
|
||||
document.getElementById('r-err').style.color = '#3fb950';
|
||||
document.getElementById('r-err').textContent = '✓ Kód odoslaný';
|
||||
} else {
|
||||
document.getElementById('r-err').style.color = '#f85149';
|
||||
document.getElementById('r-err').textContent = await res.text();
|
||||
}
|
||||
}
|
||||
|
||||
async function doResetPassword() {
|
||||
const err = document.getElementById('r-err');
|
||||
err.style.color = '#f85149';
|
||||
err.textContent = '';
|
||||
const email = v('r-email').trim();
|
||||
const pass = v('r-newpass');
|
||||
const pass2 = v('r-newpass2');
|
||||
const code = v('r-code').trim().toUpperCase();
|
||||
|
||||
if (!email) { err.textContent = 'Zadaj email.'; return; }
|
||||
if (pass.length < 6) { err.textContent = 'Heslo musí mať aspoň 6 znakov.'; return; }
|
||||
if (pass !== pass2) { err.textContent = 'Heslá sa nezhodujú.'; return; }
|
||||
if (RESET_WITH_CODE && !code) { err.textContent = 'Zadaj kód z emailu.'; return; }
|
||||
|
||||
const res = await fetch(`${API}/auth/reset-password`, {
|
||||
method:'POST', headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ email, newPassword: pass, code: RESET_WITH_CODE ? code : null })
|
||||
});
|
||||
if (res.ok) {
|
||||
err.style.color = '#3fb950';
|
||||
err.textContent = '✓ Heslo bolo zmenené. Môžeš sa prihlásiť.';
|
||||
setTimeout(showLogin, 2000);
|
||||
} else {
|
||||
err.textContent = await res.text();
|
||||
}
|
||||
}
|
||||
|
||||
function saveAuth(d) {
|
||||
|
||||
Reference in New Issue
Block a user