Add auth.js module
This commit is contained in:
parent
6e54d4c499
commit
b7de2cb300
1 changed files with 127 additions and 0 deletions
127
public/js/auth.js
Normal file
127
public/js/auth.js
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
import { api, loadGoals } from './api.js';
|
||||
import { tr } from './i18n.js';
|
||||
import { state } from './state.js';
|
||||
import { tpl, showSheet, closeOv, showToast, updateHeader } from './ui.js';
|
||||
import { render } from './render.js';
|
||||
|
||||
export function showLogin(err) {
|
||||
const c = tpl('tpl-login');
|
||||
if (err) { const e = c.querySelector('.login-err'); e.textContent = err; e.style.display = ''; }
|
||||
showSheet(c, false);
|
||||
const email = c.querySelector('.lf-email'), pass = c.querySelector('.lf-pass'), sub = c.querySelector('.lf-sub');
|
||||
setTimeout(() => email.focus(), 50);
|
||||
email.onkeydown = e => { if (e.key === 'Enter') pass.focus(); };
|
||||
pass.onkeydown = e => { if (e.key === 'Enter') sub.click(); };
|
||||
c.querySelector('.lf-fgt').onclick = () => showForgotPassword();
|
||||
sub.onclick = () => {
|
||||
const ev = email.value.trim(), pv = pass.value;
|
||||
if (!ev || !pv) {
|
||||
const errEl = c.querySelector('.login-err');
|
||||
errEl.textContent = tr('loginErrEmpty'); errEl.style.display = '';
|
||||
return;
|
||||
}
|
||||
sub.disabled = true; sub.textContent = '…';
|
||||
api('POST', 'login', { email: ev, password: pv })
|
||||
.then(() => loadGoals())
|
||||
.then(g => { state.goals = g; closeOv(); render(); })
|
||||
.catch(err => {
|
||||
sub.disabled = false; sub.textContent = tr('loginBtn');
|
||||
showLogin(err.status === 401 ? tr('loginErrWrong') : err.status === 429 ? tr('loginErrRate') : tr('loginErrConn'));
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function showForgotPassword() {
|
||||
const c = tpl('tpl-forgot-pw');
|
||||
showSheet(c, false);
|
||||
const email = c.querySelector('.fp-email'), errEl = c.querySelector('.login-err'), sub = c.querySelector('.fp-sub');
|
||||
setTimeout(() => email.focus(), 50);
|
||||
c.querySelector('.fp-back').onclick = () => showLogin();
|
||||
sub.onclick = () => {
|
||||
const ev = email.value.trim(); if (!ev) return;
|
||||
sub.disabled = true; sub.textContent = '…';
|
||||
api('POST', 'reset-request', { email: ev })
|
||||
.then(() => {
|
||||
const conf = tpl('tpl-email-sent');
|
||||
conf.querySelector('.es-ok').onclick = () => showLogin();
|
||||
showSheet(conf, false);
|
||||
})
|
||||
.catch(err => {
|
||||
sub.disabled = false; sub.textContent = tr('sendLink');
|
||||
errEl.textContent = err.message || 'Fehler'; errEl.style.display = '';
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function showResetPassword(selector, token) {
|
||||
const c = tpl('tpl-reset-pw');
|
||||
showSheet(c, false);
|
||||
const pass = c.querySelector('.rp-pass'), errEl = c.querySelector('.login-err'), sub = c.querySelector('.rp-sub');
|
||||
setTimeout(() => pass.focus(), 50);
|
||||
sub.onclick = () => {
|
||||
const pv = pass.value; if (!pv) return;
|
||||
sub.disabled = true; sub.textContent = '…';
|
||||
api('POST', 'reset-password', { selector, token, password: pv })
|
||||
.then(() => {
|
||||
const conf = tpl('tpl-pw-changed');
|
||||
conf.querySelector('.pc-ok').onclick = () => showLogin();
|
||||
showSheet(conf, false);
|
||||
})
|
||||
.catch(err => {
|
||||
sub.disabled = false; sub.textContent = tr('setPw');
|
||||
errEl.textContent = err.message || 'Fehler'; errEl.style.display = '';
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function showChangePassword() {
|
||||
const c = tpl('tpl-change-pw');
|
||||
showSheet(c, true);
|
||||
const oldP = c.querySelector('.cp-old'), newP = c.querySelector('.cp-new'), newP2 = c.querySelector('.cp-new2');
|
||||
const errEl = c.querySelector('.login-err'), sub = c.querySelector('.cp-sub');
|
||||
setTimeout(() => oldP.focus(), 50);
|
||||
c.querySelector('.cp-can').onclick = closeOv;
|
||||
sub.onclick = () => {
|
||||
const o = oldP.value, n = newP.value, n2 = newP2.value;
|
||||
if (!o || !n || !n2) return;
|
||||
if (n !== n2) { errEl.textContent = tr('errPwMismatch'); errEl.style.display = ''; return; }
|
||||
sub.disabled = true; sub.textContent = '…';
|
||||
api('POST', 'change-password', { old_password: o, new_password: n })
|
||||
.then(() => { showToast(tr('pwChanged')); closeOv(); })
|
||||
.catch(err => {
|
||||
sub.disabled = false; sub.textContent = tr('changePwBtn');
|
||||
errEl.textContent = err.message || 'Fehler'; errEl.style.display = '';
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function showRegister(token) {
|
||||
const c = tpl('tpl-register');
|
||||
showSheet(c, false);
|
||||
const nameInp = c.querySelector('.rg-name'), email = c.querySelector('.rg-email');
|
||||
const pass = c.querySelector('.rg-pass'), pass2 = c.querySelector('.rg-pass2');
|
||||
const errEl = c.querySelector('.login-err'), sub = c.querySelector('.rg-sub');
|
||||
setTimeout(() => nameInp.focus(), 50);
|
||||
nameInp.onkeydown = e => { if (e.key === 'Enter') email.focus(); };
|
||||
email.onkeydown = e => { if (e.key === 'Enter') pass.focus(); };
|
||||
pass.onkeydown = e => { if (e.key === 'Enter') pass2.focus(); };
|
||||
pass2.onkeydown = e => { if (e.key === 'Enter') sub.click(); };
|
||||
const checkMatch = () => {
|
||||
if (pass2.value && pass.value !== pass2.value) { errEl.textContent = tr('errPwMismatch2'); errEl.style.display = ''; }
|
||||
else errEl.style.display = 'none';
|
||||
};
|
||||
pass.oninput = checkMatch; pass2.oninput = checkMatch;
|
||||
sub.onclick = () => {
|
||||
const nv = nameInp.value.trim(), ev = email.value.trim(), pv = pass.value;
|
||||
if (!nv || !ev || !pv) { errEl.textContent = tr('errFillAll'); errEl.style.display = ''; return; }
|
||||
if (pv !== pass2.value) { errEl.textContent = tr('errPwMismatch2'); errEl.style.display = ''; return; }
|
||||
sub.disabled = true; sub.textContent = '…';
|
||||
api('POST', 'register', { name: nv, email: ev, password: pv, token })
|
||||
.then(r => { state.userName = r.name || ''; return loadGoals(); })
|
||||
.then(g => { state.goals = g; closeOv(); updateHeader(); render(); })
|
||||
.catch(err => {
|
||||
sub.disabled = false; sub.textContent = tr('registerBtn');
|
||||
errEl.textContent = err.message || 'Fehler'; errEl.style.display = '';
|
||||
});
|
||||
};
|
||||
}
|
||||
Loading…
Reference in a new issue