fix: standardize check for username length (3-32 characters)

Author: Bentroen

shared/validation/user/constants.ts

@@ -0,0 +1,6 @@
+import { deepFreeze } from '../common/deepFreeze';
+
+export const UserConst = deepFreeze({
+  USERNAME_MIN_LENGTH: 3,
+  USERNAME_MAX_LENGTH: 32,
+});

shared/validation/user/dto/UpdateUsername.dto.ts

@@ -1,10 +1,11 @@
 import { ApiProperty } from '@nestjs/swagger';
 import { IsString, IsNotEmpty, MinLength, MaxLength } from 'class-validator';
+import { UserConst } from '../constants';
 
 export class UpdateUsernameDto {
   @IsString()
-  @MaxLength(64)
-  @MinLength(3)
+  @MaxLength(UserConst.USERNAME_MAX_LENGTH)
+  @MinLength(UserConst.USERNAME_MIN_LENGTH)
   @ApiProperty({
     description: 'Username of the user',
     example: 'tomast1137',

web/src/modules/shared/components/layout/UserMenu.tsx

@@ -23,6 +23,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import ClientAxios from '@web/src/lib/axios/ClientAxios';
 import { AxiosError } from 'axios';
 import toast from 'react-hot-toast';
+import { UserConst } from '@shared/validation/user/constants';
 
 interface FormValues {
   username: string;
@@ -141,10 +142,18 @@ export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
                         {...register('username', {
                           required: 'Username is required',
                           pattern: {
-                            value: /^[a-zA-Z0-9-_.]{1,32}$/,
+                            value: /^[a-zA-Z0-9-_.]*$/,
                             message:
                               'Your username may only contain these characters: A-Z a-z 0-9 - _ .',
                           },
+                          maxLength: {
+                            value: UserConst.USERNAME_MAX_LENGTH,
+                            message: `The username must be shorter than ${UserConst.USERNAME_MAX_LENGTH} characters`,
+                          },
+                          minLength: {
+                            value: UserConst.USERNAME_MIN_LENGTH,
+                            message: `The username must have at least ${UserConst.USERNAME_MIN_LENGTH} characters`,
+                          },
                         })}
                       />
                       <button