F: Rework signup form using react-hook-form and zod

2025-02-03 13:13:11 +03:00 · 2025-02-03 13:13:11 +03:00 · 9aa23aedfb
commit 9aa23aedfb
parent 18979dbaa3
7 changed files with 84 additions and 74 deletions
--- a/rsconcept/frontend/src/backend/auth/api.ts
+++ b/rsconcept/frontend/src/backend/auth/api.ts
@ -4,14 +4,14 @@ import { z } from 'zod';
 import { axiosGet, axiosPost } from '@/backend/apiTransport';
 import { DELAYS } from '@/backend/configuration';
 import { ICurrentUser } from '@/models/user';
-import { information } from '@/utils/labels';
+import { errors, information } from '@/utils/labels';

 /**
 * Represents login data, used to authenticate users.
 */
 export const UserLoginSchema = z.object({
-  username: z.string().nonempty('Поле логина обязательно для заполнения'),
-  password: z.string().nonempty('Поле пароля обязательно для заполнения')
+  username: z.string().nonempty(errors.requiredField),
+  password: z.string().nonempty(errors.requiredField)
 });

 /**
--- a/rsconcept/frontend/src/backend/users/api.ts
+++ b/rsconcept/frontend/src/backend/users/api.ts
@ -1,22 +1,41 @@
 import { queryOptions } from '@tanstack/react-query';
+import { z } from 'zod';

 import { axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
 import { DELAYS } from '@/backend/configuration';
-import { IUser, IUserInfo, IUserProfile } from '@/models/user';
-import { information } from '@/utils/labels';
+import { IUserInfo, IUserProfile } from '@/models/user';
+import { patterns } from '@/utils/constants';
+import { errors, information } from '@/utils/labels';

 /**
 * Represents signup data, used to create new users.
 */
-export interface IUserSignupData extends Omit<IUser, 'is_staff' | 'id'> {
-  password: string;
-  password2: string;
-}
+export const UserSignupSchema = z
+  .object({
+    username: z.string().nonempty(errors.requiredField).regex(RegExp(patterns.login), errors.loginFormat),
+    email: z.string().email(errors.emailField),
+    first_name: z.string(),
+    last_name: z.string(),
+
+    password: z.string().nonempty(errors.requiredField),
+    password2: z.string().nonempty(errors.requiredField)
+  })
+  .refine(schema => schema.password === schema.password2, { path: ['password2'], message: errors.passwordsMismatch });
+
+/**
+ * Represents signup data, used to create new users.
+ */
+export type IUserSignupDTO = z.infer<typeof UserSignupSchema>;

 /**
 * Represents user data, intended to update user profile in persistent storage.
 */
-export interface IUpdateProfileDTO extends Omit<IUser, 'is_staff' | 'id'> {}
+export interface IUpdateProfileDTO {
+  username: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+}

 export const usersApi = {
  baseKey: 'users',
@ -41,8 +60,8 @@ export const usersApi = {
        })
    }),

