refactor: moved validators form to components folder

src/pages/auth/components/AuthForm/AuthForm.tsx

@@ -15,7 +15,7 @@ import {
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import useLoginQuery from 'hooks/useLoginQuery';
-import LoginSchema from 'validators/LoginSchema';
+import LoginSchema from './AuthForm.validator';
 
 type AuthInputType = {
   login: string;

src/pages/auth/components/AuthForm/AuthForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'validators';
+import yup from 'schema';
 
 const LoginSchema = yup.object().shape({
   login: yup.string().required('Login is required'),

src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.tsx

@@ -8,7 +8,7 @@ import { Text, Input, Button } from '@chakra-ui/react';
 import { FormControl, FormHelperText } from '@chakra-ui/form-control';
 import { yupResolver } from '@hookform/resolvers/yup';
 import useUpdateUserContactsQuery from 'hooks/useUpdateUserContactsQuery';
-import UpdateUserContactsSchema from 'validators/UpdateUserContactsSchema';
+import UpdateUserContactsSchema from './UpdateUserContactsForm.validator';
 
 type UpdateUserContactsInputType = {
   phone_number: string | null;

src/pages/profile/components/UpdateUserContactsForm/UpdateUserContactsForm.validator.ts

@@ -1,4 +1,4 @@
-import yup from 'validators';
+import yup from 'schema';
 
 const UpdateUserContactsSchema = yup.object().shape({
   phone_number: yup

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useRootStore } from 'hooks/useRootStore';
 import { Box, Stack } from '@chakra-ui/layout';
 import { FormControl, FormLabel, FormHelperText } from '@chakra-ui/form-control';
 import { Button } from '@chakra-ui/button';
@@ -6,7 +7,6 @@ import { Input } from '@chakra-ui/input';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import UpdatePasswordSchema from './UpdatePasswordForm.validator';
-import { useRootStore } from 'hooks/useRootStore';
 import { useToast } from '@chakra-ui/toast';
 import { useErrorHandler } from 'react-error-boundary';
 import { ProfilePageViewContext } from 'contexts';
@@ -27,6 +27,7 @@ const UpdatePasswordForm: React.FC = () => {
     handleSubmit,
     register,
     reset,
+    setFocus,
     formState: { errors },
   } = useForm<UpdatePasswordInputType>({
     resolver: yupResolver(UpdatePasswordSchema),
@@ -35,9 +36,9 @@ const UpdatePasswordForm: React.FC = () => {
   const toast = useToast();
   const handleError = useErrorHandler();
 
-  const onSubmit: SubmitHandler<UpdatePasswordInputType> = async data => {
+  const onSubmit: SubmitHandler<UpdatePasswordInputType> = async ({ old_password, new_password, confirm_password }) => {
     try {
-      await userStore.updateCurrentUserPassword(data.old_password, data.new_password);
+      await userStore.updateCurrentUserPassword(old_password, new_password);
       toast({ title: 'Password changed.', status: 'success' });
       reset();
       setStatusPageView(undefined);
@@ -45,6 +46,10 @@ const UpdatePasswordForm: React.FC = () => {
       if (error.response) {
         if (error.response.status === 401) {
           toast({ title: 'Invalid current password.', status: 'error', duration: 2000 });
+          reset({ old_password: '', new_password, confirm_password });
+          setFocus('old_password');
+        } else {
+          handleError(error);
         }
       } else {
         handleError(error);
@@ -79,7 +84,7 @@ const UpdatePasswordForm: React.FC = () => {
               {...register('new_password')}
             />
             <FormHelperText color={errors.new_password ? 'red' : 'gray.500'}>
-              Must be at least 6 characters.
+              {errors.new_password ? errors.new_password.message : 'Must be at least 6 characters.'}
             </FormHelperText>
           </FormControl>
           <FormControl id='confirm_password' isRequired>
@@ -93,7 +98,7 @@ const UpdatePasswordForm: React.FC = () => {
               {...register('confirm_password')}
             />
             <FormHelperText color={errors.confirm_password ? 'red' : 'gray.500'}>
-              Both passwords must match.
+              {errors.confirm_password ? errors.confirm_password.message : 'Both passwords must match.'}
             </FormHelperText>
           </FormControl>
         </Stack>

src/pages/profile/containers/UpdatePasswordContainer/UpdatePasswordForm/UpdatePasswordForm.validator.ts

@@ -1,8 +1,14 @@
-import yup from 'validators';
+import yup from 'schema';
 
 const UpdatePasswordSchema = yup.object().shape({
   old_password: yup.string().required('Old password is required'),
-  new_password: yup.string().required('New password is required').min(6, 'Password bust be at least 6 characters.'),
+  new_password: yup
+    .string()
+    .required('New password is required')
+    .min(6, 'Password must be at least 6 characters.')
+    .test('password-unique', 'Password must be different from the old one.', function (value) {
+      return this.parent.old_password !== value;
+    }),
   confirm_password: yup
     .string()
     .required('Confirm password is required')