homework/hw9/script.js

// password
function Password(parent, open=false) {
    let _isVisible = open
    let _value = ''
    let input = document.createElement('input')
    input.placeholder = 'password'

    let wrapper = document.createElement('div')
    wrapper.style.border = '1px solid red'

    let btn = document.createElement('button')
    btn.innerText = 'Hide/Show'

    this.getHTMLElements = function() {
        return {
            Password_wrapper: wrapper,
            Password_input: input,
            Password_btn: btn
        }
    }

    this.getValue = function() {
        return _value
    }

    this.setValue = function(newValue) {
        _value = newValue
        input.value = _value
    }

    this.setOpen = (bool) => {
        _isVisible = bool
        let _type = _isVisible? 'text' : 'password'
        input.setAttribute('type', `${_type}`)
        this.onOpenChange()
    } 

    this.getOpen = function() {
        return _isVisible
    }

    this.onChange = function(event) {
        _value = event.target.value
    }

    let closed = () => {}

    this.onOpenChange = (func=null, ...args) => {
        let lockfunc = func
        if(func) {
            (function(){
                closed = lockfunc
                closed(...args)
            })()
        } else {
            closed(...args)
        }
    }

    input.addEventListener('input', this.onChange)

    btn.addEventListener('click', () => {
        this.setOpen(!_isVisible)
    })

    wrapper.setAttribute('class', 'Password')
    this.setOpen(open)

    wrapper.append(input, btn)
    parent.append(wrapper)
}

let pass = new Password(document.body, true)

// check if Password constructor works
pass.setValue('hello world')
pass.setOpen(false)
console.log(pass.getOpen())
console.log(pass.getValue())
window.setTimeout(()=> {
    console.log('old value:', pass.getValue())
    pass.setValue('YOU CAN SEE ME!')
    pass.setOpen(true)
}, 5000)

// login form
function Login (parent) {
    let _value = ''
    let input = document.createElement('input')
    input.type = 'text'
    input.placeholder = 'login'
    input.style.display = 'block'
    parent.append(input)

    this.getHTMLElement = function() {
        return input
    }

    this.getValue = function() {
        return _value
    }

    this.setValue = function(newValue) {
        _value = newValue
        input.value = _value
    }

    this.onChange = function(event) {
        _value = event.target.value
    }

    input.addEventListener('input', this.onChange)
}


// loginForm Constructor
function loginForm(parent, heading='loginForm Constructor') {
    let form = document.createElement('div')
    form.id = 'loginForm'
    form.style.border = '5px double black'
    form.style.width = 'fit-content'
    form.style.textAlign = 'center'
    form.style.padding = '15px'
    form.style.margin = '15px'

    let h2 = document.createElement('h2')
    h2.innerText = heading
    form.append(heading)

    let _login = new Login(form)
    let _password = new Password(form)

    let login_btn = document.createElement('button')
    login_btn.innerText = 'Log in'
    login_btn.disabled = true

    form.append(login_btn)
    for(let item of form.children) {
        item.style.margin = '10px'
    }

    this.getLogin = function() {
        return _login.getValue()
    }

    this.getPassword = function() {
        return _password.getValue()
    }

    this.isPasswordOpened = function() {
        return _password.getOpen()
    }

    this.setPasswordOpened = function(bool) {
        _password.setOpen(bool)
    }

    this.setLogin = function(newLogin) {
        _login.setValue(newLogin)
        checkFields()
    }

    this.setPass = function(newPass) {
        _password.setValue(newPass)
        checkFields()
    }

    function checkFields() {
        if (_login.getValue() && _password.getValue()) {
            login_btn.disabled = false
        } else {
            login_btn.disabled = true
        }
    }

    _login.getHTMLElement().addEventListener('input', checkFields)
    _password.getHTMLElements().Password_input.addEventListener('input', checkFields)

    parent.append(form)
}

let form = new loginForm(document.body)

form.setLogin('default_user')
form.setPass('pass example', true)

window.setTimeout(()=> {
    console.log(form.getPassword())
    console.log('before open', form.isPasswordOpened())
    form.setPasswordOpened(true)
    console.log('after open', form.isPasswordOpened())
    console.log(form.getLogin())
}, 5000)

