homework/js_homework_10_oop/main.js

//................................Password 

let task1 = document.createElement('div');
task1.innerText = 'Password'
task1.className = 'box1';
document.body.append(task1);

function Password(parent,open = true) {
  this.inputPassword = document.createElement("input");
  parent.append(this.inputPassword);
  this.inputPassword.placeholder = 'password'

  this.buttonShowPassword = document.createElement("button");
  parent.append(this.buttonShowPassword);
  this.buttonShowPassword.innerText = "password";
  this.eye = document.createElement('img');
  this.buttonShowPassword.append(this.eye);

  if (open) this.eye.src = '2540381-200.png'
   else this.eye.src = 'interface_hide-512.webp'

   this.inputPassword.type = open ? "" : "password";

   this.checked = open;
 
   this.setValue = function (data) {
     this.inputPassword.value = data;
   };
 
   this.getValue = function () {
     return this.inputPassword.value;
   };
 

  this.onOpenChange = function () {}  

  this.setOpen = function (boolean) {
    this.inputPassword.type = boolean ? "" : "password";
    boolean = this.inputPassword.type;
    if (this.inputPassword.type == 'password') this.eye.src = 'interface_hide-512.webp'
    else this.eye.src = '2540381-200.png'
    this.onOpenChange(boolean);
  };

  this.getOpen = function () {
    return open;
  };
 
  if (!this.inputPassword.value) this.buttonShowPassword.disabled = false;

  this.onChange = function () {}

  this.inputPassword.oninput  =  (data) => {
    data = this.inputPassword.value
    this.onChange(data);

    if (this.inputPassword.value) this.buttonShowPassword.disabled = false;
    else this.buttonShowPassword.disabled = true;

  }
  this.checked = open;

  this.buttonShowPassword.onclick = (open) => {
    this.checked = !this.checked;
    if (this.inputPassword.type = this.checked) {
      this.eye.src = '2540381-200.png'
    } else this.eye.src = 'interface_hide-512.webp'
    this.inputPassword.type = this.checked ? "" : "password";
    open = this.inputPassword.type;
    this.onOpenChange(open);
  };


}

let taskPassword = new Password(task1)

//................................LoginForm 

let task2 = document.createElement('div');
task2.innerText = 'LoginForm '
task2.className = 'box2';
document.body.append(task2);


function LoginForm(parent) {
  this.inputLogin = document.createElement("input");
  parent.append(this.inputLogin);
  this.inputLogin.placeholder = 'login';

  let password = new Password(parent)

  this.buttonLogin = document.createElement('button');
  parent.append(this.buttonLogin);
  this.buttonLogin.innerText = 'login';

  this.buttonLogin.disabled = true;

  password.inputPassword.oninput = this.inputLogin.oninput = () => {

    if (password.inputPassword.value && this.inputLogin.value) this.buttonLogin.disabled = false;
    else this.buttonLogin.disabled = true;

    }
}

let loginForm = new LoginForm(task2, true);

//................................ FormConstructor

let task3 = document.createElement('div');
task3.innerText = 'Form Constructor '
task3.className = 'box3';
document.body.append(task3);

function FormConstructor(parent,open = true) {
  
  this.inputLogin = document.createElement("input");
  parent.append(this.inputLogin);
  this.inputLogin.placeholder = 'login';


  this.setLogin = function (login) {
    this.inputLogin.value = login
  }

  this.getLogin = function(){
    return this.inputLogin.value
  }

  this.inputLogin.oninput  =  (data) => {
    
  }

  this.inputPassword = document.createElement("input");
  parent.append(this.inputPassword);
  this.inputPassword.placeholder = 'password'

  this.buttonShowPassword = document.createElement("button");
  parent.append(this.buttonShowPassword);
  this.buttonShowPassword.innerText = "password";
  this.eye = document.createElement('img');
  this.buttonShowPassword.append(this.eye);

  if (open) this.eye.src = '2540381-200.png'
   else this.eye.src = 'interface_hide-512.webp'

   this.inputPassword.type = open ? "" : "password";

  this.buttonLogin = document.createElement('button');
  parent.append(this.buttonLogin);
  this.buttonLogin.innerText = 'login';
  this.buttonLogin.disabled = true;

   this.checked = open;

   this.setLogin = function (data) {
    this.inputLogin.value = data;
  };

  this.getLogin = function () {
    return this.inputLogin.value;
  };
 
   this.setPassword = function (data) {
     this.inputPassword.value = data;
   };
 
   this.getPassword = function () {
     return this.inputPassword.value;
   };
 

  this.onOpenChange = function () {}  

  this.setOpen = function (boolean) {
    this.inputPassword.type = boolean ? "" : "password";
    boolean = this.inputPassword.type;
    if (this.inputPassword.type == 'password') this.eye.src = 'interface_hide-512.webp'
    else this.eye.src = '2540381-200.png'
    this.onOpenChange(boolean);
  };

  this.getOpen = function () {
    return open;
  };
 
  if (!this.inputPassword.value) this.buttonShowPassword.disabled = false;

  this.onChangeLogin = function () {}

  this.onChangePassword = function () {}

  this.inputLogin.oninput= this.inputPassword.oninput  =  (data) => {
    data = this.inputPassword.value
    this.onChangePassword(data);

    if (!this.inputLogin.value && !this.inputPassword.value) this.buttonLogin.disabled = true;
    else this.buttonLogin.disabled = false;

    data = this.inputLogin.value
    this.onChangeLogin(data);

    if (this.inputPassword.value) this.buttonShowPassword.disabled = false;
    else this.buttonShowPassword.disabled = true;

  }
  this.checked = open;

  this.buttonShowPassword.onclick = (open) => {
    this.checked = !this.checked;
    if (this.inputPassword.type = this.checked) {
      this.eye.src = '2540381-200.png'
    } else this.eye.src = 'interface_hide-512.webp'
    this.inputPassword.type = this.checked ? "" : "password";
    open = this.inputPassword.type;
    this.onOpenChange(open);
  };

}

let formConstructor = new FormConstructor(task3)