fix(usernames): various

Reword invalid characters error
Correct typo in slur error
Remove extraneous Confirm button
Reset username field if empty on blur
Restore ability to add local auth to social login

website/client/components/settings/site.vue

@@ -139,12 +139,11 @@
             .iconalert.iconalert-warning(v-else)
               div.align-middle
                 span {{ $t('usernameNotVerified') }}
-                button.btn.btn-secondary.btn-small.float-right(@click='changeUser("username", {username: user.auth.local.username})') {{ $t('confirmUsername') }}
             .form-group
-              input#changeUsername.form-control(type='text', :placeholder="$t('newUsername')", v-model='usernameUpdates.username', :class='{"is-invalid input-invalid": usernameInvalid}')
+              input#changeUsername.form-control(@blur='restoreEmptyUsername()',type='text', :placeholder="$t('newUsername')", v-model='usernameUpdates.username', :class='{"is-invalid input-invalid": usernameInvalid}')
               .input-error(v-for="issue in usernameIssues") {{ issue }}
               small.form-text.text-muted {{ $t('changeUsernameDisclaimer') }}
-            button.btn.btn-primary(type='submit', @click='changeUser("username", usernameUpdates)', :disabled='usernameCanSubmit') {{ $t('submit') }}
+            button.btn.btn-primary(type='submit', @click='changeUser("username", usernameUpdates)', :disabled='usernameCannotSubmit') {{ $t('saveAndConfirm') }}
           h5(v-if='user.auth.local.email') {{ $t('changeEmail') }}
           .form(v-if='user.auth.local.email', name='changeEmail', novalidate)
             .form-group
@@ -264,6 +263,7 @@ export default {
     this.usernameUpdates.username = this.user.auth.local.username || null;
     this.temporaryDisplayName = this.user.profile.name;
     this.emailUpdates.newEmail = this.user.auth.local.email || null;
+    this.localAuth.username = this.user.auth.local.username || null;
     hello.init({
       facebook: process.env.FACEBOOK_KEY, // eslint-disable-line no-process-env
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line no-process-env
@@ -320,7 +320,7 @@ export default {
       if (this.usernameUpdates.username.length <= 1) return false;
       return !this.usernameValid;
     },
-    usernameCanSubmit () {
+    usernameCannotSubmit () {
       if (this.usernameUpdates.username.length <= 1) return true;
       return !this.usernameValid;
     },
@@ -424,6 +424,7 @@ export default {
       await axios.put(`/api/v4/user/auth/update-${attribute}`, updates);
       if (attribute === 'username') {
         this.user.auth.local.username = updates[attribute];
+        this.localAuth.username = this.user.auth.local.username;
         this.user.flags.verifiedUsername = true;
       } else if (attribute === 'email') {
         this.user.auth.local.email = updates[attribute];
@@ -469,6 +470,11 @@ export default {
     addLocalAuth () {
       axios.post('/api/v4/user/auth/local/register', this.localAuth, 'addedLocalAuth');
     },
+    restoreEmptyUsername () {
+      if (this.usernameUpdates.username.length < 1) {
+        this.usernameUpdates.username = this.user.auth.local.username;
+      }
+    },
   },
 };
 </script>

website/common/locales/en/generic.json

@@ -75,6 +75,7 @@
   "submit": "Submit",
   "close": "Close",
   "saveAndClose": "Save & Close",
+  "saveAndConfirm": "Save & Confirm",
   "cancel": "Cancel",
   "ok": "OK",
   "add": "Add",

website/common/locales/en/settings.json

@@ -193,10 +193,10 @@
     "about": "About",
     "setUsernameNotificationTitle": "Confirm your username!",
     "setUsernameNotificationBody": "We will be transitioning login names to unique, public usernames soon. This username will be used for invitations, @mentions in chat, and messaging.",
-    "usernameIssueSlur": "Usernames may not contain inapporpriate language.",
+    "usernameIssueSlur": "Usernames may not contain inappropriate language.",
     "usernameIssueForbidden": "Usernames may not contain restricted words.",
     "usernameIssueLength": "Usernames must be between 1 and 20 characters.",
-    "usernameIssueInvalidCharacters": "Usernames can only contain letters, numbers and underscores.",
+    "usernameIssueInvalidCharacters": "Usernames can only contain letters a to z, numbers 0 to 9, hyphens, or underscores.",
     "currentUsername": "Current username:",
     "displaynameIssueLength": "Display Names must be between 1 and 30 characters.",
     "displaynameIssueSlur": "Display Names may not contain inappropriate language",