Merge branch 'refactor/register-form' of https://github.com/BesLogic/…

…releaf-canopeum into refactor/register-form
BesLogic · Dec 17, 2024 · c02d395 · c02d395
2 parents 3446d7d + db8f205
commit c02d395
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/canopeum_backend/pyproject.toml b/canopeum_backend/pyproject.toml
@@ -34,10 +34,6 @@ dev = [
   "types-jsonschema",
 ]
 
-[tool.pyright]
-venvPath = "."
-venv = ".venv"
-
 # https://mypy.readthedocs.io/en/stable/config_file.html
 [tool.mypy]
 show_column_numbers = true

diff --git a/canopeum_frontend/src/constants/style.ts b/canopeum_frontend/src/constants/style.ts
@@ -0,0 +1,5 @@
+const invalidFieldClass = 'is-invalid'
+
+export const formClasses = {
+  invalidFieldClass,
+}
diff --git a/canopeum_frontend/src/pages/Register.tsx b/canopeum_frontend/src/pages/Register.tsx
@@ -7,13 +7,14 @@ import { Link, useSearchParams } from 'react-router-dom'
 import AuthPageLayout from '@components/auth/AuthPageLayout'
 import { AuthenticationContext } from '@components/context/AuthenticationContext'
 import { appRoutes } from '@constants/routes.constant'
+import { formClasses } from '@constants/style'
 import useApiClient from '@hooks/ApiClientHook'
 import type { UserInvitation } from '@services/api'
 import { RegisterUser } from '@services/api'
 import { storeToken } from '@utils/auth.utils'
-import { passwordRegex } from '@utils/validators'
+import { emailRegex, passwordRegex } from '@utils/validators'
 
-type RegisterInputs = {
+type RegisterFormInputs = {
   username: string,
   email: string,
   password: string,
@@ -37,15 +38,15 @@ const Register = () => {
     handleSubmit,
     formState: { errors, touchedFields },
     setValue,
-  } = useForm<RegisterInputs>({ mode: 'onTouched' })
-  const onSubmit: SubmitHandler<RegisterInputs> = async data => {
+  } = useForm<RegisterFormInputs>({ mode: 'onTouched' })
+  const onSubmit: SubmitHandler<RegisterFormInputs> = async formData => {
     try {
       const response = await getApiClient().authenticationClient.register(
         new RegisterUser({
-          email: data.email.trim(),
-          username: data.username.trim(),
-          password: data.password,
-          passwordConfirmation: data.confirmPassword,
+          email: formData.email.trim(),
+          username: formData.username.trim(),
+          password: formData.password,
+          passwordConfirmation: formData.confirmPassword,
           code: userInvitation?.code,
         }),
       )
@@ -60,8 +61,6 @@ const Register = () => {
     }
   }
 
-  const invalidFieldClass = 'is-invalid'
-
   const fetchUserInvitation = useCallback(
     async (code: string) => {
       try {
@@ -111,7 +110,7 @@ const Register = () => {
               aria-describedby='emailHelp'
               className={`form-control ${
                 touchedFields.username && errors.username
-                  ? invalidFieldClass
+                  ? formClasses.invalidFieldClass
                   : ''
               }`}
               {...register('username', {
@@ -130,14 +129,15 @@ const Register = () => {
               aria-describedby='email'
               className={`form-control ${
                 touchedFields.email && errors.email
-                  ? invalidFieldClass
+                  ? formClasses.invalidFieldClass
                   : ''
               }`}
               disabled={!!userInvitation}
               id='email'
               type='email'
               {...register('email', {
                 required: { value: true, message: translate('auth.email-error-required') },
+                pattern: { value: emailRegex, message: translate('auth.email-error-format') },
               })}
             />
             {errors.email && (
@@ -151,7 +151,7 @@ const Register = () => {
             <input
               className={`form-control ${
                 touchedFields.password && errors.password
-                  ? invalidFieldClass
+                  ? formClasses.invalidFieldClass
                   : ''
               }`}
               id='password-input'
@@ -174,7 +174,7 @@ const Register = () => {
             <input
               className={`form-control ${
                 touchedFields.confirmPassword && errors.confirmPassword
-                  ? invalidFieldClass
+                  ? formClasses.invalidFieldClass
                   : ''
               }`}
               id='confirmation-password-input'

diff --git a/canopeum_frontend/src/utils/validators.ts b/canopeum_frontend/src/utils/validators.ts
@@ -1,8 +1,8 @@
-export const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[\d!#$%&*.?@A-Za-z]{8,}$/u
+export const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.{8}).+$/u
 
 export const isValidPassword = (input: string) => new RegExp(passwordRegex).test(input)
 
-const emailRegex = /^[^@]+@[^@][^.@]*\.[^@]+$/u
+export const emailRegex = /^[^@]+@[^@][^.@]*\.[^@]+$/u
 
 export const isValidEmail = (input: string) => new RegExp(emailRegex).test(input)