HomeWork/js8/main.js

//debugger;
function Password (parent, open) {
  
  const inputPassword = document.createElement('input');
  const buttonSeePassword = document.createElement('button');
  const iputPassword1 = document.createElement('input');
  inputPassword.placeholder = 'password';
  iputPassword1.placeholder = 'login';
  parent.append(inputPassword);
  parent.append(iputPassword1);
  parent.appendChild(buttonSeePassword).innerText = 'see password'; 
  const buttonCheck = document.createElement('button');
  parent.append(buttonCheck);
  buttonCheck.innerHTML= 'submit';

  buttonCheck.setAttribute('disabled',true);

  
  buttonSeePassword.onclick = () => {
    inputPassword.type === 'password' ?  inputPassword.type = 'text' : inputPassword.type = 'password';
    this.hiddenInput2(); 
  };
  let value = null; 

  this.setValue = newvalue => value = newvalue; 
  
  this.getValue = () => value;

  let valueOpen = null;

  this.setOpen = newvalue => {
    this.onOpenChange(newvalue);
    open = newvalue;
    open ? (inputPassword.type = 'password', valueOpen = open):(inputPassword.type = 'text', valueOpen = open);

  };
  
  this.getOpen = () => valueOpen;

  this.onChange = function (data) {
    data = inputPassword.value;
    console.log(data);
  };
  
  inputPassword.oninput = () => {
    this.onChange();
     this.checkPassword();
  }  
  this.onOpenChange = open => console.log(open);

  this.checkPassword = function () {
    if(inputPassword.value === iputPassword1.value) { console.log(inputPassword.value, iputPassword1.value)
    buttonCheck.removeAttribute("disabled");  
    } else {buttonCheck.setAttribute('disabled',true)};
  }
  
  iputPassword1.oninput = this.checkPassword;

  this.hiddenInput2 = () => {
    if (inputPassword.type === 'text') {
      iputPassword1.style.visibility = 'hidden';
    } else iputPassword1.style.visibility = 'visible';
  }

};

let p = new Password(document.body, true);
p.setValue('qwerty');
console.log(p.getValue());
p.setOpen(false);
console.log(p.getOpen());
p.setOpen(true);

//Task LoginForm

// let newP = new Password(document.body);
// const buttonCheck = document.createElement('button');
// document.body.append(buttonCheck);
// buttonCheck.innerHTML= 'submit';

// const inputList = document.getElementsByTagName('input');
// const inputPassword2 = inputList[2]; 
// const inputPassword3 = inputList[3];
// buttonCheck.setAttribute('disabled',true);

// const checkEnterLoginPassword = function () {
//   if (!(inputPassword2.value === '') && !(inputPassword3.value === "")) {
//   buttonCheck.removeAttribute("disabled");
//   };
// }

// inputPassword2.oninput = checkEnterLoginPassword;
// inputPassword3.oninput = checkEnterLoginPassword;



//LoginForm Constructor

function LoginForm (parent) {
  const inputPassword = document.createElement('input');
  const buttonSeePassword = document.createElement('button');
  const iputPassword1 = document.createElement('input');
  inputPassword.placeholder = 'password';
  iputPassword1.placeholder = 'login';
  parent.append(inputPassword);
  parent.append(iputPassword1);
  parent.appendChild(buttonSeePassword).innerText = 'see password';
  const buttonCheck = document.createElement('button');
  parent.append(buttonCheck);
  buttonCheck.innerHTML= 'submit';

  const inputList = document.getElementsByTagName('input');
  const inputPassword2 = inputList[2]; 
  const inputPassword3 = inputList[3];
  buttonCheck.setAttribute('disabled',true);

  this.checkEnterLoginPassword = function () {
    if (!(inputPassword2.value === '') && !(inputPassword3.value === "")) {
    buttonCheck.removeAttribute("disabled");
    };
  }

  inputPassword2.oninput = this.checkEnterLoginPassword;
  inputPassword3.oninput = this.checkEnterLoginPassword;

  let password = null;
 
}


let obj = new LoginForm(document.body);


//Password Verify add to task 1

let obj2 = new Password(document.body);
let obj3 = new Password(document.body);

obj2.setOpen(true);
obj3.setOpen(true);