|
|
@@ -0,0 +1,141 @@
|
|
|
+//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);
|
|
|
+
|
