Tag: Modern

I'm working on a login / register system and I want to make sure I sign up and log in as smoothly as possible. One way to make it smoother is, in my opinion, to sign up / register in several steps.

What I mean: If a user wants to sign in, they must first enter their username. If this username exists, it can enter a password and log in. The user has more feedback, especially during the registration process. Since I learned OOP and know that it was introduced6 some time ago, I also want to improve in JS.

I only have one button that does everything. For this reason, my button event listener includes a switch that compares its value to select the correct method in my form class.

The code below is what I came up with. It works, but I do not think that's the way it's usually done.

Is this code "advanced" or does it look as if it came from a noob?

I am aware that information will be lost when logging in, but I have already set up reliable protection against it. So that attackers do not have many attempts while users can log in without DoS.

class Form {
    content = document.getElementById('content');
    username = document.getElementById('username');
    password = document.getElementById('password');
    submit_btn = document.getElementById('right');
    loader = document.getElementById('loader');
    request;

    constructor () {
        this.request = new XMLHttpRequest();
    }

    execute(type, path, Data) {
        this.loading();
        this.request.open(type, path);
        this.request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        this.request.send(Data);
    }

    loading() {
        this.loader.style.opacity = 1;
    }

    loaded() {
        this.loader.style.opacity = 0;
    }

    submit_username () {
        this.request.onload = () => {
            this.loaded();

            //If response value is true than
            //Switch Input field to password
            //Change button value to login_two
            //else show error messages

        }

        let Data = `username=${this.username.value}`

        this.execute('post', '/login/step_one', Data);
    }

    submit_login() {
        this.request.onload = () => {
            this.loaded();

            //If response value is true than
            //Redirect the user to home
            //else show error messages

        }

        let Data = `password=${this.password.value}`

        this.execute('post', '/login/step_two', Data);

    }

}

const form = new Form();

form.submit_btn.addEventListener("click", () => {
    let method = form.submit_btn.value;
    switch (method) {
        case 'login_one':
            form.submit_username();
        break;
        case 'login_two':
            form.submit_login();
        break;
    }
});

Maybe someone can give an example of a better way.