UI Improvements

auth/auth.js

@@ -191,6 +191,18 @@ const displayFingerprints = () => {
   });
 };
 
+const setUIData = (data) => {
+  if (document.getElementById("resizer")) {
+    document.getElementById("resizer").innerHTML = data.display_name;
+  }
+  if(document.getElementById("logo")){
+    var logo = document.getElementById("logo");
+    logo.src = data.avatar;
+    logo.style.borderRadius = "10%";
+    logo.alt = "Profile icon for " + data.display_name;
+  }
+};
+
 const checkLogin = () => {
   // check login status
   var token = localStorage.getItem("tty_token");
@@ -214,7 +226,7 @@ const checkLogin = () => {
       }else {
         localStorage.setItem("tty_token", response.refreshToken);
         localStorage.setItem("tty_userData", JSON.stringify(response.data));
-        document.getElementById("resizer").innerHTML = response.data.display_name;
+        setUIData(response.data);
       }
     });
   }else {
@@ -269,7 +281,7 @@ $(() => {
           }else{
             localStorage.setItem("tty_token", response.refreshToken);
             localStorage.setItem("tty_userData", JSON.stringify(response.data));
-            document.getElementById("resizer").innerHTML = response.data.display_name;
+            setUIData(response.data);
           }
         });
     } else {

elements/logo.php

@@ -4,6 +4,6 @@
     }else{
         echo "<a href=\"https://tty.hackers.town\">";
     }?>
-        <img src="/Assets/HTown.png" class="logo self-align-center mx-auto d-block" alt="Hacker Town logo in ASCII art. Rendered as image to force correct visualization."/>
+        <img src="/Assets/HTown.png" class="logo self-align-center mx-auto d-block" alt="Hacker Town logo in ASCII art. Rendered as image to force correct visualization." id="logo"/>
     </a>
 </div>

elements/unauth.php

@@ -4,5 +4,5 @@
     </span>
 </div>
 <div class="row button">
-    <button id="bttn" class="keyButton" onclick="beginOauth()">Log In With HTown <!-- img src="/Assets/HTown.png" class="emoji"/ --></button>
+    <button id="bttn" class="keyButton" onclick="beginOauth()">Log In With <img src="/Assets/hacker-128.png" class="emoji" /></button>
 </div>

index.js

@@ -136,6 +136,8 @@ $(() => {
         Swal.fire({
           ...SwalConfig,
           text: message
+        }).then(() => {
+          window.location.replace("/");
         });
       }
 

style.css

@@ -128,3 +128,7 @@ td:first-child {
 .fingerprintBit {
     text-align: right;
 }
+
+.emoji {
+    height: 2em;
+}