Help With Getting Username

Question:
So I am trying to get the username from the user when they login to their account and put it in main.html where it says {name}.
Repl link:

https://replit.com/@DrRman/The-AMC-Experiment

JS

let hasAccount = true;
console.log(hasAccount);

document.getElementById("signup").style.display = "none";
document.getElementById("login").style.display = "inline-block";

function toggle() {
  if (hasAccount) {
    document.getElementById("login").style.display = "none";
    document.getElementById("signup").style.display = "inline-block";
    document.getElementById("linkRegisterPage").innerHTML = "Have an account?";
    hasAccount = false;
  } else {
    document.getElementById("signup").style.display = "none";
    document.getElementById("login").style.display = "inline-block";
    document.getElementById("linkRegisterPage").innerHTML = "Don't have an account?";
    hasAccount = true;
  }
}

function Buttontoggle() {
  if (hasAccount) {
    document.getElementById("linkRegisterPage").innerHTML = "Have an account?";
    document.getElementById("login_title").innerHTML = "Sign up";
    hasAccount = false;
  } else {
    document.getElementById("linkRegisterPage").innerHTML = "Don't have an account?";
    document.getElementById("login_title").innerHTML = "Log in";
    hasAccount = true;
  }
}

let name;
let pass;

function submitButton() {
  if (!hasAccount) {
    name = document.getElementById("usrnm").value;
    pass = document.getElementById("psswrd").value;
    fetch('/newUser/' + name + '/' + pass)
      .then(response => response.json())
      .then(data => {
        alert(data.message);
      })
      .catch(error => {
        // Handle any errors
        console.error('Error:', error);
      });
  } else {
    name = document.getElementById("usrnm").value;
    pass = document.getElementById("psswrd").value;
    fetch('/authenticate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ username: name, password: pass })
    })
      .then(response => response.json())
      .then(data => {
        alert(data.message);
        if (data.token) {
          localStorage.setItem('token', data.token);
          // Code to redirect to a new page
          window.location.href = "https://the-amc-experiment.drrman.repl.co/explore";
        }
      })
      .catch(error => {
        // Handle any errors
        console.error('Error:', error);
      });
  }
}

var newContent = document.getElementById("usrnm").value;;
var contentHolder = document.getElementById('name');
contentHolder.innerHTML = newContent;

I get alerted “undefined” when I try to sign up

@SnakeyKing can you share an image?

Sorry I can’t I just can’t figure out how to do a screenshot. Apparent, CTRL + SHIFT + S doesn’t work while an alert is on.

To create a screenshot, I use a keyboard shortcut WINDOWS + SHIFT + S.

2 Likes

How I usually do it is I set a cookie with their username as part of it when they authenticate themselves. I think most websites do something similar to this. In my case, I set a cookie as {username}.{hashed password}. Therefore, once they’re authenticated, I can just fetch the cookie stored, split it by . and get the username.

Actually, most websites will assign a token and store it in a cookie to each user whenever they log in. That token gets temporarily associated with the account until in logs out. It is never a good idea to stick the password in a cookie (even if its hashed!)

2 Likes

What I mean is that the token that’s associated with the account contains the username. Probably not good to stick the password in the cookie lol but it’s easy and I’m lazy

You need to set a cookie or, alternatively, use localStorage (discouraged).
Set a cookie with HTTP only so no javascript can see it.
As for the cookie’s content, put the JWT
Something else to note:
Don’t just hash the password, salt it too. bcrypt has another function for it, it should be very easy to integrate. Salting adds some more characters to the password so that they’re all a similar / same length and are hence all as hard to decrypt.

@ParanormalCoder fixed the problem (post something paranormalcoder so I can mark it as the solution).