AleksandrovHomeWork/homeWork9FuncOOP/index.js

function Password(parent, open) {
    this.parent = parent;
    this.html = `
    <div>    
        <input type="password" id="password" name="password" />    
        <input type="checkbox" id="togglePassword" />
        <label id='button' for="toggle-password"></label>
    </div>`;
    this.parent.insertAdjacentHTML('afterbegin', this.html);
    const password = document.getElementById("password");


    this.getHTML = () => {
        return this.html;
    }

    this.value;
    this.onChange;
    this.open = open;
    this.onOpenChange;

    this.setParent = (parent) => {
        this.parent = parent;
    }

    this.getParent = () => {
        return this.parent;
    }

    this.setOpen = (open) => {
        this.open = open;
        if (this.open) {
            password.setAttribute('type', 'text');
            password.classList.add('invisible');
            password.classList.remove('visible');
        } else {
            password.setAttribute('type', 'password');
            password.classList.add('visible');
            password.classList.remove('invisible');
        }
    }
    
    this.getOpen = () => {
        return this.open;
    }
    
    this.setValue = (value) => {
        this.value = value;
    }
    
    this.getValue = () => {
        return this.value;
    }
    
    password.oninput = () => {
        this.onChange(password.value);
    }
    
    button.onclick = () => {
        this.onOpenChange(this.open);
        if (this.open === true) {
            this.setOpen(false)
        } else {
            this.setOpen(true)
        }
    }
}

// let createPassword = new Password(container, true);
// createPassword.onChange = data => console.log(data);
// createPassword.onOpenChange = open => console.log(open);

// createPassword.setValue('qwerty');
// console.log(createPassword.getValue());

// createPassword.setOpen(false);
// console.log(createPassword.getOpen());

function Login(parent) {
    this.onChange;
    this.parent = parent;
    this.html = `<div>
    <input type="text" id="login" placeholder="Enter Username" name="uname" required>
    <button type='submit' id='btn' disabled>SUBMIT</button>
    </div>`;
    this.parent.insertAdjacentHTML('beforebegin', this.html);
    this.password = new Password(this.parent, true);
    const login = document.getElementById('login');

    this.activateBtn = () => {
        let loginValue = this.loginValue;
        let passwordValue = this.password.getValue();

        if (loginValue !== undefined && passwordValue !== undefined) {
            btn.disabled = false;
        }
    }

    this.loginValue;

    this.getValue = () => {
        return this.loginValue;
    }

    this.setLoginValue = (value) => {
        this.loginValue = value;
    }

    this.password.onChange = (data) => {
        console.log(data)
        this.password.setValue(data);
        this.activateBtn();
    }

    login.oninput = () => {
        this.setLoginValue(login.value);
        this.activateBtn();
    }
}
let createLogin = new Login(container)

// createLogin.getPassword().onChange = data => console.log(data);
// createLogin.getPassword().onOpenChange = open => console.log(open);

//////////////////////////////////////////////////////////////

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>'
    const table = document.createElement('table')
    formBody.append(table)


    if (typeof okCallback === 'function'){
       formBody.appendChild(okButton);
       okButton.onclick = (e) => {
          console.log(this)
          this.okCallback(data)
        }
    }
 
    if (typeof cancelCallback === 'function'){
       formBody.appendChild(cancelButton);
       cancelButton.onclick = cancelCallback
    }
          
    let inputCreators = {
       String(key, value, oninput){
          let input = document.createElement('input')
          if (value.match(/\**/)[0] === value) {
             input.type = 'password'
             input.value       = ''
             input.oninput     = () => oninput(input.value)
          } else {
             input.type = 'text'
             input.placeholder = key
             input.value       = value
             input.oninput     = () => oninput(input.value)
          }
          return input
       },
       Boolean(key, value, oninput){
          let input = document.createElement('input')
          input.type = 'checkbox'
          input.checked     = value
          input.oninput     = () => oninput(input.checked)
          return input
       },
       Date(key, value, oninput){
          let input = document.createElement('input')
          input.type = 'datetime-local'
          // при преобразовании объекта к строке смещается часовой пояс на нулевой, выражение ниже восстанавливает текущий
          input.value       = new Date(value - (new Date()).getTimezoneOffset() * 60 * 1000).toISOString().slice(0,-1)
          input.oninput     = () => oninput(new Date(input.value))
          return input
       },
       Number(key, value, oninput){
          let input = document.createElement('input')
          input.type = 'text'
          input.placeholder = key
          input.value       = value
          input.oninput     = () => oninput(input.value)
          return input
       },
    }


    el.appendChild(formBody)
    for (const [key, value] of Object.entries(data)) {
       const tr = document.createElement('tr')
       table.append(tr)

       let rowMandatory = false
       const th = document.createElement('th')
       if (key[0] === '*') {
          const thPre = document.createElement('span')
          thPre.innerText = '* '
          thPre.style.color = 'red'
          th.append(thPre)
          const thCont = document.createElement('span')
          thCont.innerText = key.slice(1)
          th.append(thCont)
          rowMandatory = true
       } else {
          th.innerText = key
       }
       tr.append(th)

       const td = document.createElement('td')
       tr.append(td)  
       
       const input = inputCreators[value.constructor.name](key, value, (valueOfInput) => {
          if (key in this.validators) {
             let valid = this.validators[key](valueOfInput,key,data,input)
             if (valid === true) {
                data[key] = valueOfInput
                tdErr.innerText = ''
                input.style.backgroundColor = 'white'
             } else if (typeof valid === 'string') {
                tdErr.innerText = valid
                input.style.backgroundColor = 'red'
                input.style.color = 'white'
             }
          } else {
             data[key] = valueOfInput
          }
          if (rowMandatory && !valueOfInput) {
            input.style.border = '4px solid red'
         } else {
            input.style.border = '1px solid rgb(118, 118, 118)'
         }
      })
      td.append(input)

      const tdErr = document.createElement('td')
      tr.append(tdErr)
   }


   this.okCallback     = okCallback
   this.cancelCallback = cancelCallback

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

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)