add auth

frontend/src/App.jsx

@@ -6,7 +6,7 @@ import PageNotFound from './pages/PageNotFound.jsx';
 import MainPage from './pages/MainPage.jsx';
 import LoginPage from './pages/LoginPage.jsx';
 import router from './utils/routes.js';
-import AuthProvider from './context/AuthProvider.jsx';
+import AuthProvider, { PrivateRoute } from './context/AuthProvider.jsx';
 
 const App = () => {
   const { t } = useTranslation();
@@ -22,8 +22,12 @@ const App = () => {
         </Navbar>
         <AuthProvider>
           <Routes>
-            <Route path={router.mainPath} element={<MainPage />} />
-            <Route path={router.loginPath} element={<LoginPage />} />
+            <Route path={router.mainPath} element={(
+              <PrivateRoute>
+                <MainPage />
+              </PrivateRoute>)} />
+            <Route path={router.main} element={(<MainPage />)} />
+            <Route path={router.login} element={<LoginPage />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </AuthProvider>

frontend/src/components/MessageForm.jsx

@@ -4,12 +4,13 @@ const MessageForm = () => {
   return (
     <div className="mt-auto px-5 py-3">
       <Form  className="py-1 border rounded-2">
-        <Form.Group className="input-group" hasValidation>
+        <Form.Group className="input-group">
           <Form.Control 
             type="text"
             placeholder="Введите сообщение..." 
             className="border-0 p-0 ps-2" 
-            value="" 
+            value=""
+            // onChange={handleChange}
           />
             <Button type="submit" variant="outline-secondary" disabled readOnly className="btn-group-vertical">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="currentColor">

frontend/src/context/AuthProvider.jsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useAuth from '../hooks/index.jsx';
 import AuthContext from '../context/index.jsx';
+import router from '../utils/routes.js';
 
 // eslint-disable-next-line react/prop-types
 const AuthProvider = ({ children }) => {
@@ -18,4 +21,13 @@ const AuthProvider = ({ children }) => {
   );
 };
 
+export const PrivateRoute = ({ children }) => {
+  const auth = useAuth();
+  const navigate = useNavigate();
+
+  return (
+    auth.loggedIn ? children : navigate(router.mainPath)
+  );
+};
+
 export default AuthProvider;

frontend/src/pages/LoginPage.jsx

@@ -34,7 +34,7 @@ const LoginPage = () => {
           console.log(res);
           localStorage.setItem('token', res.data.token);
           auth.logIn();
-          navigate(routes.mainPath);
+          navigate(router.main);
         } catch (err) {
           formik.setSubmitting(false);
             if (axios.isAxiosError(err) && err.response.status === 401) {
@@ -65,7 +65,6 @@ const LoginPage = () => {
                       autoComplete="username" 
                       required 
                       placeholder={t('loginForm.username')} 
-                      id="username"
                       onChange={formik.handleChange}
                       value={formik.values.username}
                       isInvalid={authFailed}
@@ -79,7 +78,6 @@ const LoginPage = () => {
                       autoComplete="current-password" 
                       required 
                       placeholder={t('loginForm.password')} 
-                      id="password"
                       onChange={formik.handleChange} 
                       value={formik.values.password}
                       isInvalid={authFailed}

frontend/src/pages/PageNotFound.jsx

@@ -1,8 +1,12 @@
-import pageNotFound from '../assets/notFound.jpg';
+import pageNotFound from '../assets/404-error.jpg';
 
 const PageNotFound = () => (
   <div className="text-center">
-    <img src={pageNotFound} alt="Страница не найдена" className="img-fluid h-15" />
+    <img 
+      src={pageNotFound} 
+      alt="Страница не найдена" 
+      className="img-fluid h-15" 
+    />
     <h1 className="h4 text-muted">Страница не найдена</h1>
     <p className="text-muted">
       Но вы можете перейти

frontend/src/utils/routes.js

@@ -1,6 +1,8 @@
 // const apiPath = '/api/v1';
 
 export default {
+  login: '/login',
   loginPath: '/api/v1/login',
-  mainPath: '/',
+  mainPath: '/api/v1/channels',
+  main: '/',
 };