From 7b0f40535f2eb6a403a47caaa276bf9590838a80 Mon Sep 17 00:00:00 2001
From: Beaudan Brown <beau@loki.network>
Date: Wed, 2 Oct 2019 10:31:26 +1000
Subject: [PATCH 1/2] 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                          |  2 +-
 js/views/standalone_registration_view.js | 46 ++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/background.html b/background.html
index e3bbc00ba..ff532f26c 100644
--- a/background.html
+++ b/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'>
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 027bc0815..14f841e5f 100644
--- a/js/views/standalone_registration_view.js
+++ b/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

From 64ccd05a2ec2869fe10f6f82cd0a39742b1e632b Mon Sep 17 00:00:00 2001
From: Beaudan Brown <beau@loki.network>
Date: Wed, 2 Oct 2019 12:06:57 +1000
Subject: [PATCH 2/2] Capitalise constants

---
 js/views/standalone_registration_view.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index 14f841e5f..edf799850 100644
--- a/js/views/standalone_registration_view.js
+++ b/js/views/standalone_registration_view.js
@@ -8,9 +8,9 @@
 
   window.Whisper = window.Whisper || {};
 
-  const registerIndex = 0;
-  const profileIndex = 1;
-  let currentPageIndex = registerIndex;
+  const REGISTER_INDEX = 0;
+  const PROFILE_INDEX = 1;
+  let currentPageIndex = REGISTER_INDEX;
 
   Whisper.StandaloneRegistrationView = Whisper.View.extend({
     templateName: 'standalone',
@@ -104,7 +104,7 @@
     },
     async showRegisterPage() {
       this.registrationParams = {};
-      this.showPage(registerIndex);
+      this.showPage(REGISTER_INDEX);
     },
     async showProfilePage(mnemonic, language) {
       this.registrationParams = {
@@ -114,11 +114,11 @@
       this.$passwordInput.val('');
       this.$passwordConfirmationInput.val('');
       this.onValidatePassword();
-      this.showPage(profileIndex);
+      this.showPage(PROFILE_INDEX);
       this.$('#display-name').focus();
     },
     onKeyup(event) {
-      if (currentPageIndex !== profileIndex) {
+      if (currentPageIndex !== PROFILE_INDEX) {
         // Only want enter/escape keys to work on profile page
         return;
       }