fix regExpForEmail, add clsx for classNames, fix inputs

package.json

@@ -12,6 +12,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
+    "clsx": "^2.1.1",
     "firebase": "^10.12.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -20,6 +21,7 @@
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "sonner": "^1.5.0",
+    "tailwind-merge": "^2.3.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

src/pages/Profile/Profile.tsx

@@ -24,7 +24,7 @@ const Profile = () => {
   const dispatch = useAppDispatch()
 
   const onSubmit: SubmitHandler<FieldValues> = async (data) => {
-    if (data.email.length < 1 && data.password.length < 1)
+    if (data.email.trim().length < 1 && data.password.trim().length < 1)
       return toast.warning('Заполните хотя бы одно поле')
     if (!idToken) return redirect('/sign-in')
     dispatch(

src/pages/SignIn/SignIn.tsx

@@ -7,6 +7,7 @@ import Button from '../../shared/ui/Button'
 import Input from '../../shared/ui/Input'
 import { signIn } from '../../shared/store/slices/authSlice'
 import { useAppDispatch, useAppSelector } from '../../shared/hooks'
+import { regExpForEmail } from '../../shared/constants'
 
 const SignIn = () => {
   const {
@@ -57,7 +58,7 @@ const SignIn = () => {
               error={errors.email}
               {...register('email', {
                 required: 'Поле обязательно для заполнения',
-                pattern: { value: /^\S+@\S+$/i, message: 'Некорректный email' },
+                pattern: { value: regExpForEmail, message: 'Некорректный email' },
               })}
             />
             <Input

src/pages/SignUp/SignUp.tsx

@@ -7,6 +7,7 @@ import Input from '../../shared/ui/Input'
 import LayoutForm from '../LayoutForm'
 import { signUp } from '../../shared/store/slices/authSlice'
 import { useAppDispatch, useAppSelector } from '../../shared/hooks'
+import { regExpForEmail } from '../../shared/constants'
 
 const SignUp = () => {
   const {
@@ -56,23 +57,43 @@ const SignUp = () => {
               placeholder="Введите ваш email"
               inputValue={watch('email')}
               error={errors.email}
-              {...register('email')}
+              {...register('email', {
+                required: 'Поле обязательно для заполнения',
+                pattern: {
+                  value: regExpForEmail,
+                  message: 'Некорректный email',
+                },
+              })}
             />
             <Input
               type="password"
               label="Пароль"
               placeholder="Придумайте пароль"
               inputValue={watch('password')}
               error={errors.password}
-              {...register('password')}
+              {...register('password', {
+                required: 'Поле обязательно для заполнения',
+                minLength: {
+                  value: 8,
+                  message: 'Пароль должен содержать не менее 8 символов',
+                },
+              })}
             />
             <Input
               type="password"
               label="Повторите пароль"
               placeholder="Повторите пароль"
               inputValue={watch('repeatPassword')}
               error={errors.repeatPassword}
-              {...register('repeatPassword')}
+              {...register('repeatPassword', {
+                required: 'Поле обязательно для заполнения',
+                minLength: {
+                  value: 8,
+                  message: 'Пароль должен содержать не менее 8 символов',
+                },
+                validate: (value) =>
+                  value === watch('password') || 'Пароли не совпадают',
+              })}
             />
             <Button disabled={isSubmitting} type="submit">
               Зарегистрироваться

src/shared/constants/index.ts

@@ -0,0 +1,3 @@
+const regExpForEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z]{2,}$/
+
+export { regExpForEmail }

src/shared/ui/Button.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { cn } from '../utils'
 
 const Loading = () => {
   return (
@@ -24,11 +25,11 @@ const Button = React.forwardRef<
 >(({ disabled, ...props }, ref) => {
   return (
     <button
-      className={
+      className={cn(
         'flex justify-center rounded-xl bg-green-500 px-5 py-4 font-semibold text-white' +
-        ' ' +
-        `hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-900 ${disabled ? 'cursor-not-allowed' : ''} `
-      }
+          ' ' +
+          `hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-900 ${disabled ? 'cursor-not-allowed' : ''}`
+      )}
       ref={ref}
       {...props}
     >

src/shared/ui/Input.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form'
+import { cn } from '../utils'
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string
@@ -14,7 +15,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <div className="relative">
         <input
           id={props.id}
-          className={`easy-in-out peer h-[56px] w-full rounded-[10px] border py-4 pe-[12px] ps-[14px] transition-all hover:border-green-500 hover:pb-0 hover:pt-5 focus:pb-0 focus:pt-5 ${inputValue && 'pb-0 pt-5'} ${error && 'border-red-400'}`}
+          className={cn(
+            `easy-in-out peer h-[56px] w-full rounded-[10px] border py-4 pe-[12px] ps-[14px]` +
+              ` ` +
+              `transition-all hover:border-green-500 hover:pb-0 hover:pt-5 focus:pb-0 focus:pt-5` +
+              ` ` +
+              ` ${inputValue && 'pb-0 pt-5'} ${error && 'border-red-400'}`
+          )}
           ref={ref}
           onMouseEnter={(e) =>
             e.currentTarget.setAttribute('placeholder', placeholder)
@@ -29,7 +36,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         />
         <label
           htmlFor={props.id}
-          className={`easy-in-out absolute left-[14px] top-[18px] font-semibold text-neutral-400 transition-all peer-hover:top-1.5 peer-hover:text-xs peer-hover:font-normal peer-focus:top-1.5 peer-focus:text-xs peer-focus:font-semibold ${inputValue && 'top-[6px] text-xs font-semibold'}`}
+          className={cn(
+            `easy-in-out absolute left-[14px] top-[18px] font-semibold text-neutral-400` +
+              ` ` +
+              `transition-all peer-hover:top-1.5 peer-hover:text-xs peer-hover:font-normal peer-focus:top-1.5 peer-focus:text-xs peer-focus:font-semibold` +
+              ` ` +
+              `${inputValue && 'top-[6px] text-xs font-semibold'}`
+          )}
         >
           {label}
         </label>

src/shared/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
+
+export { cn }

yarn.lock

@@ -1144,7 +1144,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.24.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz"
   integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
@@ -3899,6 +3899,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -10169,6 +10174,13 @@ symbol-tree@^3.2.4:
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tailwind-merge@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+
 tailwind@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/tailwind/-/tailwind-4.0.0.tgz"