|
|
@@ -0,0 +1,139 @@
|
|
|
+function Password(parent, open) {
|
|
|
+ let value = ''
|
|
|
+ let pass = document.createElement('input')
|
|
|
+ pass.placeholder = 'enter password'
|
|
|
+ let showPassBox = document.createElement('div')
|
|
|
+ let check = document.createElement('input')
|
|
|
+ check.type = 'checkbox'
|
|
|
+ check.name = 'password'
|
|
|
+ let label = document.createElement('label')
|
|
|
+ label.for = 'password'
|
|
|
+ label.innerText = 'Show password'
|
|
|
+ showPassBox.append(check, label)
|
|
|
+ parent.append(pass, showPassBox)
|
|
|
+ check.onchange = () => {
|
|
|
+ this.setOpen(check.checked)
|
|
|
+ }
|
|
|
+ pass.oninput = () => {
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(this.getValue());
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.getValue = function () {
|
|
|
+ return pass.value
|
|
|
+ }
|
|
|
+ this.setValue = function(value) {
|
|
|
+ pass.value = value
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return open
|
|
|
+ }
|
|
|
+ this.setOpen = function(newOpen) {
|
|
|
+ open = newOpen
|
|
|
+ pass.type = open ? 'text' : 'password'
|
|
|
+ check.checked = open
|
|
|
+ if(typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(open)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setOpen(open)
|
|
|
+ this.onChange = () => {
|
|
|
+ button.disabled = !(p.getValue() === p2.getValue())
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// let p = new Password(document.body, false)
|
|
|
+//
|
|
|
+// 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())
|
|
|
+
|
|
|
+function Login(parent) {
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.placeholder = 'enter login'
|
|
|
+ let button = document.createElement('button')
|
|
|
+ button.innerText = 'log in'
|
|
|
+ parent.appendChild(input)
|
|
|
+ let password = new Password(parent, false)
|
|
|
+ password.placeholder = 'enter password'
|
|
|
+ button.disabled = true
|
|
|
+ parent.appendChild(button)
|
|
|
+
|
|
|
+ parent.onchange = function () {
|
|
|
+ console.log(password.getValue())
|
|
|
+ button.disabled = !(input.value !== '' && password.getValue() !== '')
|
|
|
+ }
|
|
|
+}
|
|
|
+let newLogin = new Login(loginForm)
|
|
|
+console.log(newLogin)
|
|
|
+
|
|
|
+
|
|
|
+let p = new Password(document.body, true)
|
|
|
+let p2 = new Password(document.body, true)
|
|
|
+let button = document.createElement('button')
|
|
|
+button.innerText = 'log in'
|
|
|
+button.disabled = true
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+document.body.append(button)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// let $login = document.createElement('input');
|
|
|
+// let $password = document.createElement('input')
|
|
|
+// let $loginBtn = document.createElement('button')
|
|
|
+// $loginBtn.innerText = 'Log In'
|
|
|
+// let loginForm = document.querySelector('#loginForm')
|
|
|
+// loginForm.append($login, $password, $loginBtn)
|
|
|
+// let login = new Password(document.body, true)
|
|
|
+// let password = new Password(document.body, false)
|
|
|
+// let btn = new Password(document.body, false)
|
|
|
+//
|
|
|
+// login.setValue('anonymous');
|
|
|
+// password.setValue('123456');
|
|
|
+// login.value && password.value !== '' ? btn.setOpen(true) : btn.setOpen(false)
|
|
|
+// function LoginForm(login, password){
|
|
|
+// this.login = login
|
|
|
+// this.password = password
|
|
|
+// this.btn = false
|
|
|
+//
|
|
|
+// this.getLogin = function () {
|
|
|
+// return this.login
|
|
|
+// }
|
|
|
+// this.setLogin = function (value) {
|
|
|
+// return this.login = value
|
|
|
+// }
|
|
|
+// this.getPassword = function () {
|
|
|
+// return this.password
|
|
|
+// }
|
|
|
+// this.setPassword = function (value) {
|
|
|
+// return this.password = value
|
|
|
+// }
|
|
|
+// this.setBtn = function () {
|
|
|
+// this.login.value && this.password.value ? this.btn = true : this.btn = false
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// let newLogin = new LoginForm('admin', '11111');
|
|
|
+// console.log(newLogin.login.value)
|
|
|
+// console.log(newLogin)
|
|
|
+
|
