Fix registration button: enable when email+8+ chars; show hint
This commit is contained in:
parent
be8d196734
commit
41019d476d
@ -164,11 +164,12 @@ const App = {
|
|||||||
Здесь можно зайти по email для тестирования.
|
Здесь можно зайти по email для тестирования.
|
||||||
</div>
|
</div>
|
||||||
<label>Email</label>
|
<label>Email</label>
|
||||||
<input class="input" id="el-email" type="email" placeholder="you@example.com">
|
<input class="input" id="el-email" type="email" placeholder="you@example.com" autocomplete="email">
|
||||||
<label>Пароль</label>
|
<label>Пароль (≥8 символов)</label>
|
||||||
<input class="input" id="el-pass" type="password" placeholder="минимум 8 символов">
|
<input class="input" id="el-pass" type="password" placeholder="минимум 8 символов" autocomplete="current-password">
|
||||||
<button class="btn" id="el-login">Войти</button>
|
<button class="btn" id="el-login" disabled>Войти</button>
|
||||||
<button class="btn ghost" id="el-register">Регистрация</button>
|
<button class="btn ghost" id="el-register" disabled>Регистрация</button>
|
||||||
|
<div class="sub" id="el-hint" style="margin-top:8px;text-align:center;">Введите email и пароль</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card" style="font-size:12px;color:var(--text-dim);">
|
<div class="card" style="font-size:12px;color:var(--text-dim);">
|
||||||
🍻 BuhApp — приложение для лиц 18+. Встречи и употребление алкоголя — на свой риск.
|
🍻 BuhApp — приложение для лиц 18+. Встречи и употребление алкоголя — на свой риск.
|
||||||
@ -178,6 +179,28 @@ const App = {
|
|||||||
`;
|
`;
|
||||||
document.getElementById('el-login').onclick = () => this.emailLogin();
|
document.getElementById('el-login').onclick = () => this.emailLogin();
|
||||||
document.getElementById('el-register').onclick = () => this.emailRegister();
|
document.getElementById('el-register').onclick = () => this.emailRegister();
|
||||||
|
|
||||||
|
// live-валидация
|
||||||
|
const update = () => {
|
||||||
|
const email = document.getElementById('el-email').value.trim();
|
||||||
|
const pass = document.getElementById('el-pass').value;
|
||||||
|
const ok = email.length > 0 && pass.length >= 8;
|
||||||
|
document.getElementById('el-login').disabled = !ok;
|
||||||
|
document.getElementById('el-register').disabled = !ok;
|
||||||
|
const hint = document.getElementById('el-hint');
|
||||||
|
if (pass.length > 0 && pass.length < 8) {
|
||||||
|
hint.textContent = 'Пароль слишком короткий (' + pass.length + '/8)';
|
||||||
|
hint.style.color = 'var(--danger)';
|
||||||
|
} else if (ok) {
|
||||||
|
hint.textContent = '✓ Готово';
|
||||||
|
hint.style.color = 'var(--success)';
|
||||||
|
} else {
|
||||||
|
hint.textContent = 'Введите email и пароль';
|
||||||
|
hint.style.color = 'var(--text-dim)';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.getElementById('el-email').addEventListener('input', update);
|
||||||
|
document.getElementById('el-pass').addEventListener('input', update);
|
||||||
},
|
},
|
||||||
|
|
||||||
async emailLogin() {
|
async emailLogin() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user