Add 403 redirect

ssa-frontend/secret_service_archive/src/components/AgentDetail.tsx

@@ -5,10 +5,12 @@ import { Row, Col, Accordion, ListGroup } from "react-bootstrap";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
 import { Card } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 export function AgentDetail() {
     const [agent, setAgent] = useState<any>(null);
     const [id, setId] = useState(getId());
+    const navigate = useNavigate();
 
     function getId() {
         var urlId = window.location.pathname.split('/');
@@ -18,6 +20,9 @@ export function AgentDetail() {
     useEffect(() => {
         axios.get(`/agents/` + id)
             .then(res => {
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
                 const agentData = res.data;
                 setAgent(agentData);
             });

ssa-frontend/secret_service_archive/src/components/AgentInMission.tsx

-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Card, Row, Col, Modal, Button, Placeholder } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { regular } from '@fortawesome/fontawesome-svg-core/import.macro';
@@ -13,6 +13,7 @@ export function AgentInMission (props: any){
         reportType: null
     });
     const [reportId, setReportId] = useState(null);
+    const navigate = useNavigate();
 
     const handleClose = () => {
         setShow(false);
@@ -22,6 +23,9 @@ export function AgentInMission (props: any){
         if (reportId) {
             axios.get(`/reports/reports` + reportId)
             .then(res => {
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
                 const reportData = res.data;
                 setReport(reportData);
             });
@@ -85,7 +89,7 @@ export function AgentInMission (props: any){
                         <Card.Text>
                             { props.reports.map((report: any) => {
                                 return(
-                                    <Button onClick={ () => handleShow(report.id) }>
+                                    <Button variant="outline-primary" onClick={ () => handleShow(report.id) } className="ms-1">
                                         <FontAwesomeIcon icon={regular("file")} />
                                     </Button>
                                 )

ssa-frontend/secret_service_archive/src/components/AgentsList.tsx

 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Agent } from './Agent'
+import { useNavigate } from 'react-router-dom';
 
 
 export function AgentsList () {
 
     const [agents, setAgents] = useState<any>(null);
     const [page, setPage] = useState(0);
+    const navigate = useNavigate();
 
     useEffect(() => {
         axios.get(`/agents/allAgents?page=` + page + `&pageSize=20`)
         .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
             const agentData = res.data;
             setAgents(agentData);
         });

ssa-frontend/secret_service_archive/src/components/FindAvailableAgents.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useEffect } from "react";
 import axios from 'axios'
 import { Agent } from './Agent'
 import { Col, Row } from 'react-bootstrap';
+import { useNavigate } from "react-router-dom";
 
 export function FindAvailableAgents() {
 
@@ -14,14 +15,18 @@ export function FindAvailableAgents() {
     })
     const [countries, setCountries] = useState<any>({data: null})
     const [skills, setSkills] = useState<any>({data: null})
+    const navigate = useNavigate();
 
     const searchForAgent = useCallback (()=>{
         if (picked.country !== null && (picked.skill === null || picked.skill === '')) {
             console.log("country", picked.country)
             axios.get(`/agents/countries/`+ picked.country.id + `?page=0&pageSize=5`)
             .then(res => {
-            const agents = res.data;
-            setResult(agents);
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
+                const agents = res.data;
+                setResult(agents);
         });
         }
 
@@ -29,6 +34,9 @@ export function FindAvailableAgents() {
             console.log("skill", picked.skill)
             axios.get(`/agents/skills/` + picked.skill.id + `?page=1&pageSize=5`)
             .then(res => {
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
                 const skillsData = res.data;
                 setSkills(skillsData);
             });
@@ -38,6 +46,9 @@ export function FindAvailableAgents() {
             console.log("both", picked.country.id, picked.skill.id);
             axios.get(`/agents/countries/` + picked.country.id + `/skills/` + picked.skill.id + `?page=0&pageSize=10`)
             .then(res => {
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
                 const skillsData = res.data;
                 setSkills(skillsData);
             });
@@ -51,12 +62,18 @@ export function FindAvailableAgents() {
     useEffect(() => {
         axios.get(`/agents/allSkills?page=0&pageSize=0`)
         .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
             const skillsData = res.data;
             setSkills(skillsData);
         });
 
         axios.get(`/countries/allCountries?page=0&pageSize=0`)
         .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
             const countryData = res.data;
             setCountries(countryData);
         });

ssa-frontend/secret_service_archive/src/components/Forbidden.tsx

+import { Container, Image } from "react-bootstrap";
+
+export function Forbidden() {
+    return (
+        <Container fluid className="text-center">
+            <Image src="https://http.cat/403" fluid></Image>
+        </Container>
+    )
+}
\ No newline at end of file

ssa-frontend/secret_service_archive/src/components/Main.tsx

@@ -10,6 +10,7 @@ import { AgentDetail } from './AgentDetail';
 import { MissionDetail } from './MissionDetail';
 
 import { Route, Routes } from "react-router-dom";
+import { Forbidden } from './Forbidden';
 
 export enum Roles{
     User,
@@ -50,6 +51,7 @@ export class Main extends Component<IMainProps, IMainState>{
                     <Route path="/findAgent" element={ <FindAvailableAgents/> }/>
                     <Route path="mission/:id" element={ <MissionDetail />} />
                     <Route path="agent/:id" element={ <AgentDetail />} />
+                    <Route path="/forbidden" element={ <Forbidden/>}/>
                 </Routes>
             </div>
         )

ssa-frontend/secret_service_archive/src/components/MissionDetail.tsx

@@ -4,10 +4,12 @@ import { AgentInMission } from './AgentInMission'
 import { start } from "repl";
 import { Button, ListItem,  } from "@mui/material";
 import { Card, Row, Col, Container, ListGroup, ListGroupItem } from 'react-bootstrap'
+import { useNavigate } from "react-router-dom";
 
 export function MissionDetail() {
     const [mission, setMission] = useState<any>(null);
     const [id, setId] = useState(getId());
+    const navigate = useNavigate();
 
     function getId() {
         var urlId = window.location.pathname.split('/');
@@ -17,6 +19,9 @@ export function MissionDetail() {
     useEffect(() => {
         axios.get(`/missions/` + id)
             .then(res => {
+                if (res.status == 403) {
+                    navigate('/forbidden');
+                }
                 const missionData = res.data;
                 setMission(missionData);
             });

ssa-frontend/secret_service_archive/src/components/MissionsList.tsx

@@ -2,16 +2,21 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Mission } from './Mission'
 import { Col, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
 
 
 export function MissionsList () {
 
     const [missions, setMissions] = useState<any>(null);
     const [page, setPage] = useState(0);
+    const navigate = useNavigate();
 
     useEffect(() => {
         axios.get(`/missions/allMissions?page=` + page + `&pageSize=20`)
         .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
             const agentData = res.data;
             setMissions(agentData);
         });