1 files changed, 72 insertions, 0 deletions
diff --git a/js/acountLogin.js b/js/acountLogin.js
new file mode 100644
index 0000000..7177104
--- /dev/null
+++ b/js/acountLogin.js
@@ -0,0 +1,72 @@
+const welcomeSection = document.getElementById("welcome");
+const loginSelectorSection = document.getElementById("loginSelector");
+const localAccounts = localStorage.getItem("accounts");
+const loginButton = document.getElementById("loginButton");
+
+if (localAccounts) {
+  welcomeSection.style.display = "none";
+  loginSelectorSection.style.display = "block";
+}
+
+async function sha512(str) {
+  const buf = await crypto.subtle.digest(
+    "SHA-512",
+    new TextEncoder("utf-8").encode(str)
+  );
+  return Array.prototype.map
+    .call(new Uint8Array(buf), (x) => ("00" + x.toString(16)).slice(-2))
+    .join("");
+}
+
+loginButton.addEventListener("click", () => {
+  const fullName = document.getElementById("loginFullName").value;
+  const password = document.getElementById("loginPassword").value;
+  const loginError = document.getElementById("loginError");
+  if (!fullName || !password) {
+    loginError.innerHTML = "Please enter your credentials.";
+  } else {
+    const parsedAccounts = JSON.parse(localStorage.getItem("accounts"));
+    const accountIndex = parsedAccounts.findIndex(
+      (account) => account.fullName === fullName
+    );
+    if (accountIndex > -1) {
+      const account = parsedAccounts[accountIndex];
+      sha512(password).then((hashedPassword) => {
+        if (hashedPassword === account.password) {
+          loginSelectorSection.style.display = "none";
+          const loadingDesktopExperienceElement = document.getElementById("loadingDesktopExperience");
+          loadingDesktopExperienceElement.style.display = "block";
+          DELoader();
+        } else {
+          loginError.innerHTML = "The password entered is incorrect.";
+        }
+      });
+    } else {
+      loginError.innerHTML = "This user account does not exist.";
+    }
+  }
+});
+
+function DELoader() {
+  const meterLoaderElement = document.getElementById("meter-loader");
+  let width = 0;
+
+  function loadMeter() {
+    if (width < 100) {
+      if (100 - width < 10) {
+        width = 100;
+      } else {
+        width += Math.round(Math.random() * 10);
+      }
+      meterLoaderElement.style.width = width + "%";
+    }
+  }
+
+  (function loop() {
+    var rand = Math.round(Math.random() * 500);
+    setTimeout(function () {
+      loadMeter();
+      loop();
+    }, rand);
+  })();
+}