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

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('Поле логина обязательно для заполнения'),
+  username: z.string().nonempty(errors.requiredField),
-  password: z.string().nonempty('Поле пароля обязательно для заполнения')
+  password: z.string().nonempty(errors.requiredField)
 });
 
 /**

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 { IUserInfo, IUserProfile } from '@/models/user';
-import { information } from '@/utils/labels';
+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'> {
+export const UserSignupSchema = z
-  password: string;
+  .object({
-  password2: string;
+    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) =>
+  signup: (data: IUserSignupDTO) =>
-    axiosPost<IUserSignupData, IUserProfile>({
+    axiosPost<IUserSignupDTO, IUserProfile>({
       endpoint: '/users/api/signup',
       request: {
         data: data,

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,

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;

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='Пароль'

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 { signup, isPending, error: serverError, 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 [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>) {
+  function onSubmit(data: IUserSignupDTO) {
-    event.preventDefault();
+    signup(data, createdUser => router.push(urls.login_hint(createdUser.username)));
-    if (isPending) {
-      return;
-    }
-    signup(
-      {
-        username,
-        email,
-        password,
-        password2,
-        first_name: firstName,
-        last_name: lastName
-      },
-      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}
+            error={errors.password}
-            onChange={event => setPassword(event.target.value)}
           />
           <TextInput
             id='password2'
             type='password'
-            name='password2'
+            {...register('password2')}
             label='Повторите пароль'
             autoComplete='new-password'
-            required
             className='w-[15rem]'
-            value={password2}
+            error={errors.password2}
-            onChange={event => setPassword2(event.target.value)}
           />
         </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}
+            error={errors.email}
-            onChange={event => setEmail(event.target.value)}
           />
           <TextInput
             id='first_name'
-            name='first_name'
+            {...register('first_name')}
             label='Отображаемое имя'
             autoComplete='given-name'
-            value={firstName}
+            error={errors.first_name}
-            onChange={event => setFirstName(event.target.value)}
           />
           <TextInput
             id='last_name'
-            name='last_name'
+            {...register('last_name')}
             label='Отображаемая фамилия'
             autoComplete='family-name'
-            value={lastName}
+            error={errors.last_name}
-            onChange={event => setLastName(event.target.value)}
           />
         </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 (

rsconcept/frontend/src/utils/labels.ts

@@ -985,7 +985,12 @@ export const errors = {
   imageFailed: 'Ошибка при создании изображения',
   reuseOriginal: 'Повторное использование удаляемой конституенты при отождествлении',
   substituteInherited: 'Нельзя удалять наследованные конституенты при отождествлении',
-  inputAlreadyExists: 'Концептуальная схема с таким именем уже существует'
+  inputAlreadyExists: 'Концептуальная схема с таким именем уже существует',
+  requiredField: 'Поле обязательно для заполнения',
+  emailField: 'Введите корректный адрес электронной почты',
+  rulesNotAccepted: 'Примите условия пользования Порталом',
+  privacyNotAccepted: 'Примите политику обработки персональных данных',
+  loginFormat: 'Имя пользователя должно содержать только буквы и цифры'
 };
 
 /**