Forbid creating usernames with uppercase characters

We don't actually enforce anything on the ActivityPub level, only
user-facing interfaces

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/i18n/en_US.json

@@ -231,7 +231,7 @@
   "On {date} starting at {startTime}": "On {date} starting at {startTime}",
   "On {date}": "On {date}",
   "Only accessible through link (private)": "Only accessible through link (private)",
-  "Only alphanumeric characters and underscores are supported.": "Only alphanumeric characters and underscores are supported.",
+  "Only alphanumeric lowercased characters and underscores are supported.": "Only alphanumeric lowercased characters and underscores are supported.",
   "Open": "Open",
   "Opened reports": "Opened reports",
   "Or": "Or",

js/src/i18n/fr_FR.json

@@ -480,7 +480,7 @@
   "Only accessible through link": "Accessible uniquement par le lien",
   "Only accessible through link (private)": "Uniquement accessible par lien (privé)",
   "Only accessible to members of the group": "Accessible uniquement aux membres du groupe",
-  "Only alphanumeric characters and underscores are supported.": "Seuls les caractères alphanumériques et les tirets bas sont acceptés.",
+  "Only alphanumeric lowercased characters and underscores are supported.": "Seuls les caractères alphanumériques minuscules et les tirets bas sont acceptés.",
   "Only group moderators can create, edit and delete posts.": "Seul·e·s les modérateur·rice·s du groupe peuvent créer, éditer et supprimer des billets.",
   "Open": "Ouvert",
   "Opened reports": "Signalements ouverts",

js/src/views/Account/Register.vue

@@ -26,12 +26,21 @@
             :type="errors.preferred_username ? 'is-danger' : null"
             :message="errors.preferred_username"
           >
-            <b-field>
+            <b-field
+              :message="
+                $t('Only alphanumeric lowercased characters and underscores are supported.')
+              "
+            >
               <b-input
                 aria-required="true"
                 required
                 expanded
                 v-model="identity.preferredUsername"
+                :validation-message="
+                  identity.preferredUsername
+                    ? $t('Only alphanumeric lowercased characters and underscores are supported.')
+                    : null
+                "
               />
               <p class="control">
                 <span class="button is-static">@{{ host }}</span>
@@ -164,7 +173,7 @@ export default class Register extends mixins(identityEditionMixin) {
     } catch (errorCatched) {
       this.errors = errorCatched.graphQLErrors.reduce(
         (acc: { [key: string]: string }, error: any) => {
-          acc[error.details] = error.message;
+          acc[error.details || error.field] = error.message;
           return acc;
         },
         {}

js/src/views/Account/children/EditIdentity.vue

@@ -181,7 +181,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
 
   get message(): string | null {
     if (this.isUpdate) return null;
-    return this.$t("Only alphanumeric characters and underscores are supported.") as string;
+    return this.$t(
+      "Only alphanumeric lowercased characters and underscores are supported."
+    ) as string;
   }
 
   get avatarUrl(): string | null {

js/src/views/Group/Create.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="section container">
-    <h1>{{ $t("Create a new group") }}</h1>
+    <h1 class="title">{{ $t("Create a new group") }}</h1>
 
     <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
       {{ value }}
@@ -14,8 +14,23 @@
       <div class="field">
         <label class="label">{{ $t("Federated Group Name") }}</label>
         <div class="field-body">
-          <b-field>
-            <b-input aria-required="true" required expanded v-model="group.preferredUsername" />
+          <b-field
+            :message="$t('Only alphanumeric lowercased characters and underscores are supported.')"
+          >
+            <b-input
+              ref="preferredUsernameInput"
+              aria-required="true"
+              required
+              expanded
+              v-model="group.preferredUsername"
+              pattern="[a-z0-9_]+"
+              :useHtml5Validation="true"
+              :validation-message="
+                group.preferredUsername
+                  ? $t('Only alphanumeric lowercased characters and underscores are supported.')
+                  : null
+              "
+            />
             <p class="control">
               <span class="button is-static">@{{ host }}</span>
             </p>
@@ -36,12 +51,12 @@
       </b-field>
 
       <div>
-        {{ $t("Avatar") }}
+        <b>{{ $t("Avatar") }}</b>
         <picture-upload :textFallback="$t('Avatar')" v-model="avatarFile" />
       </div>
 
       <div>
-        {{ $t("Banner") }}
+        <b>{{ $t("Banner") }}</b>
         <picture-upload :textFallback="$t('Banner')" v-model="bannerFile" />
       </div>