diff options
| -rw-r--r-- | css/colors.css | 4 | ||||
| -rw-r--r-- | css/layouts.css | 3 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | js/createAccount.js | 88 |
4 files changed, 101 insertions, 2 deletions
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 { @@ -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.'; + } + } + }); + } + } +}); |