VadymShakhmatenko
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
							<!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>
//Password
        // function Password(parent, open){
        //     //const value = ''
        //     const pass = document.createElement('input')
        //     const check = document.createElement('input')
        //     check.type = 'checkbox'
        //     parent.append(pass , check)

        //     check.onchange = () => {
        //         this.setOpen(check.checked)
        //     }

        //     pass.oninput = () => {
        //         this.value = pass.value;
        //         if(typeof this.onchange === 'function'){
        //             this.onchange(this.value)
        //         }
        //     }

        //     this.getValue = function () {
        //         return this.value
        //     }

        //     this.setValue = function(value){
        //         this.value = value;
        //         pass.value = this.value
        //     }
            
        //     this.setOpen = function (newOpen) {
        //         open = newOpen
        //         pass.type = open ? 'text' : 'password'
        //         check.checked = open

        //         if(typeof this.onOpenChange === 'function') {
        //         this.onOpenChange(open)
        //         }
        //     }

        //     this.getOpen = function () {
        //         return open 
        //     }

        //     this.setOpen(open)

        // }

        // let p = new Password(document.body, false)

        // 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, open){
    //         const formBody = document.createElement('div')
    //         const pass = document.createElement('input')
    //         const login = document.createElement('input')
    //         const check = document.createElement('input')
    //         const btn = document.createElement('button')

    //         check.type = 'checkbox'
    //         login.type = 'text'
    //         btn.innerHTML = 'submit'
    //         parent.append(formBody)
    //         formBody.append(login , pass , check , btn)

    //         check.onchange = () => {
    //             this.setOpen(check.checked)
    //         }

    //         pass.oninput = () => {
    //             this.value = pass.value;
    //             btn.disabled = checkInputs();
    //             if(typeof this.onchange === 'function'){
    //                 this.onchange(this.value)
    //             }
    //         }
    //         this.setLoginValue = (value) => {
    //             this.loginValue = value
    //             login.value = this.loginValue
    //         }
    //         this.getLoginValue = () => {
    //             return this.loginValue
    //         }

    //         const checkInputs = () => {
    //             if(login.value.length === 0 ||  this.value.length === 0 ) {
    //                 return true;
    //             }
    //             return false;
    //         }

    //         this.getValue = function () {
    //             return this.value
    //         }

    //         this.setValue = function(value){
    //             this.value = value;
    //             pass.value = this.value
    //         }
            
    //         this.setOpen = function (newOpen) {
    //             open = newOpen
    //             pass.type = open ? 'text' : 'password'
    //             check.checked = open

    //             if(typeof this.onOpenChange === 'function') {
    //             this.onOpenChange(open)
    //             }
    //         }

    //         this.getOpen = function () {
    //             return open 
    //         }

    //         this.setOpen(open)

    //         btn.disabled = checkInputs();
    //     }

    //     let lf = new LoginForm(document.body, false)

    //     lf.onChange = data => console.log(data)
    //     lf.onOpenChange = open => console.log(open)

    //     lf.setValue('qwerty')
    //     console.log(lf.getValue())

    //     lf.setLoginValue('qwerty')
    //     console.log(lf.getLoginValue())

    //     // lf.setOpen(false)
    //     console.log(lf.getOpen())


//Password Verify
       function PasswordCheck(parent, open){
            const formBody = document.createElement('div')
            const pass1 = document.createElement('input')
            const pass2 = document.createElement('input')
            const check = document.createElement('input')
            const btn = document.createElement('button')

            check.type = 'checkbox'
            
            btn.innerHTML = 'пароли совпадают'
            parent.append(formBody)
            formBody.append(pass2 , pass1 , check , btn)

            check.onchange = () => {
                this.setOpen(check.checked)
            }

            pass1.oninput = () => {
                this.value = pass1.value;
                btn.disabled = !validator();
                if(typeof this.onchange === 'function'){
                    this.onchange(this.value)
                }
            }

            pass2.type = 'password'
            pass2.style.display = !open ? 'inline' : 'none';
            pass2.oninput = () => {
                this.value2 = pass2.value
                btn.disabled = !validator();
            }

            const validator = () => {
                if (open === true) {
                        return false;
                    }
                    if (this.value === this.value2 && pass1.value !== "" && this.value2) {
                        console.log('correct password')
                        return  true;
                    }
                    return false;
                };

            this.setValue = function(value){
                this.value = value;
                pass1.value = this.value
                btn.disabled = !validator();
            }

            this.setPass2Value = (value) => {
                this.pass2 = value
                pass2.value = this.pass2
                btn.disabled = !validator();
            }

            this.getValue = () => {
                return this.value
            }

            this.getPass2Value = () => {
                return this.pass2
            }

            this.setOpen = function (newOpen) {
                open = newOpen
                pass1.type = open ? 'text' : 'password'
                pass2.style.display = !open ? "inline" : "none";
                 btn.disabled = !validator();
                check.checked = open
                if(typeof this.onOpenChange === 'function') {
                this.onOpenChange(open)
                }
            }

            this.getOpen = function () {
                return open 
            }

            this.setOpen(open)

            btn.disabled = validator();
        }

        let pc = new PasswordCheck(document.body, false)
        
        pc.onOpenChange = open => console.log(open);

        pc.setValue('')
        // console.log(pc.getValue())

        pc.setPass2Value('')
        // console.log(pc.getPass2Value())

        // pc.setOpen(false)
        // console.log(pc.getOpen())
// ??????????
    </script>
    
</body>
</html>