Современные HTTP-запросы в javascript es6

Question

Я работаю в системе входа / регистрации и хочу, чтобы процесс регистрации и входа проходил как можно более плавно. По моему мнению, один из способов сделать это более плавным - сделать многоэтапный вход в систему / зарегистрироваться.

Что я имею в виду: если пользователь хочет войти в систему, он сначала должен ввести свое имя пользователя, и если это имя пользователя существует, он может ввести пароль и войти в систему. У пользователя больше отзывов, особенно впроцесс регистрации. Так как я начал изучать ООП и знаю, что es6 был введен некоторое время назад, я хочу также улучшить JS.

У меня есть только одна кнопка, которая делает все. Вот почему в моем слушателе событий кнопки есть регистр переключателя, который сравнивает его значение, чтобы выбрать правильный метод в моем классе формы.

Код в нижней части - это то, что я придумал. Это работает, но я не думаю, что это так, как обычно.

Является ли этот код «расширенным» или он выглядит как нуб.

РЕДАКТИРОВАТЬ: Я знаю, что при таком входе в систему происходит утечка информации, но яуже настроили надежную защиту от него. Так что у злоумышленников не так много попыток, а пользователи могут войти без 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;
    }
});