Homework/10.2 oop/script.js

//-------------------------------------------------------Password--------------------------------------------------------------------

function Password(parent, open = false) {
    let password = document.createElement("input");
    parent.append(password);
    password.setAttribute("type", open ? "text" : "password");
    let showPassword = document.createElement("input");
    parent.append(showPassword);
    showPassword.setAttribute("type", "checkbox");

    showPassword.checked = open;

    showPassword.onclick = () => {
        password.setAttribute("type", showPassword.checked ? "text" : "password");
    }

    password.oninput = () => {
        this.onChange(password.value);
    }

    this.onChange = () => {};

    this.setPassword = function (someVal) {
        password.value = someVal;
    }

    this.getPassword = function () {
        return password.value;
    }
}

let form1 = new Password(task1, true);

form1.setPassword("qwerty");

console.log(form1.getPassword());

//-------------------------------------------------------LoginForm--------------------------------------------------------------------

function Password2(parent, open = false) {
    let password = document.createElement("input");
    parent.append(password);
    password.setAttribute("type", open ? "text" : "password");
    password.setAttribute("placeholder", "Password");

    let showPassword = document.createElement("input");
    parent.append(showPassword);
    showPassword.setAttribute("type", "checkbox");

    let login = document.createElement("input");
    parent.append(login);
    login.setAttribute("type", "text");
    login.setAttribute("placeholder", "Login");

    let loginButton = document.createElement("button");
    parent.append(loginButton);
    loginButton.innerText = "__OK__";
    loginButton.disabled = true;

    showPassword.checked = open;

    showPassword.onclick = () => {
        password.setAttribute("type", showPassword.checked ? "text" : "password");
    }

    password.oninput = login.oninput = () => {
        this.onChange({
            password: password.value,
            login: login.value
        });
        if (password.value && login.value) {
            loginButton.disabled = false;
        } else {
            loginButton.disabled = true;
        }
    }

    this.onChange = () => {};

    this.setPassword = function (someVal) {
        password.value = someVal;
    }

    // this.getPassword = function () {
    //     return password.value;
    // }

    this.getter = function () {
        return {
            password: password.value,
            login: login.value,
            check: showPassword.checked
        };
    }

    this.setLogin = function (someVal) {
        login.value = someVal;
    }

    this.setCheckbox = function (someVal) {
        showPassword.checked = someVal;
    }
}

let form2 = new Password2(task2, false);
form2.onChange = (x) => console.log(x);

//-------------------------------------------------------Password Verify--------------------------------------------------------------------

function Password3(parent, open = false) {
    let login = document.createElement("input");
    parent.append(login);
    login.setAttribute("type", "text");
    login.setAttribute("placeholder", "Login");

    let password = document.createElement("input");
    parent.append(password);
    password.setAttribute("type", open ? "text" : "password");
    password.setAttribute("placeholder", "Password");

    let confirmPassword = document.createElement("input");
    parent.append(confirmPassword);
    confirmPassword.setAttribute("type", "password");
    confirmPassword.setAttribute("placeholder", "Confirm Password");

    let showPassword = document.createElement("input");
    parent.append(showPassword);
    showPassword.setAttribute("type", "checkbox");

    let loginButton = document.createElement("button");
    parent.append(loginButton);
    loginButton.innerText = "__OK__";
    loginButton.disabled = true;

    showPassword.checked = open;

    showPassword.onclick = () => {
        password.setAttribute("type", showPassword.checked ? "text" : "password");
        if (showPassword.checked) {
            confirmPassword.style.display = "none";
        }
        else {
            confirmPassword.style.display = "block";
        }
    }

    password.oninput = login.oninput = confirmPassword.oninput = () => {
        this.onChange({
            password: password.value,
            login: login.value,
            confirmPassword: confirmPassword.value
        });
        if (password.value && login.value && confirmPassword.value) {
            loginButton.disabled = false;
        } else {
            loginButton.disabled = true;
        }
    }

    this.onChange = () => {};

    this.setPassword = function (someVal) {
        password.value = someVal;
    }

    this.getter = function () {
        return {
            password: password.value,
            login: login.value,
            check: showPassword.checked
        };
    }

    this.setLogin = function (someVal) {
        login.value = someVal;
    }

    this.setCheckbox = function (someVal) {
        showPassword.checked = someVal;
    }
}

let form3 = new Password3(task3, false);