HW13 done

homework13js/script.js

@@ -2,38 +2,82 @@ function Password(parent, open){
     this.loginBox = document.createElement("input");
     this.loginBox.setAttribute("type", "text");
     parent.appendChild(this.loginBox)
+    this.loginBox.oninput = () =>  {
+        this.sendOnChange()
+        this.onChange(this.getValue(this.loginBox));
+    }
+
+    this.passwordBox = document.createElement("span");
+    parent.appendChild(this.passwordBox)
+
     this.textBox = document.createElement("input");
     this.textBox.setAttribute("type", "password");
-    parent.appendChild(this.textBox);
+    this.passwordBox.appendChild(this.textBox);
+    this.textBox.oninput = () => {
+        this.onChange(this.getValue(this.textBox));
+        this.sendOnChange();
+    }
+
+
+    this.checkPassword = document.createElement("input");
+    this.checkPassword.setAttribute("type", "password")
+    this.passwordBox.appendChild(this.checkPassword)
+    this.checkPassword.oninput = () =>  {
+        this.sendOnChange();   
+    }
+
     this.checkBox = document.createElement("input");
     this.checkBox.setAttribute("type", "checkbox");
     parent.appendChild(this.checkBox);
+    this.checkBox.onchange = () =>  {
+        this.isChecked(this.checkBox, this.textBox)
+        this.onOpenChange(this.getOpen())
+    };
+
+
     this.sendBottom = document.createElement("button");
     this.sendBottom.setAttribute("disabled", true);
     this.sendBottom.innerText = "send";
     this.sendOnChange = function() {
-        if(this.textBox.value != "" && this.loginBox.value != "") {
+        if(this.textBox.value != "" && this.loginBox.value != "" 
+        && this.textBox.value === this.checkPassword.value) {
             return this.sendBottom.removeAttribute("disabled");
         }  return this.sendBottom.setAttribute("disabled", true);
-    }
-    
+    }  
     parent.appendChild(this.sendBottom)
 
+
     this.isChecked = function() {
+
         if(open === false){
             this.textBox.setAttribute("type", "password") 
-          open = true;
+            this.checkPassword = document.createElement("input");
+            this.checkPassword.setAttribute("type", "password")
+            this.passwordBox.appendChild(this.checkPassword)
+            this.checkPassword.oninput = () =>  {
+                this.sendOnChange();   
+            }
+            return open = true;
         } else { 
-            this.textBox.setAttribute("type", "text")
-            open = false;
+
+            this.textBox.setAttribute("type", "text")           
+            this.checkPassword.remove()
+            this.sendBottom.setAttribute("disabled", true);
+            return open = false;
         }
     }
+
+
     this.getValue = function(arg = this.textBox) {
         return arg.value
     }
-    this.setValue = function(inner) {
-        this.textBox.value = inner;
+
+
+    this.setValue = function(inner, box = this.textBox) {
+        box.value = inner;
     }
+
+
     this.getOpen = function() {
         let str;
         open == true ? str = "closed" : str = "opened";
@@ -45,16 +89,9 @@ function Password(parent, open){
         return data;
         
     }
-    this.loginBox.oninput = () => this.sendOnChange()
 
-    this.checkBox.onchange = () =>  {
-        this.isChecked(this.checkBox, this.textBox)
-        this.onOpenChange(this.getOpen())
-    };
-    this.textBox.oninput = () => {
-        this.onChange(this.getValue(this.textBox));
-        this.sendOnChange();
-    }
+
+
     this.setOpen = function(arg) {
         if(!arg == true){
             this.checkBox.checked = "checked"
@@ -78,15 +115,4 @@ console.log(p.getValue())
 
 p.setOpen(false)
 console.log(p.getOpen())
-// Напишите функцию конструктор Password, которая будет в родительском 
-//элементе создавать поле ввода для пароля и кнопку/иконку/чекбокс, 
-//который будет переключать режим просмотра пароля в поле ввода.
-// Параметры:
-// parent - родительский элемент
-// open - стартовое состояние
-// Методы:
-// setValue/getValue - задают/читают значения
-// setOpen/getOpen - задают/читают открытость текста в поле ввода
-// Колбэки (функции обратного вызова, данные изнутри объекта):
-// onChange - запускается по событию oninput в поле ввода, передает текст наружу
-// onOpenChange - запускается по изменению состояния открытости пароля
+p.setValue('login', p.loginBox)