GennadySht
/
HomeWork


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<head>
    02 to ES6 Password
</head>

<body>
    <script>
        class AuthInput {
            #input = document.createElement("input");
            onChange;
            get input() {
                return this.#input;
            }
            /*set value(val) {
                 this.#input.value = val;
             }*/
            get value() {
                return this.#input.value;
            }

            constructor(parent) {
                parent.append(this.#input);
                this.#input.oninput = this.#input.onchange = function () {
                    if (this.onChange)
                        this.onChange(this.value);
                }.bind(this);
            }
        }
        class Login extends AuthInput { }

        class Password extends AuthInput {
            #check = document.createElement("input");
            set open(val) {
                this.input.type = val ? "text" : "password";
            }
            get open() {
                return this.input.type == "text";
            }

            constructor(parent, open) {
                super(parent);
                parent.append(this.#check);
                this.#check.onchange = function () {
                    this.open = this.#check.checked;
                    if (this.onOpenChange)
                        this.onOpenChange(this.open);
                }.bind(this);
                this.#check.checked = open;
                this.#check.value = "open";
                this.#check.type = "checkbox";
                this.open = open;
            }
        }

        class LoginForm {
            #form = document.createElement("form");
            #login = new Login(this.#form);
            #password = new Password(this.#form, open);
            #button = document.createElement("button");
            onLogin;
            constructor(parent, open) {
                parent.append(this.#form);
                this.#button.innerText = "OK";
                this.#button.classList.add('btn');
                this.#button.classList.add('ref-button');
                this.#form.append(this.#button);

                let setButtonStateCallback = function setButtonState() {
                    this.#button.disabled = !this.#login.value || !this.#password.value;
                }.bind(this);
                this.#login.onChange = setButtonStateCallback;
                this.#password.onChange = setButtonStateCallback;
                this.#button.disabled = true;
                this.#button.onclick = function () {
                    if (this.onLogin)
                        this.onLogin(this.#login.value, this.#password.value);
                }.bind(this);
            }
        }

        const form = new LoginForm(document.body, true);
    </script>
</body>