|
@@ -1,223 +0,0 @@
|
|
|
-//................................Password
|
|
|
-
|
|
|
-let task1 = document.createElement('div');
|
|
|
-task1.innerText = 'Password'
|
|
|
-task1.className = 'box1';
|
|
|
-document.body.append(task1);
|
|
|
-
|
|
|
-function Password(parent,open = true) {
|
|
|
- this.inputPassword = document.createElement("input");
|
|
|
- parent.append(this.inputPassword);
|
|
|
- this.inputPassword.placeholder = 'password'
|
|
|
-
|
|
|
- this.buttonShowPassword = document.createElement("button");
|
|
|
- parent.append(this.buttonShowPassword);
|
|
|
- this.buttonShowPassword.innerText = "password";
|
|
|
- this.eye = document.createElement('img');
|
|
|
- this.buttonShowPassword.append(this.eye);
|
|
|
-
|
|
|
- if (open) this.eye.src = './images/show.png'
|
|
|
- else this.eye.src = './images/close.png'
|
|
|
-
|
|
|
- this.inputPassword.type = open ? "" : "password";
|
|
|
-
|
|
|
- this.checked = open;
|
|
|
-
|
|
|
- this.setValue = function (data) {
|
|
|
- this.inputPassword.value = data;
|
|
|
- };
|
|
|
-
|
|
|
- this.getValue = function () {
|
|
|
- return this.inputPassword.value;
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- this.onOpenChange = function () {}
|
|
|
-
|
|
|
- this.setOpen = function (boolean) {
|
|
|
- this.inputPassword.type = boolean ? "" : "password";
|
|
|
- boolean = this.inputPassword.type;
|
|
|
- if (this.inputPassword.type == 'password') this.eye.src = './images/close.png'
|
|
|
- else this.eye.src = './images/show.png'
|
|
|
- this.onOpenChange(boolean);
|
|
|
- };
|
|
|
-
|
|
|
- this.getOpen = function () {
|
|
|
- return open;
|
|
|
- };
|
|
|
-
|
|
|
- if (!this.inputPassword.value) this.buttonShowPassword.disabled = false;
|
|
|
-
|
|
|
- this.onChange = function () {}
|
|
|
-
|
|
|
- this.inputPassword.oninput = (data) => {
|
|
|
- data = this.inputPassword.value
|
|
|
- this.onChange(data);
|
|
|
-
|
|
|
- if (this.inputPassword.value) this.buttonShowPassword.disabled = false;
|
|
|
- else this.buttonShowPassword.disabled = true;
|
|
|
-
|
|
|
- }
|
|
|
- this.checked = open;
|
|
|
-
|
|
|
- this.buttonShowPassword.onclick = (open) => {
|
|
|
- this.checked = !this.checked;
|
|
|
- if (this.inputPassword.type = this.checked) {
|
|
|
- this.eye.src = './images/show.png'
|
|
|
- } else this.eye.src = './images/close.png'
|
|
|
- this.inputPassword.type = this.checked ? "" : "password";
|
|
|
- open = this.inputPassword.type;
|
|
|
- this.onOpenChange(open);
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-let taskPassword = new Password(task1)
|
|
|
-
|
|
|
-//................................LoginForm
|
|
|
-
|
|
|
-let task2 = document.createElement('div');
|
|
|
-task2.innerText = 'LoginForm '
|
|
|
-task2.className = 'box2';
|
|
|
-document.body.append(task2);
|
|
|
-
|
|
|
-
|
|
|
-function LoginForm(parent) {
|
|
|
- this.inputLogin = document.createElement("input");
|
|
|
- parent.append(this.inputLogin);
|
|
|
- this.inputLogin.placeholder = 'login';
|
|
|
-
|
|
|
- let password = new Password(parent)
|
|
|
-
|
|
|
- this.buttonLogin = document.createElement('button');
|
|
|
- parent.append(this.buttonLogin);
|
|
|
- this.buttonLogin.innerText = 'login';
|
|
|
-
|
|
|
- this.buttonLogin.disabled = true;
|
|
|
-
|
|
|
- password.inputPassword.oninput = this.inputLogin.oninput = () => {
|
|
|
-
|
|
|
- if (password.inputPassword.value && this.inputLogin.value) this.buttonLogin.disabled = false;
|
|
|
- else this.buttonLogin.disabled = true;
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-let loginForm = new LoginForm(task2, true);
|
|
|
-
|
|
|
-//................................ FormConstructor
|
|
|
-
|
|
|
-let task3 = document.createElement('div');
|
|
|
-task3.innerText = 'Form Constructor '
|
|
|
-task3.className = 'box3';
|
|
|
-document.body.append(task3);
|
|
|
-
|
|
|
-function FormConstructor(parent,open = true) {
|
|
|
-
|
|
|
- this.inputLogin = document.createElement("input");
|
|
|
- parent.append(this.inputLogin);
|
|
|
- this.inputLogin.placeholder = 'login';
|
|
|
-
|
|
|
-
|
|
|
- this.setLogin = function (login) {
|
|
|
- this.inputLogin.value = login
|
|
|
- }
|
|
|
-
|
|
|
- this.getLogin = function(){
|
|
|
- return this.inputLogin.value
|
|
|
- }
|
|
|
-
|
|
|
- this.inputLogin.oninput = (data) => {
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- this.inputPassword = document.createElement("input");
|
|
|
- parent.append(this.inputPassword);
|
|
|
- this.inputPassword.placeholder = 'password'
|
|
|
-
|
|
|
- this.buttonShowPassword = document.createElement("button");
|
|
|
- parent.append(this.buttonShowPassword);
|
|
|
- this.buttonShowPassword.innerText = "password";
|
|
|
- this.eye = document.createElement('img');
|
|
|
- this.buttonShowPassword.append(this.eye);
|
|
|
-
|
|
|
- if (open) this.eye.src = './images/show.png'
|
|
|
- else this.eye.src = './images/close.png'
|
|
|
-
|
|
|
- this.inputPassword.type = open ? "" : "password";
|
|
|
-
|
|
|
- this.buttonLogin = document.createElement('button');
|
|
|
- parent.append(this.buttonLogin);
|
|
|
- this.buttonLogin.innerText = 'login';
|
|
|
- this.buttonLogin.disabled = true;
|
|
|
-
|
|
|
- this.checked = open;
|
|
|
-
|
|
|
- this.setLogin = function (data) {
|
|
|
- this.inputLogin.value = data;
|
|
|
- };
|
|
|
-
|
|
|
- this.getLogin = function () {
|
|
|
- return this.inputLogin.value;
|
|
|
- };
|
|
|
-
|
|
|
- this.setPassword = function (data) {
|
|
|
- this.inputPassword.value = data;
|
|
|
- };
|
|
|
-
|
|
|
- this.getPassword = function () {
|
|
|
- return this.inputPassword.value;
|
|
|
- };
|
|
|
-
|
|
|
-
|
|
|
- this.onOpenChange = function () {}
|
|
|
-
|
|
|
- this.setOpen = function (boolean) {
|
|
|
- this.inputPassword.type = boolean ? "" : "password";
|
|
|
- boolean = this.inputPassword.type;
|
|
|
- if (this.inputPassword.type == 'password') this.eye.src = './images/close.png'
|
|
|
- else this.eye.src = './images/show.png'
|
|
|
- this.onOpenChange(boolean);
|
|
|
- };
|
|
|
-
|
|
|
- this.getOpen = function () {
|
|
|
- return open;
|
|
|
- };
|
|
|
-
|
|
|
- if (!this.inputPassword.value) this.buttonShowPassword.disabled = false;
|
|
|
-
|
|
|
- this.onChangeLogin = function () {}
|
|
|
-
|
|
|
- this.onChangePassword = function () {}
|
|
|
-
|
|
|
- this.inputLogin.oninput= this.inputPassword.oninput = (data) => {
|
|
|
- data = this.inputPassword.value
|
|
|
- this.onChangePassword(data);
|
|
|
-
|
|
|
- if (!this.inputLogin.value && !this.inputPassword.value) this.buttonLogin.disabled = true;
|
|
|
- else this.buttonLogin.disabled = false;
|
|
|
-
|
|
|
- data = this.inputLogin.value
|
|
|
- this.onChangeLogin(data);
|
|
|
-
|
|
|
- if (this.inputPassword.value) this.buttonShowPassword.disabled = false;
|
|
|
- else this.buttonShowPassword.disabled = true;
|
|
|
-
|
|
|
- }
|
|
|
- this.checked = open;
|
|
|
-
|
|
|
- this.buttonShowPassword.onclick = (open) => {
|
|
|
- this.checked = !this.checked;
|
|
|
- if (this.inputPassword.type = this.checked) {
|
|
|
- this.eye.src = './images/show.png'
|
|
|
- } else this.eye.src = './images/close.png'
|
|
|
- this.inputPassword.type = this.checked ? "" : "password";
|
|
|
- open = this.inputPassword.type;
|
|
|
- this.onOpenChange(open);
|
|
|
- };
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-let formConstructor = new FormConstructor(task3)
|
|
|
-
|