|
|
@@ -0,0 +1,250 @@
|
|
|
+// Password
|
|
|
+
|
|
|
+function Password(parent, open) {
|
|
|
+
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.style.marginTop = '30px'
|
|
|
+ parent.append(input)
|
|
|
+
|
|
|
+ let checkbox = document.createElement('input')
|
|
|
+ checkbox.setAttribute('type', 'checkbox')
|
|
|
+ parent.append(checkbox)
|
|
|
+
|
|
|
+ let content = document.createElement('span')
|
|
|
+ content.append('See the password')
|
|
|
+ content.style.color = 'blue'
|
|
|
+ parent.append(content)
|
|
|
+
|
|
|
+ this.setValue = (text) => input.value = text
|
|
|
+
|
|
|
+ this.getValue = () => input.value
|
|
|
+
|
|
|
+ this.getOpen = () => input.type
|
|
|
+
|
|
|
+ checkbox.onclick = () => this.onOpenChange(input.type)
|
|
|
+
|
|
|
+ checkbox.oninput = () => this.onChange(input.type)
|
|
|
+
|
|
|
+ this.setOpen = function(open) {
|
|
|
+ if(open === false) {
|
|
|
+ input.type = 'password'
|
|
|
+ checkbox.checked = false
|
|
|
+ checkbox.onchange = function() {
|
|
|
+ if (input.type === 'password') {
|
|
|
+ input.type = 'text'
|
|
|
+ console.log('Current input type is: ' + p.getOpen())
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ input.type = 'password'
|
|
|
+ console.log('Current input type is: ' + p.getOpen())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (open === true) {
|
|
|
+ input.type = 'text'
|
|
|
+ checkbox.checked = true
|
|
|
+ checkbox.onchange = function() {
|
|
|
+ if (input.type === 'text') {
|
|
|
+ input.type = 'password'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ input.type = 'text'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let p = new Password(document.body, true)
|
|
|
+
|
|
|
+p.onChange = () => {console.log('Input type is successfully changed, exact time of change is: ' + new Date())}
|
|
|
+
|
|
|
+p.onOpenChange = type => confirm('Current type : ' + type + '\n' + 'Cancel - leave type unchanged' + '\n' + 'OK - change type')
|
|
|
+
|
|
|
+p.setValue('qwerty')
|
|
|
+console.log('Current password is: ' + p.getValue())
|
|
|
+
|
|
|
+p.setOpen(false)
|
|
|
+console.log('Current type of input is: ' + p.getOpen())
|
|
|
+
|
|
|
+// p.setOpen(true)
|
|
|
+// console.log(p.getOpen()) // for true
|
|
|
+
|
|
|
+// // // or
|
|
|
+let showPassword = document.querySelectorAll('.show-password')
|
|
|
+showPassword.forEach(item => item.addEventListener('click', toogleType))
|
|
|
+function toogleType() {
|
|
|
+ let input = this.closest('.thepassword').querySelector('.password')
|
|
|
+ if(input.type === 'password') {
|
|
|
+ input.type = 'text'
|
|
|
+ } else {
|
|
|
+ input.type = 'password'
|
|
|
+ }
|
|
|
+} // decided to leave that way too - input hide/show password without 'qwerty' by default
|
|
|
+
|
|
|
+// // // LoginForm
|
|
|
+// // LoginForm Constructor
|
|
|
+
|
|
|
+function Loggin() {
|
|
|
+
|
|
|
+ let loginForm = document.createElement('input')
|
|
|
+ loginForm.setAttribute('placeholder', 'Login')
|
|
|
+ loginForm.style.marginLeft = '10px'
|
|
|
+ loginForm.style.marginRight = '4px'
|
|
|
+ document.body.appendChild(loginForm)
|
|
|
+
|
|
|
+ let passwordForm = document.createElement('input')
|
|
|
+ passwordForm.setAttribute('placeholder', 'Password')
|
|
|
+ document.body.appendChild(passwordForm)
|
|
|
+
|
|
|
+ let button = document.createElement('button')
|
|
|
+ button.style.marginLeft = '4px'
|
|
|
+ button.textContent = 'Button'
|
|
|
+ document.body.appendChild(button)
|
|
|
+
|
|
|
+ this.setInfo = () => [loginForm.value, passwordForm.value]
|
|
|
+
|
|
|
+ this.getLog = (log) => loginForm.value = log
|
|
|
+
|
|
|
+ this.getPass = (pass) => passwordForm.value = pass
|
|
|
+
|
|
|
+ this.setForm = function() {
|
|
|
+ button.disabled = true
|
|
|
+ loginForm.oninput = passwordForm.oninput = () => {
|
|
|
+ if(loginForm.value.length > 0 & passwordForm.value.length > 0){
|
|
|
+ button.disabled = false
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ button.disabled = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let l = new Loggin()
|
|
|
+l.setForm()
|
|
|
+l.getLog('') // any login
|
|
|
+l.getPass('') // any password
|
|
|
+console.log(l.setInfo()) // array of log and pass
|
|
|
+
|
|
|
+// for example
|
|
|
+// l.getLog('qwerty')
|
|
|
+// l.getPass('123')
|
|
|
+// console.log(l.setInfo()) // Array (2) ["qwerty", "123"]
|
|
|
+
|
|
|
+// // // // or
|
|
|
+function checkform() {
|
|
|
+ let f = document.forms['theform'].elements
|
|
|
+ let cansubmit = true;
|
|
|
+
|
|
|
+ for (let i = 0; i < f.length; i++) {
|
|
|
+ if (f[i].value.length == 0) {
|
|
|
+ cansubmit = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (cansubmit) {
|
|
|
+ document.getElementById('submitbutton').disabled = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Password Verify
|
|
|
+
|
|
|
+// function Password(parent, open) {
|
|
|
+// let input1 = document.createElement('input')
|
|
|
+// parent.append(input1)
|
|
|
+// let checkbox = document.createElement('input')
|
|
|
+// checkbox.setAttribute('type', 'checkbox')
|
|
|
+// parent.append(checkbox)
|
|
|
+// let content = document.createElement('span')
|
|
|
+// content.append('See the password')
|
|
|
+// content.style.marginRight = '5px'
|
|
|
+// content.style.color = 'blue'
|
|
|
+// parent.append(content)
|
|
|
+
|
|
|
+// let input2 = document.createElement('input')
|
|
|
+// parent.appendChild(input2)
|
|
|
+// let btn = document.createElement('button')
|
|
|
+// btn.textContent = 'Button'
|
|
|
+// parent.appendChild(btn)
|
|
|
+
|
|
|
+// this.setValue = (text) => input1.value = text
|
|
|
+
|
|
|
+// this.getValue = () => input1.value
|
|
|
+
|
|
|
+// this.getOpen = () => input1.type
|
|
|
+
|
|
|
+// checkbox.onclick = () => this.onOpenChange(input1.type)
|
|
|
+
|
|
|
+// checkbox.oninput = () => this.onChange(input1.type)
|
|
|
+
|
|
|
+// this.setOpen = function(open) {
|
|
|
+// if(open === false) {
|
|
|
+// input1.type = 'password'
|
|
|
+// checkbox.checked = false
|
|
|
+// checkbox.onchange = function() {
|
|
|
+// if (input1.type === 'password') {
|
|
|
+// input1.type = 'text'
|
|
|
+// console.log('Current input type is: ' + p.getOpen())
|
|
|
+// }
|
|
|
+// else {
|
|
|
+// input1.type = 'password'
|
|
|
+// console.log('Current input type is: ' + p.getOpen())
|
|
|
+// }
|
|
|
+// if(input1.type === 'text') {
|
|
|
+// input2.hidden = true
|
|
|
+// }
|
|
|
+// else if (input1.type === 'password') {
|
|
|
+// input2.hidden = false
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// else {
|
|
|
+// if (open === true) {
|
|
|
+// input1.type = 'text'
|
|
|
+// checkbox.checked = true
|
|
|
+// checkbox.onchange = function() {
|
|
|
+// if (input1.type === 'password') {
|
|
|
+// input1.type = 'text'
|
|
|
+// }
|
|
|
+// else {
|
|
|
+// input1.type = 'password'
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// this.passwordVerify = function() {
|
|
|
+// btn.disabled = true
|
|
|
+// input1.oninput = input2.oninput = () => {
|
|
|
+// if(input1.value === input2.value) {
|
|
|
+// btn.disabled = false
|
|
|
+// }
|
|
|
+// else {
|
|
|
+// btn.disabled = true
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// let p = new Password(document.body, true)
|
|
|
+
|
|
|
+// p.onChange = () => {console.log('Input type is successfully changed, exact time of change is: ' + new Date())}
|
|
|
+
|
|
|
+// p.onOpenChange = type => confirm('Current type : ' + type + '\n' + 'Cancel - leave type unchanged' + '\n' + 'OK - change type and hide the second input')
|
|
|
+
|
|
|
+// p.setValue('qwerty')
|
|
|
+// console.log('Current password is: ' + p.getValue())
|
|
|
+
|
|
|
+// p.setOpen(false)
|
|
|
+// console.log('Current type of input is: ' + p.getOpen())
|
|
|
+// p.passwordVerify()
|
|
|
+
|
|
|
+// // p.setOpen(true)
|
|
|
+// // console.log(p.getOpen()) // for true
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
Евгения Акиншина