Merge pull request #567 from BeaudanBrown/name-restriction

Display name restrictions 2

_locales/en/messages.json

@@ -1904,7 +1904,8 @@
       "Shown in the settings page as the heading for the blocked user settings"
   },
   "editProfileTitle": {
-    "message": "Change your own display name",
+    "message":
+      "Change your own display name (alphanumeric characters and underscores only)",
     "description": "The title shown when user edits their own profile"
   },
   "editProfileDisplayNameWarning": {

background.html

@@ -645,7 +645,7 @@
           <!-- Profile -->
           <div class='page'>
             <div class='display-name-input'>
-              <div class='input-header'>Enter your public display name (alphanumeric characters and spaces only)</div>
+              <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'>
             </div>
             <div class='password-inputs'>

js/views/nickname_dialog_view.js

@@ -31,6 +31,22 @@
       this.$input.focus();
 
       this.validateNickname();
+
+      const sanitiseNameInput = () => {
+        const oldVal = this.$input.val();
+        this.$input.val(oldVal.replace(/[^a-zA-Z0-9_]/g, ''));
+      };
+
+      this.$input[0].oninput = () => {
+        sanitiseNameInput();
+      };
+
+      this.$input[0].onpaste = () => {
+        // Sanitise data immediately after paste because it's easier
+        setTimeout(() => {
+          sanitiseNameInput();
+        });
+      };
     },
     events: {
       keyup: 'onKeyup',

js/views/standalone_registration_view.js

@@ -59,7 +59,7 @@
 
       const sanitiseNameInput = () => {
         const oldVal = this.$('#display-name').val();
-        this.$('#display-name').val(oldVal.replace(/[^a-zA-Z0-9 ]/g, ''));
+        this.$('#display-name').val(oldVal.replace(/[^a-zA-Z0-9_]/g, ''));
       };
 
       this.$('#display-name').get(0).oninput = () => {