HW-JS/HW10/taskHW/main.js

function Password(parent, open = false) {

  let wrap = document.createElement('div')
  let input = document.createElement('input')
  let checkBox = document.createElement('input')

  input.type = open ? 'text' : 'password'
  checkBox.type = 'checkbox'
  checkBox.checked = open
  wrap.append(input)
  wrap.append(checkBox)
  parent.append(wrap)
  this.getValue = () => input.value
  this.getOpen = () => checkBox.checked

  this.setValue = newValue => input.value = newValue
  this.setOpen = () => checkBox.checked ? input.type = 'text' : input.type = 'password'


  input.oninput = () => this.onChange()
  checkBox.oninput = () => {
    this.setOpen()
    if (typeof this.onOpenChange === 'function') {
      this.onOpenChange(checkBox.checked)
    }

  }
}

// let p = new Password(document.body, true)
// p.onChange = () => console.log(p.getValue())
// p.onOpenChange = (open) => console.log(open)
// p.setValue('qwerty')
// console.log(p.getValue())

// let button = document.createElement('button')
// let input = document.createElement('input')
// input.type = 'text'
// button.disabled = true
// button.innerText = 'LogIn'
// document.body.append(input)
// document.body.append(button)

// let checkDisabled = () => input.value !== '' && p.getValue() !== '' ? button.disabled = false : button.disabled = true
// p.onChange = () => checkDisabled()
// input.oninput = () => checkDisabled()

function LoginForm(parent, disabled) {
  const input = document.createElement('input')
  const btn = document.createElement('button')
  input.type = 'text'
  btn.disabled = disabled
  btn.innerText = 'LogIn'
  this.getValue = () => input.value
  this.setValue = (newValue) => input.value = newValue

  input.oninput = () => this.onChange()

  this.getOpen = () => btn.disabled
  this.setOpen = (newChek) => btn.disabled = newChek

  parent.append(input)
  parent.append(btn)
}
let lf = new LoginForm(form, true)
let psw = new Password(form, true)

let checkDisabled = () => lf.getValue() !== '' && psw.getValue() !== '' ? lf.setOpen(false) : lf.setOpen(true)
lf.onChange = () => checkDisabled()
psw.onChange = () => checkDisabled()

//Password Verifyd
function pswInputChange() {
  const pswInputDouble = document.createElement('input')
  psw.onOpenChange = (chek) => {
    if (!chek) {
      pswInputDouble.type = psw.setOpen()
      pswInputDouble.value = psw.getValue()
      pswInputDouble.checked = psw.getOpen()
      form.append(pswInputDouble)
    } else {
      pswInputDouble.remove()
    }
  }
}
pswInputChange()