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)
    }
}

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)