// Password Verify
class PasswordVerify extends Password {
    constructor(parent, open=false) {
        super(parent, open);
        let _repeatWrapper = document.createElement('div')
        let _repeatField = document.createElement('input')
        let _successBtn = document.createElement('button')

        let displayRepeat = () => {
            if(this.getOpen() === false) {
                _repeatField.style.marginTop = '10px'
                _repeatField.type = 'password'
                _repeatField.placeholder = 'repeat password'
                _repeatField.value = ''

                _successBtn.innerText = 'no match!'
                _successBtn.disabled = true
                _successBtn.style.display = 'inline-block'

                _repeatWrapper.append(_repeatField)
                _repeatWrapper.append(_successBtn)
                
                this.getHTMLElements().Password_wrapper.append(_repeatWrapper)
            } else {
                try {
                    for(let child of _repeatWrapper.children) {
                        _repeatWrapper.remove(child)
                    }
                } catch(e){}
            }
        }
        this.onOpenChange(displayRepeat)

        let isMatch= () => {
            console.log(this.getHTMLElements())
            if(this.getHTMLElements().Password_input.value === _repeatField.value) {
                return true
            } else {
                return false
            }
        }

        let btnActivate = (bool) => {
            if(bool) {
                _successBtn.disabled = false
            } else {
                _successBtn.disabled = true
            }
        }

        this.getHTMLElements().Password_input.addEventListener('input', () => {
            btnActivate(isMatch())
        })

        _repeatField.addEventListener('input',() => {
            btnActivate(isMatch())
        })
    }
}

document.body.insertAdjacentHTML('beforeend', `
    <div id=verif></div>
`)

let verif = document.getElementById('verif')

let passverif = new PasswordVerify(verif, true)

window.setTimeout(()=> {
    console.log('bang')
    passverif.setOpen(false)
}, 5000)

//login form 
function Form(el, data, okCallback, cancelCallback){
    let formBody = document.createElement('div')
    let okButton = document.createElement('button')
    okButton.innerHTML = 'OK'

    let cancelButton = document.createElement('button')
    cancelButton.innerHTML = 'Cancel'

    formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
    if (typeof okCallback === 'function'){
        formBody.appendChild(okButton);
        okButton.onclick = (e) => {
            console.log(this)
            this.okCallback(e)
        }
    }

    if (typeof cancelCallback === 'function'){
        formBody.appendChild(cancelButton);
        cancelButton.onclick = cancelCallback
    }

    el.appendChild(formBody)


    let inputCreators = {
        String(key, value, func){
            let input = document.createElement('input')
            input.type = 'text'
            input.placeholder = key
            input.value = value
            input.oninput  = () => func(input.value)
            return input
        },
        Boolean(key, value, func){
            let input = document.createElement('input')
            input.type = 'checkbox'
            input.placeholder = key
            input.checked = value
            input.onchecked  = () => func(input.value)
            return input
        },
        Date(key, value, func){
            //используйте datetime-local
            let input = document.createElement('input')
            input.type = 'datetime-local'
            input.placeholder = key
            input.value = Date.toISOstring(value).substring(0,10)
            input.onchange  = () => func(input.value)
            return input
        },
        //и др. по вкусу, например textarea для длинных строк
    }


    let formTable = document.createElement('table')
    formTable.border = 1
    for(let key in data) {
        let tr = document.createElement('tr')
        let tdKey = document.createElement('td')
        let tdInput = document.createElement('td')
        let input = inputCreators[data[key].constructor.name](key, data[key],(value) => {
            data[key] = value 
        })

        tdKey.innerText = key

        tdInput.append(input)
        tr.append(tdKey, tdInput)
        formTable.append(tr)
    }
    okButton.before(formTable)

    this.okCallback     = okCallback
    this.cancelCallback = cancelCallback

    this.data           = data
    this.validators     = {}
}


let formContainer = document.createElement('div')
formContainer.id = 'formContainer'
document.body.append(formContainer)

let form = new Form(formContainer, {
    name: 'Anakin',
    surname: 'Skywalker',
    married: true,
    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
}, () => console.log('ok'),() => console.log('cancel') )
form.okCallback = () => console.log('ok2')

form.validators.surname = (value, key, data, input) => value.length > 2 && 
                                                     value[0].toUpperCase() == value[0] &&
                                                    !value.includes(' ') ? true : 'Wrong name'
console.log(form)