feat(createAccount): better error messages/handling on username error

components/views/friends/quick/Quick.vue

@@ -38,7 +38,10 @@ export default Vue.extend({
         return
       }
       if (this.isInvalidName) {
-        this.error = this.$t('errors.chat.group_name') as string
+        this.error = this.$t('errors.chat.group_name', {
+          min: this.$Config.chat.groupNameMinLength,
+          max: this.$Config.chat.groupNameMaxLength,
+        }) as string
         return
       }
       // create group

components/views/user/create/Create.html

@@ -7,7 +7,7 @@
   />
   <div v-if="showCropper" class="cropper-mask" />
   <div class="modal-body">
-    <form @submit="confirm">
+    <form @submit="confirm" novalidate>
       <div class="custom-modal-content">
         <div class="columns">
           <div class="column image">
@@ -50,6 +50,9 @@
             v-model="name"
             input-kind="text"
             type="primary"
+            :minLength="$Config.account.minLength"
+            :maxLength="$Config.account.maxLength"
+            :invalid="isInvalidName && Boolean(error)"
           />
         </div>
 

components/views/user/create/Create.vue

@@ -15,7 +15,6 @@ export default Vue.extend({
   data() {
     return {
       showCropper: false,
-      creating: '',
       croppedImage: '',
       imageUrl: '',
       name: '',
@@ -33,11 +32,12 @@ export default Vue.extend({
      * @description If the account isn't the length specified in the config, this returns False, true if correct length
      * @example this.accountValidLength
      */
-    accountValidLength(): boolean {
-      if (this.name.trim().length < this.$Config.account.minimumAccountLength) {
-        return false
-      }
-      return true
+    isInvalidName(): boolean {
+      return (
+        !this.name ||
+        this.name.trim().length < this.$Config.account.minLength ||
+        this.name.trim().length > this.$Config.account.maxLength
+      )
     },
     /**
      * @method acceptableImageFormats
@@ -171,11 +171,14 @@ export default Vue.extend({
     confirm(e: Event) {
       e.preventDefault()
       if (this.isLoading) {
-        return false
+        return
       }
-      if (!this.accountValidLength) {
-        this.error = this.$t('user.registration.username_error') as string
-        return false
+      if (this.isInvalidName) {
+        this.error = this.$t('user.registration.username_error', {
+          min: this.$Config.account.minLength,
+          max: this.$Config.account.maxLength,
+        }) as string
+        return
       }
       this.error = ''
 

config.ts

@@ -115,7 +115,8 @@ export const Config = {
     groupNameMaxLength: 64,
   },
   account: {
-    minimumAccountLength: 5,
+    minLength: 5,
+    maxLength: 32,
   },
   profile: {
     noteMaxChars: 256,

locales/en-US.js

@@ -602,7 +602,8 @@ export default {
       empty_message_error:
         'Message must contain at least one non-space character',
       failed_load: 'Image failed to load',
-      group_name: 'Enter a group name of at least 3 characters, up to 64',
+      group_name:
+        'Enter a group name of at least {min} characters, up to {max}',
     },
     textile: {
       friend_not_found: 'Friend not found',
@@ -656,7 +657,8 @@ export default {
         'Customize how the world sees you, choose something memorable.',
       username: 'Username',
       username_placeholder: 'Neil Spaceman...',
-      username_error: 'Username must be at least 5 characters.',
+      username_error:
+        'Enter a username of at least {min} characters, up to {max}',
       status: 'Status',
       status_placeholder: 'Ready for launch...',
       reg_status: {