Pika
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Password(parent, open = false) {
            const input = document.createElement("input");
            const checkbox = document.createElement("input");
            input.type = "password";
            checkbox.type = "checkbox";

            parent.append(input);
            parent.append(checkbox);

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

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

            this.setOpen = () => {
                if (input.type === "text") {
                    input.type = "password";
                } else {
                    input.type = "text";
                }
            };
            this.getOpen = () => (input.type === "text" ? true : false);

            input.oninput = (event) => {
                if (typeof this.onChange === "function") {
                    this.onChange(input.value);
                }
                if (
                    typeof this.onOpenChange === "function" &&
                    value !== input.value &&
                    this.getOpen() === true
                ) {
                    this.onOpenChange(value);
                }
            };

            checkbox.oninput = (event) => {
                if (typeof this.onChange === "function") {
                    this.onChange(checkbox.checked);
                }
            };
            checkbox.onclick = (event) => this.setOpen();

            this.getInput = () => input;
        }

        let p = new Password(document.body, 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
        function LoginForm(parent) {
            const form = document.createElement("form");
            const login = document.createElement("input");
            const password = document.createElement("input");
            const checkbox = document.createElement("input");
            const btnSubmit = document.createElement("button");

            password.type = "password";
            checkbox.type = "checkbox";
            btnSubmit.innerText = "Truth";
            btnSubmit.disabled = true;

            parent.append(form);
            form.append(login);
            form.append(password);
            form.append(checkbox);
            form.append(btnSubmit);

            this.changeVisiblePassword = () => {
                if (password.type === "text") {
                    password.type = "password";
                } else {
                    password.type = "text";
                }
            };
            checkbox.onclick = (event) => this.changeVisiblePassword();

            this.checkBtnSend = () => {
                if (!login.value || !password.value) {
                    btnSubmit.disabled = true;
                } else {
                    btnSubmit.disabled = false;
                }
            };
            login.oninput = (event) => this.checkBtnSend();
            password.oninput = (event) => this.checkBtnSend();
        }

        const logForm = new LoginForm(document.body);

        //LoginForm Constructor
        function LoginFormAdvance(parent) {
            const form = document.createElement("form");
            const login = document.createElement("input");
            const password = document.createElement("input");
            const checkbox = document.createElement("input");
            const btnSubmit = document.createElement("button");

            password.type = "password";
            checkbox.type = "checkbox";
            btnSubmit.innerText = "Truth";
            btnSubmit.disabled = true;

            parent.append(form);
            form.append(login);
            form.append(password);
            form.append(checkbox);
            form.append(btnSubmit);

            this.setValueLogin = (value) => (login.value = value);

            this.setValuePassword = (value) => (password.value = value);

            this.getValueLogin = () => login.value;
            this.getPasswordLogin = () => password.value;

            this.setOpenPassword = () => {
                if (password.type === "text") {
                    password.type = "password";
                } else {
                    password.type = "text";
                }
            };
            this.getOpenPassword = () => (password.type === "text" ? true : false);

            this.setVisibleBtn = () => (btnSubmit.disabled = !btnSubmit.disabled);
            this.getVisibleBtn = () => (btnSubmit.disabled ? false : true);

            this.checkBtnSend = () => {
                if (!login.value || !password.value) {
                    btnSubmit.disabled = true;
                } else {
                    btnSubmit.disabled = false;
                }
            };

            login.oninput = (event) => {
                if (typeof this.onChange === "function" && value !== login.value) {
                    this.onChange(value);
                }
                this.checkBtnSend();
            };
            password.oninput = (event) => {
                if (typeof this.onChange === "function" && value !== password.value) {
                    this.onChange(value);
                }
                this.checkBtnSend();
            };
            checkbox.onclick = (event) => this.setOpenPassword();
        }

        const logFormAdv = new LoginFormAdvance(document.body);

        // Password Verify
        function PasswordVerify(parent) {
            const p1 = new Password(parent);
            const p2 = new Password(parent);
            const btn = document.createElement("button");
            btn.disabled = true;

            btn.innerHTML = "Truth";
            parent.append(btn);

            this.checkMatches = () => {
                if (p1.getValue() === p2.getValue()) {
                    btn.disabled = false;
                } else {
                    btn.disabled = true;
                }
            };

            p1.onChange = (value) => {
                if (value === false) {
                    p2.getInput().style.visibility = 'visible';
                } else if (value === true) {
                    p2.getInput().style.visibility = 'hidden';
                }
                this.checkMatches();
            };

            p2.onChange = (value) => this.checkMatches();
        }

const passVeri = new PasswordVerify(document.body);


    </script>
</body>

</html>