more username validation rules

frontend/src/components/Inputs/InputUsername.vue

@@ -35,7 +35,7 @@
 </template>
 <script>
 export default {
-  name: 'InputPassword',
+  name: 'InputUsername',
   props: {
     rules: {
       default: () => {
@@ -43,6 +43,8 @@ export default {
           required: true,
           min: 3,
           max: 20,
+          usernameAllowedChars: true,
+          usernameHyphens: true,
         }
       },
     },

frontend/src/components/UserSettings/UserName.vue

@@ -37,6 +37,7 @@
                 v-model="username"
                 :name="$t('form.username')"
                 :placeholder="$t('form.username-placeholder')"
+                :showAllErrors="true"
               />
             </b-col>
           </b-row>

frontend/src/locales/de.json

@@ -172,7 +172,8 @@
       "gddCreationTime": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens einer Nachkommastelle sein",
       "gddSendAmount": "Das Feld {_field_} muss eine Zahl zwischen {min} und {max} mit höchstens zwei Nachkommastellen sein",
       "is-not": "Du kannst dir selbst keine Gradidos überweisen",
-      "usernmae-regex": "Der Username muss mit einem Buchstaben beginnen, auf den mindestens zwei alpha-numerische Zeichen folgen müssen.",
+      "usernmae-allowed-chars": "Der Nutzername darf nur aus Buchstaben (ohne Umlaute), Zahlen, Binde - oder Unterstrichen bestehen.",
+      "usernmae-hyphens": "Binde- oder Unterstriche müssen zwischen Buchstaben oder Zahlen stehen.",
       "usernmae-unique": "Der Username ist bereits vergeben."
     },
     "your_amount": "Dein Betrag"

frontend/src/locales/en.json

@@ -172,7 +172,8 @@
       "gddCreationTime": "The field {_field_} must be a number between {min} and {max} with at most one decimal place.",
       "gddSendAmount": "The {_field_} field must be a number between {min} and {max} with at most two digits after the decimal point",
       "is-not": "You cannot send Gradidos to yourself",
-      "usernmae-regex": "The username must start with a letter, followed by at least two alphanumeric characters.",
+      "usernmae-allowed-chars": "The username may online contain letters, numbers, hyphens or underscores.",
+      "usernmae-hyphens": "Hyphens or underscored must be in between letters or numbers.",
       "usernmae-unique": "This username is already taken."
     },
     "your_amount": "Your amount"

frontend/src/validation-rules.js

@@ -123,4 +123,18 @@ export const loadAllRules = (i18nCallback) => {
     },
     message: (_, values) => i18nCallback.t('site.signup.dont_match', values),
   })
+
+  extend('usernameAllowedChars', {
+    validate(value) {
+      return !!value.match(/^[a-zA-Z0-9_-]+$/)
+    },
+    message: (_, values) => i18nCallback.t('form.validation.usernmae-allowed-chars', values),
+  })
+
+  extend('usernameHyphens', {
+    validate(value) {
+      return !!value.match(/^[a-zA-Z0-9]+(?:[_-][a-zA-Z0-9])*$/)
+    },
+    message: (_, values) => i18nCallback.t('form.validation.usernmae-hyphens', values),
+  })
 }