feat(profile): set a display name and greet with it on the dashboard

Settings: new Profil card with display name and Steam ID. Registration: optional display name. The dashboard falls back to the email prefix when no display name is set.

src/utils/validation.js

@@ -22,6 +22,17 @@ const steamIdField = z
     .min(1, 'VALIDATION.STEAM_ID_REQUIRED')
     .regex(/^\d{17}$/, 'VALIDATION.STEAM_ID_INVALID');
 
+// Same rule as the Auth service: 3-24 letters, digits, space, _ . - and no space at the ends.
+// An empty field means "no display name" and is sent as null.
+const displayNameField = z
+    .string()
+    .trim()
+    .optional()
+    .transform((v) => (v ? v : null))
+    .refine((v) => v === null || /^[\p{L}\p{N}_.-][\p{L}\p{N} _.-]{1,22}[\p{L}\p{N}_.-]$/u.test(v), {
+        message: 'VALIDATION.DISPLAY_NAME_INVALID',
+    });
+
 export const registrationSchema = z
     .object({
         email: emailField,
@@ -29,6 +40,7 @@ export const registrationSchema = z
         passwordConfirmation: z.string().min(1, 'VALIDATION.PASSWORD_CONFIRMATION_REQUIRED'),
         inviteCode: inviteCodeField,
         steamId: steamIdField,
+        displayName: displayNameField,
     })
     .refine((d) => d.password === d.passwordConfirmation, {
         path: ['passwordConfirmation'],
@@ -39,4 +51,5 @@ export const settingsSchema = z.object({
     useDarkTheme: z.boolean(),
     language: z.enum(['en', 'de'], {message: 'VALIDATION.LANGUAGE_INVALID'}),
     steamId: steamIdField,
+    displayName: displayNameField,
 });