-  signup: (data: IUserSignupData) =>
-    axiosPost<IUserSignupData, IUserProfile>({
+  signup: (data: IUserSignupDTO) =>
+    axiosPost<IUserSignupDTO, IUserProfile>({
      endpoint: '/users/api/signup',
      request: {
        data: data,
--- a/rsconcept/frontend/src/backend/users/useSignup.tsx
+++ b/rsconcept/frontend/src/backend/users/useSignup.tsx
@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';

 import { DataCallback } from '@/backend/apiTransport';
-import { IUserSignupData, usersApi } from '@/backend/users/api';
+import { IUserSignupDTO, usersApi } from '@/backend/users/api';
 import { IUserProfile } from '@/models/user';

 export const useSignup = () => {
@ -13,7 +13,7 @@ export const useSignup = () => {
  });
  return {
    signup: (
-      data: IUserSignupData, //
+      data: IUserSignupDTO, //
      onSuccess?: DataCallback<IUserProfile>
    ) => mutation.mutate(data, { onSuccess }),
    isPending: mutation.isPending,
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@ -12,7 +12,7 @@ export interface CheckboxProps extends Omit<CProps.Button, 'value' | 'onClick'>
  disabled?: boolean;

  /** Current value - `true` or `false`. */
-  value: boolean;
+  value?: boolean;

  /** Callback to set the `value`. */
  setValue?: (newValue: boolean) => void;
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@ -77,7 +77,7 @@ function LoginPage() {
        id='username'
        autoComplete='username'
        label='Логин или email'
-        {...register('username', { required: true })}
+        {...register('username')}
        autoFocus
        allowEnter
        spellCheck={false}
@ -86,7 +86,7 @@ function LoginPage() {
      />
      <TextInput
        id='password'
-        {...register('password', { required: true })}
+        {...register('password')}
        type='password'
        autoComplete='current-password'
        label='Пароль'
--- a/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage/FormSignup.tsx
@ -1,11 +1,14 @@
 'use client';

+import { zodResolver } from '@hookform/resolvers/zod';
 import axios from 'axios';
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';

 import { useConceptNavigation } from '@/app/Navigation/NavigationContext';
 import { urls } from '@/app/urls';
+import { IUserSignupDTO, UserSignupSchema } from '@/backend/users/api';
 import { useSignup } from '@/backend/users/useSignup';
 import { IconHelp } from '@/components/Icons';
 import { ErrorData } from '@/components/info/InfoError';
@ -23,23 +26,25 @@ import { globals, patterns } from '@/utils/constants';

 function FormSignup() {
  const router = useConceptNavigation();
-  const { signup, isPending, error, reset } = useSignup();
-
-  const [username, setUsername] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [password2, setPassword2] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-
+  const { signup, isPending, error: serverError, reset } = useSignup();
  const [acceptPrivacy, setAcceptPrivacy] = useState(false);
  const [acceptRules, setAcceptRules] = useState(false);

-  // const isValid = acceptPrivacy && acceptRules && !!email && !!username;
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    formState: { errors }
+  } = useForm<IUserSignupDTO>({
+    resolver: zodResolver(UserSignupSchema)
+  });

-  useEffect(() => {
+  const isValid = acceptPrivacy && acceptRules;
+
+  function resetErrors() {
    reset();
-  }, [username, email, password, password2, reset]);
+    clearErrors();
+  }

  function handleCancel() {
    if (router.canBack()) {
@ -49,25 +54,15 @@ function FormSignup() {
    }
  }

-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (isPending) {
-      return;
-    }
-    signup(
-      {
-        username,
-        email,
-        password,
-        password2,
-        first_name: firstName,
-        last_name: lastName
-      },
-      createdUser => router.push(urls.login_hint(createdUser.username))
-    );
+  function onSubmit(data: IUserSignupDTO) {
+    signup(data, createdUser => router.push(urls.login_hint(createdUser.username)));
  }
  return (
-    <form className={clsx('cc-fade-in cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
+    <form
+      className={clsx('cc-fade-in cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')}
+      onSubmit={event => void handleSubmit(onSubmit)(event)}
+      onChange={resetErrors}
+    >
      <h1>
        <span>Новый пользователь</span>
        <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
@ -87,68 +82,59 @@ function FormSignup() {
        <FlexColumn>
          <TextInput
            id='username'
-            name='username'
+            {...register('username')}
            autoComplete='username'
-            required
            label='Имя пользователя (логин)'
            spellCheck={false}
            pattern={patterns.login}
            title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
-            value={username}
            className='w-[15rem]'
-            onChange={event => setUsername(event.target.value)}
+            error={errors.username}
          />
          <TextInput
            id='password'
            type='password'
-            name='password'
+            {...register('password')}
            autoComplete='new-password'
-            required
            label='Пароль'
            className='w-[15rem]'
-            value={password}
-            onChange={event => setPassword(event.target.value)}
+            error={errors.password}
          />
          <TextInput
            id='password2'
            type='password'
-            name='password2'
+            {...register('password2')}
            label='Повторите пароль'
            autoComplete='new-password'
-            required
            className='w-[15rem]'
-            value={password2}
-            onChange={event => setPassword2(event.target.value)}
+            error={errors.password2}
          />
        </FlexColumn>

        <FlexColumn className='w-[15rem]'>
          <TextInput
            id='email'
-            name='email'
+            {...register('email')}
            autoComplete='email'
            required
            spellCheck={false}
            label='Электронная почта (email)'
            title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
-            value={email}
-            onChange={event => setEmail(event.target.value)}
+            error={errors.email}
          />
          <TextInput
            id='first_name'
-            name='first_name'
+            {...register('first_name')}
            label='Отображаемое имя'
            autoComplete='given-name'
-            value={firstName}
-            onChange={event => setFirstName(event.target.value)}
+            error={errors.first_name}
          />
          <TextInput
            id='last_name'
-            name='last_name'
+            {...register('last_name')}
            label='Отображаемая фамилия'
            autoComplete='family-name'
-            value={lastName}
-            onChange={event => setLastName(event.target.value)}
+            error={errors.last_name}
          />
        </FlexColumn>
      </div>
@ -163,10 +149,10 @@ function FormSignup() {
      </div>

      <div className='flex justify-around my-3'>
-        <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={isPending} />
+        <SubmitButton text='Регистрировать' className='min-w-[10rem]' loading={isPending || !isValid} />
        <Button text='Назад' className='min-w-[10rem]' onClick={() => handleCancel()} />
      </div>
-      {error ? <ProcessError error={error} /> : null}
+      {serverError ? <ServerError error={serverError} /> : null}
    </form>
  );
 }
@ -174,17 +160,17 @@ function FormSignup() {
 export default FormSignup;

 // ====== Internals =========
-function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
+function ServerError({ error }: { error: ErrorData }): React.ReactElement {
  if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
    if ('email' in error.response.data) {
      return (
        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.email}.</div>
+        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.email}</div>
      );
    } else if ('username' in error.response.data) {
      return (
        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.username}.</div>
+        <div className='mx-auto text-sm select-text text-warn-600'>{error.response.data.username}</div>
      );
    } else {
      return (
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@ -985,7 +985,12 @@ export const errors = {
  imageFailed: 'Ошибка при создании изображения',
  reuseOriginal: 'Повторное использование удаляемой конституенты при отождествлении',
  substituteInherited: 'Нельзя удалять наследованные конституенты при отождествлении',
-  inputAlreadyExists: 'Концептуальная схема с таким именем уже существует'
+  inputAlreadyExists: 'Концептуальная схема с таким именем уже существует',
+  requiredField: 'Поле обязательно для заполнения',
+  emailField: 'Введите корректный адрес электронной почты',
+  rulesNotAccepted: 'Примите условия пользования Порталом',
+  privacyNotAccepted: 'Примите политику обработки персональных данных',
+  loginFormat: 'Имя пользователя должно содержать только буквы и цифры'
 };

 /**