login form partly done

hw9/script.js

@@ -224,6 +224,31 @@ class PasswordVerify extends Password {
             }
         }
         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())
+        })
     }
 }
 
@@ -239,3 +264,102 @@ 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)