Basic protected routes for admin (#4086)

* Basic protected routes for admin

* Eslint

app/javascript/components/admin/manage_users/EditUser.jsx

@@ -3,19 +3,25 @@ import Card from 'react-bootstrap/Card';
 import {
   Row, Col, Tab, Stack, Container,
 } from 'react-bootstrap';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Navigate } from 'react-router-dom';
 import { ArrowLeftCircleIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import AdminNavSideBar from '../AdminNavSideBar';
 import AccountInfo from '../../users/user/AccountInfo';
 import useUser from '../../../hooks/queries/users/useUser';
 import Spinner from '../../shared_components/utilities/Spinner';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function EditUser() {
   const { t } = useTranslation();
   const { userId } = useParams();
   const { isLoading, data: user } = useUser(userId);
   const navigate = useNavigate();
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageUsers !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   if (isLoading) return <Spinner />;
 

app/javascript/components/admin/manage_users/ManageUsers.jsx

@@ -4,6 +4,7 @@ import {
   Row, Col, Tab, Tabs, Stack, Button, Container,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import { EnvelopeIcon, UserPlusIcon } from '@heroicons/react/24/outline';
 import VerifiedUsers from './VerifiedUsers';
 import AdminNavSideBar from '../AdminNavSideBar';
@@ -15,11 +16,17 @@ import InviteUserForm from './forms/InviteUserForm';
 import InvitedUsers from './InvitedUsers';
 import PendingUsers from './PendingUsers';
 import BannedUsers from './BannedUsers';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function ManageUsers() {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState();
   const { data: registrationMethod } = useSiteSetting('RegistrationMethod');
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageUsers !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/roles/EditRole.jsx

@@ -9,12 +9,18 @@ import useRole from '../../../hooks/queries/admin/roles/useRole';
 import EditRoleForm from './forms/EditRoleForm';
 import Spinner from '../../shared_components/utilities/Spinner';
 import AdminNavSideBar from '../AdminNavSideBar';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function EditRole() {
   const { t } = useTranslation();
   const { roleId } = useParams();
   const navigate = useNavigate();
   const { data: role, isError } = useRole(roleId);
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageRoles !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   if (isError) {
     return <Navigate to="/admin/roles" replace />;

app/javascript/components/admin/roles/Roles.jsx

@@ -3,16 +3,23 @@ import {
   Col, Container, Row, Tab, Card, Stack,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import AdminNavSideBar from '../AdminNavSideBar';
 import RolesList from './RolesList';
 import SearchBar from '../../shared_components/search/SearchBar';
 import useRoles from '../../../hooks/queries/admin/roles/useRoles';
 import CreateRoleModal from '../../shared_components/modals/CreateRoleModal';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function Roles() {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState();
   const { data: roles, isLoading } = useRoles(searchInput);
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageRoles !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/room_configuration/RoomConfig.jsx

@@ -4,15 +4,22 @@ import {
   Col, Row, Tab, Container,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import AdminNavSideBar from '../AdminNavSideBar';
 import RoomConfigRow from './RoomConfigRow';
 import useUpdateRoomConfig from '../../../hooks/mutations/admin/room_configuration/useUpdateRoomConfig';
 import useRoomConfigs from '../../../hooks/queries/rooms/useRoomConfigs';
 import Spinner from '../../shared_components/utilities/Spinner';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function RoomConfig() {
   const { t } = useTranslation();
   const { data: roomConfigs, isLoading } = useRoomConfigs();
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageSiteSettings !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/server_recordings/ServerRecordings.jsx

@@ -4,18 +4,25 @@ import {
   Col, Container, Row, Tab,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import AdminNavSideBar from '../AdminNavSideBar';
 import SearchBar from '../../shared_components/search/SearchBar';
 import RecordingsList from '../../recordings/RecordingsList';
 import useServerRecordings from '../../../hooks/queries/admin/server_recordings/useServerRecordings';
 import ServerRecordingRow from './ServerRecordingRow';
 import Pagination from '../../shared_components/Pagination';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function ServerRecordings() {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState();
   const [page, setPage] = useState();
   const { isLoading, data: serverRecordings } = useServerRecordings(searchInput, page);
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageRecordings !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/server_rooms/ServerRooms.jsx

@@ -4,18 +4,25 @@ import {
   Col, Container, Row, Tab, Table,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import useServerRooms from '../../../hooks/queries/admin/server_rooms/useServerRooms';
 import ServerRoomRow from './ServerRoomRow';
 import SearchBar from '../../shared_components/search/SearchBar';
 import AdminNavSideBar from '../AdminNavSideBar';
 import Pagination from '../../shared_components/Pagination';
 import SortBy from '../../shared_components/search/SortBy';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function ServerRooms() {
   const { t } = useTranslation();
   const [searchInput, setSearchInput] = useState();
   const [page, setPage] = useState();
   const { isLoading, data: serverRooms } = useServerRooms(searchInput, page);
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageRooms !== 'true') {
+    return <Navigate to="/404" />;
+  }
 
   return (
     <div id="admin-panel" className="pb-3">

app/javascript/components/admin/site_settings/SiteSettings.jsx

@@ -4,14 +4,22 @@ import {
   Row, Col, Tab, Tabs, Container,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
 import AdminNavSideBar from '../AdminNavSideBar';
 import Appearance from './appearance/Appearance';
 import Administration from './administration/Administration';
 import Settings from './settings/Settings';
 import Registration from './registration/Registration';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function SiteSettings() {
   const { t } = useTranslation();
+  const currentUser = useAuth();
+
+  if (currentUser.permissions?.ManageSiteSettings !== 'true') {
+    return <Navigate to="/404" />;
+  }
+
   return (
     <div id="admin-panel" className="pb-3">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>