function Password(parent, open) {
    let value = ''
    let pass = document.createElement('input')
    pass.placeholder = 'enter password'
    let showPassBox = document.createElement('div')
    let check = document.createElement('input')
    check.type = 'checkbox'
    check.name = 'password'
    let label = document.createElement('label')
    label.for = 'password'
    label.innerText = 'Show password'
    showPassBox.append(check, label)
    parent.append(pass, showPassBox)
    check.onchange = () => {
        this.setOpen(check.checked)
    }
    pass.oninput = () => {
        if (typeof this.onChange === "function") {
            this.onChange(this.getValue());
        }
    };
    this.getValue = function () {
        return pass.value
    }
    this.setValue = function(value) {
        pass.value = value
    }
    this.getOpen = function () {
        return open
    }
    this.setOpen = function(newOpen) {
        open = newOpen
        pass.type = open ? 'text' : 'password'
        check.checked = open
        if(typeof this.onOpenChange === 'function') {
            this.onOpenChange(open)
        }
    }
    this.setOpen(open)
    this.onChange = () => {
        button.disabled = !(p.getValue() === p2.getValue())
    }

}



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

function Login(parent) {
    let input = document.createElement('input')
    input.placeholder = 'enter login'
    let button = document.createElement('button')
    button.innerText = 'log in'
    parent.appendChild(input)
    let password = new Password(parent, false)
    password.placeholder = 'enter password'
    button.disabled = true
    parent.appendChild(button)

    parent.onchange = function () {
        console.log(password.getValue())
        button.disabled = !(input.value !== '' && password.getValue() !== '')
    }
}
let newLogin = new Login(loginForm)
console.log(newLogin)


let p = new Password(document.body, true)
let p2 = new Password(document.body, true)
let button = document.createElement('button')
button.innerText = 'log in'
button.disabled = true





document.body.append(button)











// let $login = document.createElement('input');
// let $password = document.createElement('input')
// let $loginBtn = document.createElement('button')
// $loginBtn.innerText = 'Log In'
// let loginForm = document.querySelector('#loginForm')
// loginForm.append($login, $password, $loginBtn)
// let login = new Password(document.body, true)
// let password = new Password(document.body, false)
// let btn = new Password(document.body, false)
//
// login.setValue('anonymous');
// password.setValue('123456');
// login.value && password.value !== '' ? btn.setOpen(true) : btn.setOpen(false)
// function LoginForm(login, password){
//     this.login = login
//     this.password = password
//     this.btn = false
//
//     this.getLogin = function () {
//         return this.login
//     }
//     this.setLogin = function (value) {
//         return this.login = value
//     }
//     this.getPassword = function () {
//         return this.password
//     }
//     this.setPassword = function (value) {
//         return this.password = value
//     }
//     this.setBtn = function () {
//         this.login.value && this.password.value ? this.btn = true : this.btn = false
//     }
// }

// let newLogin = new LoginForm('admin', '11111');
// console.log(newLogin.login.value)
// console.log(newLogin)