js_homeworks/password_OOP/main.js

function Password(parent, open/* , onChange,onOpenChange */){
    let pswdInput = document.createElement('input');
    let showPswd = document.createElement('button');
    /* pswdInput.type = 'password'; */
    showPswd.innerText = 'show pswd';
    parent.append(pswdInput);
    parent.append(showPswd);

    if(open == true){
        pswdInput.type = 'text'
    } else {
        pswdInput.type = 'password'
    }
    /* this.open = open; \
    this.getOpen = function(){
        return this.open;
    }*/
    let pswdValue='';
    this.setValue = value =>{
        if(typeof this.onChange === 'function'){
            this.onChange(`change all time ${value}`);
        }
            pswdValue = value
        pswdInput.value = pswdValue
    }
    this.setValue(pswdValue);
    this.setType = (type) => pswdInput.type = type;
    this.getType = () => pswdInput.type;
    this.getValue = () => pswdValue;
    this.setOpen = (newOpen) =>{
        if(typeof this.onOpenChange ==='function'){
            this.onOpenChange(`change when opened input ${newOpen}`);
        }
        if(open !== newOpen ){
             pswdInput.type = 'password'
        } else {
            pswdInput.type = 'text';
        }
    };
    this.getOpen = () =>{
        if(pswdInput.type =='password'){
            console.log('closed');
        }else {
            console.log('open');
        }
    }
    pswdInput.oninput = () => {
        this.setValue(pswdInput.value);
    }

    /* this.onChange = onChange;
    this.onOpenChange = onOpenChange; */
    /* pswdInput.oninput = this.onChange(this.getValue()); */  
    /* this.onOpenChange = opened =>{
        pswdInput.oninput = () => oninput(opened);
    } */
    /* this.onChange = data =>{
        pswdInput.onchange = () =>onchange(data);
    } */
    showPswd.addEventListener('click', function changeVision(e){
        if(pswdInput.getAttribute("type")=="password"){
            pswdInput.type = 'text';
            open = !open;
            /* console.log(` what happened in click ${open}`) */
        } else{
            pswdInput.type = 'password';
            !open;
            /* console.log(`what happened in click hide ${open}`) */
        }
    
    });
    /* if(typeof this.onOpenChange == 'function'){
        this.onOpenChange(this.getValue());
    } */
    /* pswdInput.oninput = () => {
        if(typeof this.onChange == 'function'){
            this.onChange(this.getValue());
        }
    } */
    /* pswdInput.oninput = () => this.onOpenChange(this.getValue()); */
    /* pswdInput.oninput = () =>this.onChange(this.getValue()); */
}

