[#415] Ligretto: fix username validation (#416)

apps/auth-front/src/pages/profile/ProfilePage.tsx

@@ -12,6 +12,7 @@ import { AvatarDropzone } from '../../components/AvatarDropzone'
 import type { ProfileFormValues } from './ProfilePage.types'
 import { useCasServices } from '../../modules/cas-services'
 import { useProfileRequest } from './useProfileRequest'
+import { useProfileValidation } from './useProfileValidation'
 
 interface ProfilePageProps {
   onLoginSucceeded: ({ token }: { token: string }) => void
@@ -54,13 +55,16 @@ export const ProfilePage = memo<ProfilePageProps>(({ onLoginSucceeded }) => {
     [profile, avatar, onLoginSucceeded, updateUserProfileService],
   )
 
+  const validate = useProfileValidation()
+
   return !isProfileLoading ? (
     <Container component="main" maxWidth="xs">
       <Header />
       <Form<ProfileFormValues>
         onSubmit={handleSubmit}
+        validate={validate}
         initialValues={initialValues}
-        render={({ handleSubmit, submitError }) => (
+        render={({ handleSubmit, submitError, hasValidationErrors }) => (
           <form onSubmit={handleSubmit}>
             <Paper>
               <AvatarDropzone avatarUrl={getAbsoluteUrl(profile?.avatarUrl || '')} onChange={setAvatar} />
@@ -82,14 +86,14 @@ export const ProfilePage = memo<ProfilePageProps>(({ onLoginSucceeded }) => {
                     id="username"
                     label={t.profile.username}
                     name="username"
-                    error={!meta.modifiedSinceLastSubmit && Boolean(meta.error || meta.submitError)}
-                    helperText={!meta.modifiedSinceLastSubmit && meta.submitError}
+                    error={meta.error || (!meta.modifiedSinceLastSubmit && meta.submitError)}
+                    helperText={meta.error || (!meta.modifiedSinceLastSubmit && meta.submitError)}
                   />
                 )}
               />
               {submitError}
               <br />
-              <Button type="submit" fullWidth variant="contained" color="primary" size="large">
+              <Button type="submit" fullWidth variant="contained" color="primary" size="large" disabled={hasValidationErrors}>
                 {t.profile.save}
               </Button>
             </Paper>

apps/auth-front/src/pages/profile/ProfilePage.types.ts

@@ -9,3 +9,7 @@ export type ProfileFormSubmissionError = Partial<{
   username: string
   [FORM_ERROR]: string
 }>
+
+export type ProfileFormValidationErrors = Partial<{
+  username: string
+}>

apps/auth-front/src/pages/profile/useProfileValidation.ts

@@ -0,0 +1,19 @@
+import type { ProfileFormValidationErrors, ProfileFormValues } from './ProfilePage.types'
+import { useCallback } from 'react'
+import { t } from '../../utils/i18n'
+import { stringLengthInRange } from '../../utils/stringLengthInRange'
+
+const USERNAME_MIN_LENGTH = 2
+const USERNAME_MAX_LENGTH = 20
+
+export const useProfileValidation = () =>
+  useCallback((values: ProfileFormValues): ProfileFormValidationErrors => {
+    const errors: ProfileFormValidationErrors = {}
+    const isValidUsername = stringLengthInRange(values.username, { minLength: USERNAME_MIN_LENGTH, maxLength: USERNAME_MAX_LENGTH })
+
+    if (values.username && !isValidUsername) {
+      errors.username = t.validation.username(USERNAME_MIN_LENGTH, USERNAME_MAX_LENGTH)
+    }
+
+    return errors
+  }, [])