|
@@ -0,0 +1,209 @@
|
|
|
|
|
+<!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>
|
|
|
|
|
+ <script>
|
|
|
|
|
+ function Password(parent, open = false) {
|
|
|
|
|
+ const input = document.createElement("input");
|
|
|
|
|
+ const checkbox = document.createElement("input");
|
|
|
|
|
+ input.type = "password";
|
|
|
|
|
+ checkbox.type = "checkbox";
|
|
|
|
|
+
|
|
|
|
|
+ parent.append(input);
|
|
|
|
|
+ parent.append(checkbox);
|
|
|
|
|
+
|
|
|
|
|
+ this.setValue = (value) => (input.value = value);
|
|
|
|
|
+
|
|
|
|
|
+ this.getValue = () => input.value;
|
|
|
|
|
+
|
|
|
|
|
+ this.setOpen = () => {
|
|
|
|
|
+ if (input.type === "text") {
|
|
|
|
|
+ input.type = "password";
|
|
|
|
|
+ } else {
|
|
|
|
|
+ input.type = "text";
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ this.getOpen = () => (input.type === "text" ? true : false);
|
|
|
|
|
+
|
|
|
|
|
+ input.oninput = (event) => {
|
|
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
|
|
+ this.onChange(input.value);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (
|
|
|
|
|
+ typeof this.onOpenChange === "function" &&
|
|
|
|
|
+ value !== input.value &&
|
|
|
|
|
+ this.getOpen() === true
|
|
|
|
|
+ ) {
|
|
|
|
|
+ this.onOpenChange(value);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ checkbox.oninput = (event) => {
|
|
|
|
|
+ if (typeof this.onChange === "function") {
|
|
|
|
|
+ this.onChange(checkbox.checked);
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ checkbox.onclick = (event) => this.setOpen();
|
|
|
|
|
+
|
|
|
|
|
+ this.getInput = () => input;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 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) {
|
|
|
|
|
+ const form = document.createElement("form");
|
|
|
|
|
+ const login = document.createElement("input");
|
|
|
|
|
+ const password = document.createElement("input");
|
|
|
|
|
+ const checkbox = document.createElement("input");
|
|
|
|
|
+ const btnSubmit = document.createElement("button");
|
|
|
|
|
+
|
|
|
|
|
+ password.type = "password";
|
|
|
|
|
+ checkbox.type = "checkbox";
|
|
|
|
|
+ btnSubmit.innerText = "Truth";
|
|
|
|
|
+ btnSubmit.disabled = true;
|
|
|
|
|
+
|
|
|
|
|
+ parent.append(form);
|
|
|
|
|
+ form.append(login);
|
|
|
|
|
+ form.append(password);
|
|
|
|
|
+ form.append(checkbox);
|
|
|
|
|
+ form.append(btnSubmit);
|
|
|
|
|
+
|
|
|
|
|
+ this.changeVisiblePassword = () => {
|
|
|
|
|
+ if (password.type === "text") {
|
|
|
|
|
+ password.type = "password";
|
|
|
|
|
+ } else {
|
|
|
|
|
+ password.type = "text";
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ checkbox.onclick = (event) => this.changeVisiblePassword();
|
|
|
|
|
+
|
|
|
|
|
+ this.checkBtnSend = () => {
|
|
|
|
|
+ if (!login.value || !password.value) {
|
|
|
|
|
+ btnSubmit.disabled = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ btnSubmit.disabled = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ login.oninput = (event) => this.checkBtnSend();
|
|
|
|
|
+ password.oninput = (event) => this.checkBtnSend();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const logForm = new LoginForm(document.body);
|
|
|
|
|
+
|
|
|
|
|
+ //LoginForm Constructor
|
|
|
|
|
+ function LoginFormAdvance(parent) {
|
|
|
|
|
+ const form = document.createElement("form");
|
|
|
|
|
+ const login = document.createElement("input");
|
|
|
|
|
+ const password = document.createElement("input");
|
|
|
|
|
+ const checkbox = document.createElement("input");
|
|
|
|
|
+ const btnSubmit = document.createElement("button");
|
|
|
|
|
+
|
|
|
|
|
+ password.type = "password";
|
|
|
|
|
+ checkbox.type = "checkbox";
|
|
|
|
|
+ btnSubmit.innerText = "Truth";
|
|
|
|
|
+ btnSubmit.disabled = true;
|
|
|
|
|
+
|
|
|
|
|
+ parent.append(form);
|
|
|
|
|
+ form.append(login);
|
|
|
|
|
+ form.append(password);
|
|
|
|
|
+ form.append(checkbox);
|
|
|
|
|
+ form.append(btnSubmit);
|
|
|
|
|
+
|
|
|
|
|
+ this.setValueLogin = (value) => (login.value = value);
|
|
|
|
|
+
|
|
|
|
|
+ this.setValuePassword = (value) => (password.value = value);
|
|
|
|
|
+
|
|
|
|
|
+ this.getValueLogin = () => login.value;
|
|
|
|
|
+ this.getPasswordLogin = () => password.value;
|
|
|
|
|
+
|
|
|
|
|
+ this.setOpenPassword = () => {
|
|
|
|
|
+ if (password.type === "text") {
|
|
|
|
|
+ password.type = "password";
|
|
|
|
|
+ } else {
|
|
|
|
|
+ password.type = "text";
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ this.getOpenPassword = () => (password.type === "text" ? true : false);
|
|
|
|
|
+
|
|
|
|
|
+ this.setVisibleBtn = () => (btnSubmit.disabled = !btnSubmit.disabled);
|
|
|
|
|
+ this.getVisibleBtn = () => (btnSubmit.disabled ? false : true);
|
|
|
|
|
+
|
|
|
|
|
+ this.checkBtnSend = () => {
|
|
|
|
|
+ if (!login.value || !password.value) {
|
|
|
|
|
+ btnSubmit.disabled = true;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ btnSubmit.disabled = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ login.oninput = (event) => {
|
|
|
|
|
+ if (typeof this.onChange === "function" && value !== login.value) {
|
|
|
|
|
+ this.onChange(value);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.checkBtnSend();
|
|
|
|
|
+ };
|
|
|
|
|
+ password.oninput = (event) => {
|
|
|
|
|
+ if (typeof this.onChange === "function" && value !== password.value) {
|
|
|
|
|
+ this.onChange(value);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.checkBtnSend();
|
|
|
|
|
+ };
|
|
|
|
|
+ checkbox.onclick = (event) => this.setOpenPassword();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const logFormAdv = new LoginFormAdvance(document.body);
|
|
|
|
|
+
|
|
|
|
|
+ // Password Verify
|
|
|
|
|
+ function PasswordVerify(parent) {
|
|
|
|
|
+ const p1 = new Password(parent);
|
|
|
|
|
+ const p2 = new Password(parent);
|
|
|
|
|
+ const btn = document.createElement("button");
|
|
|
|
|
+ btn.disabled = true;
|
|
|
|
|
+
|
|
|
|
|
+ btn.innerHTML = "Truth";
|
|
|
|
|
+ parent.append(btn);
|
|
|
|
|
+
|
|
|
|
|
+ this.checkMatches = () => {
|
|
|
|
|
+ if (p1.getValue() === p2.getValue()) {
|
|
|
|
|
+ btn.disabled = false;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ btn.disabled = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ p1.onChange = (value) => {
|
|
|
|
|
+ if (value === false) {
|
|
|
|
|
+ p2.getInput().style.visibility = 'visible';
|
|
|
|
|
+ } else if (value === true) {
|
|
|
|
|
+ p2.getInput().style.visibility = 'hidden';
|
|
|
|
|
+ }
|
|
|
|
|
+ this.checkMatches();
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ p2.onChange = (value) => this.checkMatches();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+const passVeri = new PasswordVerify(document.body);
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|
