|
|
@@ -0,0 +1,241 @@
|
|
|
+// password
|
|
|
+function Password(parent, open=false) {
|
|
|
+ let _isVisible = open
|
|
|
+ let _value = ''
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.placeholder = 'password'
|
|
|
+
|
|
|
+ let wrapper = document.createElement('div')
|
|
|
+ wrapper.style.border = '1px solid red'
|
|
|
+
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.innerText = 'Hide/Show'
|
|
|
+
|
|
|
+ this.getHTMLElements = function() {
|
|
|
+ return {
|
|
|
+ Password_wrapper: wrapper,
|
|
|
+ Password_input: input,
|
|
|
+ Password_btn: btn
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = function() {
|
|
|
+ return _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue = function(newValue) {
|
|
|
+ _value = newValue
|
|
|
+ input.value = _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setOpen = (bool) => {
|
|
|
+ _isVisible = bool
|
|
|
+ let _type = _isVisible? 'text' : 'password'
|
|
|
+ input.setAttribute('type', `${_type}`)
|
|
|
+ this.onOpenChange()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getOpen = function() {
|
|
|
+ return _isVisible
|
|
|
+ }
|
|
|
+
|
|
|
+ this.onChange = function(event) {
|
|
|
+ _value = event.target.value
|
|
|
+ }
|
|
|
+
|
|
|
+ let closed = () => {}
|
|
|
+
|
|
|
+ this.onOpenChange = (func=null, ...args) => {
|
|
|
+ let lockfunc = func
|
|
|
+ if(func) {
|
|
|
+ (function(){
|
|
|
+ closed = lockfunc
|
|
|
+ closed(...args)
|
|
|
+ })()
|
|
|
+ } else {
|
|
|
+ closed(...args)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ input.addEventListener('input', this.onChange)
|
|
|
+
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ this.setOpen(!_isVisible)
|
|
|
+ })
|
|
|
+
|
|
|
+ wrapper.setAttribute('class', 'Password')
|
|
|
+ this.setOpen(open)
|
|
|
+
|
|
|
+ wrapper.append(input, btn)
|
|
|
+ parent.append(wrapper)
|
|
|
+}
|
|
|
+
|
|
|
+let pass = new Password(document.body, true)
|
|
|
+
|
|
|
+// 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)
|
|
|
+
|
|
|
+// login form
|
|
|
+function Login (parent) {
|
|
|
+ let _value = ''
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.type = 'text'
|
|
|
+ input.placeholder = 'login'
|
|
|
+ input.style.display = 'block'
|
|
|
+ parent.append(input)
|
|
|
+
|
|
|
+ this.getHTMLElement = function() {
|
|
|
+ return input
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = function() {
|
|
|
+ return _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue = function(newValue) {
|
|
|
+ _value = newValue
|
|
|
+ input.value = _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.onChange = function(event) {
|
|
|
+ _value = event.target.value
|
|
|
+ }
|
|
|
+
|
|
|
+ input.addEventListener('input', this.onChange)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// loginForm Constructor
|
|
|
+function loginForm(parent, heading='loginForm Constructor') {
|
|
|
+ let form = document.createElement('div')
|
|
|
+ form.id = 'loginForm'
|
|
|
+ form.style.border = '5px double black'
|
|
|
+ form.style.width = 'fit-content'
|
|
|
+ form.style.textAlign = 'center'
|
|
|
+ form.style.padding = '15px'
|
|
|
+ form.style.margin = '15px'
|
|
|
+
|
|
|
+ let h2 = document.createElement('h2')
|
|
|
+ h2.innerText = heading
|
|
|
+ form.append(heading)
|
|
|
+
|
|
|
+ let _login = new Login(form)
|
|
|
+ let _password = new Password(form)
|
|
|
+
|
|
|
+ let login_btn = document.createElement('button')
|
|
|
+ login_btn.innerText = 'Log in'
|
|
|
+ login_btn.disabled = true
|
|
|
+
|
|
|
+ form.append(login_btn)
|
|
|
+ for(let item of form.children) {
|
|
|
+ item.style.margin = '10px'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getLogin = function() {
|
|
|
+ return _login.getValue()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getPassword = function() {
|
|
|
+ return _password.getValue()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isPasswordOpened = function() {
|
|
|
+ return _password.getOpen()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setPasswordOpened = function(bool) {
|
|
|
+ _password.setOpen(bool)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setLogin = function(newLogin) {
|
|
|
+ _login.setValue(newLogin)
|
|
|
+ checkFields()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setPass = function(newPass) {
|
|
|
+ _password.setValue(newPass)
|
|
|
+ checkFields()
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkFields() {
|
|
|
+ if (_login.getValue() && _password.getValue()) {
|
|
|
+ login_btn.disabled = false
|
|
|
+ } else {
|
|
|
+ login_btn.disabled = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ _login.getHTMLElement().addEventListener('input', checkFields)
|
|
|
+ _password.getHTMLElements().Password_input.addEventListener('input', checkFields)
|
|
|
+
|
|
|
+ parent.append(form)
|
|
|
+}
|
|
|
+
|
|
|
+let 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)
|
|
|
+
|
|
|
+// Password Verify
|
|
|
+class PasswordVerify extends Password {
|
|
|
+ constructor(parent, open=false) {
|
|
|
+ super(parent, open);
|
|
|
+ let _repeatWrapper = document.createElement('div')
|
|
|
+ let _repeatField = document.createElement('input')
|
|
|
+ let _successBtn = document.createElement('button')
|
|
|
+
|
|
|
+ let displayRepeat = () => {
|
|
|
+ if(this.getOpen() === false) {
|
|
|
+ _repeatField.style.marginTop = '10px'
|
|
|
+ _repeatField.type = 'password'
|
|
|
+ _repeatField.placeholder = 'repeat password'
|
|
|
+ _repeatField.value = ''
|
|
|
+
|
|
|
+ _successBtn.innerText = 'no match!'
|
|
|
+ _successBtn.disabled = true
|
|
|
+ _successBtn.style.display = 'inline-block'
|
|
|
+
|
|
|
+ _repeatWrapper.append(_repeatField)
|
|
|
+ _repeatWrapper.append(_successBtn)
|
|
|
+
|
|
|
+ this.getHTMLElements().Password_wrapper.append(_repeatWrapper)
|
|
|
+ } else {
|
|
|
+ try {
|
|
|
+ for(let child of _repeatWrapper.children) {
|
|
|
+ _repeatWrapper.remove(child)
|
|
|
+ }
|
|
|
+ } catch(e){}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.onOpenChange(displayRepeat)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+document.body.insertAdjacentHTML('beforeend', `
|
|
|
+ <div id=verif></div>
|
|
|
+`)
|
|
|
+
|
|
|
+let verif = document.getElementById('verif')
|
|
|
+
|
|
|
+let passverif = new PasswordVerify(verif, true)
|
|
|
+
|
|
|
+window.setTimeout(()=> {
|
|
|
+ console.log('bang')
|
|
|
+ passverif.setOpen(false)
|
|
|
+}, 5000)
|
