QoL with auto focus display name box and enter/esc key functionality on profile screen. Restrict display name characters to alphanumeric (easy to work around)

background.html

@@ -622,7 +622,7 @@
           <!-- Profile -->
           <div class='page'>
             <div class='display-name-input'>
-              <div class='input-header'>Enter a name that will be shown to all your contacts</div>
+              <div class='input-header'>Enter your public display name (alphanumeric characters and spaces only)</div>
               <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
             </div>
             <div class='password-inputs'>

js/views/standalone_registration_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil, _ */
+/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil, _, setTimeout */
 
 /* eslint-disable more/no-then */
 
@@ -8,6 +8,10 @@
 
   window.Whisper = window.Whisper || {};
 
+  const registerIndex = 0;
+  const profileIndex = 1;
+  let currentPageIndex = registerIndex;
+
   Whisper.StandaloneRegistrationView = Whisper.View.extend({
     templateName: 'standalone',
     className: 'full-screen-flow standalone-fullscreen',
@@ -52,8 +56,25 @@
       this.showRegisterPage();
 
       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();
+        });
+      };
     },
     events: {
+      keyup: 'onKeyup',
       'validation input.number': 'onValidation',
       'click #request-voice': 'requestVoice',
       'click #request-sms': 'requestSMSVerification',
@@ -77,12 +98,13 @@
           $(this).hide();
         } else {
           $(this).show();
+          currentPageIndex = pageIndex;
         }
       });
     },
     async showRegisterPage() {
       this.registrationParams = {};
-      this.showPage(0);
+      this.showPage(registerIndex);
     },
     async showProfilePage(mnemonic, language) {
       this.registrationParams = {
@@ -92,7 +114,25 @@
       this.$passwordInput.val('');
       this.$passwordConfirmationInput.val('');
       this.onValidatePassword();
-      this.showPage(1);
+      this.showPage(profileIndex);
+      this.$('#display-name').focus();
+    },
+    onKeyup(event) {
+      if (currentPageIndex !== profileIndex) {
+        // Only want enter/escape keys to work on profile page
+        return;
+      }
+
+      switch (event.key) {
+        case 'Enter':
+          this.onSaveProfile();
+          break;
+        case 'Escape':
+        case 'Esc':
+          this.onBack();
+          break;
+        default:
+      }
     },
     async register(mnemonic, language) {
       // Make sure the password is valid