//password // function Password (parent , open) { // let passwordInput = document.createElement ('input') // let passwordCheckbox = document.createElement('input') // let passwordSpan = document.createElement('span') // let passwordContent = document.createElement('div') // parent.append(passwordContent) // passwordContent.append(passwordInput) // passwordContent.append(passwordCheckbox) // passwordContent.append(passwordSpan) // passwordContent.style.marginTop = "15px" // passwordContent.style.marginBottom = '20px' // passwordInput.placeholder = "Enter a password" // passwordCheckbox.type = 'checkbox' // passwordCheckbox.style.marginLeft = '10px' // passwordSpan.innerHTML = "Hide password" // passwordSpan.style.marginLeft = "10px" // passwordInput.onchange = () => { // if(typeof this.onChange === 'function'){ // this.onChange(passwordInput.value) // } // } // function showOrHide() { // if (passwordCheckbox.checked) { // passwordInput.setAttribute('type' , 'password') // } else { // passwordInput.setAttribute('type','text') // } // } // passwordCheckbox.addEventListener('change' , showOrHide) // this.setValue = function (text) { // passwordInput.value = text // } // this.getValue = function () { // return passwordInput.value // } // this.setOpen = function (checker) { // showOrHide.call(this) // passwordCheckbox.checked = checker // } // passwordCheckbox.onclick = () => { // showOrHide() // this.onOpenChange("нажали чекбокс") // } // this.getOpen = function () { // return passwordCheckbox.checked // } // } // 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 // let loginContent = document.createElement('div') // let loginH1 = document.createElement('h1') // loginH1.innerHTML = "LoginForm" // loginContent.append(loginH1) // let password = new Password(loginContent,true) // loginContent.querySelector('span').remove() // loginContent.querySelector(`input[type="checkbox"]`).remove(); // loginContent.querySelector(`input`).setAttribute("placeholder", "Enter a login") // document.body.append(loginContent) // let pass = new Password(loginContent , false) // loginContent.querySelector('input:nth-child(2)').setAttribute('placeholder' , 'Enter a password') // let btn = document.createElement('button') // loginContent.append(btn) // btn.innerHTML = "Log in" // btn.style.marginLeft = '20px'; // btn.setAttribute('disabled' , 'disabled') // pass.onChange = password.onChange = () => { // if (pass.getValue() && password.getValue()){ // btn.removeAttribute('disabled'); // }else btn.setAttribute('disabled' , 'disabled'); // } // function LoginFormConstructor (parent , open) { // let passwordForm = document.createElement('div') // let loginForm = document.createElement('div') // let btnForm = document.createElement('div') // let loginInput = document.createElement('input') // loginInput.type = 'text' // loginInput.style.marginBottom = '10px' // loginInput.placeholder = "Enter a login" // let passwordInput = document.createElement('input') // passwordInput.type = 'text' // passwordInput.placeholder = "Enter a password" // let checkbox = document.createElement('input') // checkbox.type = 'checkbox' // checkbox.style.marginLeft = '7px' // let btn = document.createElement('button') // btn.style.marginLeft = '130px' // btn.style.marginTop = '10px' // btn.innerHTML = 'Log in' // // btn.setAttribute('disabled' , 'disabled') // parent.append(loginForm) // parent.append(passwordForm) // parent.append(btnForm) // loginForm.append(loginInput) // passwordForm.append(passwordInput) // passwordForm.append(checkbox) // btnForm.append(btn) // function showOrHide() { // if (checkbox.checked) { // passwordInput.setAttribute('type' , 'password') // } else { // passwordInput.setAttribute('type','text') // } // } // checkbox.addEventListener('change' , showOrHide) // passwordInput.onchange = () => { // if(typeof this.onChange === 'function'){ // this.onChange(passwordInput.value) // } // } // checkbox.onclick = () => { // showOrHide() // this.onOpenChange("нажали чекбокс") // } // this.passwordSetValue = function (text) { // passwordInput.value = text // } // this.passwordGetValue = function () { // return passwordInput.value // } // this.passwordSetOpen = function (checker) { // checkbox.checked = checker // showOrHide.call(this) // } // this.passwordGetOpen = function () { // return checkbox.checked // } // this.loginSetValue = function (text) { // loginInput.value = text // } // this.loginGetValue = function () { // return loginInput.value // } // // тут не разобрался, как сделать тут прикол с кнопкой // // loginInput.onChange = passwordInput.onChange = () => { // // if (passwordInput.passwordGetValue() && loginInput.loginGetValue()){ // // btn.removeAttribute('disabled') // // } else btn.setAttribute('disabled' , 'disabled') // // } // loginInput.onchange = () => { // if(typeof this.onChange === 'function'){ // this.onLoginChange(loginInput.value) // } // } // } // let lfc = new LoginFormConstructor(document.body, true) // lfc.onChange = data => console.log(data) // lfc.onOpenChange = open => console.log(open) // lfc.passwordSetValue('qwerty') // console.log(lfc.passwordGetValue()) // lfc.passwordSetOpen(false) // console.log(lfc.passwordGetOpen()) // lfc.loginSetValue('admin') // console.log(lfc.loginGetValue()) // lfc.onLoginChange = something => console.log(something) //password verify // function Password (parent , open) { // let passwordContent = document.createElement('div') // let passwordContent2 = document.createElement('div') // let btnContent = document.createElement('div') // let h = document.createElement('h1') // h.innerHTML = "Password Verify" // let passwordInput = document.createElement ('input') // let passwordInput2 = document.createElement ('input') // passwordInput2.value = 'qwerty' // passwordInput2.type = 'password' // let passwordCheckbox = document.createElement('input') // let passwordSpan = document.createElement('span') // let btn = document.createElement('button') // btn.innerHTML = 'Log in' // btn.style.marginTop = '10px' // btn.style.marginLeft = '120px' // parent.style.zIndex = 1 // parent.append(passwordContent) // h.style.marginTop = '100px' // parent.append(passwordContent2) // parent.append(btnContent) // passwordContent.append(h) // passwordContent.append(passwordInput) // passwordContent.append(passwordCheckbox) // passwordContent.append(passwordSpan) // passwordContent2.append(passwordInput2) // passwordContent.style.marginTop = "15px" // passwordContent.style.marginBottom = '20px' // passwordInput.placeholder = "Enter a password" // btnContent.append(btn) // passwordCheckbox.type = 'checkbox' // passwordCheckbox.style.marginLeft = '10px' // passwordSpan.innerHTML = "Hide password" // passwordSpan.style.marginLeft = "10px" // function showOrHide() { // if (passwordCheckbox.checked) { // passwordInput.setAttribute('type' , 'password') // } else { // passwordInput.setAttribute('type','text') // } // } // passwordCheckbox.addEventListener('change' , showOrHide) // this.passwordSetOpen = function(bool){ // if(bool === false) { // passwordInput.type = 'password' // passwordCheckbox.checked = false // passwordCheckbox.onchange = function() { // if (passwordInput.type === "password") { // passwordInput.type = "text"; // } // else { // passwordInput.type = 'password' // } // if(passwordInput.type === 'text'){ // passwordInput2.hidden = true // } // else if (passwordInput.type === 'password') { // passwordInput2.hidden = false // } // } // } // else if (bool === true){ // passwordInput.type = 'text' // passwordCheckbox.checked = true // passwordCheckbox.onchange = function() { // if (passwordInput.type === "password") { // passwordInput.type = "text"; // } // else { // passwordInput.type = 'password' // } // } // } // } // this.Verify = function () { // btn.disabled = true // passwordInput.oninput = passwordInput2.oninput = () => { // if (passwordInput.value === passwordInput2.value && passwordInput.value != '') { // btn.disabled = false // } // else { // btn.disabled = true // } // } // } // } // let p = new Password(document.body, true) // p.passwordSetOpen(false) // p.Verify() 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 = '

тут будет форма после перервы

' 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) this.okCallback = okCallback this.cancelCallback = cancelCallback this.data = data let input = document.createElement('input') for (input in 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)