From 88cad3c5674987904343d8c17b2197a540c9703f Mon Sep 17 00:00:00 2001
From: Priyansh <bobbyskhs@gmail.com>
Date: Thu, 12 Nov 2020 01:22:00 +0530
Subject: Able to create accounts now

---
 css/colors.css      |  4 +++
 css/layouts.css     |  3 ++
 index.html          |  8 +++--
 js/createAccount.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 js/createAccount.js

diff --git a/css/colors.css b/css/colors.css
index 5895570..104a2b3 100644
--- a/css/colors.css
+++ b/css/colors.css
@@ -13,3 +13,7 @@
 .text-white {
     color: #ffffff;
 }
+
+.text-red {
+    color: #c90b0b;
+}
diff --git a/css/layouts.css b/css/layouts.css
index f65d7c0..31a424c 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -48,6 +48,9 @@
     display: inline-block;
     margin-right: 20px;
     cursor: pointer;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 .form_elements {
diff --git a/index.html b/index.html
index a328b6d..de983c4 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,9 @@
                 <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>
-                <div class="image_block"></div>
-                <span class="image_block_description chicago">Select your avatar...</span>
+                <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">
@@ -27,10 +28,13 @@
                     <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>
     </section>
+    <!-- Scripts -->
+    <script src="js/createAccount.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/createAccount.js b/js/createAccount.js
new file mode 100644
index 0000000..12ae7e5
--- /dev/null
+++ b/js/createAccount.js
@@ -0,0 +1,88 @@
+const avatarImageElement = document.getElementById("avatar-image-element");
+const avatarTextElement = document.getElementById("avatar-text-element");
+const avatarFileInputElement = document.getElementById("avatar-file-input");
+const createNewAccountButtonElement = document.getElementById(
+  "createNewAccount"
+);
+
+[avatarImageElement, avatarTextElement].forEach((element) => {
+  element.addEventListener("click", () => {
+    avatarFileInputElement.click();
+  });
+});
+
+avatarFileInputElement.addEventListener("change", (file) => {
+  encodeImageFileAsURL(avatarFileInputElement);
+});
+
+function encodeImageFileAsURL(fileElement) {
+  const file = fileElement.files[0];
+  const fileReader = new FileReader();
+  fileReader.onloadend = (event) => {
+    avatarImageElement.style.backgroundImage = `url('${fileReader.result}')`;
+    localStorage.setItem("encodedAvatar", fileReader.result);
+  };
+  try {
+    fileReader.readAsDataURL(file);
+  } catch (e) {
+    alert("Failed to read image file.");
+  }
+}
+
+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("");
+}
+
+createNewAccountButtonElement.addEventListener("click", () => {
+  const fullNameElement = document.getElementById("fullname").value;
+  const passwordElement = document.getElementById("password").value;
+  const confirmPasswordElement = document.getElementById("confirmPassword")
+    .value;
+  const errorElement = document.getElementById("error");
+  errorElement.innerHTML = "";
+
+  if (!fullNameElement || !passwordElement || !confirmPasswordElement) {
+    errorElement.innerHTML = "Please fill in all the fields.";
+  } else if (passwordElement !== confirmPasswordElement) {
+    errorElement.innerHTML = "Passwords do not match.";
+  } else {
+    const avatarImage = localStorage.getItem("encodedAvatar");
+    if (!avatarImage) {
+      errorElement.innerHTML = "Please set your avatar.";
+    } else {
+      sha512(passwordElement).then((hashedPassword) => {
+        const currentAccount = {
+          fullName: fullNameElement,
+          password: hashedPassword,
+          avatar: avatarImage,
+        };
+        const accounts = localStorage.getItem("accounts");
+        if (!accounts) {
+            const accounts = [];
+            accounts.push(currentAccount);
+            localStorage.setItem("accounts", JSON.stringify(accounts));
+            localStorage.removeItem("encodedAvatar");
+        } else {
+          const previousAccounts = JSON.parse(localStorage.getItem("accounts"));
+          console.log(previousAccounts);
+          const ifUsernameExists = previousAccounts.find(
+            (account) => account.fullName === fullNameElement
+          );
+          if (!ifUsernameExists) {
+            previousAccounts.push(currentAccount);
+            localStorage.removeItem("encodedAvatar");
+            localStorage.setItem("accounts", JSON.stringify(accounts));
+          } else {
+              errorElement.innerHTML = 'An account with that name already exists.';
+          }
+        }
+      });
+    }
+  }
+});
-- 
cgit v1.2.3