Question 379010 in Html Question posted in
Some basic documentation can be found here.

Open a new HTML page in a JS function and then write some HTML on it when the previous html is a login page

hi im trying to make a login page that after you push the button it goes to the index. I did that but now i want to change part of the html to say welcome back ( and the name of the username)

i’ve wrote this so far but i dont know how to save the username so i can use it again in the next page.

this is the html:

<form id="login-form">
<!--Error Message-->
        <div id="login-error-msg-holder">
      <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
    </div>

<!--Form-->
    <div class="form-floating">
      <input type="name" class="form-control name " name="name" id="floatingInput" id="name-field" placeholder="user123">
      <label for="floatingInput">Username</label>
    </div>
    <div class="form-floating">
      <input type="password" id="password-field" class="form-control" id="floatingPassword" name="password" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>

    <div class="form-check text-start my-3">
      <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
        Remember me
      </label>
    </div>
    <button class="btn w-100 py-2" id="login-form-submit" value="Login" type="submit">Sign in</button>
    <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–2024</p>
  </form>
</main>

And this is the js:

window.onload=loginButton.addEventListener("click",(e) => {
    e.preventDefault();
    const name = loginForm.name.value;
    const password = loginForm.password.value;

    if (name === "user123" && password === "1") {
        window.location.href = 'index.html';

    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

function message(){

        if (window.history='Login.html' ) {
        document.getElementById('navlogin').innerHTML='Welcome back'+ name + '!';
        }
        
        else{
            document.getElementById('navlogin').innerHTML='';
        }
}

i tried using the console.log but i cant save it for a little time so i can use it later.

any ideas?

Tags:

3

Answers


  1. 0

    Use session storage to save the user this will allow you to save the value temporarily (it does not delete itself) and use it without it being deleted when the page is restarted.

    sessionStorage.setItem("name",loginForm.name.value);

    and to access the value:

    const name = sessionStorage.getItem("name");

    delete the value:

    sessionStorage.removeItem("name");

    More info about sessionStorage

    Login or Signup to reply.
  2. 0

    I suppose this is a fake authentication.
    In that case you can just LocalStorage or SessionStorage Api.
    This is obviusly not a secure method and not intended for production code.

    When redirecting to index.html, your page reloads, causing the JavaScript thread to restart, resulting in the loss of all variables.
    I also sudjest to wrap your code as follow

    document.addEventListener("DOMContentLoaded", (event) => { /** your code here **/ });

    Login or Signup to reply.
  3. 0

    I don’t think you may want to validate user data in frontend, since people who use your page will be able to access the data of the user they tried to access or all existing users data
    I suggest validating in backend and then backend sending a token to validate the session
    Then you can store that token in LocalStorage or SessionStorage and send it to the backend when you want to access a page that needs authentication

    If it is far from your knowledge you can make save the data you want in LocalStorage or LocalStorage in the frontend and access it from other html pages that you brote

    As I said, I strongly advice not to do that if it’s not a learning project

    Lastly, to answer your question of using one HTML file and changing its content
    You can select the HTML body (or any other tag) using JS and set it to blank, then adding the html inside it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search