Enforce display name

background.html

@@ -196,7 +196,6 @@
         <div class='message'>{{ message }}</div>
       {{ /message }}
       <div class='buttons'>
-        <button class='clear' tabindex='3'>{{ clear }}</button>
         <button class='cancel' tabindex='2'>{{ cancel }}</button>
         <button class='ok' tabindex='1'>{{ ok }}</button>
       </div>
@@ -646,7 +645,7 @@
           <div class='page'>
             <div class='display-name-input'>
               <div class='input-header'>Enter your public display name (alphanumeric characters and underscores only)</div>
-              <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
+              <input class='form-control' type='text' id='display-name' placeholder='Display Name' autocomplete='off' spellcheck='false' maxlength='25'>
             </div>
             <div class='password-inputs'>
                 <div class='input-header'>Type an optional password for added security</div>
@@ -655,8 +654,8 @@
                 <div class='error'></div>
             </div>
             <div class='buttons'>
-              <a class='button grey' id='back-button'>Back</a>
-              <a class='button' id='save-button' data-loading-text='Please wait...'>Save</a>
+              <button class='button grey' id='back-button' tabindex='2'>Back</button>
+              <button class='button' id='save-button' tabindex='1'>Save</button>
             </div>
           </div>
 

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':

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':

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;