homework-js/js11/js/main.js

// 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