GennadySht
/
HomeWork


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<header>Password Verify</header>

<body>
    <script>
        function Password(parent, open) {
            this.input = document.createElement("input");
            parent.append(this.input);
            this.setValue = function (value) {
                this.input.value = value;
            }
            this.getValue = function () {
                return this.input.value;
            }
            this.setOpen = function (open) {
                this.open = open;
                this.check.style.display = this.open === undefined ? "none" : "block";
                this.input.type = this.open === true ? "text" : "password";
            }
            this.getOpen = function () {
                return this.input.type == "text";
            }
            this.input.onchange = function () {
                if (this.onChange)
                    this.onChange(this.getValue());
            }.bind(this);

            this.show = function (isShow) {
                let displayStyle = isShow ? "block" : "none";
                this.input.style.display = displayStyle;
                if (this.open !== undefined)
                    this.check.style.display = displayStyle;
            }.bind(this);

            this.setErrorState = function (isError) {
                let borderColor = isError ? "#FF0000" : "#00FF00";
                this.input.style.borderColor = borderColor;
            }.bind(this)


            this.check = document.createElement("input");
            parent.append(this.check);
            this.check.onchange = function () {
                this.setOpen(this.check.checked);
                if (this.onOpenChange)
                    this.onOpenChange(this.getOpen());
            }.bind(this);

            this.check.checked = open;
            this.check.value = "open";
            this.check.type = "checkbox";
            this.setOpen(open);
        }
        let passw1 = new Password(document.body, true);
        let passw2 = new Password(document.body);
        passw2.show(!passw1.getOpen());
        passw1.onOpenChange = function (isOpen) {
            passw2.show(!isOpen);
            if (passw1.getOpen())
                passw1.setErrorState(false);
            else
              passw1.onChange(passw1.getValue());  
        }
        const checkPasswordsEqual = (val) => {
            if (!passw1.getOpen()) {
                var areEqual = passw1.getValue() == passw2.getValue();
                passw1.setErrorState(!areEqual);
                passw2.setErrorState(!areEqual);
            }
        }
        passw1.onChange = checkPasswordsEqual;
        passw2.onChange = checkPasswordsEqual;


    </script>
</body>