|
|
@@ -1,10 +1,81 @@
|
|
|
-<header>
|
|
|
-
|
|
|
-</header>
|
|
|
+<header>login_form_constructor</header>
|
|
|
|
|
|
<body>
|
|
|
<script>
|
|
|
+ function Login(parent) {
|
|
|
+ this.input = document.createElement("input");
|
|
|
+ parent.append(this.input);
|
|
|
+ this.setValue = function (value) {
|
|
|
+ this.input.value = value;
|
|
|
+ }
|
|
|
+ this.getValue = function () {
|
|
|
+ return this.input.value;
|
|
|
+ }
|
|
|
+ this.input.onchange = function () {
|
|
|
+ if (this.onChange)
|
|
|
+ this.onChange(this.getValue());
|
|
|
+ }.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ function Password(parent, open) {
|
|
|
+ this.input = document.createElement("input");
|
|
|
+ parent.append(this.input);
|
|
|
+ this.setValue = function (value) {
|
|
|
+ this.input.value = value;
|
|
|
+ }
|
|
|
+ this.getValue = function () {
|
|
|
+ return this.input.value;
|
|
|
+ }
|
|
|
+ this.input.onchange = function () {
|
|
|
+ if (this.onChange)
|
|
|
+ this.onChange(this.getValue());
|
|
|
+ }.bind(this);
|
|
|
+
|
|
|
+
|
|
|
+ this.setOpen = function (open) {
|
|
|
+ this.input.type = open ? "text" : "password";
|
|
|
+ }
|
|
|
+ this.getOpen = function () {
|
|
|
+ return this.input.type == "text";
|
|
|
+ }
|
|
|
+ let check = document.createElement("input");
|
|
|
+ parent.append(check);
|
|
|
+ check.onchange = function () {
|
|
|
+ this.setOpen(check.checked);
|
|
|
+ if (this.onOpenChange)
|
|
|
+ this.onOpenChange(this.getOpen());
|
|
|
+ }.bind(this);
|
|
|
+
|
|
|
+ check.checked = open;
|
|
|
+ check.value = "open";
|
|
|
+ check.type = "checkbox";
|
|
|
+ }
|
|
|
+ function LoginForm(parent, open) {
|
|
|
+
|
|
|
+ let form = document.createElement("form");
|
|
|
+ parent.append(form);
|
|
|
+ this.login = new Login(form);
|
|
|
+ this.password = new Password(form, open);
|
|
|
+ this.button = document.createElement("button");
|
|
|
+ this.button.innerText = "OK";
|
|
|
+ form.append(this.button);
|
|
|
+
|
|
|
+ let setButtonStateCallback = function setButtonState() {
|
|
|
+ this.button.disabled = !this.login.getValue() || !this.password.getValue();
|
|
|
+ }.bind(this);
|
|
|
+ this.login.onChange = setButtonStateCallback;
|
|
|
+ this.password.onChange = setButtonStateCallback;
|
|
|
+ this.button.disabled = true;
|
|
|
+ this.button.onclick = function () {
|
|
|
+ if (this.onLogin)
|
|
|
+ this.onLogin(this.login.getValue(), this.password.getValue());
|
|
|
+ }.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ let loginForm = new LoginForm(document.body, true);
|
|
|
+ loginForm.onLogin = function (login, password) {
|
|
|
+ console.log(`${login}:${password}`)
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
</script>
|
|
|
</body>
|
