1

Currently, I am trying to store the email and password that is entered. Below I have the HTML and JS code

let email = document.querySelector(".email");
let password = document.querySelector(".password");

//Storing users email and password
function store()
{
    localStorage.setItem('email',email.value)
    localStorage.setItem('password', password.value)
}

function checkLogin()
{
    //get set stored data
    let emailStored = localStorage.getItem('email')
    let passwordStored = localStorage.getItem('password')

    //data entered from login-form
    let emailInput = document.querySelector('.email').value
    let passwordInput = document.querySelector('.password').value

    if(emailInput != emailStored)
    {
       let eError = document.querySelector(".email-error-message")
       eError.innerHTML = "Please enter valid email address"
    }

    if(passwordInput != passwordStored)
    {
        let pError = document.querySelector(".password-error-message")
        pError.innerHTML = "Please enter password associated with email address"
    }

}
<div class="login-form">
  <div class="sign-in">
    <h1>Sign In</h1>
    <form class="form">
      <input class="email" type="email" placeholder="Email Address" required />

      <div class="email-error-message"></div>

      <input class="password" type="password" placeholder="Password" minlength="6" required />
      <div class="password-error-message"></div>

      <button class="submit">Sign In</button>
      <div class="remember-me">
        <input class="checkbox" type="checkbox" />
        <span class="remember">Remember me</span>
        <span class="need">Need help?</span>
      </div>
    </form>

    <div class="facebook-signin">
      <img src="images/facebook_social media_social_icon.png" alt="facebook logo" />
      <span class="flogin">Login in with facebook</span>
    </div>
    <div class="newNetoflix">
      <div class="newToNetflix">New to Netflix?</div>
      <a class="sign-up" data-uia="login-signup-now">Sign up now.</a>
    </div>

    <div class="disclaimer">
      <span class="protected">This page is protected by Google reCAPTCHA to ensure you're not a
        bot.&nbsp;</span>
      <button type="submit" class="learn-more">Learn More</button>
    </div>
  </div>
</div>

My end goal is the following:

  • when the user inputs their email address and password it is saved
  • when user clicks the check box of remember me it keeps their email address there, but not their password.

PS: I am aware there needs to be an event listener with the checkbox, saying that when the checkbox is checked keep email when the browser refreshes.

Dali
  • 571
  • 1
  • 4
  • 16
AspiringDev
  • 165
  • 10
  • all browsers store previous logins/creds, remember me is really only useful to implement if you want to store full sign-in capabilities with a single click, switch between profiles, remembering profile name, email and picture etc, like google sign in etc, simply saving email/username should be left to the browser, which will be prompted to store when they sign in – Lawrence Cherone Apr 24 '22 at 16:55
  • I am currently cloning Netflix, and what I am trying to do is when a user fills in their email address and submits it, it takes them to netflix. – AspiringDev Apr 24 '22 at 17:07
  • sounds lagit, netflix most likely has a CSRF token on their login form and CORS enabled in the post handler which your have issues working around – Lawrence Cherone Apr 24 '22 at 17:10
  • well its not going to be Netflix,Netflix, but more of a coding Bootcamp project where it will have a landing page(login page). by logging in, it will take you to the next page with all the videos and that, I have not actually done that just yet, the next page for the videos, I am just looking to store the email address and password, via local storage. that is the main aim, I am wondering if the code above needs to be modified to achieve that, also along with the checkbox – AspiringDev Apr 24 '22 at 17:48
  • You asked about Local Storage, here’s a similar answer I provided some time ago that uses Session Storage: https://stackoverflow.com/questions/46918432/javascript-prevent-accessing-restricted-page-without-login-in/46954746#46954746 – S. Walker Apr 25 '22 at 00:16

0 Answers0