HomeWork/js/10.2-js-functional-oop/js/main.js

//Password
function Password(parent, open) {
    let input = document.createElement("input");
    let checkbox = document.createElement("input");

    checkbox.type = "checkbox";

    let checker = (check) => {
        if (check) {
            input.type = "text";
            checkbox.checked = true;
        } else {
            input.type = "password";
            checkbox.checked = false;
        }
    }

    checker(open);

    input.oninput = () => {
        if (typeof this.onChange === "function") {
            this.onChange(input.value);
        }
    }

    checkbox.onchange = () => {
        checker(checkbox.checked);

        if (typeof this.onOpenChange === "function") {
            this.onOpenChange(checkbox.checked);
        }
    }

    this.getValue = () => input.value;

    this.setValue = value => input.value = value;

    this.getOpen = () => checkbox.checked;

    this.setOpen = (open) => checker(open);

    parent.append(input)
    parent.append(checkbox)
}

let p = new Password(task1, true)

p.onChange = data => console.log(data)
p.onOpenChange = open => console.log(open)

p.setValue('qwerty')
console.log(p.getValue())

p.setOpen(false)
console.log(p.getOpen())

//LoginForm
let lForm = document.createElement("input");
task2.append(lForm);

let pForm = new Password(task2, true);
let bForm = document.createElement("input");
bForm.type = "button"
bForm.value = "Ввойти";
bForm.disabled = true;
task2.append(bForm);

let btnOpen = () => (lForm.value != "" && pForm.getValue() != "") ? bForm.disabled = false : bForm.disabled = true;

lForm.oninput = () => btnOpen();
pForm.onChange = () => btnOpen();

//LoginForm Constructor
function LoginForm(parent, open) {
    let h3 = document.createElement("h3");
    let loginInput = document.createElement("input");
    let passwordInput = document.createElement("input");
    let checkbox = document.createElement("input");
    let btn = document.createElement("input");
    let form = document.createElement("div");

    h3.innerText = "Login Form"
    checkbox.type = "checkbox";
    btn.type = "button";
    btn.value = "Войти";
    btn.disabled = true;

    let btnOpen = () => (loginInput.value != "" && passwordInput.value != "") ? btn.disabled = false : btn.disabled = true;

    let checker = (check) => {
        if (check) {
            passwordInput.type = "text";
            checkbox.checked = true;
        } else {
            passwordInput.type = "password";
            checkbox.checked = false;
        }
    }

    checker(open);

    loginInput.oninput = () => {
        btnOpen();

        if (typeof this.onChange === "function") {
            this.onChange(loginInput.value, passwordInput.value);
        }
    }

    passwordInput.oninput = () => {
        btnOpen();

        if (typeof this.onChange === "function") {
            this.onChange(loginInput.value, passwordInput.value);
        }
    }

    checkbox.onchange = () => {
        checker(checkbox.checked)

        if (typeof this.onOpenChange === "function") {
            this.onOpenChange(checkbox.checked);
        }
    }

    this.getValue = () => [loginInput.value, passwordInput.value];

    this.setValue = (valueLogin, valuePassword) => {
        loginInput.value = valueLogin;
        passwordInput.value = valuePassword;
        btnOpen();
    }

    this.getOpen = () => checkbox.checked;

    this.setOpen = (open) => {
        checker(open);
    }

    form.append(h3)
    form.append(loginInput)
    form.append(passwordInput)
    form.append(checkbox)
    form.append(btn)

    form.style.display = "flex";
    form.style.flexDirection = "column";
    form.style.alignItems = "flex-start";
    form.style.justifyContent = "space-around";
    form.style.width = "20%";
    form.style.margin = "10px";
    form.style.padding = "5px";
    form.style.height = "200px";
    form.style.border = "1px solid black"

    parent.append(form)
}

let f = new LoginForm(task3, true)

f.onChange = (dataLogin, dataPassword) => console.log(dataLogin + ": " + dataPassword)
f.onOpenChange = open => console.log(open)

f.setValue('qwerty', 12345)
console.log(f.getValue())

f.setOpen(false)
console.log(f.getOpen())

//Password Verify
let passwordVerify = new Password(task4, true);

passwordVerify.onOpenChange = open => {
    if (!open) {
        let passwordVerify2 = new Password(task4, false);
        task4.getElementsByTagName("input")[4].remove();

        passwordVerify.onChange = data => {
            if (data !== "" && data === passwordVerify2.getValue()) {
                btnVerify.disabled = false;
            } else {
                btnVerify.disabled = true;
            }
        }

        passwordVerify2.onChange = data => {
            if (data !== "" && passwordVerify.getValue() === data) {
                btnVerify.disabled = false;
            } else {
                btnVerify.disabled = true;
            }
        }

    } else {
        task4.getElementsByTagName("input")[3].remove();

        passwordVerify.onChange = data => {
            if (data !== "") {
                btnVerify.disabled = false;
            } else {
                btnVerify.disabled = true;
            }
        }
    }
}

let btnVerify = document.createElement("input");
btnVerify.type = "button";
btnVerify.value = "OK";
btnVerify.disabled = true;

task4.append(btnVerify);

task4.style.display = "flex";
btnVerify.style.order = "1";