Login + DELoader Prototype

author: Priyansh <[email protected]> 2020-11-12 02:15:07 +0530
committer: Priyansh <[email protected]> 2020-11-12 02:15:07 +0530
commit: 7092267837642b67c2e19cd4981a5d77fcd8655c (patch)
tree: e9d9fd013dc095b943eaff2ca24b9db44833d57e
parent: eb09882801afd80df3c130fb7234a319125cfe58 (diff)
download: nineties-computing-7092267837642b67c2e19cd4981a5d77fcd8655c.tar.xz
nineties-computing-7092267837642b67c2e19cd4981a5d77fcd8655c.zip
4 files changed, 293 insertions, 60 deletions
diff --git a/css/globals.css b/css/globals.css
index 9798fcc..5820939 100644
--- a/css/globals.css
+++ b/css/globals.css
@@ -2,3 +2,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
+#loginSelector, #loadingDesktopExperience {
+    display: none;
+}
diff --git a/css/layouts.css b/css/layouts.css
index 31a424c..cb96025 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -1,58 +1,135 @@
 .fullscreen {
-    width: 100%;
-    height: 100vh;
-    max-width: 100%;
-    max-height: 100vh;
-    z-index: 1;
-    position: relative;
-    overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  max-height: 100vh;
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
 }
 
 .fullscreen_centered {
-    z-index: 2;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .height_100-55 {
-    height: calc(100% - 55px);
+  height: calc(100% - 55px);
 }
 
 .mediumbox {
-    width: 60vh;
-    max-height: auto;
+  width: 60vh;
+  max-height: auto;
 }
 
 .padding_25 {
-    padding: 25px;
+  padding: 25px;
 }
 
 .bordered_4px {
-    border: 4px solid #383838;
+  border: 4px solid #383838;
 }
 
 .center_text {
-    text-align: center;
+  text-align: center;
 }
 
 .justify_text {
-    text-align: justify;
+  text-align: justify;
 }
 
 .image_block {
-    width: 128px;
-    height: 128px;
-    background-color: #b9b9b9;
-    display: inline-block;
-    margin-right: 20px;
-    cursor: pointer;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+  width: 128px;
+  height: 128px;
+  background-color: #b9b9b9;
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .form_elements {
-    margin-top: 20px;
+  margin-top: 20px;
+}
+
+.meter {
+  height: 20px; /* Can be anything */
+  position: relative;
+  /* background: #555; */
+  -moz-border-radius: 25px;
+  -webkit-border-radius: 25px;
+  border-radius: 25px;
+  /* padding: 10px; */
+  /* box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); */
+}
+
+.meter > span {
+  display: block;
+  height: 100%;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background-color: rgb(80, 80, 80);
+  background-image: linear-gradient(
+    center bottom,
+    rgb(43, 194, 83) 37%,
+    rgb(84, 240, 84) 69%
+  );
+  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+  position: relative;
+  overflow: hidden;
+  transition-duration: 500ms;
+}
+
+.meter > span:after,
+.animate > span > span {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  z-index: 1;
+  background-size: 50px 50px;
+  animation: move 2s linear infinite;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  overflow: hidden;
+}
+
+.animate > span:after {
+  display: none;
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
+.meter > span:after,
+.animate > span > span {
+  animation: move 2s linear infinite;
 }
diff --git a/index.html b/index.html
index de983c4..c1c2532 100644
--- a/index.html
+++ b/index.html
@@ -1,40 +1,120 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Nineties Computing</title>
-    <link rel="stylesheet" href="css/globals.css">
-    <link rel="stylesheet" href="css/fonts.css">
-    <link rel="stylesheet" href="css/colors.css">
-    <link rel="stylesheet" href="css/layouts.css">
-    <link rel="stylesheet" href="css/texttypes.css">
-</head>
-<body>
+    <link rel="stylesheet" href="css/globals.css" />
+    <link rel="stylesheet" href="css/fonts.css" />
+    <link rel="stylesheet" href="css/colors.css" />
+    <link rel="stylesheet" href="css/layouts.css" />
+    <link rel="stylesheet" href="css/texttypes.css" />
+  </head>
+  <body>
     <!-- Welcome Section for Logging in -->
     <section id="welcome" class="fullscreen bg-skyblue">
-        <div class="fullscreen_centered mediumbox bg-white padding_25">
-            <div class="bordered_4px height_100-55 padding_25">
-                <marquee class="welcome_heading" scrollamount="10">Hello user! Looks like you don't have an account yet!</marquee>
-                <h3 class="chicago center_text">Don't worry. We will help you with that!</h3>
-                <p class="chicago justify_text">In order to create your account, you need to provide some information. All of this information is stored on your local computer is not transmitted anywhere. Please fill in all of the following fields mentioned below and then click the 'Create My Account' button. We are waiting for you to finish. :)</p>
-                <input type="file" id="avatar-file-input" accept="image/x-png,image/gif,image/jpeg" style="display: none;">
-                <div id="avatar-image-element" class="image_block"></div>
-                <span id="avatar-text-element" class="image_block_description chicago">Select your avatar...</span>
-                <div class='form_elements chicago'>
-                    <label for="fullname">Full Name</label>
-                    <input type="text" name="fullname" id="fullname" placeholder="Enter your full name">
-                    <label for="password">Password</label>
-                    <input type="password" name="password" id="password" placeholder="Enter a new password">
-                    <label for="confirmPassword">Confirm Password</label>
-                    <input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm Password">
-                    <p id="error" class="chicago text-red"></p>
-                    <button id="createNewAccount" class="btn bg-purple chicago text-white">Create My Account</button>          
-                </div>
-            </div>
+      <div class="fullscreen_centered mediumbox bg-white padding_25">
+        <div class="bordered_4px height_100-55 padding_25">
+          <marquee class="welcome_heading" scrollamount="10"
+            >Hello user! Looks like you don't have an account yet!</marquee
+          >
+          <h3 class="chicago center_text">
+            Don't worry. We will help you with that!
+          </h3>
+          <p class="chicago justify_text">
+            In order to create your account, you need to provide some
+            information. All of this information is stored on your local
+            computer is not transmitted anywhere. Please fill in all of the
+            following fields mentioned below and then click the 'Create My
+            Account' button. We are waiting for you to finish. :)
+          </p>
+          <input
+            type="file"
+            id="avatar-file-input"
+            accept="image/x-png,image/gif,image/jpeg"
+            style="display: none"
+          />
+          <div id="avatar-image-element" class="image_block"></div>
+          <span id="avatar-text-element" class="image_block_description chicago"
+            >Select your avatar...</span
+          >
+          <div class="form_elements chicago">
+            <label for="fullname">Full Name</label>
+            <input
+              autocomplete="off"
+              type="text"
+              name="fullname"
+              id="fullname"
+              placeholder="Enter your full name"
+            />
+            <label for="password">Password</label>
+            <input
+              autocomplete="off"
+              type="password"
+              name="password"
+              id="password"
+              placeholder="Enter a new password"
+            />
+            <label for="confirmPassword">Confirm Password</label>
+            <input
+              autocomplete="off"
+              type="password"
+              name="confirmPassword"
+              id="confirmPassword"
+              placeholder="Confirm Password"
+            />
+            <p id="error" class="chicago text-red"></p>
+            <button
+              id="createNewAccount"
+              class="btn bg-purple chicago text-white"
+            >
+              Create My Account
+            </button>
+          </div>
         </div>
+      </div>
+    </section>
+    <section id="loginSelector" class="fullscreen bg-skyblue">
+      <div class="fullscreen_centered mediumbox bg-white padding_25">
+        <div class="bordered_4px height_100-55 padding_25">
+          <h1 class="welcome_heading">Login to your account</h1>
+          <div class="form_elements chicago">
+            <label for="loginFullName">Full Name</label>
+            <input
+              autocomplete="off"
+              type="text"
+              name="loginFullName"
+              id="loginFullName"
+              placeholder="Enter your full name"
+            />
+            <label for="loginPassword">Password</label>
+            <input
+              autocomplete="off"
+              type="password"
+              name="loginPassword"
+              id="loginPassword"
+              placeholder="Enter a new password"
+            />
+            <p id="loginError" class="chicago text-red"></p>
+            <button id="loginButton" class="btn bg-purple chicago text-white">
+              Login
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="loadingDesktopExperience" class="fullscreen bg-skyblue">
+      <div class="fullscreen_centered mediumbox bg-white padding_25">
+        <div class="bordered_4px height_100-55 padding_25 chicago">
+          <h1 style="margin-top: 0">Loading your desktop experience</h1>
+          <div class="meter animate">
+            <span id="meter-loader" style="width: 0%"><span></span></span>
+          </div>
+        </div>
+      </div>
     </section>
     <!-- Scripts -->
     <script src="js/createAccount.js"></script>
-</body>
-</html>
-\ No newline at end of file
+    <script src="js/acountLogin.js"></script>
+  </body>
+</html>
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);
+  })();
+}
author	Priyansh <[email protected]>	2020-11-12 02:15:07 +0530
committer	Priyansh <[email protected]>	2020-11-12 02:15:07 +0530
commit	7092267837642b67c2e19cd4981a5d77fcd8655c (patch)
tree	e9d9fd013dc095b943eaff2ca24b9db44833d57e
parent	eb09882801afd80df3c130fb7234a319125cfe58 (diff)
download	nineties-computing-7092267837642b67c2e19cd4981a5d77fcd8655c.tar.xz nineties-computing-7092267837642b67c2e19cd4981a5d77fcd8655c.zip