From e6150a01fef7cb8614f1337abbc9630be373aac5 Mon Sep 17 00:00:00 2001 From: curly Date: Mon, 15 Jul 2024 13:42:35 -0600 Subject: login/out --- src/index.html | 22 ++++++ src/login.html | 23 ++++++ src/main.css | 63 +++++++++++++++ src/main.js | 229 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/register.html | 25 ++++++ 5 files changed, 362 insertions(+) create mode 100644 src/index.html create mode 100644 src/login.html create mode 100644 src/main.css create mode 100644 src/main.js create mode 100644 src/register.html (limited to 'src') diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..f9b952b --- /dev/null +++ b/src/index.html @@ -0,0 +1,22 @@ + + + + + + + +

+ + + + + + +

+ + + \ No newline at end of file diff --git a/src/login.html b/src/login.html new file mode 100644 index 0000000..0b77009 --- /dev/null +++ b/src/login.html @@ -0,0 +1,23 @@ + + + + + + + +

+ +

+ + + \ No newline at end of file diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..2c53965 --- /dev/null +++ b/src/main.css @@ -0,0 +1,63 @@ +html, body { + margin: 0; + padding: 0; + border: 0; + background-color: grey; +} +footer { + border-top: 2px solid black; + font-weight: bold; +} +footer > center > p { + margin: 0; +} +body { + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; +} +#content { + flex-grow: 1; + max-width: 70vw; + margin: auto; + display: flex; + flex-direction: column; +} +form { + display: flex; + flex-direction: column; + max-width: 40vw; + align-self: center; +} +form > label { + margin-top: 6px; +} + +input:invalid { + border: 2px dotted red; +} + +bold { + font-weight: bold; + color: red; + background-color: black; +} + +:root { + --primary: #efefef; + --text-primary: #222; +} + +@media (prefers-color-scheme: dark) { + :root { + --primary: #222; + --text-primary: #eee; + } +} + +@media screen and (max-width: 500px) { + #content { + max-width: unset; + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..2b880a2 --- /dev/null +++ b/src/main.js @@ -0,0 +1,229 @@ +// const host = window.location.protocol + "//" + window.location.host; +const server = window.location.protocol + "//" + window.location.hostname + ":8000"; +const host = window.location.protocol + "//" + window.location.host; +const client_id = "POKO Web 0.0" + +async function xhttp_get(url) { + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + + try { + return new Response(response.status, await response.clone().json()) + } catch { + return new Response(response.status, await response.text()) + } + } catch (error) { + console.error(error.message); + } +} + +async function xhttp_post(url, body) { + try { + const response = await fetch(url, { + method: "POST", + body: JSON.stringify(body), + headers: { + "Content-Type": "application/json", + }, + }); + + try { + return new Response(response.status, await response.clone().json()) + } catch { + return new Response(response.status, await response.text()) + } + + } catch (error) { + console.error(error.message) + } +} + +class Response { + constructor(status, body) { + this.status = status; + this.body = body; + } +} + +async function register() { + const username = document.getElementById("username").value; + const password = document.getElementById("password").value; + const id = document.getElementById("id").value; + + const url = server + "/user/register/" + var body; + if (id == "") { + body = {"name": username, "password": password} + } else { + body = {"name": username, "password": password, "id": id} + } + const req = await xhttp_post(url, body); + + if (req.status == 201) { + await login(req.body.id, password) + window.location.href = host + } else { + alert(req.status + ": " + req.body) + } +} + +function password_validator() { + const password = document.getElementById("password"); +} + +function login_form() { + const id = document.getElementById("id").value; + const password = document.getElementById("password").value; + + login(id, password) +} + +async function login(id, password) { + const url = server + "/user/login" + const body = {"id": id, "password": password, "clientid": client_id}; + const req = await xhttp_post(url, body); + + if (req.status == 200) { + // Set session cookie + set_session(req.body, id) + window.location.href = host; + } else { + alert(req.status + ": " + req.body) + } +} + +function getCookie(cname) { + let name = cname + "="; + let decodedCookie = decodeURIComponent(document.cookie); + let ca = decodedCookie.split(';'); + for(let i = 0; i +

User Info

Username: ${req.body.name}

ID: ${id}

+ +

Tokens Balance

+ ${tokens} +

Actions

+ + + +

Users

+ ${users} +

+ `; + } else if (req.status == 404) { + if (req.body == "Not Authenticated") { + del_session() + } + } + } else { + del_session() + } + } else { + content.innerHTML += users; + } +} + +function format_tokovec(tokovec) { + var out = "" + for (t in tokovec) { + out += ` +

${tokovec[t].color}: ${tokovec[t].amount}

+ ` + } + + return out +} + +async function userlist() { + const url = server + "/user/list" + const req = await xhttp_get(url); + + var out = "" + + try { + if (req.status == 200) { + for (u in req.body) { + const user = req.body[u]; + out += `

${user.id} -- ${user.name}` + } + + } else { + return "

User list not available

" + } + + } catch {} + + return out +} \ No newline at end of file diff --git a/src/register.html b/src/register.html new file mode 100644 index 0000000..34deb49 --- /dev/null +++ b/src/register.html @@ -0,0 +1,25 @@ + + + + + + + +

+ +

+ + + \ No newline at end of file -- cgit v1.2.3