From ba4b3304de5c310993d040685cc5d9f645deb5a1 Mon Sep 17 00:00:00 2001
From: margo <67325499+margo-yunanova@users.noreply.github.com>
Date: Mon, 28 Aug 2023 23:37:18 +0300
Subject: [PATCH] [#415] Ligretto: fix username validation (#416)

---
 .../src/pages/profile/ProfilePage.tsx         | 12 ++++++++----
 .../src/pages/profile/ProfilePage.types.ts    |  4 ++++
 .../src/pages/profile/useProfileValidation.ts | 19 +++++++++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 apps/auth-front/src/pages/profile/useProfileValidation.ts

diff --git a/apps/auth-front/src/pages/profile/ProfilePage.tsx b/apps/auth-front/src/pages/profile/ProfilePage.tsx
index 204329a0..21cd3025 100644
--- a/apps/auth-front/src/pages/profile/ProfilePage.tsx
+++ b/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>
diff --git a/apps/auth-front/src/pages/profile/ProfilePage.types.ts b/apps/auth-front/src/pages/profile/ProfilePage.types.ts
index fb3c6fd7..9996e031 100644
--- a/apps/auth-front/src/pages/profile/ProfilePage.types.ts
+++ b/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
+}>
diff --git a/apps/auth-front/src/pages/profile/useProfileValidation.ts b/apps/auth-front/src/pages/profile/useProfileValidation.ts
new file mode 100644
index 00000000..2a8d8ad5
--- /dev/null
+++ b/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
+  }, [])