function Form (parent){
    /* let pswdCheck = new Password(parent,true,()=>{}, ()=>{}); */
    let login = document.createElement('input');
    let acceptButton = document.createElement('button');
    acceptButton.innerText = 'Ok';
    parent.append(login);
    let pswd = new Password(parent,true);
    parent.append(acceptButton);
    let loginValue='';
    /* let pswdCheckValue=''; */
    /* pswd.setValue('qwerty'); */

    let actionbutton = (passwordValue) => {
       /*  (passwordValue && this.getloginValue())? acceptButton.disabled = false : acceptButton.disabled=true */
       if(passwordValue && this.getloginValue()){
           acceptButton.disabled = false
       }else {
           acceptButton.disabled = true
       }
    }
    this.setLoginValue = value =>{
        loginValue = value;
        login.value = loginValue
        actionbutton(pswd.getValue());
    }
   /*  this.setCheckPswdValue = value => {
        pswdCheckValue = value;
        checkPswd.value = pswdCheckValue;
    }
    this.setCheckPswdValue(pswdCheckValue)
    this.getCheckPswdValue=()=>pswdCheckValue; */
    this.setLoginValue(loginValue);
    this.getloginValue = () => loginValue;
    login.oninput = () => {
        this.setLoginValue(login.value);
    }


    pswd.onChange = (newpswd) => {
        if(newpswd !== pswd.getValue() && typeof this.onChangePswd ==='function'){
                this.onChangePswd(newpswd);
        }
        actionbutton(pswd.getValue());
    }


    /* let pswdTrueOrNot = (passwordValue, checkPswdValue) =>{
        if(checkPswdValue !== passwordValue){
            checkPswd.style.border = 'red'
        }
     else {
        checkPswd.style.border = 'green'
    }
}
    checkPswd.oninput = () => {
        let checkValue = checkPswd.value;
        this.setCheckPswdValue(checkValue);
        let pswdValue = pswd.getValue();
        pswdTrueOrNot(pswdValue,checkValue);
    } */
    /* if(pswd.getType() == 'text'){
        checkPswd.style.display = 'none';
    } else {
        checkPswd.style.display = '';
        pswd.setType('password');
    } */
    // trash set and get
    this.getValuePassword = () => pswd.getValue();
    this.setValuePassword = (newpswd) => {
        pswd.setValue(newpswd);
     }
    actionbutton(pswd.getValue());
}
function FormWithVerify(parent,open){
    let login = document.createElement('input');
    let pswd1 = document.createElement('input');
    let pswd2 = document.createElement('input');
    let showBtn = document.createElement('button');
    showBtn.innerText = 'show pswd';
    pswd1.type = this.open ? 'text' : 'password';
    login.placeholder = 'login';
    pswd1.placeholder = 'input pswd';
    pswd2.placeholder = 'input pswd for require';

    pswd2.type = 'password';
    pswd2.style.display = !open ? 'inline' : 'none';
    parent.append(login);
    parent.appendChild(pswd1);
    parent.appendChild(pswd2);
    parent.appendChild(showBtn);
    let pswdValue='';
    let pswdValue2=''
    this.setValue = value =>{
        if(typeof this.onChange === 'function'){
            this.onChange(`change all time ${value}`);
        }
            pswdValue = value
        pswd1.value = pswdValue
    }
    this.setValue(pswdValue);
    this.setType = (type) => pswd1.type = type;
    this.getType = () => pswd1.type;
    this.getValue = () => pswdValue;
    this.setOpen = (newOpen) =>{
        if(typeof this.onOpenChange ==='function'){
            this.onOpenChange(`change when opened input ${newOpen}`);
        }
        if(open !== newOpen ){
             pswd1.type = 'password'
        } else {
            pswd1.type = 'text';
        }
        open = newOpen;
    };
    this.getOpen = () =>{
        if(pswd1.type =='password'){
            console.log('closed');
        }else {
            console.log('open');
        }
    }
    pswd1.oninput = () => {
        this.setValue(pswdInput.value);
    }
    this.setValue2 = value =>{
        if(typeof this.onChange === 'function'){
            this.onChange(`change all time ${value}`);
        }
            pswdValue2 = value
        pswd2.value = pswdValue2
    }
    this.setValue2(pswdValue2);
    this.setType2 = (type) => pswd1.type = type;
    this.getType2 = () => pswd2.type;
    this.getValue2 = () => pswdValue2;
    this.setOpen2 = (newOpen) =>{
        if(typeof this.onOpenChange ==='function'){
            this.onOpenChange(`change when opened input ${newOpen}`);
        }
        if(open !== newOpen ){
             pswd2.type = 'password'
        } else {
            pswd2.type = 'text';
        }
        open = newOpen;
    };
    this.getOpen2 = () =>{
        if(pswd2.type =='password'){
            console.log('closed');
        }else {
            console.log('open');
        }
    }
    pswd2.oninput = () => {
        this.setValue2(pswdInput.value);
    }
    showBtn.addEventListener('click', function ShowPswd(){
        if(pswd1.getAttribute("type")=="password"){
            pswd1.type = 'text';
            pswd2.style.display = 'inline';
            open = !open;
            /* console.log(` what happened in click ${open}`) */
        } else{
            pswd1.type = 'password';
            pswd2.style.display = 'none'
            !open;
            /* console.log(`what happened in click hide ${open}`) */
        }
    })
}
 /* let p = new Password(document.body, true); */
/*
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()) */

//let form = new Form(form1);
/* form.setLoginValue('Nik'); */
//console.log(form.getloginValue());

let form = new FormWithVerify(form1,true);