JavaScript Login Form Problem Related to Remember me Button-CodePudding

I have made this login form from my basic HTML CSS and JavaScript knowledge. There is a Remember me button in this login form I have created and now I have to give it a functionality. I want to click OK button and then it should: Create a cookie if Remember Me is set and save Student Id and Name. I am using Visual Studio Code. Here is my HTML JavaScript Code:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <div class  = "f1">
        <label for = "uname">
            <b>Username</b>
        </label>
        <input type = "text"
        placeholder = "Enter Username"
        id = "user"
        name = "uname" requitred>
        <span id = "username" class = "text-danger font-weight-bold"></span>
        <label for = "psw">
            <b>Password</b>
        </label>
        <input type = "text"
        placeholder = "Enter Password"
        id = "pass"
        name = "psw" requitred>
        <button type="button" onclick="alert('Login is clicked')">OK</button>
        <button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
        <input type="checkbox" value="lsRememberMe" id="rememberMe"> 
        <label for="rememberMe">Remember me</label>
        <input type="submit" value="Login" onclick="lsRememberMe()">
        <script>
            if (onclick == "alert('Login is clicked')"){
                window.location.assign("Home.html");
            }
            
        </script>
</form>
</body>
</html>

CSS Code:-

form{
    border: 3px solid black;
}
input[type=text],
input[type=password]{
    width:27%;
    padding:12px 20px;
    margin:8px 0;
    display: inline-block;
    border: 1px solid black;
    box-sizing: border-box;
}
button{
    background-color: #04aa6d;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 27%;
}
input[type="checkbox"] {
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
    display: inline-block;
    width: auto;
}
body {
    background-image: url('cool.jpg');
    color: #FFFFFF;
}
input[type = Clear]{
    font-size : 18px;
    padding : 5px;
    width : 20%;
    border-radius: 0 10px;
    border : none;
}

I have tried a lot of different techniques but it not work for me. (Code must be in JavaScript and HTML). Thanks.

CodePudding user response：

It would be better to save under the localStorage instead of a cookie because cookie is being sent to server every request. But both are ok if you are just saving the name (although that's something most browsers do anyway).

So basically you want to setItem when remeberMe is checked. you want to removeItem otherwise. When onl oad, restore the value using getItem

var user = document.getElementById("user");
var pass = document.getElementById("pass");
var rememberMe = document.getElementById("rememberMe");

window.addEventListener("load", function() {
  console.log('run this: user.value = localStorage.removeItem("login-user-name") || "";');
})

function do_submit() {

  if (rememberMe.checked) {
    console.log('run this: localStorage.setItem("login-user-name", user.value);');
  } else {
    console.log('run this: localStorage.removeItem("login-user-name");');
  }

  alert("will cancel because return false explicitly")
  return false;
}

form {
  border: 3px solid black;
}

input[type=text],
input[type=password] {
  width: 27%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid black;
  box-sizing: border-box;
}

button {
  background-color: #04aa6d;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 27%;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  width: auto;
}

body {
  background-image: url('cool.jpg');
  color: #FFFFFF;
}

input[type=Clear] {
  font-size: 18px;
  padding: 5px;
  width: 20%;
  border-radius: 0 10px;
  border: none;
}

<form  action="home.html" onsubmit="return do_submit()">
  <label for="user">
        <b>Username</b>
    </label>
  <input type="text" placeholder="Enter Username" id="user" name="uname" required>
  <span id="username" ></span>
  <label for="pass">
        <b>Password</b>
    </label>
  <input type="text" placeholder="Enter Password" id="pass" name="psw" required>
  <!-- 
  <button type="button" onclick="alert('Login is clicked')">OK</button>
  <button type="button" onclick="alert('Cancel is clicked')">Cancel</button>
  -->
  <input type="checkbox" value="lsRememberMe" id="rememberMe">

  <label for="rememberMe">Remember me</label>
  <input type="submit" value="Login">

</form>

CodePudding user response：

Is student ID a part of the response that you get from the server?

To create cookies, save the student name value in a variable:

const username = document.getElementById("user").value;

and save it as cookie if the Remember me checkbox is checked:

const rememberMe = document.querySelector("rememberMe");
if rememberMe.checked {
  document.cookie = "username="   username;
}

More info about Javascript cookie.