Mobile Formatting for Guides and Account Pages

account/index.html

@@ -37,14 +37,14 @@
             <h3 class="center">Please log in before viewing account information</h3>
             <div class="form-group">
                 <label for="username">SFID / Username:</label>
-                <input type="text" id="username" name="username" required />
+                <input class="login-input" type="text" id="username" name="username" required />
             </div>
             <div class="form-group">
                 <label for="password">Password:</label>
-                <input type="password" id="password" name="password" required />
+                <input class="login-input" type="password" id="password" name="password" required />
             </div>
-            <button type="submit" style="font-size: 24px; width: 100%;">Login</button>
+            <button class="form-button" type="submit">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>
+            <p class="form-note">Please ask an SPFN Developer in the <a href="https://discord.gg/grMSxZf">discord server</a> for assistance with password resets</p>
         </form>
 
         <div id="user-info" class="info" style="display: none;">

css/style.css

@@ -64,13 +64,13 @@ strong {
     padding: 4px;
 }
 
-input {
+.login-input {
     background-color: #5f0808;
     border: 1px solid white;
     color: white;
     font-size: 14px;
     border-radius: 5px;
-    padding: 4px;
+    padding: 8px;
 }
 
 .header-button {
@@ -103,7 +103,38 @@ form {
     display: flex;
     flex-direction: column;
     font-weight: bold;
-    margin: 8px 0;
+    margin: 12px 0;
+}
+
+.form-button {
+    font-size: 24px;
+    width: 100%;
+}
+
+.form-note {
+    text-align: center;
+    font-size: 12px;
+}
+
+@media (orientation: portrait) {
+    form {
+        max-width: 100%;
+        font-size: 48px;
+    }
+
+    .form-button {
+        font-size: 64px;
+    }
+
+    .login-input {
+        font-size: 48px;
+        border-width: 4px;
+        border-radius: 24px;
+    }
+
+    .form-note {
+        font-size: 36px;
+    }
 }
 
 .info {
@@ -167,7 +198,26 @@ form {
     width: 70%;
     background-color: #770505;
     border-radius: 15px;
-    padding: 8px
+    padding: 8px;
+    font-size: 16px;
+}
+
+@media (orientation: portrait) {
+    .guide-container {
+        display: block;
+        width: 100%;
+        font-size: 36px;
+    }
+
+    .guide-buttons {
+        width: 100%;
+    }
+
+    .guide {
+        font-size: 60px;
+        height: 128px;
+        line-height: 128px;
+    }
 }
 
 code {
@@ -187,6 +237,14 @@ code {
     border-radius: 15px;
 }
 
+@media (orientation: portrait) {
+    .error-container {
+        font-size: 36px;
+        width: 100%;
+        margin: 12px;
+    }
+}
+
 .title {
     height: 80vh;
     display: flex;

guides/index.html

@@ -40,20 +40,6 @@
             <div class="guide-content" id="guide-contents">
                 <h3>Loading...</h3>
             </div>
-
-            <div class="guide-content" id="g-troubleshoot" style="display: none;">
-                <h2>Troubleshooting - Wii U</h2>
-                <h3>I'm getting error code 118-XXXX when joining Splatoon matches</h3>
-                <p>
-                    Error codes starting with 118 refer to the Peer to Peer connection.
-                    Either your connection or the connection of the host console is bad, resulting in errors like this.
-                    Ensure that your NAT type is either A or B (preferrably A) and try again.
-                </p>
-                <h3>I'm getting error code 616-XXXX when booting into the SPFN environment</h3>
-                <p>SPFN requires you to be on the latest version of Aroma. Open the Aroma Updater while in the SPFN environment and update it.</p>
-                <h3>My error isn't listed</h3>
-                <p><a href="https://discord.gg/grMSxZf" target="_blank">Join the Discord</a> and ask in the assistance channel</p>
-            </div>
         </div>
 
         <script type="text/javascript" src="/js/guides.js"></script>

js/accounts.js

@@ -24,12 +24,19 @@ function loginError(message, code = null) {
 async function generateToken(username, password) {
     const credentials = btoa(`${username} ${password}`);
 
-    const response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
+    let response;
-        method: "GET",
+    try {
-        headers: {
+        response = await fetch("https://account.spfn.net/api/v2/oauth2/generate_token", {
-            "Authorization": `Basic ${credentials}`,
+            method: "GET",
-        }
+            headers: {
-    })
+                "Authorization": `Basic ${credentials}`,
+            }
+        })
+    } catch (err) {
+        loginError(`Internal Server Error: ${err.message}`)
+        throw new Error(err);
+    }
+
     if (!response.ok) {
         if (response.status == 400) { // Invalid Login
             loginError("Invalid SFID or Password");
@@ -55,26 +62,19 @@ async function getToken(username, password) {
     let expiryStr = sessionStorage.getItem("authExpires");
     if (expiryStr) { // Expiry exists so token should exist
         let expiry = new Date(expiryStr);
-        if (expiry < new Date()) {
+        if (expiry < new Date()) { // Expired token
-            console.log("Token Expired - Generating new token")
+            token = await generateToken(username, password);
-            token = await generateToken(username, password); // Generate Token and Save to Session Storage
+        } else if (!token) { // Expiry Saved but No Token (shouldn't be possible but it'll be caught if it happens)
-        } else if (!token) {
+            token = await generateToken(username, password);
-            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 {
+    } else { // Token Never Saved in Session
-        console.log("No expiry found - Generating new token")
+        token = await generateToken(username, password);
-        token = await generateToken(username, password); // Generate Token and Save to Session Storage
     }
 
     return token
 }
 
 function updateUserDataDisplay(data) {
-    console.log(data)
-
     document.getElementById("display-name").textContent = data["mii"]["name"];
     document.getElementById("sfid").textContent = `SFID: ${data["user_id"]}`;
 
@@ -115,6 +115,7 @@ document.getElementById("login").addEventListener("submit", async function(event
     const password = await document.getElementById("password").value;
     
     let token = await getToken(username, password);
+    if (!token) return;
 
     document.getElementById("password").value = "";
 
@@ -141,11 +142,9 @@ document.getElementById("login").addEventListener("submit", async function(event
 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", {