//Password // function Password(parent, open){ // let input = document.createElement('input'); // input.placeholder = 'your password'; // input.type = 'password'; // let btn= document.createElement('button'); // btn.type = 'checkbox'; // parent.append(input); // parent.append(btn); // let value = ''; // let innerTextForBtn = open; // btn.innerText = innerTextForBtn ? 'show password' : 'hide password'; // this.setValue = newValue => { // if (newValue != ' ' && newValue && newValue !== value){ // value = newValue; // } // }; // this.setOpen = newOpen => { // if (newOpen != innerTextForBtn && newOpen != undefined){ // innerTextForBtn = newOpen; // } // }; // input.oninput = this.onChange = (input) => { // value = input.data; // }; // btn.onclick = this.onOpenChange = (newOpen) => { // innerTextForBtn = !innerTextForBtn; // if(input.getAttribute('type') === 'password'){ // input.type = 'text'; // btn.innerHTML = 'show password'; // } else if (input.getAttribute('type') === 'text') { // input.type = 'password'; // btn.innerHTML = 'hide password'; // } // }; // this.getValue = () => value; // this.getOpen = () => innerTextForBtn; // } // let p = new Password(document.body, true); // p.onChange = data => console.log(data); // p.onOpenChange = open => console.log(open); // p.setValue('qwerty'); // console.log(p.getValue()); // p.setOpen(false); // console.log(p.getOpen()); //LoginForm // function Login(parent){ // let form = document.createElement('form'); // let inputLogin = document.createElement('input'); // inputLogin.placeholder = 'login'; // inputLogin.type = 'text'; // let inputPaswd = document.createElement('input'); // inputPaswd.placeholder = 'password'; // inputPaswd.type = 'password'; // let btn= document.createElement('button'); // btn.innerHTML = 'First, write login and password'; // parent.append(form); // form.append(inputLogin); // form.append(inputPaswd); // form.append(btn); // let valueLogin = ''; // let valuePaswd = ''; // inputLogin.oninput = () =>{ // valueLogin = inputLogin.value; // }; // inputPaswd.oninput = () =>{ // valuePaswd = inputPaswd.value; // }; // btn.onclick = (event) =>{ // event.preventDefault(); // if(valueLogin === '' && valuePaswd === ''){ // btn.innerHTML = 'Write login and password'; // btn.style.backgroundColor = 'red'; // } else { // btn.disabled = true; // btn.innerHTML = 'Sent'; // btn.style.backgroundColor = 'green'; // } // }; // } // let p = new Login(document.body, true); //Password Verify // function Password (parent){ // let pswd = document.createElement('input'); // let pswdVerify = document.createElement('input'); // let btn = document.createElement('button'); // pswd.type = 'password'; // pswdVerify.type = 'password'; // btn.innerHTML = 'Check'; // parent.append(pswd); // parent.append(pswdVerify); // parent.append(btn); // let valuePswd = ''; // let valuePswdVerify = ''; // pswdVerify.style.display = 'none'; // pswd.oninput = () =>{ // valuePswd = pswd.value; // }; // pswdVerify.oninput = () =>{ // valuePswdVerify = pswdVerify.value; // }; // let p = document.createElement('p'); // parent.append(p); // btn.onclick = () => { // if(valuePswd === ''){ // p.innerHTML = 'Write password'; // p.style.color = 'red'; // } else if (pswdVerify.style.display === 'block') { // if(valuePswd === valuePswdVerify){ // p.innerHTML = 'Right password'; // p.style.color = 'green'; // } else{ // p.innerHTML = 'You made mistake'; // p.style.color = 'red'; // } // } else { // pswdVerify.style.display = 'block'; // p.innerHTML = ''; // } // }; // } // let p = new Password(document.body); //Form const dateToDataTimeLocal = date => (new Date(date.getTime() - date.getTimezoneOffset() * 60000)).toISOString().slice(0, -1); dateToDataTimeLocal(new Date()); 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'; let inputCreators = { String(key, value, oninput){ let div = document.createElement('div'); let label = document.createElement('label'); let input = document.createElement('input'); label.innerHTML = key; input.required = true; input.placeholder = key; input.value = value; if(key === 'password'){ input.type = 'password'; } let p = document.createElement('p'); p.innerHTML = ''; input.oninput = () => { (function() { if (input.placeholder in this.validators) { let x = this.validators[input.placeholder](input.value, input.placeholder, this.data, input); if(x !== true){ p.style.color = 'red'; p.innerHTML = 'Error!'; input.style.backgroundColor = 'red'; label.appendChild(p); } else { p.innerHTML = ''; input.style.backgroundColor = ''; console.log(x); } } else { oninput(input.value); } }).call(this); } formBody.appendChild(div); div.appendChild(label,input); let abbr = document.createElement('abbr'); abbr.title = 'Обязательно'; abbr.className = 'importantInput'; abbr.innerHTML = '*'; label.appendChild(abbr); return input; }, Boolean(key, value, oninput){ let div = document.createElement('div'); let label = document.createElement('label'); let input = document.createElement('input'); label.innerHTML = key; input.required = true; input.type = 'checkbox'; input.checked = value; input.appendChild(label); input.oninput = () => oninput(input.checked); formBody.appendChild(div); div.appendChild(label,input); let abbr = document.createElement('abbr'); abbr.title = 'Обязательно'; abbr.className = 'importantInput'; abbr.innerHTML = '*'; label.appendChild(abbr); return input; }, Date(key, value, oninput){ let div = document.createElement('div'); let label = document.createElement('label'); let input = document.createElement('input'); label.innerHTML = key; input.required = true; input.type = 'datetime-local'; input.value = dateToDataTimeLocal(value); input.onchange = () =>{ oninput(new Date(input.value)); }; formBody.appendChild(div); div.appendChild(label,input); let abbr = document.createElement('abbr'); abbr.title = 'Обязательно'; abbr.className = 'importantInput'; abbr.innerHTML = '*'; label.appendChild(abbr); return input; } } for(const [key, value] of Object.entries(data)){ let input = inputCreators[value.constructor.name].call(this, key, value, newValue => { data[key] = newValue; }); formBody.appendChild(input); } if (typeof okCallback === 'function'){ formBody.appendChild(okButton); okButton.onclick = (e) => { this.okCallback(e) // console.log(this) } } if (typeof cancelCallback === 'function'){ formBody.appendChild(cancelButton); cancelButton.onclick = () => window.location.reload(); } el.appendChild(formBody); this.okCallback = okCallback; this.cancelCallback = cancelCallback; this.data = data; this.validators = {}; }; let form = new Form(formContainer, { name: 'Anakin', surname: 'Skywalker', password: 'qwerty', married: true, birthday: new Date((new Date).getTime() - 86400000 * 30*365) }, () => console.log('ok'),() => console.log('cancel') ); form.okCallback = () => console.log('ok') form.validators.name = (value, key, data, input) => value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name'; form.validators.surname = (value, key, data, input) => value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(' ') ? true : 'Wrong name'; form.validators.password = (value, key, data, input) => value.length > 5 && !value.includes(' ') ? true : 'Wrong name'; console.log(form);