add leo-profanity

frontend/package.json

@@ -20,6 +20,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "formik": "^2.4.6",
     "i18next": "^24.0.5",
+    "leo-profanity": "^1.7.0",
     "lodash": "^4.17.21",
     "lorem-ipsum": "^2.0.8",
     "react": "^18.3.1",

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'react-toastify/dist/ReactToastify.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import  MainNavbar from './components/Navbar.jsx';
 import PageNotFound from './pages/PageNotFound.jsx';
 import MainPage from './pages/MainPage.jsx';
@@ -10,6 +11,11 @@ import router from './utils/routes.js';
 import AuthProvider, { PrivateRoute } from './context/AuthProvider.jsx';
 
 const App = () => {
+  const { i18n } = useTranslation();
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng);
+  };
+
   return (
     <BrowserRouter future={{
       v7_startTransition: true,
@@ -29,6 +35,10 @@ const App = () => {
             <Route path={router.signUp()} element={<Registration />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <button onClick={() => changeLanguage('ru')}>ru</button>
+            <button onClick={() => changeLanguage('en')}>en</button>
+          </div>
         </AuthProvider>
       </div>
     </BrowserRouter>

frontend/src/components/MessageForm.jsx

@@ -2,6 +2,7 @@ import { Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useRef } from 'react';
 import { useFormik } from 'formik';
+import * as filter from 'leo-profanity';
 
 const MessageForm = ({ activeChannelId, username, addMessage }) => {
   const { t } = useTranslation();
@@ -13,7 +14,8 @@ const MessageForm = ({ activeChannelId, username, addMessage }) => {
     },
     onSubmit: async (values) => {
       try {
-        const newMessege = { body: values.body, channelId: activeChannelId, username };
+        const filterdBody = filter.clean(values.body);
+        const newMessege = { body: filterdBody, channelId: activeChannelId, username };
         await addMessage(newMessege);
         formik.resetForm();
         formControlEl.current.focus();

frontend/src/components/Сhannels.jsx

@@ -3,6 +3,7 @@ import { useGetChannelsQuery } from '../api/chatApi.js';
 import { useRef, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import * as filter from 'leo-profanity';
 import { selectActiveTab, activeChannelSelector, defaultChannel } from '../slices/activeChannelSlice.js';
 import ButtonPlus from './ChannelAddButtom.jsx.jsx';
 import AddChannel from './AddModal.jsx';
@@ -63,7 +64,7 @@ return (
               <Dropdown role="group" className='d-flex btn-group'>
                 <Button className='w-100 rounded-0 text-start text-truncate' variant={variant(channel)} onClick={() => dispatch(selectActiveTab(channel))}>
                   <span className="me-1"># </span>
-                  {channel.name}  
+                  {filter.clean(channel.name)}  
                 </Button>
                 <Dropdown.Toggle className="flex-grow-0 dropdown-toggle-split" variant={variant(channel)}>
                   <span className="visually-hidden">{t('channels.setupChannel')}</span>

frontend/src/init.jsx

@@ -2,6 +2,7 @@ import { StrictMode } from 'react';
 import i18next from 'i18next';
 import { ToastContainer } from 'react-toastify';
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
+import * as filter from 'leo-profanity';
 // import { ErrorBoundary } from '@rollbar/react';
 import { chatApi } from './api/chatApi.js';
 import activeChannelReducer from './slices/activeChannelSlice.js';
@@ -64,6 +65,8 @@ const init = async () => {
     //   accessToken: import.meta.env.VITE_ROLLBAR_ACCESS_TOKEN,
     //   environment: import.meta.env.MODE,
     // };
+    filter.add(filter.getDictionary('en'));
+    filter.add(filter.getDictionary('ru'));
 
   return (
     // <ErrorBoundary fallback={rollbarConfig}>

frontend/src/locales/en.js

@@ -0,0 +1,68 @@
+import { exists } from "i18next";
+
+export default {
+  translation: {
+    loginForm: {
+      title: 'Login',
+      username: 'Your nickname',
+      password: 'Password',
+      span: 'Don\'t have an account?',
+      error: 'Incorrect username or password',
+    },
+    navBar: {
+      title: 'Hexlet Chat',
+      button: 'Logout',
+    },
+    channels: {
+      title: 'Channels',
+      setupChannel: 'Manage channel',
+      dropdownButtonRemove: 'Delete',
+      dropdownButtonRename: 'Rename',
+      create: 'Channel created',
+      rename: 'Channel renamed',
+      delete: 'Channel deleted',
+    },
+    modal: {
+      name: 'Channel Name',
+      addButton: 'Add Channel',
+      cancel: 'Cancel',
+      send: 'Send',
+      removeChannel: 'Remove Channel',
+      removeText: 'Are you sure?',
+      removeButton: 'Remove',
+      renameChannel: 'Rename Channel',
+      schema: {
+        required: 'Required field',
+        minMax: '3 to 20 characters',
+        notOneOf: 'Must be unique',
+      }
+    },
+    countMessages: {
+      messages_one: '{{count}} message',
+      messages_few: '{{count}} messages',
+      messages_many: '{{count}} messages',
+    },
+    isChannelsLoading: 'Loading...',
+    formMesseges: {
+      placeholder: 'Enter a message...',
+      button: 'Submit',
+      input: 'New message',
+    },
+    errors: {
+      axiosError: 'Connection error',
+      pageNotFound: 'Page not found',
+    },
+    redirect: 'But you can go to ',
+    redirectOnMainPage: 'the main page',
+    signUpForm: {
+      signUp: 'Register',
+      username: 'Username',
+      confirmPassword: 'Confirm password',
+      invalidConfirmPassword: 'Passwords must match',
+      signUpButton: 'Register',
+      minSymbolForPassword: 'At least 6 characters',
+      oneOfPassword: 'Passwords must match',
+      existsUser: 'This user already exists',
+    }
+  }
+};

frontend/src/locales/index.js

@@ -1,5 +1,7 @@
 import ru from './ru.js';
+import en from './en.js';
 
 export default {
   ru,
+  en,
 };

frontend/src/locales/ru.js

@@ -48,7 +48,10 @@ export default {
         button: 'Отправить',
         input: 'Новое сообщение',
       },
-      pageNotFound: 'Страница не найдена',
+      errors: {
+        axiosError: 'Ошибка соединения',
+        pageNotFound: 'Страница не найдена',
+      },
       redirect: 'Но вы можете перейти ',
       redirectOnMainPage: 'на главную страницу',
       signUpForm: {

frontend/src/pages/LoginPage.jsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import avatarLogin from '../assets/avatarLogin.jpg';
 import useAuth from '../hooks/index.jsx';
 import router from '../utils/routes.js';
+import { toast } from 'react-toastify';
 
 const LoginPage = () => {
   const auth = useAuth();
@@ -31,6 +32,7 @@ const LoginPage = () => {
             if (axios.isAxiosError(err) && err.response.status === 401) {
             setAuthFailed(true);
             inputEl.current.select();
+            toast.error(t('errors.axiosError'));
             return;
           }
         throw err;

frontend/src/pages/PageNotFound.jsx

@@ -11,7 +11,7 @@ const PageNotFound = () => {
         alt={t('pageNotFound')} 
         className="img-fluid h-25" 
       />
-      <h1 className="h4 text-muted">{t('pageNotFound')}</h1>
+      <h1 className="h4 text-muted">{t('errors.pageNotFound')}</h1>
       <p className="text-muted">
         {t('redirect')}
         <a href="/">{t('redirectOnMainPage')}</a>

frontend/src/pages/RegistrationPage.jsx

@@ -4,6 +4,7 @@ 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 { toast } from 'react-toastify';
 import avatarRegisration from '../assets/avatarRegistration.jpg';
 import router from '../utils/routes.js';
 import userSchema from '../utils/validate.js';
@@ -30,9 +31,9 @@ const Registration = () => {
           navigate(router.main());
       } catch (err) {
           setSubmitting(false);
-          console.log(err);
-          if (axios.isAxiosError(err) && err.response.status === 401) {
+          if (axios.isAxiosError(err)) {
             inputEl.current.select();
+            toast.error(t('errors.axiosError'));
             return; 
           }
           if (err.response.status === 409) {

frontend/vite.config.js

@@ -23,8 +23,8 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks(id) {
-          if (id.includes("node_modules")) {
-            return 'vendor';
+          if (id.includes('bootstrap' || 'index-BwV0OUVV.css')) {
+            return 'bootstrap';
           }
         },
       },

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@hexlet/chat-server": "^2.0.4",
     "@rollbar/react": "^0.12.0-beta",
+    "leo-profanity": "^1.7.0",
     "rollbar": "^2.26.4"
   }
 }