From 42fdb49d1a70701f343d27d0e15b65117c324e3e Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Wed, 6 Apr 2016 15:11:20 +0200
Subject: [PATCH] client/forms: fix disabling forms
---
client/css/forms.css | 47 ++++++++++++++++++++++------
client/css/main.css | 12 +++++--
client/js/views/base_view.js | 12 +++++++
client/js/views/login_view.js | 6 ++--
client/js/views/registration_view.js | 6 ++--
5 files changed, 66 insertions(+), 17 deletions(-)
diff --git a/client/css/forms.css b/client/css/forms.css
index 4635b00..a4dd6a1 100644
--- a/client/css/forms.css
+++ b/client/css/forms.css
@@ -78,8 +78,8 @@ input[type=radio], input[type=checkbox] {
margin-top: -10px;
width: 16px;
height: 16px;
- border: 2px solid var(--input-background-color);
- background: var(--input-border-color);
+ background: var(--input-enabled-background-color);
+ border: 2px solid var(--input-enabled-border-color);
content: '';
}
input[type=radio]:checked + .radio:before,
@@ -90,6 +90,16 @@ input[type=radio]:checked + .radio:after,
input[type=checkbox]:checked + .checkbox:after {
opacity: 1;
}
+input[type=radio]:disabled + .radio:before,
+input[type=checkbox]:disabled + .checkbox:before,
+input[type=radio]:disabled + .radio:after,
+input[type=checkbox]:disabled + .checkbox:after {
+ border-color: var(--input-disabled-text-color);
+}
+input[type=radio]:disabled + .radio,
+input[type=checkbox]:disabled + .checkbox {
+ border-color: var(--input-disabled-font-color);
+}
.radio:after {
transition: opacity 0.1s linear;
@@ -124,16 +134,26 @@ textarea,
input[type=text],
input[type=email],
input[type=password] {
- transition: border-color 0.1s linear, background-color 0.1s linear;
- font-size: 100%;
font-family: 'Inconsolata', monospace;
+ font-size: 100%;
padding: 0.3em;
- border: 2px solid var(--input-background-color);
- background: var(--input-border-color);
text-overflow: ellipsis;
width: 100%;
box-sizing: border-box;
+ border: 2px solid var(--input-enabled-border-color);
+ background: var(--input-enabled-background-color);
+ color: var(--input-enabled-text-color);
box-shadow: none; /* :-moz-submit-invalid on FF */
+ transition: border-color 0.1s linear, background-color 0.1s linear;
+}
+
+textarea:disabled,
+input[type=text]:disabled,
+input[type=email]:disabled,
+input[type=password]:disabled {
+ border: 2px solid var(--input-disabled-border-color);
+ background: var(--input-disabled-background-color);
+ color: var(--input-disabled-text-color);
}
textarea:focus,
@@ -161,7 +181,16 @@ input[type=submit] {
font-size: 100%;
line-height: 100%;
padding: 0.3em 0.7em;
- border: 1px solid var(--main-color);
- background: var(--main-color);
- color: white;
+ border: 1px solid var(--button-enabled-background-color);
+ background: var(--button-enabled-background-color);
+ color: var(--button-enabled-text-color);
+}
+
+button:disabled,
+input[type=button]:disabled,
+input[type=submit]:disabled {
+ cursor: default;
+ border-color: var(--button-disabled-background-color);
+ background-color: var(--button-disabled-background-color);
+ color: var(--button-disabled-text-color);
}
diff --git a/client/css/main.css b/client/css/main.css
index e4f27ab..06ff5f5 100644
--- a/client/css/main.css
+++ b/client/css/main.css
@@ -12,8 +12,16 @@
--input-bad-background-color: #FFF5F5;
--input-good-border-color: #D3E3D3;
--input-good-background-color: #F5FFF5;
- --input-background-color: #EEE;
- --input-border-color: #FAFAFA;
+ --input-enabled-background-color: #FAFAFA;
+ --input-enabled-border-color: #EEE;
+ --input-enabled-text-color: var(--text-color);
+ --input-disabled-background-color: #FAFAFA;
+ --input-disabled-border-color: #EEE;
+ --input-disabled-text-color: #888;
+ --button-enabled-text-color: white;
+ --button-enabled-background-color: var(--main-color);
+ --button-disabled-text-color: #666;
+ --button-disabled-background-color: #CCC;
}
body {
diff --git a/client/js/views/base_view.js b/client/js/views/base_view.js
index 0f4aaf8..426181a 100644
--- a/client/js/views/base_view.js
+++ b/client/js/views/base_view.js
@@ -58,6 +58,18 @@ class BaseView {
});
}
+ disableForm(form) {
+ for (let input of form.querySelectorAll('input')) {
+ input.disabled = true;
+ }
+ }
+
+ enableForm(form) {
+ for (let input of form.querySelectorAll('input')) {
+ input.disabled = false;
+ }
+ }
+
showView(html) {
this.contentHolder.innerHTML = html;
}
diff --git a/client/js/views/login_view.js b/client/js/views/login_view.js
index 6ea29fe..2f24053 100644
--- a/client/js/views/login_view.js
+++ b/client/js/views/login_view.js
@@ -23,17 +23,17 @@ class LoginView extends BaseView {
form.addEventListener('submit', e => {
e.preventDefault();
this.clearMessages();
- form.setAttribute('disabled', true);
+ this.disableForm(form);
options
.login(
userNameField.value,
passwordField.value,
rememberUserField.checked)
.then(() => {
- form.setAttribute('disabled', false);
+ this.enableForm(form);
})
.catch(errorMessage => {
- form.setAttribute('disabled', false);
+ this.enableForm(form);
this.notifyError(errorMessage);
});
});
diff --git a/client/js/views/registration_view.js b/client/js/views/registration_view.js
index ad08e60..7e1ee85 100644
--- a/client/js/views/registration_view.js
+++ b/client/js/views/registration_view.js
@@ -23,17 +23,17 @@ class RegistrationView extends BaseView {
form.addEventListener('submit', e => {
e.preventDefault();
this.clearMessages();
- form.setAttribute('disabled', true);
+ this.disableForm(form);
options
.register(
userNameField.value,
passwordField.value,
emailField.value)
.then(() => {
- form.setAttribute('disabled', false);
+ this.enableForm(form);
})
.catch(errorMessage => {
- form.setAttribute('disabled', false);
+ this.enableForm(form);
this.notifyError(errorMessage);
});
});