Allow visiting the shop without an account

stogacs · Oct 16, 2023 · 47d39b8 · 47d39b8
1 parent f8ef7dc
commit 47d39b8
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git a/leaderboard/shop/index.html b/leaderboard/shop/index.html
@@ -44,8 +44,10 @@
     <div style="font-size: 150%; position:absolute; top:100px; padding-bottom: 90px;">
       <p id="error-display" class="error-text center-text"></p>
     </div>
+    <div class="notices">
+      <p class="alert" id="alert-signin" style="display: none;">You are not signed in<span class="close-alert" onclick="this.parentElement.style.display='none';">&times;</span></p>
+    </div>
     <div class="main">
-
       <div id="side-cards" style="position: absolute; top: 0px;">
         <div class="side-card pure-g">
           <div class="card-content center-text">
@@ -70,7 +72,7 @@ <h3><p>Summary</p></h3>
             <div>
               <p id="account-description" class="center-text">Loading your account info...</p>
               <a class="button-container" href="./past.html">
-                <button type="button" class="pure-button pure-button-primary">
+                <button type="button" id="past-purchase-button" class="pure-button pure-button-primary">
                   <div class="button-content">
                     <p class="button-text">View my items</p>
                   </div>

diff --git a/scripts/leaderboard/store.js b/scripts/leaderboard/store.js
@@ -1,11 +1,15 @@
 document.addEventListener("DOMContentLoaded", async function () {
+  let userinfo;
   await verifyUser().then(userInfo => {
+    userinfo = userInfo;
     if (userInfo != null) {
       if (userInfo.name == null) {
         window.location.href = "/leaderboard/onboarding/claim.html";
       }
     } else {
-      window.location.href = "/401";
+      document.getElementById("alert-signin").style = "display: inline-flex;";
+      document.getElementById("account-description").innerText = "Sign in to see your account details.";
+      document.getElementById("past-purchase-button").classList.add("pure-button-disabled");
     }
 
 
@@ -19,7 +23,7 @@ document.addEventListener("DOMContentLoaded", async function () {
                   } else {
                     latestPurchase = "Never";
                   }
-                  document.getElementById("account-description").innerHTML = "Shekels: " + userInfo.shekels + "<br>Last Purchase: " + latestPurchase;
+                  document.getElementById("account-description").innerText = "Shekels: " + userInfo.shekels + "<br>Last Purchase: " + latestPurchase;
                   document.getElementById("account-title").innerHTML = userInfo.name;
             }
         })

diff --git a/style/leaderboard/store.css b/style/leaderboard/store.css
@@ -154,6 +154,12 @@
   width: auto;
 }
 
+.notices {
+  position: absolute;
+  z-index: 100;
+  top: 90px;
+}
+
 @media screen and (max-width: 1700px) {
   .side-card {
     margin-left: -275px;

diff --git a/style/theme.css b/style/theme.css
@@ -241,4 +241,37 @@ a:hover {
 		-ms-transform: scale(0.9);
 		transform: scale(0.9);
 	}
-}
+}
+
+.alert {
+    padding: 0 2vh 0 3vh;
+    background-color: var(--darkred);
+    color: var(--light);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+
+    border-style: dashed;
+    border-width: 2.5px;
+    border-radius: 10px;
+    border-color: var(--superdarkred);
+}
+
+.alert > p {
+    text-shadow: 2px 2px 3px var(--dark);
+    margin-right: 5vh;
+}
+
+.close-alert {
+    display: inline-flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 5vh;
+    cursor: pointer;
+    transition: 0.3s;
+	padding: 0;
+}
+
+.close-alert:hover {
+    color: var(--superdarkred);
+}