From f9bdff2a6371ab3b54744d0f84c0877c09e23aaa Mon Sep 17 00:00:00 2001 From: ditaajipratama Date: Mon, 17 Jun 2024 17:51:54 +0700 Subject: [PATCH] Static JS for auth Front-End --- app/static/js/auth/login.js | 83 ++++++++++++++++++++++++++++++++++++ app/static/js/auth/notme.js | 45 +++++++++++++++++++ app/static/js/auth/verify.js | 44 +++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 app/static/js/auth/login.js create mode 100644 app/static/js/auth/notme.js create mode 100644 app/static/js/auth/verify.js diff --git a/app/static/js/auth/login.js b/app/static/js/auth/login.js new file mode 100644 index 0000000..cf5cb5a --- /dev/null +++ b/app/static/js/auth/login.js @@ -0,0 +1,83 @@ +function flushResponse() { + document.getElementById("alert-response" ).style.display = 'none'; + document.getElementById("alert-response" ).classList.remove('alert-success' ); + document.getElementById("alert-response" ).classList.remove('alert-danger' ); + document.getElementById("alert-response" ).classList.remove('alert-primary' ); +} + +function loadingResponse() { + flushResponse(); + document.getElementById("alert-status" ).innerHTML = "Loading..."; + document.getElementById("alert-desc" ).innerHTML = "Please wait..."; + document.getElementById("alert-response").classList.add('alert-primary'); + document.getElementById("alert-response").style.display = 'block'; +} + +function responseSession(response) { + flushResponse(); + const obj = JSON.parse(response); + document.getElementById("alert-status").innerHTML = obj.status; + if (obj.status == "success") { + document.getElementById("alert-desc" ).innerHTML = "Welcome!"; + document.getElementById("alert-response").classList.add('alert-success'); + document.getElementById("alert-response").style.display = 'block'; + window.location.replace("/portal/dashboard?msg=Welcome"); + } + else { + document.getElementById("alert-desc" ).innerHTML = "Internal error"; + document.getElementById("alert-response").classList.add('alert-danger'); + document.getElementById("alert-response").style.display = 'block'; + } +} + +function setSession(jwt) { + var url = "/api/auth/session/set"; + var payload = { + "jwt" : jwt + }; + sendHttpRequest(url, "POST", payload, function (error, response) { + if (error) console.error("Error:", error); + else { + console.log("JSON Response:", response); + responseSession(response); + } + }, "application/json"); +} + +function responseAlert(response) { + flushResponse(); + const obj = JSON.parse(response); + if (obj.status == "success") { + loadingResponse(); + document.getElementById("alert-desc" ).innerHTML = "Set the session"; + setSession(obj.data.jwt); + } + if (obj.status == "failed") { + document.getElementById("alert-response").classList.add('alert-danger'); + document.getElementById("alert-status" ).innerHTML = obj.status; + document.getElementById("alert-desc" ).innerHTML = obj.desc; + document.getElementById("alert-response").style.display = 'block'; + } +} + +function onSubmit() { + loadingResponse(); + var username = document.getElementById("form-username").value; + var password = document.getElementById("form-password").value; + + var url = "/api/auth/login"; + var payload = { + "username" : username, + "password" : password + }; + sendHttpRequest(url, "POST", payload, function (error, response) { + if (error) console.error("Error:", error); + else { + console.log("JSON Response:", response); + responseAlert(response); + } + }, "application/json"); + +} + +flushResponse(); diff --git a/app/static/js/auth/notme.js b/app/static/js/auth/notme.js new file mode 100644 index 0000000..28839d8 --- /dev/null +++ b/app/static/js/auth/notme.js @@ -0,0 +1,45 @@ +function flushResponse() { + document.getElementById("alert-response" ).style.display = 'none'; + document.getElementById("alert-response" ).classList.remove('alert-success' ); + document.getElementById("alert-response" ).classList.remove('alert-danger' ); + document.getElementById("alert-response" ).classList.remove('alert-primary' ); +} + +function loadingResponse() { + flushResponse(); + document.getElementById("alert-status" ).innerHTML = "Loading..."; + document.getElementById("alert-desc" ).innerHTML = "Please wait..."; + document.getElementById("alert-response").classList.add('alert-primary'); + document.getElementById("alert-response").style.display = 'block'; +} + +function responseAlert(response) { + flushResponse(); + const obj = JSON.parse(response); + if (obj.status == "success" ) document.getElementById("alert-response").classList.add('alert-success' ); + if (obj.status == "failed" ) document.getElementById("alert-response").classList.add('alert-danger' ); + document.getElementById("alert-status" ).innerHTML = obj.status; + document.getElementById("alert-desc" ).innerHTML = obj.desc; + document.getElementById("alert-response").style.display = 'block'; +} + +function notme() { + document.getElementById("notme-link").style.display = 'none'; + loadingResponse(); + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const token = urlParams.get('token') + var url = "/api/auth/registration/notme"; + var payload = { + "token" : token + }; + sendHttpRequest(url, "POST", payload, function (error, response) { + if (error) console.error("Error:", error); + else { + console.log("JSON Response:", response); + responseAlert(response); + } + }, "application/json"); +} + +flushResponse(); diff --git a/app/static/js/auth/verify.js b/app/static/js/auth/verify.js new file mode 100644 index 0000000..0d1f8c3 --- /dev/null +++ b/app/static/js/auth/verify.js @@ -0,0 +1,44 @@ +function flushResponse() { + document.getElementById("alert-response" ).style.display = 'none'; + document.getElementById("alert-response" ).classList.remove('alert-success' ); + document.getElementById("alert-response" ).classList.remove('alert-danger' ); + document.getElementById("alert-response" ).classList.remove('alert-primary' ); +} + +function loadingResponse() { + flushResponse(); + document.getElementById("alert-status" ).innerHTML = "Loading..."; + document.getElementById("alert-desc" ).innerHTML = "Please wait..."; + document.getElementById("alert-response").classList.add('alert-primary'); + document.getElementById("alert-response").style.display = 'block'; +} + +function responseAlert(response) { + flushResponse(); + const obj = JSON.parse(response); + if (obj.status == "success" ) document.getElementById("alert-response").classList.add('alert-success' ); + if (obj.status == "failed" ) document.getElementById("alert-response").classList.add('alert-danger' ); + document.getElementById("alert-status" ).innerHTML = obj.status; + document.getElementById("alert-desc" ).innerHTML = obj.desc; + document.getElementById("alert-response").style.display = 'block'; +} + +function verify() { + loadingResponse(); + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const token = urlParams.get('token') + var url = "/api/auth/registration/verify"; + var payload = { + "token" : token + }; + sendHttpRequest(url, "POST", payload, function (error, response) { + if (error) console.error("Error:", error); + else { + console.log("JSON Response:", response); + responseAlert(response); + } + }, "application/json"); +} + +verify();