|
|
@@ -0,0 +1,637 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="formContainer"></div>
|
|
|
+ <script>
|
|
|
+ //PASSWORD
|
|
|
+ // function Password(parent, open) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let passwordInput = document.createElement("input");
|
|
|
+ // let isOpenInput = document.createElement("input");
|
|
|
+ // parent.append(formBody);
|
|
|
+
|
|
|
+ // passwordInput.type = open ? "text" : "password";
|
|
|
+ // passwordInput.oninput = () => {
|
|
|
+ // this.value = passwordInput.value;
|
|
|
+ // if (typeof this.onChange === "function") {
|
|
|
+ // this.onChange(this.value);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // isOpenInput.type = "checkbox";
|
|
|
+ // isOpenInput.checked = open;
|
|
|
+ // isOpenInput.onchange = () => {
|
|
|
+ // this.open = isOpenInput.checked;
|
|
|
+ // passwordInput.type = this.open ? "text" : "password";
|
|
|
+ // if (typeof this.onOpenChange === "function") {
|
|
|
+ // this.onOpenChange(this.open);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setValue = (value) => {
|
|
|
+ // this.value = value;
|
|
|
+ // passwordInput.value = this.value;
|
|
|
+ // };
|
|
|
+ // const getValue = () => {
|
|
|
+ // return this.value;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setOpen = (value) => {
|
|
|
+ // this.open = value;
|
|
|
+ // isOpenInput.checked = value;
|
|
|
+ // passwordInput.type = this.open ? "text" : "password";
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getOpen = () => {
|
|
|
+ // return this.open;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // formBody.append(passwordInput);
|
|
|
+ // formBody.append(isOpenInput);
|
|
|
+
|
|
|
+ // this.open = open;
|
|
|
+
|
|
|
+ // this.setValue = setValue;
|
|
|
+ // this.getValue = getValue;
|
|
|
+
|
|
|
+ // this.setOpen = setOpen;
|
|
|
+ // this.getOpen = getOpen;
|
|
|
+
|
|
|
+ // this.value = passwordInput.value;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let p = new Password(document.body, 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
|
|
|
+
|
|
|
+ // function LoginForm(parent, open) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let passwordInput = document.createElement("input");
|
|
|
+ // let loginInput = document.createElement("input");
|
|
|
+ // let isOpenInput = document.createElement("input");
|
|
|
+ // let loginButton = document.createElement("button");
|
|
|
+ // parent.append(formBody);
|
|
|
+
|
|
|
+ // passwordInput.type = open ? "text" : "password";
|
|
|
+ // passwordInput.oninput = () => {
|
|
|
+ // this.passwordValue = passwordInput.value;
|
|
|
+ // loginButton.disabled = checkIfBlank();
|
|
|
+ // if (typeof this.onPasswordChange === "function") {
|
|
|
+ // this.onPasswordChange(this.passwordValue);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // loginInput.type = "text";
|
|
|
+ // loginInput.oninput = () => {
|
|
|
+ // this.loginValue = loginInput.value;
|
|
|
+ // loginButton.disabled = checkIfBlank();
|
|
|
+ // if (typeof this.onLoginChange === "function") {
|
|
|
+ // this.onLoginChange(this.loginValue);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // isOpenInput.type = "checkbox";
|
|
|
+ // isOpenInput.checked = open;
|
|
|
+ // isOpenInput.onchange = () => {
|
|
|
+ // this.open = isOpenInput.checked;
|
|
|
+ // passwordInput.type = this.open ? "text" : "password";
|
|
|
+ // if (typeof this.onOpenChange === "function") {
|
|
|
+ // this.onOpenChange(this.open);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // loginButton.innerText = "Login";
|
|
|
+
|
|
|
+ // const setPasswordValue = (value) => {
|
|
|
+ // this.passwordValue = value;
|
|
|
+ // passwordInput.value = this.passwordValue;
|
|
|
+ // };
|
|
|
+ // const getPasswordValue = () => {
|
|
|
+ // return this.passwordValue;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setLoginValue = (value) => {
|
|
|
+ // this.loginValue = value;
|
|
|
+ // loginInput.value = this.loginValue;
|
|
|
+ // };
|
|
|
+ // const getLoginValue = () => {
|
|
|
+ // return this.loginValue;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setOpen = (value) => {
|
|
|
+ // this.open = value;
|
|
|
+ // isOpenInput.checked = value;
|
|
|
+ // passwordInput.type = this.open ? "text" : "password";
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getOpen = () => {
|
|
|
+ // return this.open;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const checkIfBlank = () => {
|
|
|
+ // if (this.loginValue.trim().length === 0 || this.passwordValue.trim().length === 0) {
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+ // return false;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // formBody.append(loginInput);
|
|
|
+ // formBody.append(passwordInput);
|
|
|
+ // formBody.append(isOpenInput);
|
|
|
+ // formBody.append(loginButton);
|
|
|
+
|
|
|
+ // this.open = open;
|
|
|
+
|
|
|
+ // this.setPasswordValue = setPasswordValue;
|
|
|
+ // this.getPasswordValue = getPasswordValue;
|
|
|
+
|
|
|
+ // this.setLoginValue = setLoginValue;
|
|
|
+ // this.getLoginValue = getLoginValue;
|
|
|
+
|
|
|
+ // this.setOpen = setOpen;
|
|
|
+ // this.getOpen = getOpen;
|
|
|
+
|
|
|
+ // this.passwordValue = passwordInput.value;
|
|
|
+ // this.loginValue = loginInput.value;
|
|
|
+
|
|
|
+ // loginButton.disabled = checkIfBlank();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let p = new LoginForm(document.body, true);
|
|
|
+
|
|
|
+ // p.onPasswordChange = (data) => console.log(data);
|
|
|
+ // p.onOpenChange = (open) => console.log(open);
|
|
|
+ // p.onLoginChange = (data) => console.log(data);
|
|
|
+
|
|
|
+ // p.setPasswordValue("qwerty");
|
|
|
+ // console.log(p.getPasswordValue());
|
|
|
+
|
|
|
+ // p.setLoginValue("qwerty");
|
|
|
+ // console.log(p.getLoginValue());
|
|
|
+
|
|
|
+ // p.setOpen(false);
|
|
|
+ // console.log(p.getOpen());
|
|
|
+
|
|
|
+ //PASSWORD VERIFY
|
|
|
+
|
|
|
+ // function Password(parent, open) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let passwordInput1 = document.createElement("input");
|
|
|
+ // let passwordInput2 = document.createElement("input");
|
|
|
+ // let isOpenInput = document.createElement("input");
|
|
|
+ // let checkButton = document.createElement("button");
|
|
|
+ // parent.append(formBody);
|
|
|
+
|
|
|
+ // checkButton.innerText = "checkButton";
|
|
|
+
|
|
|
+ // passwordInput1.type = open ? "text" : "password";
|
|
|
+ // passwordInput1.oninput = () => {
|
|
|
+ // this.value1 = passwordInput1.value;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // if (typeof this.onPassword1Change === "function") {
|
|
|
+ // this.onPassword1Change(this.value1);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // passwordInput2.type = "password";
|
|
|
+ // passwordInput2.style.display = !open ? "inline" : "none";
|
|
|
+ // passwordInput2.oninput = () => {
|
|
|
+ // this.value2 = passwordInput2.value;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // console.log(isValid());
|
|
|
+ // if (typeof this.onPassword2Change === "function") {
|
|
|
+ // this.onPassword2Change(this.value2);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // isOpenInput.type = "checkbox";
|
|
|
+ // isOpenInput.checked = open;
|
|
|
+ // isOpenInput.onchange = () => {
|
|
|
+ // this.open = isOpenInput.checked;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // passwordInput1.type = this.open ? "text" : "password";
|
|
|
+ // passwordInput2.style.display = !this.open ? "inline" : "none";
|
|
|
+ // if (typeof this.onOpenChange === "function") {
|
|
|
+ // this.onOpenChange(this.open);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setValue1 = (newValue) => {
|
|
|
+ // this.value1 = newValue;
|
|
|
+ // passwordInput1.value = newValue;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+ // const setValue2 = (newValue) => {
|
|
|
+ // this.value2 = newValue;
|
|
|
+ // passwordInput2.value = newValue;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+ // const getValue1 = () => {
|
|
|
+ // return this.value1;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getValue2 = () => {
|
|
|
+ // return this.value2;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setOpen = (value) => {
|
|
|
+ // this.open = value;
|
|
|
+ // isOpenInput.checked = value;
|
|
|
+ // passwordInput1.type = this.open ? "text" : "password";
|
|
|
+ // passwordInput2.style.display = !this.open ? "inline" : "none";
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getOpen = () => {
|
|
|
+ // return this.open;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const isValid = () => {
|
|
|
+ // if (this.open === true) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (this.value1 === this.value2 && this.value1.trim() !== "" && this.value2.trim()) {
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return false;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // formBody.append(passwordInput1);
|
|
|
+ // formBody.append(passwordInput2);
|
|
|
+ // formBody.append(isOpenInput);
|
|
|
+ // formBody.append(checkButton);
|
|
|
+
|
|
|
+ // this.open = open;
|
|
|
+ // this.value1 = passwordInput1.value;
|
|
|
+ // this.value2 = passwordInput2.value;
|
|
|
+
|
|
|
+ // this.setOpen = setOpen;
|
|
|
+ // this.getOpen = getOpen;
|
|
|
+
|
|
|
+ // this.setValue1 = setValue1;
|
|
|
+ // this.getValue1 = getValue1;
|
|
|
+ // this.setValue2 = setValue2;
|
|
|
+ // this.getValue2 = getValue2;
|
|
|
+
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let p = new Password(document.body, true);
|
|
|
+
|
|
|
+ // p.onPassword1Change = (data) => console.log(data);
|
|
|
+ // p.onPassword2Change = (data) => console.log(data);
|
|
|
+ // p.onOpenChange = (open) => console.log(open);
|
|
|
+
|
|
|
+ // p.setValue1("qwerty");
|
|
|
+ // console.log(p.getValue1());
|
|
|
+ // p.setValue2("qwer");
|
|
|
+ // console.log(p.getValue2());
|
|
|
+
|
|
|
+ // p.setOpen(false);
|
|
|
+ // console.log(p.getOpen());
|
|
|
+
|
|
|
+ //FORM
|
|
|
+ // function Form(el, data, okCallback, cancelCallback) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let inputBox = document.createElement("div");
|
|
|
+ // let okButton = document.createElement("button");
|
|
|
+ // let validatorErrors = new Set();
|
|
|
+ // let requiredErrors = new Set();
|
|
|
+ // let cancelButton = document.createElement("button");
|
|
|
+ // let initData = { ...data };
|
|
|
+
|
|
|
+ // okButton.innerHTML = "OK";
|
|
|
+ // cancelButton.innerHTML = "Cancel";
|
|
|
+ // el.appendChild(formBody);
|
|
|
+ // formBody.append(inputBox);
|
|
|
+
|
|
|
+ // let inputCreators = {
|
|
|
+ // String(key, value, oninput) {
|
|
|
+ // if (value.length > 20) {
|
|
|
+ // let textarea = document.createElement("textarea");
|
|
|
+ // textarea.value = value;
|
|
|
+ // textarea.oninput = () => oninput(textarea.value);
|
|
|
+ // return textarea;
|
|
|
+ // } else {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "text";
|
|
|
+ // if ([...value].every((el) => el === "*")) {
|
|
|
+ // input.type = "password";
|
|
|
+ // }
|
|
|
+
|
|
|
+ // input.placeholder = key;
|
|
|
+ // input.value = value;
|
|
|
+ // input.oninput = () => oninput(input.value);
|
|
|
+
|
|
|
+ // return input;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // Boolean(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // input.type = "checkbox";
|
|
|
+ // input.checked = value;
|
|
|
+ // input.oninput = () => oninput(Boolean(input.checked));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // Date(key, value, oninput) {
|
|
|
+ // let input = document.createElement("input");
|
|
|
+ // let timeOffset = new Date().getTimezoneOffset();
|
|
|
+ // let dateInMillSec =
|
|
|
+ // new Date(value.toISOString()).getTime() - new Date().getTimezoneOffset() * 1000 * 60;
|
|
|
+
|
|
|
+ // input.type = "datetime-local";
|
|
|
+ // input.value = new Date(dateInMillSec).toISOString().slice(0, 16);
|
|
|
+ // input.oninput = () => oninput(new Date(input.value));
|
|
|
+ // return input;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // let createInputs = (data) => {
|
|
|
+ // inputBox.innerHTML = "";
|
|
|
+ // for (let [key, value] of Object.entries(data)) {
|
|
|
+ // let inputWrapper = document.createElement("div");
|
|
|
+ // let inputType = value.constructor.name;
|
|
|
+ // let th = document.createElement("th");
|
|
|
+ // let inputLabel = document.createElement("label");
|
|
|
+ // let isRequired = key.trim()[0] === "*";
|
|
|
+ // let isRequiredChar = document.createElement("span");
|
|
|
+
|
|
|
+ // inputLabel.style.marginLeft = "5px";
|
|
|
+ // isRequiredChar.innerText = "* ";
|
|
|
+ // isRequiredChar.style.color = "red";
|
|
|
+
|
|
|
+ // if (isRequired) {
|
|
|
+ // th.prepend(isRequiredChar);
|
|
|
+ // }
|
|
|
+ // th.innerHTML += isRequired ? key.slice(1, key.length) : key;
|
|
|
+
|
|
|
+ // let input = inputCreators[inputType](key, value, (value) => {
|
|
|
+ // let validator;
|
|
|
+ // if (isRequired && value.trim().length === 0) {
|
|
|
+ // input.style.border = "1px solid red";
|
|
|
+ // requiredErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // requiredErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // if (this.validators && typeof this.validators[key] === "function") {
|
|
|
+ // validator = this.validators[key];
|
|
|
+ // }
|
|
|
+ // if (validator) {
|
|
|
+ // let validResult = validator(value, key, data, input);
|
|
|
+ // if (validResult !== true && validResult.trim() !== "") {
|
|
|
+ // inputLabel.innerText = validResult;
|
|
|
+ // inputLabel.style.border = "1px solid red";
|
|
|
+ // validatorErrors.add(key);
|
|
|
+ // } else {
|
|
|
+ // inputLabel.innerText = "";
|
|
|
+ // inputLabel.style.border = "none";
|
|
|
+ // validatorErrors.delete(key);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // inputWrapper.append(inputLabel);
|
|
|
+
|
|
|
+ // !validatorErrors.has(key) && (this.data[key] = value);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+ // });
|
|
|
+
|
|
|
+ // inputWrapper.appendChild(th);
|
|
|
+ // inputWrapper.appendChild(input);
|
|
|
+ // inputBox.append(inputWrapper);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // createInputs(data);
|
|
|
+ // okButton.disabled = checkErrors();
|
|
|
+
|
|
|
+ // function checkErrors() {
|
|
|
+ // if (requiredErrors.size === 0 && validatorErrors.size === 0) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof okCallback === "function") {
|
|
|
+ // formBody.appendChild(okButton);
|
|
|
+ // okButton.onclick = (e) => {
|
|
|
+ // this.okCallback(data);
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (typeof cancelCallback === "function") {
|
|
|
+ // formBody.appendChild(cancelButton);
|
|
|
+
|
|
|
+ // cancelButton.onclick = () => {
|
|
|
+ // this.data = { ...initData };
|
|
|
+ // console.log(initData);
|
|
|
+ // createInputs(this.data);
|
|
|
+ // cancelCallback();
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // this.okCallback = okCallback;
|
|
|
+ // this.cancelCallback = cancelCallback;
|
|
|
+
|
|
|
+ // this.data = data;
|
|
|
+ // this.validators = {};
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let form = new Form(
|
|
|
+ // formContainer,
|
|
|
+ // {
|
|
|
+ // "*name": "Anakin",
|
|
|
+ // "*surname": "SkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalkerSkywalker",
|
|
|
+ // married: true,
|
|
|
+ // birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
|
|
|
+ // },
|
|
|
+ // () => console.log("ok"),
|
|
|
+ // () => console.log("cancel")
|
|
|
+ // );
|
|
|
+ // form.okCallback = () => console.log("ok2");
|
|
|
+
|
|
|
+ // form.validators.surname = (value, key, data, input) =>
|
|
|
+ // value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong surname";
|
|
|
+ // form.validators["*name"] = (value, key, data, input) =>
|
|
|
+ // value.length > 3 && value[0].toUpperCase() == value[0] && !value.includes(" ") ? true : "Wrong name";
|
|
|
+ // form.validators["birthday"] = (value, key, data, input) => {
|
|
|
+ // if (new Date(value.toISOString().slice(0, 16)) <= new Date("1900-01-01")) {
|
|
|
+ // return "Wrong date";
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (
|
|
|
+ // new Date(value.toISOString().slice(0, 16)).getTime() >=
|
|
|
+ // new Date().getTime() - new Date().getTimezoneOffset() * 1000 * 60 - 3 * 365 * 86400000
|
|
|
+ // ) {
|
|
|
+ // return "Wrong date";
|
|
|
+ // }
|
|
|
+ // return true;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // console.log(form);
|
|
|
+
|
|
|
+ //POWER OF THE FORM
|
|
|
+
|
|
|
+ // function Password(parent, open) {
|
|
|
+ // let formBody = document.createElement("div");
|
|
|
+ // let passwordInput1 = document.createElement("input");
|
|
|
+ // let passwordInput2 = document.createElement("input");
|
|
|
+ // let isOpenInput = document.createElement("input");
|
|
|
+ // let checkButton = document.createElement("button");
|
|
|
+ // let errorDiv = document.createElement("div");
|
|
|
+ // let errors = {
|
|
|
+ // blankFields: "Password fields cannot be empty",
|
|
|
+ // notMatch: "Password confirmation does not match",
|
|
|
+ // };
|
|
|
+ // let errorSet = new Set();
|
|
|
+ // parent.append(formBody);
|
|
|
+ // errorDiv.style.color = "red";
|
|
|
+
|
|
|
+ // checkButton.innerText = "Submit";
|
|
|
+
|
|
|
+ // passwordInput1.type = open ? "text" : "password";
|
|
|
+ // passwordInput1.oninput = () => {
|
|
|
+ // this.value1 = passwordInput1.value;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // if (typeof this.onPassword1Change === "function") {
|
|
|
+ // this.onPassword1Change(this.value1);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // passwordInput2.type = "password";
|
|
|
+ // passwordInput2.style.display = !open ? "inline" : "none";
|
|
|
+ // passwordInput2.oninput = () => {
|
|
|
+ // this.value2 = passwordInput2.value;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // console.log(isValid());
|
|
|
+ // if (typeof this.onPassword2Change === "function") {
|
|
|
+ // this.onPassword2Change(this.value2);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // isOpenInput.type = "checkbox";
|
|
|
+ // isOpenInput.checked = open;
|
|
|
+ // isOpenInput.onchange = () => {
|
|
|
+ // this.open = isOpenInput.checked;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // passwordInput1.type = this.open ? "text" : "password";
|
|
|
+ // passwordInput2.style.display = !this.open ? "inline" : "none";
|
|
|
+ // if (typeof this.onOpenChange === "function") {
|
|
|
+ // this.onOpenChange(this.open);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setValue1 = (newValue) => {
|
|
|
+ // this.value1 = newValue;
|
|
|
+ // passwordInput1.value = newValue;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+ // const setValue2 = (newValue) => {
|
|
|
+ // this.value2 = newValue;
|
|
|
+ // passwordInput2.value = newValue;
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+ // const getValue1 = () => {
|
|
|
+ // return this.value1;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getValue2 = () => {
|
|
|
+ // return this.value2;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const setOpen = (value) => {
|
|
|
+ // this.open = value;
|
|
|
+ // isOpenInput.checked = value;
|
|
|
+ // passwordInput1.type = this.open ? "text" : "password";
|
|
|
+ // passwordInput2.style.display = !this.open ? "inline" : "none";
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const getOpen = () => {
|
|
|
+ // return this.open;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const isValid = () => {
|
|
|
+ // if (this.open === true) {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (this.value1.trim() === "" || this.value2.trim() === "") {
|
|
|
+ // errorSet.add(errors.blankFields);
|
|
|
+ // showErrors();
|
|
|
+ // return false;
|
|
|
+ // } else {
|
|
|
+ // errorSet.delete(errors.blankFields);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (this.value1 !== this.value2) {
|
|
|
+ // errorSet.add(errors.notMatch);
|
|
|
+ // showErrors();
|
|
|
+ // return false;
|
|
|
+ // } else {
|
|
|
+ // errorSet.delete(errors.notMatch);
|
|
|
+ // }
|
|
|
+ // showErrors();
|
|
|
+ // return true;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // const showErrors = () => {
|
|
|
+ // let str = "";
|
|
|
+ // for (let er of errorSet) {
|
|
|
+ // str += er + "<br>";
|
|
|
+ // }
|
|
|
+ // errorDiv.innerHTML = str;
|
|
|
+ // };
|
|
|
+
|
|
|
+ // formBody.append(passwordInput1);
|
|
|
+ // formBody.append(passwordInput2);
|
|
|
+ // formBody.append(isOpenInput);
|
|
|
+ // formBody.append(checkButton);
|
|
|
+ // formBody.append(errorDiv);
|
|
|
+
|
|
|
+ // this.open = open;
|
|
|
+ // this.value1 = passwordInput1.value;
|
|
|
+ // this.value2 = passwordInput2.value;
|
|
|
+
|
|
|
+ // this.setOpen = setOpen;
|
|
|
+ // this.getOpen = getOpen;
|
|
|
+
|
|
|
+ // this.setValue1 = setValue1;
|
|
|
+ // this.getValue1 = getValue1;
|
|
|
+ // this.setValue2 = setValue2;
|
|
|
+ // this.getValue2 = getValue2;
|
|
|
+
|
|
|
+ // checkButton.disabled = !isValid();
|
|
|
+ // }
|
|
|
+
|
|
|
+ // let p = new Password(document.body, true);
|
|
|
+
|
|
|
+ // p.onPassword1Change = (data) => console.log(data);
|
|
|
+ // p.onPassword2Change = (data) => console.log(data);
|
|
|
+ // p.onOpenChange = (open) => console.log(open);
|
|
|
+
|
|
|
+ // p.setValue1("qwerty");
|
|
|
+ // console.log(p.getValue1());
|
|
|
+ // p.setValue2("qwer");
|
|
|
+ // console.log(p.getValue2());
|
|
|
+
|
|
|
+ // p.setOpen(false);
|
|
|
+ // console.log(p.getOpen());
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
ilya_shyian