API tools faq
paste
SmaJli

Login/Register (partially complete)

SmaJli
Mar 11th, 2022
4,867
0
Never
13
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="loginForm">
  11.       <h1>Login</h1>
  12.       <label for="loginEmail">Email: </label>
  13.       <input type="email" name="loginEmail" id="loginEmail" />
  14.       <br /><br />
  15.       <label for="loginPassword">Password: </label>
  16.       <input type="password" name="loginPassword" id="loginPassword" />
  17.       <br /><br />
  18.       <input type="submit" name="login" id="login" value="Login" />
  19.       <p>
  20.         If you want to register <a href="#" id="wantToRegister">Click Here</a>
  21.       </p>
  22.     </div>
  23.     <div id="registerForm">
  24.       <h1>Register</h1>
  25.       <label for="registrationEmail">Enter your email: </label>
  26.       <input type="email" name="registerEmail" id="registerEmail" required />
  27.       <br /><br />
  28.       <label for="confirmEmail">Re-enter your email</label>
  29.       <input type="email" name="confirmEmail" id="confirmEmail" required />
  30.       <br /><br />
  31.       <label for="registerPassword">Enter your password: </label>
  32.       <input type="text" name="registerPassword" id="registerPassword" />
  33.       <div id="regErrors"></div>
  34.       <br /><br />
  35.       <input type="submit" name="register" id="register" value="Register" />
  36.       <p>If you want to login <a href="#" id="wantToLogin">Click Here</a></p>
  37.     </div>
  38.  
  39.     <script>
  40.       /*
  41.         let users = []
  42.  
  43.         1. Login Form
  44.         - email (validate if its an email,   [email protected]  [email protected] )
  45.         - password (hidden with *)
  46.         - login button
  47.  
  48.         After login attempt check if user exists and give back response
  49.         - if email is matched, but password isnt, say "Wrong password"
  50.         - if no email exists, say "Account with that email doesnt exist"
  51.  
  52.         2. Register Form
  53.         - email (validate if its an email, [email protected]  [email protected])
  54.         (onblur)
  55.         (email is already used by another person)
  56.         - confirm email (to be the same as above)
  57.         - setPassword (rules, 1 special char, 1 number, 1 upperCase, min 8 char)
  58.         - register button
  59.  
  60.         - disable button if email is already used
  61.         - alert if succesful login/reigster
  62.         */
  63.  
  64.       let loginForm = document.getElementById("loginForm");
  65.       let registerForm = document.getElementById("registerForm");
  66.       let linkToRegister = document.getElementById("wantToRegister");
  67.       let linkToLogin = document.getElementById("wantToLogin");
  68.       let loginButton = document.getElementById("login");
  69.       let registerButton = document.getElementById("register");
  70.  
  71.       //Navigation
  72.       //Default no register form
  73.       registerForm.style.display = "none";
  74.       linkToRegister.addEventListener("click", () => {
  75.         loginForm.style.display = "none";
  76.         registerForm.style.display = "block";
  77.       });
  78.       linkToLogin.addEventListener("click", () => {
  79.         loginForm.style.display = "block";
  80.         registerForm.style.display = "none";
  81.       });
  82.  
  83.       //Registration
  84.  
  85.       let usersFromLS = localStorage.getItem("users");
  86.       let users;
  87.  
  88.       if (usersFromLS) {
  89.         users = JSON.parse(usersFromLS);
  90.       } else {
  91.         users = [];
  92.       }
  93.  
  94.       function checkEmail(email) {
  95.         return String(email)
  96.           .toLowerCase()
  97.           .match(
  98.             /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  99.           );
  100.       }
  101.       class User {
  102.         constructor(email, password) {
  103.           this.email = email;
  104.           this.password = password;
  105.         }
  106.       }
  107.       //Validate password
  108.       let registerPassword = document.getElementById("registerPassword");
  109.  
  110.       registerPassword.onkeyup = function (event) {
  111.         let value = event.target.value;
  112.         let errors = {
  113.           badLength: "Password must have at least 8 charachters",
  114.           noCapital: "The password must have at least one capital letter",
  115.           noNumber: "The password must have at least one number",
  116.           noSpecial: "The password must have at least one special character",
  117.         };
  118.  
  119.         let hasBadLength = value.length < 8;
  120.        let hasCapital = /[A-Z]/g.test(value);
  121.        let hasNumber = /[0-9]/.test(value);
  122.        let hasSpecialCase = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(
  123.           value
  124.         );
  125.  
  126.         let errorDiv = document.getElementById("regErrors");
  127.         errorDiv.innerHTML = "";
  128.         let errorStrings = [];
  129.  
  130.         if (hasBadLength) {
  131.           errorStrings.push(errors.badLength);
  132.         }
  133.         if (!hasCapital) {
  134.           errorStrings.push(errors.noCapital);
  135.         }
  136.         if (!hasNumber) {
  137.           errorStrings.push(errors.noNumber);
  138.         }
  139.         if (!hasSpecialCase) {
  140.           errorStrings.push(errors["noSpecial"]);
  141.         }
  142.         console.log("hi", errorStrings);
  143.  
  144.         if (value.length) {
  145.           for (const errorText of errorStrings) {
  146.             let errorNode = document.createElement("small");
  147.             errorNode.innerText = errorText;
  148.             errorNode.style.color = "red";
  149.             errorNode.style.display = "block";
  150.             errorDiv.append(errorNode);
  151.           }
  152.         }
  153.  
  154.         let validPassword =
  155.           hasSpecialCase && hasNumber && hasCapital && !hasBadLength;
  156.  
  157.         if (!validPassword) {
  158.           registerButton.setAttribute("disabled", "disabled");
  159.         } else {
  160.           registerButton.removeAttribute("disabled");
  161.         }
  162.       };
  163.       //Add errors as default and onkeydown change them
  164.  
  165.       let email2 = document.getElementById("confirmEmail");
  166.       let email1 = document.getElementById("registerEmail");
  167.  
  168.       email2.onkeyup = function () {
  169.         if (email1.value !== email2.value) {
  170.           email2.style.border = "1px solid red";
  171.           // dodavame kod
  172.           //   email2.after()
  173.         } else {
  174.           email2.style.border = "1px solid black";
  175.         }
  176.       };
  177.       //Validate email and make new User
  178.       registerButton.addEventListener("click", () => {
  179.         let email1 = document.getElementById("registerEmail");
  180.         let email2 = document.getElementById("confirmEmail");
  181.         let regPassword = document.getElementById("registerPassword");
  182.  
  183.         if (checkEmail(email1.value) && email1.value === email2.value) {
  184.          if (true || validatePassword(regPassword.value)) {
  185.            users.push(new User(email1.value, regPassword.value));
  186.             localStorage.setItem("users", JSON.stringify(users));
  187.  
  188.             email1.value = "";
  189.             email2.value = "";
  190.             regPassword.value = "";
  191.             for (const error of errorP) {
  192.               error.style.color = "red";
  193.             }
  194.             registerForm.style.display = "none";
  195.             loginForm.style.display = "block";
  196.             alert("Succesfully registered");
  197.           } else {
  198.             alert("Please enter a valid password");
  199.           }
  200.         } else {
  201.           alert(
  202.             "Enter valid email and the email must be the same with confirmation email"
  203.           );
  204.         }
  205.       });
  206.       //Login
  207.       loginButton.addEventListener("click", () => {
  208.         let loginEmail = document.getElementById("loginEmail");
  209.         let loginPassword = document.getElementById("loginPassword");
  210.  
  211.         const userExists = users.find(
  212.           (user) => user.email === loginEmail.value
  213.         );
  214.  
  215.         const okPassword = userExists.password === loginPassword.value;
  216.         console.log(userExists, users, loginEmail.value);
  217.  
  218.         if (userExists && userExists.email === loginEmail.value) {
  219.          alert("Congratulations you are logged in");
  220.         } else if (!okPassword) {
  221.           alert("wrong password");
  222.         } else {
  223.           alert("There is no such user, wrong email");
  224.         }
  225.  
  226.         // login
  227.       });
  228.     </script>
  229.   </body>
  230. </html>
  231.  
Advertisement
Comments
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!