Fixed Profile Fail when Generating Token + Auto Display Profile when Valid Token Found in Session

account/accounts.js

@@ -1,38 +1,128 @@
-async function generateToken(creds) {
+function loginError(message, code = null) {
-    const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
+    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 = `<strong>Email: </strong>${data["email"]["address"]}`;
+    document.getElementById("dob").innerHTML = `<strong>Date of Birth: </strong>${data["birth_date"]}`;
+
+    let createdAt = new Date(data["create_date"] + "Z");
+    document.getElementById("created-at").innerHTML = `<strong>Created: </strong>${createdAt.toLocaleString()}`
+
+    document.getElementById("tz").innerHTML = `<strong>Timezone: </strong>${data["tz_name"]}`;
+    document.getElementById("region").innerHTML = `<strong>Country/Region: </strong>${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) {
+    let expiryStr = sessionStorage.getItem("authExpires");
-            console.log("No token found - Generating new token")
+    if (expiryStr) { // Expiry exists so token should exist
-            await generateToken(credentials); // Generate Token and Save to Session Storage
+        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")
+        console.log("No expiry found - Generating new token")
-        await generateToken(credentials);
+        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) {
+        loginError(await response.text(), response.status);
+        throw new Error("Network Response was not okay when requesting Profile");
+    }
+    
+    const data = await response.json();
+
+    // Success - Display user data
+    updateUserDataDisplay(data);
+})
+
+
+
+// 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: {
@@ -43,17 +133,17 @@ document.getElementById("login").addEventListener("submit", async function(event
         
             const data = await response.json();
 
-    console.log(data)
+            updateUserDataDisplay(data);
+            document.getElementById("loading-screen").style.display = "none";
         
-    // Success - Display user data
+        } else { // Has expired - Prompt user to log back in
-    document.getElementById("display-name").textContent = data["mii"]["name"];
+            document.getElementById("loading-screen").style.display = "none";
-    document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`;
+            document.getElementById("login").style.display = "block";
 
-    document.getElementById("email").innerHTML = `<strong>Email: </strong>${data["email"]["address"]}`;
+            loginError("Login expired - Please log in again")
-    document.getElementById("dob").innerHTML = `<strong>Date of Birth: </strong>${data["birth_date"]}`;
+        }
-    document.getElementById("tz").innerHTML = `<strong>Timezone: </strong>${data["tz_name"]}`;
+    } else { // User has never logged in for this session
-    document.getElementById("region").innerHTML = `<strong>Country/Region: </strong>${data["country"]}`;
+        document.getElementById("loading-screen").style.display = "none";
-
+        document.getElementById("login").style.display = "block";
-    document.getElementById("login").style.display = "none";
+    }
-    document.getElementById("user-info").style.display = "flex";
+}
-})

account/index.html

@@ -19,7 +19,15 @@
     </header>
 
     <main>
-        <form id="login">
+        <div id="loading-screen">
+            <h2 class="center">Loading...</h2>
+        </div>
+
+        <div id="login-error" class="error-container" style="display: none;">
+            <h2 id="error-text">ERROR</h2>
+        </div>
+
+        <form id="login" style="display: none;">
             <h3 class="center">Please log in before viewing account information</h3>
             <div class="form-group">
                 <label for="username">SFID:</label>
@@ -29,7 +37,7 @@
                 <label for="password">Password:</label>
                 <input type="password" id="password" name="password" required />
             </div>
-            <button type="submit" style="font-size: 24px;">Login</button>
+            <button type="submit" style="font-size: 24px; width: 100%;">Login</button>
             <p class="center" style="font-size: 12px;">Please ask an SPFN Developer in the <a href="https://discord.gg/grMSxZf">discord server</a> for assistance with password resets</p>
         </form>
 
@@ -37,10 +45,14 @@
             <div id="user-display" class="info-container" style="width: 180px">
                 <h3 id="display-name" style="margin: 2px;">Display Name</h3>
                 <p id="sfid" style="margin: 2px;">SFID: Username</p>
+                <button style="font-size: 24px; width: 180px;" onclick="logOut()">Log Out</button>
             </div>
             <div id="user-details" class="info-container", style="flex: 1;">
                 <p class="info-text" id="email"><strong>Email: </strong>name@domain.com</p>
                 <p class="info-text" id="dob"><strong>Date of Birth: </strong>dd/mm/yyyy</p>
+                <hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
+                <p class="info-text" id="created-at"><strong>Created: </strong>dd/mm/yyyy hh:mm</p>
+                <hr style="margin: 1rem 0; border: none; height: 1px; background: #aaa;">
                 <p class="info-text" id="tz"><strong>Timezone: </strong>Europe/London</p>
                 <p class="info-text" id="region"><strong>Country/Region: </strong>GB</p>
             </div>
@@ -50,6 +62,6 @@
     </main>
 
     <footer>
-        <p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
+        <p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
     </footer>
 </body>

css/style.css

@@ -111,3 +111,12 @@ form {
     color: black;
     border-radius: 5px;
 }
+
+.error-container {
+    background-color: #aa0000;
+    width: 40%;
+    margin: 0 auto;
+    color: white;
+    text-align: center;
+    border-radius: 15px;
+}

index.html

@@ -20,6 +20,6 @@
         <p>Splatfestival Network - Restoring Splatfests to Splatoon on the Wii U</p>
     </main>
     <footer>
-        <p class="center">Need assistance? <a href="https://discord.gg/grMSxZf">Join the Discord</a></p>
+        <p class="center">Need assistance? <a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a></p>
     </footer>
 </body>