|
@@ -6,7 +6,6 @@ function Password(parent, open=false) {
|
|
|
input.placeholder = 'password'
|
|
input.placeholder = 'password'
|
|
|
|
|
|
|
|
let wrapper = document.createElement('div')
|
|
let wrapper = document.createElement('div')
|
|
|
- wrapper.style.border = '1px solid red'
|
|
|
|
|
|
|
|
|
|
let btn = document.createElement('button')
|
|
let btn = document.createElement('button')
|
|
|
btn.innerText = 'Hide/Show'
|
|
btn.innerText = 'Hide/Show'
|
|
@@ -73,15 +72,15 @@ function Password(parent, open=false) {
|
|
|
let pass = new Password(document.body, true)
|
|
let pass = new Password(document.body, true)
|
|
|
|
|
|
|
|
// check if Password constructor works
|
|
// 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)
|
|
|
|
|
|
|
+// 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
|
|
// login form
|
|
|
function Login (parent) {
|
|
function Login (parent) {
|
|
@@ -179,18 +178,17 @@ function loginForm(parent, heading='loginForm Constructor') {
|
|
|
parent.append(form)
|
|
parent.append(form)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-let form = new loginForm(document.body)
|
|
|
|
|
|
|
+let login_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)
|
|
|
|
|
|
|
+// login_form.setLogin('default_user')
|
|
|
|
|
+// login_form.setPass('pass example', true)
|
|
|
|
|
+// window.setTimeout(()=> {
|
|
|
|
|
+// console.log(login_form.getPassword())
|
|
|
|
|
+// console.log('before open', login_form.isPasswordOpened())
|
|
|
|
|
+// login_form.setPasswordOpened(true)
|
|
|
|
|
+// console.log('after open', login_form.isPasswordOpened())
|
|
|
|
|
+// console.log(login_form.getLogin())
|
|
|
|
|
+// }, 5000)
|
|
|
|
|
|
|
|
// Password Verify
|
|
// Password Verify
|
|
|
class PasswordVerify extends Password {
|
|
class PasswordVerify extends Password {
|
|
@@ -210,6 +208,7 @@ class PasswordVerify extends Password {
|
|
|
_successBtn.innerText = 'no match!'
|
|
_successBtn.innerText = 'no match!'
|
|
|
_successBtn.disabled = true
|
|
_successBtn.disabled = true
|
|
|
_successBtn.style.display = 'inline-block'
|
|
_successBtn.style.display = 'inline-block'
|
|
|
|
|
+ _successBtn.style.backgroundColor = 'transparent'
|
|
|
|
|
|
|
|
_repeatWrapper.append(_repeatField)
|
|
_repeatWrapper.append(_repeatField)
|
|
|
_repeatWrapper.append(_successBtn)
|
|
_repeatWrapper.append(_successBtn)
|
|
@@ -226,19 +225,23 @@ class PasswordVerify extends Password {
|
|
|
this.onOpenChange(displayRepeat)
|
|
this.onOpenChange(displayRepeat)
|
|
|
|
|
|
|
|
let isMatch= () => {
|
|
let isMatch= () => {
|
|
|
- console.log(this.getHTMLElements())
|
|
|
|
|
- if(this.getHTMLElements().Password_input.value === _repeatField.value) {
|
|
|
|
|
- return true
|
|
|
|
|
- } else {
|
|
|
|
|
- return false
|
|
|
|
|
|
|
+ if(this.getHTMLElements().Password_input.value && _repeatField.value) {
|
|
|
|
|
+ if(this.getHTMLElements().Password_input.value === _repeatField.value) {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ return false
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
let btnActivate = (bool) => {
|
|
let btnActivate = (bool) => {
|
|
|
if(bool) {
|
|
if(bool) {
|
|
|
_successBtn.disabled = false
|
|
_successBtn.disabled = false
|
|
|
|
|
+ _successBtn.style.backgroundColor = 'chartreuse'
|
|
|
|
|
+ _successBtn.innerText = 'passwords match'
|
|
|
} else {
|
|
} else {
|
|
|
_successBtn.disabled = true
|
|
_successBtn.disabled = true
|
|
|
|
|
+ _successBtn.style.backgroundColor = 'transparent'
|
|
|
|
|
+ _successBtn.innerText = 'no match!'
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -255,17 +258,15 @@ class PasswordVerify extends Password {
|
|
|
document.body.insertAdjacentHTML('beforeend', `
|
|
document.body.insertAdjacentHTML('beforeend', `
|
|
|
<div id=verif></div>
|
|
<div id=verif></div>
|
|
|
`)
|
|
`)
|
|
|
-
|
|
|
|
|
let verif = document.getElementById('verif')
|
|
let verif = document.getElementById('verif')
|
|
|
-
|
|
|
|
|
let passverif = new PasswordVerify(verif, true)
|
|
let passverif = new PasswordVerify(verif, true)
|
|
|
|
|
|
|
|
-window.setTimeout(()=> {
|
|
|
|
|
- console.log('bang')
|
|
|
|
|
- passverif.setOpen(false)
|
|
|
|
|
-}, 5000)
|
|
|
|
|
|
|
+// window.setTimeout(()=> {
|
|
|
|
|
+// console.log('bang')
|
|
|
|
|
+// passverif.setOpen(false)
|
|
|
|
|
+// }, 5000)
|
|
|
|
|
|
|
|
-//login form
|
|
|
|
|
|
|
+// login form
|
|
|
function Form(el, data, okCallback, cancelCallback){
|
|
function Form(el, data, okCallback, cancelCallback){
|
|
|
let formBody = document.createElement('div')
|
|
let formBody = document.createElement('div')
|
|
|
let okButton = document.createElement('button')
|
|
let okButton = document.createElement('button')
|
|
@@ -274,7 +275,7 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
let cancelButton = document.createElement('button')
|
|
let cancelButton = document.createElement('button')
|
|
|
cancelButton.innerHTML = 'Cancel'
|
|
cancelButton.innerHTML = 'Cancel'
|
|
|
|
|
|
|
|
- formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
|
|
|
|
|
|
|
+ formBody.innerHTML = '<h2>Form</h2>'
|
|
|
if (typeof okCallback === 'function'){
|
|
if (typeof okCallback === 'function'){
|
|
|
formBody.appendChild(okButton);
|
|
formBody.appendChild(okButton);
|
|
|
okButton.onclick = (e) => {
|
|
okButton.onclick = (e) => {
|
|
@@ -292,42 +293,64 @@ function Form(el, data, okCallback, cancelCallback){
|
|
|
|
|
|
|
|
|
|
|
|
|
let inputCreators = {
|
|
let inputCreators = {
|
|
|
- String(key, value, func){
|
|
|
|
|
|
|
+ string: (key, value, func ) => {
|
|
|
let input = document.createElement('input')
|
|
let input = document.createElement('input')
|
|
|
input.type = 'text'
|
|
input.type = 'text'
|
|
|
input.placeholder = key
|
|
input.placeholder = key
|
|
|
input.value = value
|
|
input.value = value
|
|
|
- input.oninput = () => func(input.value)
|
|
|
|
|
|
|
+ input.oninput = () => {
|
|
|
|
|
+ func(input.value)
|
|
|
|
|
+ try {
|
|
|
|
|
+ if(this.validators[key]) {
|
|
|
|
|
+ this.validators[key](value, key, this.data, input)
|
|
|
|
|
+ console.log('RESSSS', this.validators[key](value, key, this.data, input))
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch(e){console.warn(`no validator for ${key} property`)}
|
|
|
|
|
+ }
|
|
|
return input
|
|
return input
|
|
|
},
|
|
},
|
|
|
- Boolean(key, value, func){
|
|
|
|
|
|
|
+
|
|
|
|
|
+ boolean: (key, value, func) => {
|
|
|
let input = document.createElement('input')
|
|
let input = document.createElement('input')
|
|
|
input.type = 'checkbox'
|
|
input.type = 'checkbox'
|
|
|
input.placeholder = key
|
|
input.placeholder = key
|
|
|
input.checked = value
|
|
input.checked = value
|
|
|
- input.onchecked = () => func(input.value)
|
|
|
|
|
|
|
+ input.onchange = () => {
|
|
|
|
|
+ func(input.value)
|
|
|
|
|
+ try {
|
|
|
|
|
+ if(this.validators[key]) {
|
|
|
|
|
+ this.validators[key](value, key, this.data, e.target)
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch(e){console.warn(`no validator for ${key} property`)}
|
|
|
|
|
+ }
|
|
|
return input
|
|
return input
|
|
|
},
|
|
},
|
|
|
- Date(key, value, func){
|
|
|
|
|
- //используйте datetime-local
|
|
|
|
|
|
|
+
|
|
|
|
|
+ date: (key, value, func) => {
|
|
|
let input = document.createElement('input')
|
|
let input = document.createElement('input')
|
|
|
input.type = 'datetime-local'
|
|
input.type = 'datetime-local'
|
|
|
input.placeholder = key
|
|
input.placeholder = key
|
|
|
- input.value = Date.toISOstring(value).substring(0,10)
|
|
|
|
|
- input.onchange = () => func(input.value)
|
|
|
|
|
|
|
+ input.value = new Date(value).toISOString().slice(0, -1)
|
|
|
|
|
+ console.log('inp val', input.value)
|
|
|
|
|
+ input.onchange = () => {
|
|
|
|
|
+ func(new Date(input.value))
|
|
|
|
|
+ try {
|
|
|
|
|
+ if(this.validators[key]) {
|
|
|
|
|
+ this.validators[key](value, key, this.data, e.target)
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch(e){console.warn(`no validator for ${key} property`)}
|
|
|
|
|
+ }
|
|
|
return input
|
|
return input
|
|
|
},
|
|
},
|
|
|
- //и др. по вкусу, например textarea для длинных строк
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
let formTable = document.createElement('table')
|
|
let formTable = document.createElement('table')
|
|
|
formTable.border = 1
|
|
formTable.border = 1
|
|
|
for(let key in data) {
|
|
for(let key in data) {
|
|
|
let tr = document.createElement('tr')
|
|
let tr = document.createElement('tr')
|
|
|
let tdKey = document.createElement('td')
|
|
let tdKey = document.createElement('td')
|
|
|
let tdInput = document.createElement('td')
|
|
let tdInput = document.createElement('td')
|
|
|
- let input = inputCreators[data[key].constructor.name](key, data[key],(value) => {
|
|
|
|
|
|
|
+ let input = inputCreators[(data[key].constructor.name).toLowerCase()](key, data[key],(value) => {
|
|
|
data[key] = value
|
|
data[key] = value
|
|
|
})
|
|
})
|
|
|
|
|
|
|
@@ -359,7 +382,9 @@ let form = new Form(formContainer, {
|
|
|
}, () => console.log('ok'),() => console.log('cancel') )
|
|
}, () => console.log('ok'),() => console.log('cancel') )
|
|
|
form.okCallback = () => console.log('ok2')
|
|
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'
|
|
|
|
|
|
|
+form.validators.surname = (value, key, data, input) => {
|
|
|
|
|
+ console.log('includes whitespace?', value.includes(' '))
|
|
|
|
|
+ console.log('lenz',value.length)
|
|
|
|
|
+ return value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name'
|
|
|
|
|
+}
|
|
|
console.log(form)
|
|
console.log(form)
|
