|
|
@@ -0,0 +1,89 @@
|
|
|
+<header>
|
|
|
+ Promisify: LoginForm
|
|
|
+</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);
|
|
|
+ }
|
|
|
+
|
|
|
+ function loginPromise(parent) {
|
|
|
+ function executor(fulfill, reject) {
|
|
|
+ const form = new LoginForm(parent);
|
|
|
+ form.onLogin = (login, password) => {
|
|
|
+ fulfill({ 'login': login, 'password': password })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return new Promise(executor);
|
|
|
+ }
|
|
|
+ loginPromise(document.body)
|
|
|
+ .then(({ login, password }) => console.log(`Вы ввели ${login} и ${password}`));
|
|
|
+ </script>
|
|
|
+</body>
|
