illiaKozyr
/
Homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<!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>
        <div id='container1'></div>
        <div id='formContainer'></div>
    </body>
        <script>

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

            function Password(parent, open) {

                let passField = document.createElement("input");

                passField.placeholder = "введите пароль";

                let checkBox = document.createElement("input");

                checkBox.setAttribute("type", "checkbox");

                parent.append(passField, checkBox);


                this.setValue = (newValue) => {

                    passField.value = newValue;

                };

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


                this.setOpen = (newOpen) => {

                    open = newOpen;

                    if (open === true) {

                        checkBox.setAttribute("checked", "true");

                        passField.setAttribute("type", "text");

                    } else if (open === false) {

                        checkBox.setAttribute("checked", "false");

                        passField.setAttribute("type", "password");

                    }

                };

                this.setOpen(open);

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


                passField.oninput = () => {

                    if (typeof this.onChange === "function") {

                        this.onChange(this.getValue());

                    }

                };


                checkBox.oninput = () => {

                    if (this.getOpen() === true) {

                        this.setOpen(true);

                    } else {

                        this.setOpen(false);

                    }

                    if (typeof this.onOpenChange === "function") {

                        this.onOpenChange(this.getOpen());

                    }

                };

            }

            // 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

            //     let passwordInput = new Password(document.body, true)

            //     let loginInput = document.createElement('input')

            //     let loginButton = document.createElement('input')

            //     loginInput.placeholder = 'введите логин'

            //     loginButton.type = 'button'

            //     loginButton.value = 'Войти'

            //     loginButton.disabled = true

            //     loginInput.setAttribute('oninput','f()')

            //     formContainer.append(loginInput,loginButton)

            //     passwordInput.onChange = data => console.log(data)

            
            // function f(){

            //     if ((loginInput.value === '' ) || (passwordInput.getValue() === '')) {

            //     loginButton.disabled=true

            // } else

            //      loginButton.disabled=false

            // }

            // passwordInput.onChange = f


            // //---------------------------------------LoginForm constructor

            // function Login(parent) {

            //     this.parent = parent;

            //     let login = document.createElement('input')

            //     login.placeholder = 'введите логин'

            //     let button = document.createElement('button')

            //     button.innerText = 'Войти'

            //     button.disabled = true

            //     let password = new Password(this.parent, true);

            //     parent.append(login,button)

            
            //     this.setActive = (value) => {

            //         if (value === true) {

            //             button.disabled = true;

            //         } else {

            //             button.disabled = false;

            //         }

            //     }


            //     this.getPassword = () => {

            //         return this.passwordInput

            //     }

            
            //     password.onChange = (data) => {

            //         if(login.value === '' || data === '' ) {

            //             this.setActive(true)

            //         } else {

            //             this.setActive(false)

            //         }

            //     }

            
            //     login.oninput = () => {

            //         login.innerHTML = login.value;

            //         console.log(login.value)

            //         if(login.value === '') {

            //             this.setActive(true)

            //         } else {

            //             this.setActive(false)

            //         }

            //     }

            // }

            // let login = new Login(formContainer)


            //---------------------------------------Password verify

            let p = new Password(formContainer, true)

            let p2 = document.createElement('input')

            p2.type = 'password'

            p2.style.display = 'none'

            p2.placeholder = 'повторите пароль'

            p2.setAttribute('oninput','f()')

            let button = document.createElement('button')

            button.innerText = 'Войти'

            button.disabled = true

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

            
            formContainer.append(p2,button)

            
            function f () {

                if (p.getOpen() === true) {

                    p2.style.display = 'none'

            
                    if (p.getValue() != '') {

                        button.disabled = false

                    } else {button.disabled = true}

            
                } else {

                    if (p.getValue() != '' && (p.getValue() === p2.value)) {

                        button.disabled = false

                    } else {button.disabled = true}

                    p2.style.display = ''}

            }

            p.onOpenChange = f

            p.onChange = f

            console.log(p.getValue())

        </script>
    </body>
</html>