87 lines
3.5 KiB
JavaScript
87 lines
3.5 KiB
JavaScript
import { route } from "../router.js";
|
||
import { Api } from "../kek.js";
|
||
import {
|
||
saveSession,
|
||
setTopUser,
|
||
setLogoutVisible,
|
||
formToJSON,
|
||
} from "../utils.js";
|
||
|
||
function loginView() {
|
||
const card = document.createElement("div");
|
||
card.className = "card";
|
||
card.innerHTML = `
|
||
<div class="card-header">Вход</div>
|
||
<div class="card-body">
|
||
<form id="login-form" class="form-grid" autocomplete="on">
|
||
<div class="input"><label>Имя пользователя</label><input name="username" required /></div>
|
||
<div class="input"><label>Пароль</label><input name="password" type="password" required /></div>
|
||
<div class="actions">
|
||
<button class="btn" type="submit">Войти</button>
|
||
<a class="btn secondary" href="#/auth/register">Регистрация учителя</a>
|
||
</div>
|
||
<div id="login-error" class="error hidden"></div>
|
||
</form>
|
||
</div>`;
|
||
const form = card.querySelector("#login-form");
|
||
form.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const { username, password } = Object.fromEntries(new FormData(form));
|
||
try {
|
||
const { session } = await Api.login({ username, password });
|
||
saveSession(session);
|
||
setTopUser(username);
|
||
setLogoutVisible(true);
|
||
location.hash = "#/dashboard";
|
||
} catch (err) {
|
||
const box = card.querySelector("#login-error");
|
||
box.classList.remove("hidden");
|
||
box.textContent = err.message || "Не удалось войти";
|
||
}
|
||
});
|
||
return card;
|
||
}
|
||
|
||
function registerView() {
|
||
const card = document.createElement("div");
|
||
card.className = "card";
|
||
card.innerHTML = `
|
||
<div class="card-header">Регистрация учителя</div>
|
||
<div class="card-body">
|
||
<form id="reg-form" class="form-grid">
|
||
<div class="input"><label>Имя</label><input name="имя" required></div>
|
||
<div class="input"><label>Фамилия</label><input name="фамилия" required></div>
|
||
<div class="input"><label>Отчество</label><input name="отчество" required></div>
|
||
<div class="input"><label>Образование</label><input name="образование" required></div>
|
||
<div class="input"><label>Пароль</label><input type="password" name="пароль" required></div>
|
||
<div class="input"><label>Повтор пароля</label><input type="password" name="повтор пароля" required></div>
|
||
<div class="actions"><button class="btn" type="submit">Создать</button></div>
|
||
<div id="reg-msg" class="notice hidden"></div>
|
||
<div id="reg-err" class="error hidden"></div>
|
||
</form>
|
||
</div>`;
|
||
card.querySelector("#reg-form").addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const payload = formToJSON(e.target);
|
||
try {
|
||
await Api.registerTeacher(payload);
|
||
const msg = card.querySelector("#reg-msg");
|
||
msg.classList.remove("hidden");
|
||
msg.textContent = "Учитель создан. Теперь можно войти.";
|
||
card.querySelector("#reg-err").classList.add("hidden");
|
||
} catch (err) {
|
||
const errBox = card.querySelector("#reg-err");
|
||
errBox.classList.remove("hidden");
|
||
errBox.textContent = err.message || "Ошибка регистрации";
|
||
}
|
||
});
|
||
return card;
|
||
}
|
||
|
||
route("/auth/login", async ({ view }) => {
|
||
view.appendChild(loginView());
|
||
});
|
||
route("/auth/register", async ({ view }) => {
|
||
view.appendChild(registerView());
|
||
});
|