143 lines
5.7 KiB
HTML
143 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Account - ChessStars</title>
|
|
{{template "head" .}}
|
|
</head>
|
|
<body>
|
|
{{template "nav" .}}
|
|
<main>
|
|
<div class="auth-wrap" id="auth-box">
|
|
<div class="auth-card">
|
|
<div class="logo">♚</div>
|
|
<h1>Welcome to ChessStars</h1>
|
|
<div class="auth-tabs">
|
|
<button id="tab-login" class="active">Log in</button>
|
|
<button id="tab-register">Register</button>
|
|
</div>
|
|
|
|
<form class="auth-form active" id="form-login">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input id="l-username" autocomplete="username">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input id="l-password" type="password" autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="btn-submit">Log in</button>
|
|
</form>
|
|
|
|
<form class="auth-form" id="form-register">
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input id="r-username" autocomplete="username">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input id="r-password" type="password" autocomplete="new-password">
|
|
</div>
|
|
<button type="submit" class="btn-submit">Create account</button>
|
|
</form>
|
|
|
|
<p class="auth-error" id="auth-msg"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="profile-box" style="display:none">
|
|
<div class="panel">
|
|
<h2 id="profile-heading">Your profile</h2>
|
|
<div class="profile-stats">
|
|
<div class="stat"><span class="num" id="stat-rating">-</span><span class="label">Rating</span></div>
|
|
<div class="stat"><span class="num" id="stat-wins">-</span><span class="label">Wins</span></div>
|
|
<div class="stat"><span class="num" id="stat-losses">-</span><span class="label">Losses</span></div>
|
|
<div class="stat"><span class="num" id="stat-draws">-</span><span class="label">Draws</span></div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Display name</label>
|
|
<input id="p-display">
|
|
</div>
|
|
<div class="field">
|
|
<label>Country</label>
|
|
<input id="p-country">
|
|
</div>
|
|
<div class="field">
|
|
<label>Bio</label>
|
|
<textarea id="p-bio" rows="3"></textarea>
|
|
</div>
|
|
<div class="field">
|
|
<label>Private note (only visible to you)</label>
|
|
<textarea id="p-note" rows="2"></textarea>
|
|
</div>
|
|
<button id="p-save">Save changes</button>
|
|
<button class="secondary" id="p-logout">Log out</button>
|
|
<p class="auth-error" id="p-msg"></p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function setTab(which) {
|
|
document.getElementById("tab-login").classList.toggle("active", which === "login");
|
|
document.getElementById("tab-register").classList.toggle("active", which === "register");
|
|
document.getElementById("form-login").classList.toggle("active", which === "login");
|
|
document.getElementById("form-register").classList.toggle("active", which === "register");
|
|
document.getElementById("auth-msg").textContent = "";
|
|
}
|
|
document.getElementById("tab-login").addEventListener("click", () => setTab("login"));
|
|
document.getElementById("tab-register").addEventListener("click", () => setTab("register"));
|
|
|
|
async function showProfile() {
|
|
const me = await api.get("/api/me");
|
|
if (!me.username) return;
|
|
document.getElementById("auth-box").style.display = "none";
|
|
document.getElementById("profile-box").style.display = "block";
|
|
document.getElementById("profile-heading").textContent = me.username + "'s profile";
|
|
document.getElementById("stat-rating").textContent = me.rating;
|
|
document.getElementById("stat-wins").textContent = me.wins;
|
|
document.getElementById("stat-losses").textContent = me.losses;
|
|
document.getElementById("stat-draws").textContent = me.draws;
|
|
document.getElementById("p-display").value = me.display_name || "";
|
|
document.getElementById("p-country").value = me.country || "";
|
|
document.getElementById("p-bio").value = me.bio || "";
|
|
document.getElementById("p-note").value = me.private_note || "";
|
|
}
|
|
|
|
document.getElementById("form-login").addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const res = await api.post("/api/login", {
|
|
username: document.getElementById("l-username").value,
|
|
password: document.getElementById("l-password").value,
|
|
});
|
|
if (res.ok) { location.reload(); } else { document.getElementById("auth-msg").textContent = res.error; }
|
|
});
|
|
|
|
document.getElementById("form-register").addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const res = await api.post("/api/register", {
|
|
username: document.getElementById("r-username").value,
|
|
password: document.getElementById("r-password").value,
|
|
});
|
|
if (res.ok) { location.reload(); } else { document.getElementById("auth-msg").textContent = res.error; }
|
|
});
|
|
|
|
document.getElementById("p-save").addEventListener("click", async () => {
|
|
const res = await api.put("/api/me", {
|
|
display_name: document.getElementById("p-display").value,
|
|
country: document.getElementById("p-country").value,
|
|
bio: document.getElementById("p-bio").value,
|
|
private_note: document.getElementById("p-note").value,
|
|
});
|
|
document.getElementById("p-msg").textContent = res.ok ? "saved" : (res.error || "error");
|
|
});
|
|
|
|
document.getElementById("p-logout").addEventListener("click", async () => {
|
|
await api.post("/api/logout", {});
|
|
location.reload();
|
|
});
|
|
|
|
showProfile();
|
|
</script>
|
|
</body>
|
|
</html>
|