From 9d3cf92a9d6bda7af3629ec379d71114e9786ff2 Mon Sep 17 00:00:00 2001 From: "Florine W. Dekker" Date: Fri, 12 Aug 2022 16:18:15 +0200 Subject: [PATCH] Add JS front-end handling for most forms --- src/main/api.php | 36 ++++++-- src/main/index.php | 219 ++++++++++++++++++++++++-------------------- src/main/js/Main.ts | 151 +++++++++++++++++++++++++++++- 3 files changed, 293 insertions(+), 113 deletions(-) diff --git a/src/main/api.php b/src/main/api.php index 6c64ec8..1e6a1ee 100644 --- a/src/main/api.php +++ b/src/main/api.php @@ -35,6 +35,11 @@ if (!file_exists($config["database"]["filename"])) { // Start session session_start(); +// Read JSON from POST, if it's there +if (empty($_POST)) { + $_POST = json_decode(file_get_contents("php://input"), associative: true); +} + if (isset($_POST["action"])) { // Process POST switch ($_POST["action"]) { @@ -261,18 +266,29 @@ if (isset($_POST["action"])) { } } else if (isset($_GET["action"])) { // Process GET - if ($_GET["action"] === "list-trackings") { - if (!isset($_SESSION["uuid"])) { - exit("\"not logged in\""); - } + switch ($_GET["action"]) { + case "get-user-data": + if (!isset($_SESSION["uuid"])) { + exit("\"not logged in\""); + } - $db = new Database($config["database"]["filename"], SQLITE3_OPEN_READONLY); - $trackings = $db->list_trackings($_SESSION["uuid"], $_SESSION["uuid"]); - $db->close(); + $db = new Database($config["database"]["filename"], SQLITE3_OPEN_READONLY); + $user_data = $db->get_user_by_uuid($_SESSION["uuid"]); + $db->close(); - exit(json_encode($trackings)); - } else if ($_GET["action"] === "is-alive") { - exit(json_encode((new MyMediawiki())->people_are_alive(array("Janelle Monáe", "John Malkovich", "Adolf Hitler")))); + exit(json_encode($user_data)); + case "list-trackings": + if (!isset($_SESSION["uuid"])) { + exit("\"not logged in\""); + } + + $db = new Database($config["database"]["filename"], SQLITE3_OPEN_READONLY); + $trackings = $db->list_trackings($_SESSION["uuid"]); + $db->close(); + + exit(json_encode($trackings)); + case "is-alive": + exit(json_encode((new MyMediawiki())->people_are_alive(array("Janelle Monáe", "John Malkovich", "Adolf Hitler")))); } } diff --git a/src/main/index.php b/src/main/index.php index 3937010..30b1f96 100644 --- a/src/main/index.php +++ b/src/main/index.php @@ -39,107 +39,128 @@ $_SESSION["token"] = bin2hex(random_bytes(32));
-

Register

-
- - " /> - - - +
- - + -

Log in

-
- - " /> - - - - -
- -

Log out

-
- - " /> - -
- -

Login status

- - -

Change email

-
- - " /> - - -
- -

Change password

-
- - " /> - - - - -
- -

Add tracking

-
- - " /> - - -
- -

Remove tracking

-
- - " /> - - -
- -

Trackings

- 
-
+
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts index 1988945..e1dc728 100644 --- a/src/main/js/Main.ts +++ b/src/main/js/Main.ts @@ -2,7 +2,14 @@ const {$, doAfterLoad, footer, header, nav} = window.fwdekker; -doAfterLoad(() => { +function refreshTrackings() { + fetch("api.php?action=list-trackings") + .then(it => it.text()) + .then(it => $("#trackings").innerText = it); +} + + +doAfterLoad(async () => { // Initialize template $("#nav").appendChild(nav("/Tools/Death-Notifier/")); $("#header").appendChild(header({ @@ -15,7 +22,143 @@ doAfterLoad(() => { })); $("main").classList.remove("hidden"); - fetch("api.php?action=list-trackings") - .then(it => it.text()) - .then(it => $("#trackings").innerText = it); + // Workflow + const loginRow = $("#loginRow"); + const trackingRow = $("#trackingRow"); + const accountRow = $("#accountRow"); + + // TODO: Move common code to a Form class or sth... (or actually, wait with that until I have the table thingy + // implemented!) + $("#loginForm").addEventListener("submit", async () => { + $("#loginForm .error").innerText = ""; + + const response = await fetch("api.php", { + method: "post", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + action: "login", + // TODO: Deal with tokens in a smarter way. Allow refreshing them! Also remove duplication... + token: $("#loginForm input[name=token]").value, + email: $("#loginForm input[name=email]").value, + password: $("#loginForm input[name=password]").value, + }) + }).then(it => it.json()); + + if (response !== true) { + $("#loginForm .error").innerText = response; + return; + } + $("#loginForm").reset(); + loginRow.classList.add("hidden"); + trackingRow.classList.remove("hidden"); + accountRow.classList.remove("hidden"); + refreshTrackings(); + }); + $("#registerForm").addEventListener("submit", async () => { + $("#registerForm .error").innerText = ""; + + const response = await fetch("api.php", { + method: "post", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + action: "register", + token: $("#registerForm input[name=token]").value, + email: $("#registerForm input[name=email]").value, + password: $("#registerForm input[name=password]").value, + password_confirm: $("#registerForm input[name=password_confirm]").value, + }) + }).then(it => it.json()); + + if (response !== true) { + $("#registerForm .error").innerText = response; + return; + } + $("#registerForm").reset(); + $("#registerForm .error").innerText = "Account created successfully! You may now log in."; + }); + $("#addTrackingForm").addEventListener("submit", async () => { + $("#addTrackingForm .error").innerText = ""; + + const response = await fetch("api.php", { + method: "post", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + action: "add-tracking", + token: $("#addTrackingForm input[name=token]").value, + person_name: $("#addTrackingForm input[name=person_name]").value, + }) + }).then(it => it.json()); + + if (response !== true) { + $("#addTrackingForm .error").innerText = response; + return; + } + $("#addTrackingForm").reset(); + refreshTrackings(); + }); + $("#deleteTrackingForm").addEventListener("submit", async () => { + $("#deleteTrackingForm .error").innerText = ""; + + const response = await fetch("api.php", { + method: "post", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + action: "delete-tracking", + token: $("#deleteTrackingForm input[name=token]").value, + person_name: $("#deleteTrackingForm input[name=person_name]").value, + }) + }).then(it => it.json()); + + if (response !== true) { + $("#deleteTrackingForm .error").innerText = response; + return; + } + $("#deleteTrackingForm").reset(); + refreshTrackings(); + }); + $("#logoutForm").addEventListener("submit", async () => { + $("#logoutForm .error").innerText = ""; + + const response = await fetch("api.php", { + method: "post", + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + }, + body: JSON.stringify({ + action: "logout", + token: $("#logoutForm input[name=token]").value, + }) + }).then(it => it.json()); + + if (response !== true) { + $("#logoutForm .error").innerText = response; + return; + } + $("#logoutForm").reset(); + loginRow.classList.remove("hidden"); + trackingRow.classList.add("hidden"); + accountRow.classList.add("hidden"); + }); + + const userData = await fetch("api.php?action=get-user-data").then(it => it.text()); + if (userData === "\"not logged in\"") { + loginRow.classList.remove("hidden"); + } else { + trackingRow.classList.remove("hidden"); + accountRow.classList.remove("hidden"); + refreshTrackings(); + } });