add .

Tatyana-js · Feb 4, 2025 · e8e68fb · e8e68fb
1 parent 5dfe5e5
commit e8e68fb
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 41 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -26,7 +26,7 @@ const App = () => {
               )} 
             />
             <Route path={router.login()} element={<LoginPage />} />
-            <Route path={router.signUpPath()} element={<Registration />} />
+            <Route path={router.signUp()} element={<Registration />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </AuthProvider>

diff --git a/frontend/src/api/chatApi.js b/frontend/src/api/chatApi.js
@@ -14,13 +14,6 @@ export const chatApi = createApi({
     }
   }),
   endpoints: (builder) => ({
-    createUser: builder.mutation ({
-      query: (user) => ({
-        url: '/signup',
-        metod: 'POST',
-        body: user,
-      }),
-    }),
     getChannels: builder.query({ // Каналы
       query: () => '/channels',
       providesTags: ['Channels'],
@@ -79,7 +72,6 @@ export const chatApi = createApi({
 });
 
 export const {
-  useCreateUserMutation,
   useGetChannelsQuery,
   useGetMessagesQuery,
   useAddChannelMutation,

diff --git a/frontend/src/components/MessageField.jsx b/frontend/src/components/MessageField.jsx
@@ -19,7 +19,7 @@ const MessageField = () => {
 
   useEffect(() => {
     messagesEl.current.scrollTop = messagesEl.current.scrollHeight;
-  }, [ messagesOfChannel]);
+  }, [messagesOfChannel]);
 
   return (
     <div className="d-flex flex-column h-100">

diff --git a/frontend/src/init.jsx b/frontend/src/init.jsx
@@ -7,7 +7,7 @@ import { chatApi } from './api/chatApi.js';
 import activeChannelReducer from './slices/activeChannelSlice.js';
 import modalsReducer from './slices/modalsSlice.js';
 import { io } from 'socket.io-client';
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next, I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import App from './App.jsx';
 import resources from './locales/index.js';
@@ -67,12 +67,14 @@ const init = async () => {
 
   return (
     // <ErrorBoundary fallback={rollbarConfig}>
+    <I18nextProvider i18n={i18n}>
       <Provider store={store}>
        <StrictMode>
           <App />
           <ToastContainer />
         </StrictMode> 
       </Provider>
+    </I18nextProvider>  
     // </ErrorBoundary>
 
   );

diff --git a/frontend/src/locales/ru.js b/frontend/src/locales/ru.js
@@ -1,3 +1,5 @@
+import { exists } from "i18next";
+
 export default {
     translation: {
       loginForm: {
@@ -55,6 +57,9 @@ export default {
         confirmPassword: 'Подтвердите пароль',
         invalidConfirmPassword: 'Пароли должны совпадать',
         signUpButton: 'Зарегистрироваться',
+        minSymbolForPassword: 'Не менее 6 символов',
+        oneOfPassword: 'Пароли должны совпадать',
+        existsUser: 'Такой пользователь уже существует',
       }
     }
   };
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
 import avatarLogin from '../assets/avatarLogin.jpg';
 import useAuth from '../hooks/index.jsx';
 import router from '../utils/routes.js';
-import userSchema from '../utils/validate.js';
 
 const LoginPage = () => {
   const auth = useAuth();
@@ -21,7 +20,6 @@ const LoginPage = () => {
       username: '',
       password: '',
     },
-    validationSchema: userSchema(),
     onSubmit: async (values) => {
       setAuthFailed(false);
         try {
@@ -89,7 +87,7 @@ const LoginPage = () => {
             <Card.Footer className="p-4">
               <div className="text-center">
                 <span>{t('loginForm.span')} </span> 
-                <a href="/signup">{t('loginForm.signUp')}</a>
+                <a href="/signup">{t('signUpForm.signUp')}</a>
               </div>
             </Card.Footer>
           </Card>

diff --git a/frontend/src/pages/RegistrationPage.jsx b/frontend/src/pages/RegistrationPage.jsx
@@ -1,42 +1,47 @@
 import { useTranslation } from 'react-i18next';
 import axios from 'axios';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap';
 import { useFormik } from 'formik';
 import { useNavigate } from 'react-router-dom';
 import avatarRegisration from '../assets/avatarRegistration.jpg';
 import router from '../utils/routes.js';
-import { useCreateUserMutation } from '../api/chatApi.js'; 
+import userSchema from '../utils/validate.js';
+import useAuth from '../hooks/index.jsx';
 
 const Registration = () => {
   const { t } = useTranslation();
-  const inputEl = useRef();
-  const [ createUser ] = useCreateUserMutation();
+  const inputEl = useRef(null);
+  const [authFailed, setAuthFailed] = useState(false);
   const navigate = useNavigate();
+  const auth = useAuth();
 
   const formik = useFormik({
     initialValues: {
       username: '',
       password: '',
       confirmPassword: '',
     },
-    onSubmit: async (values) => {
-        try {
-          const user = {
-            username: values.username,
-            password: values.password,
-           };
-          await createUser(user);
+    validationSchema: userSchema(t),
+    onSubmit: async ({ username, password }, { setSubmitting }) => {
+      try {
+        const { data } = await axios.post(router.signUpPath(), { username, password });
+          auth.logIn(data.token, data.username);
           navigate(router.main());
-        } catch (error) {
-          formik.setSubmitting(false);
-            if (axios.isAxiosError(error) && err.response.status === 401) {
+      } catch (err) {
+          setSubmitting(false);
+          console.log(err);
+          if (axios.isAxiosError(err) && err.response.status === 401) {
             inputEl.current.select();
-            return error;
+            return; 
           }
-        throw error;
+          if (err.response.status === 409) {
+            setAuthFailed(true);
+            inputEl.current.select(); 
+          }
+          throw err;
         }
-    },
+    }
   });
 
   return (
@@ -61,11 +66,11 @@ const Registration = () => {
                       value={formik.values.username}
                       ref={inputEl}
                       autoFocus
+                      isInvalid={(formik.touched.username && !!formik.errors.username) || authFailed}
+                      onBlur={formik.handleBlur}
                     />
                     <Form.Label>{t('signUpForm.username')}</Form.Label>
-                    {/* {({ errors, touched }) => (
-                      {errors.username && touched.username ?  (
-                      <Form.Control.Feedback type="invalid" tooltip>{t('modal.schema.required')}</Form.Control.Feedback>) : null})} */}
+                    <Form.Control.Feedback type="invalid" tooltip>{formik.errors.username}</Form.Control.Feedback>
                   </Form.Group>
                   <Form.Group className="form-floating mb-3" controlId="password">
                     <Form.Control
@@ -78,9 +83,11 @@ const Registration = () => {
                       onChange={formik.handleChange}
                       value={formik.values.password}
                       ref={inputEl}
+                      isInvalid={(formik.touched.password && !!formik.errors.password) || authFailed}
+                      onBlur={formik.handleBlur}
                     />
                     <Form.Label>{t('loginForm.password')}</Form.Label>
-                    <Form.Control.Feedback type="invalid" tooltip>{t('modal.schema.required')}</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid" tooltip>{formik.errors.password}</Form.Control.Feedback>
                   </Form.Group>
                   <Form.Group className="form-floating mb-4" controlId="confirmPassword">
                     <Form.Control
@@ -93,8 +100,12 @@ const Registration = () => {
                         onChange={formik.handleChange}
                         value={formik.values.confirmPassword}
                         ref={inputEl}
+                        isInvalid={(formik.touched.confirmPassword && !!formik.errors.confirmPassword) || authFailed}
+                        onBlur={formik.handleBlur}
                       />
-                    <Form.Control.Feedback type="invalid" tooltip>{t('signUpForm.invalidConfirmPasswor')}</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid" tooltip>
+                      {authFailed ? t('signUpForm.existsUser') : formik.errors.confirmPassword}
+                    </Form.Control.Feedback>
                     <Form.Label>{t('signUpForm.confirmPassword')}</Form.Label>
                   </Form.Group>
                   <Button type="submit" variant="outline-primary" className="w-100">{t('signUpForm.signUpButton')}</Button>

diff --git a/frontend/src/utils/routes.js b/frontend/src/utils/routes.js
@@ -3,7 +3,8 @@ const apiPath = '/api/v1';
 export default {
   main: () => '/',
   login: () => '/login',
+  signUp: () => '/signup',
   loginPath: () => [apiPath, 'login'].join('/'),
   channelsPath: () => [apiPath, 'channels'].join('/'),
-  signUpPath: () => '/signup',
+  signUpPath: () => [apiPath, '/signup'].join('/'),
 };
diff --git a/frontend/src/utils/validate.js b/frontend/src/utils/validate.js
@@ -1,8 +1,17 @@
 import { object, string, ref } from 'yup';
 
-const userSchema = () => object().shape({
-  username: string().min(3).required(),
-  password: string().required(),
+const userSchema = (t) => object().shape({
+  username: string()
+            .trim()
+            .min(3, t('modal.schema.minMax'))
+            .max(20,  t('modal.schema.minMax'))
+            .required(t('modal.schema.required')),
+  password: string()
+            .required(t('modal.schema.required'))
+            .min(6, t('signUpForm.minSymbolForPassword')),
+  confirmPassword: string()
+            .required(t('modal.schema.required'))
+            .oneOf([ref('password')], t('signUpForm.oneOfPassword'))
 });
 
 export const channelSchema = (t, channelsName) => object({

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -20,6 +20,14 @@ export default defineConfig({
     },
   },
   build: {
-    chunkSizeWarningLimit: 1000,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) {
+            return 'vendor';
+          }
+        },
+      },
+    },
   },
 });