diff --git a/background.html b/background.html
index a2c80e74b..d489a7b4e 100644
--- a/background.html
+++ b/background.html
@@ -196,7 +196,6 @@
{{ message }}
{{ /message }}
-
@@ -646,7 +645,7 @@
diff --git a/js/views/nickname_dialog_view.js b/js/views/nickname_dialog_view.js
index ba65ff4de..9d33a730e 100644
--- a/js/views/nickname_dialog_view.js
+++ b/js/views/nickname_dialog_view.js
@@ -19,9 +19,6 @@
this.reject = options.reject;
this.cancelText = options.cancelText || i18n('cancel');
- this.clear = options.clear;
- this.clearText = options.clearText || i18n('clear');
-
this.title = options.title;
this.render();
@@ -52,16 +49,17 @@
keyup: 'onKeyup',
'click .ok': 'ok',
'click .cancel': 'cancel',
- 'click .clear': 'clear',
change: 'validateNickname',
},
validateNickname() {
const nickname = this.$input.val();
if (_.isEmpty(nickname)) {
- this.$('.clear').hide();
+ this.$('.ok').attr('disabled', 'disabled');
+ return false;
} else {
- this.$('.clear').show();
+ this.$('.ok').removeAttr('disabled');
+ return true;
}
},
render_attributes() {
@@ -70,7 +68,6 @@
showCancel: !this.hideCancel,
cancel: this.cancelText,
ok: this.okText,
- clear: this.clearText,
title: this.title,
};
},
@@ -88,14 +85,13 @@
this.reject();
}
},
- clear() {
- this.$input.val('').trigger('change');
- },
onKeyup(event) {
- this.validateNickname();
+ const valid = this.validateNickname();
switch (event.key) {
case 'Enter':
- this.ok();
+ if (valid) {
+ this.ok();
+ }
break;
case 'Escape':
case 'Esc':
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 46036eac4..7d863ac18 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -57,21 +57,13 @@
this.onValidatePassword();
- const sanitiseNameInput = () => {
- const oldVal = this.$('#display-name').val();
- this.$('#display-name').val(oldVal.replace(/[^a-zA-Z0-9_]/g, ''));
- };
-
- this.$('#display-name').get(0).oninput = () => {
- sanitiseNameInput();
- };
-
this.$('#display-name').get(0).onpaste = () => {
// Sanitise data immediately after paste because it's easier
setTimeout(() => {
- sanitiseNameInput();
+ this.sanitiseNameInput();
});
};
+ this.sanitiseNameInput();
},
events: {
keyup: 'onKeyup',
@@ -91,6 +83,18 @@
'keyup #password': 'onValidatePassword',
'keyup #password-confirmation': 'onValidatePassword',
},
+ sanitiseNameInput() {
+ const oldVal = this.$('#display-name').val();
+ const newVal = oldVal.replace(/[^a-zA-Z0-9_]/g, '');
+ this.$('#display-name').val(newVal);
+ if (_.isEmpty(newVal)) {
+ this.$('#save-button').attr('disabled', 'disabled');
+ return false;
+ } else {
+ this.$('#save-button').removeAttr('disabled');
+ return true;
+ }
+ },
async showPage(pageIndex) {
// eslint-disable-next-line func-names
this.$pages.each(function(index) {
@@ -123,9 +127,12 @@
return;
}
+ const validName = this.sanitiseNameInput();
switch (event.key) {
case 'Enter':
- this.onSaveProfile();
+ if (validName) {
+ this.onSaveProfile();
+ }
break;
case 'Escape':
case 'Esc':
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index da7f21736..f3fc177ce 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -69,6 +69,15 @@ audio {
button {
cursor: pointer;
font-size: inherit;
+
+ &[disabled='disabled'] {
+ &,
+ &:hover {
+ opacity: 0.5;
+ box-shadow: none;
+ cursor: default;
+ }
+ }
}
button.grey {
border-radius: $border-radius;