displayRepeat func done and onOpenChange rewritten

hw9/script.js

@@ -1,15 +1,22 @@
-//password
+// 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.getHTMLElement = function() {
-        return input
+    this.getHTMLElements = function() {
+        return {
+            Password_wrapper: wrapper,
+            Password_input: input,
+            Password_btn: btn
+        }
     }
 
     this.getValue = function() {
@@ -21,10 +28,11 @@ function Password(parent, open=false) {
         input.value = _value
     }
 
-    this.setOpen = function(bool) {
+    this.setOpen = (bool) => {
         _isVisible = bool
         let _type = _isVisible? 'text' : 'password'
         input.setAttribute('type', `${_type}`)
+        this.onOpenChange()
     } 
 
     this.getOpen = function() {
@@ -35,14 +43,24 @@ function Password(parent, open=false) {
         _value = event.target.value
     }
 
-    this.onOpenChange = function(openSetter) {
-        openSetter(!_isVisible)
+    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.onOpenChange(this.setOpen)
+        this.setOpen(!_isVisible)
     })
 
     wrapper.setAttribute('class', 'Password')
@@ -54,7 +72,7 @@ function Password(parent, open=false) {
 
 let pass = new Password(document.body, true)
 
-//check if Password constructor works
+// check if Password constructor works
 pass.setValue('hello world')
 pass.setOpen(false)
 console.log(pass.getOpen())
@@ -65,7 +83,7 @@ window.setTimeout(()=> {
     pass.setOpen(true)
 }, 5000)
 
-//_login form
+// login form
 function Login (parent) {
     let _value = ''
     let input = document.createElement('input')
@@ -95,7 +113,7 @@ function Login (parent) {
 }
 
 
-//loginForm Constructor
+// loginForm Constructor
 function loginForm(parent, heading='loginForm Constructor') {
     let form = document.createElement('div')
     form.id = 'loginForm'
@@ -156,7 +174,7 @@ function loginForm(parent, heading='loginForm Constructor') {
     }
 
     _login.getHTMLElement().addEventListener('input', checkFields)
-    _password.getHTMLElement().addEventListener('input', checkFields)
+    _password.getHTMLElements().Password_input.addEventListener('input', checkFields)
 
     parent.append(form)
 }
@@ -173,3 +191,51 @@ window.setTimeout(()=> {
     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)