|
|
@@ -0,0 +1,223 @@
|
|
|
+//................................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 = '2540381-200.png'
|
|
|
+ else this.eye.src = 'interface_hide-512.webp'
|
|
|
+
|
|
|
+ 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 = 'interface_hide-512.webp'
|
|
|
+ else this.eye.src = '2540381-200.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 = '2540381-200.png'
|
|
|
+ } else this.eye.src = 'interface_hide-512.webp'
|
|
|
+ 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 = '2540381-200.png'
|
|
|
+ else this.eye.src = 'interface_hide-512.webp'
|
|
|
+
|
|
|
+ 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 = 'interface_hide-512.webp'
|
|
|
+ else this.eye.src = '2540381-200.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 = '2540381-200.png'
|
|
|
+ } else this.eye.src = 'interface_hide-512.webp'
|
|
|
+ this.inputPassword.type = this.checked ? "" : "password";
|
|
|
+ open = this.inputPassword.type;
|
|
|
+ this.onOpenChange(open);
|
|
|
+ };
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+let formConstructor = new FormConstructor(task3)
|
|
|
+
|
