|
|
@@ -0,0 +1,175 @@
|
|
|
+//password
|
|
|
+function Password(parent, open=false) {
|
|
|
+ let _isVisible = open
|
|
|
+ let _value = ''
|
|
|
+ let input = document.createElement('input')
|
|
|
+ input.placeholder = 'password'
|
|
|
+ let wrapper = document.createElement('div')
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.innerText = 'Hide/Show'
|
|
|
+
|
|
|
+ this.getHTMLElement = function() {
|
|
|
+ return input
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = function() {
|
|
|
+ return _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue = function(newValue) {
|
|
|
+ _value = newValue
|
|
|
+ input.value = _value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setOpen = function(bool) {
|
|
|
+ _isVisible = bool
|
|
|
+ let _type = _isVisible? 'text' : 'password'
|
|
|
+ input.setAttribute('type', `${_type}`)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getOpen = function() {
|
|
|
+ return _isVisible
|
|
|
+ }
|
|
|
+
|
|
|
+ this.onChange = function(event) {
|
|
|
+ _value = event.target.value
|
|
|
+ }
|
|
|
+
|
|
|
+ this.onOpenChange = function(openSetter) {
|
|
|
+ openSetter(!_isVisible)
|
|
|
+ }
|
|
|
+
|
|
|
+ input.addEventListener('input', this.onChange)
|
|
|
+
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ this.onOpenChange(this.setOpen)
|
|
|
+ })
|
|
|
+
|
|
|
+ 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.getHTMLElement().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)
|
