diff --git a/account/accounts.js b/account/accounts.js index 87e5d27..d34dcc9 100644 --- a/account/accounts.js +++ b/account/accounts.js @@ -1,59 +1,149 @@ -async function generateToken(creds) { - const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", { +function loginError(message, code = null) { + let errorStr; + if (code) { + errorStr = `Status code ${code}: ${message}`; + } else { + errorStr = message; + } + + document.getElementById("error-text").textContent = errorStr; + + document.getElementById("login-error").style.display = "block"; +} + +async function generateToken(username, password) { + const credentials = btoa(`${username} ${password}`); + + const response = await fetch("https://account.spfn.net/api/v2/oauth2/generatetoken", { method: "GET", headers: { - "Authorization": `Basic ${creds}`, + "Authorization": `Basic ${credentials}`, } }) - if (!response.ok) throw new Error("Network Response was not okay when Generating Token"); + if (!response.ok) { + if (response.status == 400) { // Invalid Login + loginError("Invalid SFID or Password"); + } else { + loginError(await response.text(), response.status); + } + + throw new Error("Network Response was not okay when Generating Token"); + }; const data = await response.json(); sessionStorage.setItem("authToken", data["token"]) - sessionStorage.setItem("authExpires", data["expiry"]) + + const expiry = data["expiry"].slice(0, 19) + "Z" + sessionStorage.setItem("authExpires", expiry) + return data["token"]; +} + +function updateUserDataDisplay(data) { + document.getElementById("display-name").textContent = data["mii"]["name"]; + document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`; + + document.getElementById("email").innerHTML = `Email: ${data["email"]["address"]}`; + document.getElementById("dob").innerHTML = `Date of Birth: ${data["birth_date"]}`; + + let createdAt = new Date(data["create_date"] + "Z"); + document.getElementById("created-at").innerHTML = `Created: ${createdAt.toLocaleString()}` + + document.getElementById("tz").innerHTML = `Timezone: ${data["tz_name"]}`; + document.getElementById("region").innerHTML = `Country/Region: ${data["country"]}`; + + document.getElementById("login").style.display = "none"; + document.getElementById("user-info").style.display = "flex"; +} + +function logOut() { + document.getElementById("login-error").style.display = "none"; + + sessionStorage.clear(); + document.getElementById("user-info").style.display = "none"; + document.getElementById("login").style.display = "flex"; } document.getElementById("login").addEventListener("submit", async function(event) { event.preventDefault(); + document.getElementById("login-error").style.display = "none"; + const username = await document.getElementById("username").value; const password = await document.getElementById("password").value; - const credentials = btoa(`${username} ${password}`); - - let expiry = sessionStorage.getItem("authExpires"); let token = sessionStorage.getItem("authToken"); - if (expiry) { - if (!token) { - console.log("No token found - Generating new token") - await generateToken(credentials); // Generate Token and Save to Session Storage + + let expiryStr = sessionStorage.getItem("authExpires"); + if (expiryStr) { // Expiry exists so token should exist + let expiry = new Date(expiryStr); + if (expiry < new Date()) { + console.log("Token Expired - Generating new token") + token = await generateToken(username, password); // Generate Token and Save to Session Storage + } else if (!token) { + console.log("Expiry found but no token wtf? - Generating new token") + token = await generateToken(username, password); // Generate Token and Save to Session Storage + } else { + console.log("Expiry is less than the current Date() and there is a token") } } else { - console.log("No token found - Generating new token") - await generateToken(credentials); + console.log("No expiry found - Generating new token") + token = await generateToken(username, password); // Generate Token and Save to Session Storage } + document.getElementById("password").value = ""; + const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", { method: "GET", headers: { "Authorization": `Bearer ${token}` } }) - if (!response.ok) throw new Error("Network Response was not okay when requesting Profile") + if (!response.ok) { + loginError(await response.text(), response.status); + throw new Error("Network Response was not okay when requesting Profile"); + } const data = await response.json(); - console.log(data) - // Success - Display user data - document.getElementById("display-name").textContent = data["mii"]["name"]; - document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`; + updateUserDataDisplay(data); +}) - document.getElementById("email").innerHTML = `Email: ${data["email"]["address"]}`; - document.getElementById("dob").innerHTML = `Date of Birth: ${data["birth_date"]}`; - document.getElementById("tz").innerHTML = `Timezone: ${data["tz_name"]}`; - document.getElementById("region").innerHTML = `Country/Region: ${data["country"]}`; - document.getElementById("login").style.display = "none"; - document.getElementById("user-info").style.display = "flex"; -}) \ No newline at end of file + +// Check if there is an active login +window.onload = async function() { + let expiryStr = sessionStorage.getItem("authExpires"); + if (expiryStr) { + console.log("Expiry found") + let expiry = new Date(expiryStr); + + if (expiry > new Date()) { // Hasn't expired - Get user data + console.log("Not expired - Requesting data") + let token = sessionStorage.getItem("authToken"); + + const response = await fetch("https://account.spfn.net/api/v2/users/@me/profile", { + method: "GET", + headers: { + "Authorization": `Bearer ${token}` + } + }) + if (!response.ok) throw new Error("Network Response was not okay when requesting Profile") + + const data = await response.json(); + + updateUserDataDisplay(data); + document.getElementById("loading-screen").style.display = "none"; + + } else { // Has expired - Prompt user to log back in + document.getElementById("loading-screen").style.display = "none"; + document.getElementById("login").style.display = "block"; + + loginError("Login expired - Please log in again") + } + } else { // User has never logged in for this session + document.getElementById("loading-screen").style.display = "none"; + document.getElementById("login").style.display = "block"; + } +} \ No newline at end of file diff --git a/account/index.html b/account/index.html index e364777..9b33c78 100644 --- a/account/index.html +++ b/account/index.html @@ -19,7 +19,15 @@
-
+
+

Loading...

+
+ + + +

Please log in before viewing account information

@@ -29,7 +37,7 @@
- +

Please ask an SPFN Developer in the discord server for assistance with password resets

@@ -37,10 +45,14 @@

Display Name

SFID: Username

+

Email: name@domain.com

Date of Birth: dd/mm/yyyy

+
+

Created: dd/mm/yyyy hh:mm

+

Timezone: Europe/London

Country/Region: GB

@@ -50,6 +62,6 @@
\ No newline at end of file diff --git a/css/style.css b/css/style.css index 204d07f..7cf32f5 100644 --- a/css/style.css +++ b/css/style.css @@ -110,4 +110,13 @@ form { background-color: #bfbfbf; color: black; border-radius: 5px; +} + +.error-container { + background-color: #aa0000; + width: 40%; + margin: 0 auto; + color: white; + text-align: center; + border-radius: 15px; } \ No newline at end of file diff --git a/index.html b/index.html index 6da5f84..3131e79 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,6 @@

Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U

\ No newline at end of file