#2325 - add stringMax() validator for user display name (#2328)

* add stringMax validator for displayname * add comment
okTurtles · Sep 5, 2024 · 9114ed8 · 9114ed8
1 parent 1d951cd
commit 9114ed8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/frontend/model/contracts/identity.js b/frontend/model/contracts/identity.js
@@ -25,6 +25,7 @@ import {
 
 const attributesType = objectMaybeOf({
   username: stringMax(IDENTITY_USERNAME_MAX_CHARS, 'username'),
+  displayName: optional(stringMax(IDENTITY_USERNAME_MAX_CHARS, 'displayName')), // same char-limit as the username.
   email: optional(stringMax(IDENTITY_EMAIL_MAX_CHARS, 'email')), // https://github.com/okTurtles/group-income/issues/2192
   bio: optional(stringMax(IDENTITY_BIO_MAX_CHARS, 'bio')),
   picture: unionOf(stringMax(MAX_URL_LEN), objectOf({

diff --git a/frontend/views/containers/user-settings/UserProfile.vue b/frontend/views/containers/user-settings/UserProfile.vue
@@ -11,14 +11,24 @@
     section.card
       form(@submit.prevent='')
         label.field
-          i18n.label Display Name
+          .c-display-name-label-container
+            i18n.label Display Name
+            char-length-indicator(
+              v-if='form.displayName'
+              :current-length='form.displayName.length || 0'
+              :max='config.displayNameMaxChar'
+              :error='$v.form.displayName.$error'
+            )
+
           input.input(
             name='displayName'
             type='text'
             v-model='form.displayName'
+            :maxlength='config.displayNameMaxChar'
             placeholder='Name'
             data-test='displayName'
           )
+
           i18n.helper This is how others will see your name accross the platform.
 
         label.field
@@ -86,7 +96,7 @@ import AvatarUpload from '@components/AvatarUpload.vue'
 import ButtonSubmit from '@components/ButtonSubmit.vue'
 import CharLengthIndicator from '@components/CharLengthIndicator.vue'
 import { L, LTags } from '@common/common.js'
-import { IDENTITY_BIO_MAX_CHARS } from '@model/contracts/shared/constants.js'
+import { IDENTITY_BIO_MAX_CHARS, IDENTITY_USERNAME_MAX_CHARS } from '@model/contracts/shared/constants.js'
 export default ({
   name: 'UserProfile',
   mixins: [validationMixin, validationsDebouncedMixins],
@@ -106,12 +116,18 @@ export default ({
         bio: attrsCopy.bio
       },
       config: {
-        bioMaxChar: IDENTITY_BIO_MAX_CHARS
+        bioMaxChar: IDENTITY_BIO_MAX_CHARS,
+        displayNameMaxChar: IDENTITY_USERNAME_MAX_CHARS
       }
     }
   },
   validations: {
     form: {
+      displayName: {
+        [L('Reached character limit.')]: (value) => {
+          return !value || Number(value.length) <= IDENTITY_USERNAME_MAX_CHARS
+        }
+      },
       bio: {
         [L('Reached character limit.')]: (value) => {
           return !value || Number(value.length) <= IDENTITY_BIO_MAX_CHARS
@@ -186,6 +202,7 @@ export default ({
   }
 }
 
+.c-display-name-label-container,
 .c-bio-label-container {
   display: flex;
   align-items: flex-end;