Added Session Storage for Current Logged In User

3 files changed, 18 insertions, 4 deletions

diff --git a/css/globals.css b/css/globals.css
index 5820939..66d4e88 100644
--- a/css/globals.css
+++ b/css/globals.css
@@ -3,6 +3,6 @@ body {
     padding: 0;
 }
 
-#loginSelector, #loadingDesktopExperience {
+#loginSelector, #loadingDesktopExperience, #desktop {
     display: none;
 }
diff --git a/index.html b/index.html
index c1c2532..e0af89b 100644
--- a/index.html
+++ b/index.html
@@ -113,6 +113,7 @@
         </div>
       </div>
     </section>
+    <section id="desktop" class="fullscreen bg-skyblue"></section>
     <!-- Scripts -->
     <script src="js/createAccount.js"></script>
     <script src="js/acountLogin.js"></script>
diff --git a/js/acountLogin.js b/js/acountLogin.js
index 7177104..53cb4b8 100644
--- a/js/acountLogin.js
+++ b/js/acountLogin.js
@@ -2,12 +2,19 @@ const welcomeSection = document.getElementById("welcome");
 const loginSelectorSection = document.getElementById("loginSelector");
 const localAccounts = localStorage.getItem("accounts");
 const loginButton = document.getElementById("loginButton");
+const currentLoggedInUser = sessionStorage.getItem("currentLoggedInUser");
 
-if (localAccounts) {
+if (localAccounts && !currentLoggedInUser) {
   welcomeSection.style.display = "none";
   loginSelectorSection.style.display = "block";
 }
 
+if (currentLoggedInUser) {
+  welcomeSection.style.display = "none";
+  loginSelectorSection.style.display = "none";
+  DELoader();
+}
+
 async function sha512(str) {
   const buf = await crypto.subtle.digest(
     "SHA-512",
@@ -34,8 +41,7 @@ loginButton.addEventListener("click", () => {
       sha512(password).then((hashedPassword) => {
         if (hashedPassword === account.password) {
           loginSelectorSection.style.display = "none";
-          const loadingDesktopExperienceElement = document.getElementById("loadingDesktopExperience");
-          loadingDesktopExperienceElement.style.display = "block";
+          sessionStorage.setItem("currentLoggedInUser", fullName);
           DELoader();
         } else {
           loginError.innerHTML = "The password entered is incorrect.";
@@ -48,6 +54,10 @@ loginButton.addEventListener("click", () => {
 });
 
 function DELoader() {
+  const loadingDesktopExperienceElement = document.getElementById(
+    "loadingDesktopExperience"
+  );
+  loadingDesktopExperienceElement.style.display = "block";
   const meterLoaderElement = document.getElementById("meter-loader");
   let width = 0;
 
@@ -59,6 +69,9 @@ function DELoader() {
         width += Math.round(Math.random() * 10);
       }
       meterLoaderElement.style.width = width + "%";
+    } else {
+      loadingDesktopExperienceElement.style.display = "none";
+      document.getElementById('desktop').style.display = "block";
     }
   }