|
|
@@ -0,0 +1,215 @@
|
|
|
+//Password
|
|
|
+function Password(parent, open) {
|
|
|
+ let input = document.createElement("input");
|
|
|
+ let checkbox = document.createElement("input");
|
|
|
+
|
|
|
+ checkbox.type = "checkbox";
|
|
|
+
|
|
|
+ let checker = (check) => {
|
|
|
+ if (check) {
|
|
|
+ input.type = "text";
|
|
|
+ checkbox.checked = true;
|
|
|
+ } else {
|
|
|
+ input.type = "password";
|
|
|
+ checkbox.checked = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checker(open);
|
|
|
+
|
|
|
+ input.oninput = () => {
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(input.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkbox.onchange = () => {
|
|
|
+ checker(checkbox.checked);
|
|
|
+
|
|
|
+ if (typeof this.onOpenChange === "function") {
|
|
|
+ this.onOpenChange(checkbox.checked);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = () => input.value;
|
|
|
+
|
|
|
+ this.setValue = value => input.value = value;
|
|
|
+
|
|
|
+ this.getOpen = () => checkbox.checked;
|
|
|
+
|
|
|
+ this.setOpen = (open) => checker(open);
|
|
|
+
|
|
|
+ parent.append(input)
|
|
|
+ parent.append(checkbox)
|
|
|
+}
|
|
|
+
|
|
|
+let p = new Password(task1, 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())
|
|
|
+
|
|
|
+//LoginForm
|
|
|
+let lForm = document.createElement("input");
|
|
|
+task2.append(lForm);
|
|
|
+
|
|
|
+let pForm = new Password(task2, true);
|
|
|
+let bForm = document.createElement("input");
|
|
|
+bForm.type = "button"
|
|
|
+bForm.value = "Ввойти";
|
|
|
+bForm.disabled = true;
|
|
|
+task2.append(bForm);
|
|
|
+
|
|
|
+let btnOpen = () => (lForm.value != "" && pForm.getValue() != "") ? bForm.disabled = false : bForm.disabled = true;
|
|
|
+
|
|
|
+lForm.oninput = () => btnOpen();
|
|
|
+pForm.onChange = () => btnOpen();
|
|
|
+
|
|
|
+//LoginForm Constructor
|
|
|
+function LoginForm(parent, open) {
|
|
|
+ let h3 = document.createElement("h3");
|
|
|
+ let loginInput = document.createElement("input");
|
|
|
+ let passwordInput = document.createElement("input");
|
|
|
+ let checkbox = document.createElement("input");
|
|
|
+ let btn = document.createElement("input");
|
|
|
+ let form = document.createElement("div");
|
|
|
+
|
|
|
+ h3.innerText = "Login Form"
|
|
|
+ checkbox.type = "checkbox";
|
|
|
+ btn.type = "button";
|
|
|
+ btn.value = "Войти";
|
|
|
+ btn.disabled = true;
|
|
|
+
|
|
|
+ let btnOpen = () => (loginInput.value != "" && passwordInput.value != "") ? btn.disabled = false : btn.disabled = true;
|
|
|
+
|
|
|
+ let checker = (check) => {
|
|
|
+ if (check) {
|
|
|
+ passwordInput.type = "text";
|
|
|
+ checkbox.checked = true;
|
|
|
+ } else {
|
|
|
+ passwordInput.type = "password";
|
|
|
+ checkbox.checked = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checker(open);
|
|
|
+
|
|
|
+ loginInput.oninput = () => {
|
|
|
+ btnOpen();
|
|
|
+
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(loginInput.value, passwordInput.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ passwordInput.oninput = () => {
|
|
|
+ btnOpen();
|
|
|
+
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
+ this.onChange(loginInput.value, passwordInput.value);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ checkbox.onchange = () => {
|
|
|
+ checker(checkbox.checked)
|
|
|
+
|
|
|
+ if (typeof this.onOpenChange === "function") {
|
|
|
+ this.onOpenChange(checkbox.checked);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getValue = () => [loginInput.value, passwordInput.value];
|
|
|
+
|
|
|
+ this.setValue = (valueLogin, valuePassword) => {
|
|
|
+ loginInput.value = valueLogin;
|
|
|
+ passwordInput.value = valuePassword;
|
|
|
+ btnOpen();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getOpen = () => checkbox.checked;
|
|
|
+
|
|
|
+ this.setOpen = (open) => {
|
|
|
+ checker(open);
|
|
|
+ }
|
|
|
+
|
|
|
+ form.append(h3)
|
|
|
+ form.append(loginInput)
|
|
|
+ form.append(passwordInput)
|
|
|
+ form.append(checkbox)
|
|
|
+ form.append(btn)
|
|
|
+
|
|
|
+ form.style.display = "flex";
|
|
|
+ form.style.flexDirection = "column";
|
|
|
+ form.style.alignItems = "flex-start";
|
|
|
+ form.style.justifyContent = "space-around";
|
|
|
+ form.style.width = "20%";
|
|
|
+ form.style.margin = "10px";
|
|
|
+ form.style.padding = "5px";
|
|
|
+ form.style.height = "200px";
|
|
|
+ form.style.border = "1px solid black"
|
|
|
+
|
|
|
+ parent.append(form)
|
|
|
+}
|
|
|
+
|
|
|
+let f = new LoginForm(task3, true)
|
|
|
+
|
|
|
+f.onChange = (dataLogin, dataPassword) => console.log(dataLogin + ": " + dataPassword)
|
|
|
+f.onOpenChange = open => console.log(open)
|
|
|
+
|
|
|
+f.setValue('qwerty', 12345)
|
|
|
+console.log(f.getValue())
|
|
|
+
|
|
|
+f.setOpen(false)
|
|
|
+console.log(f.getOpen())
|
|
|
+
|
|
|
+//Password Verify
|
|
|
+let passwordVerify = new Password(task4, true);
|
|
|
+
|
|
|
+passwordVerify.onOpenChange = open => {
|
|
|
+ if (!open) {
|
|
|
+ let passwordVerify2 = new Password(task4, false);
|
|
|
+ task4.getElementsByTagName("input")[4].remove();
|
|
|
+
|
|
|
+ passwordVerify.onChange = data => {
|
|
|
+ if (data !== "" && data === passwordVerify2.getValue()) {
|
|
|
+ btnVerify.disabled = false;
|
|
|
+ } else {
|
|
|
+ btnVerify.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ passwordVerify2.onChange = data => {
|
|
|
+ if (data !== "" && passwordVerify.getValue() === data) {
|
|
|
+ btnVerify.disabled = false;
|
|
|
+ } else {
|
|
|
+ btnVerify.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ task4.getElementsByTagName("input")[3].remove();
|
|
|
+
|
|
|
+ passwordVerify.onChange = data => {
|
|
|
+ if (data !== "") {
|
|
|
+ btnVerify.disabled = false;
|
|
|
+ } else {
|
|
|
+ btnVerify.disabled = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let btnVerify = document.createElement("input");
|
|
|
+btnVerify.type = "button";
|
|
|
+btnVerify.value = "OK";
|
|
|
+btnVerify.disabled = true;
|
|
|
+
|
|
|
+task4.append(btnVerify);
|
|
|
+
|
|
|
+task4.style.display = "flex";
|
|
|
+btnVerify.style.order = "1";
|
