Add login, login check, Update get calls

ssa-frontend/secret_service_archive/package-lock.json

@@ -25,6 +25,7 @@
         "babel-plugin-macros": "^3.1.0",
         "bootstrap": "^5.1.3",
         "bootswatch": "^5.1.3",
+        "http-proxy-middleware": "^0.19.1",
         "react": "^18.1.0",
         "react-bootstrap": "^2.4.0",
         "react-dom": "^18.1.0",

ssa-frontend/secret_service_archive/package.json

@@ -21,6 +21,7 @@
     "babel-plugin-macros": "^3.1.0",
     "bootstrap": "^5.1.3",
     "bootswatch": "^5.1.3",
+    "http-proxy-middleware": "^0.19.1",
     "react": "^18.1.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.1.0",
@@ -30,7 +31,6 @@
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
-  "proxy": "http://localhost:6969/pa165/rest",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

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

@@ -18,14 +18,18 @@ export function AgentDetail() {
     }
 
     useEffect(() => {
-        axios.get(`/agents/` + id)
-            .then(res => {
-                if (res.status == 403) {
-                    navigate('/forbidden');
-                }
-                const agentData = res.data;
-                setAgent(agentData);
-            });
+        axios.get(`/rest/agents/` + id, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+        })
+        .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
+            const agentData = res.data;
+            setAgent(agentData);
+        });
     },[]);
 
     if (agent === null) {

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

@@ -21,7 +21,11 @@ export function AgentInMission (props: any){
 
     useEffect(() => {
         if (reportId) {
-            axios.get(`/reports/reports` + reportId)
+            axios.get(`/rest/reports/reports` + reportId, {
+                headers: {
+                  'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+                }
+            })
             .then(res => {
                 if (res.status == 403) {
                     navigate('/forbidden');

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

@@ -14,7 +14,11 @@ export function AgentsList () {
     const navigate = useNavigate();
 
     useEffect(() => {
-        axios.get(`/agents/allAgents?page=` + page + `&pageSize=20`)
+        axios.get(`/rest/agents/allAgents?page=` + page + `&pageSize=20`, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+        })
         .then(res => {
             if (res.status == 403) {
                 navigate('/forbidden');

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

@@ -20,7 +20,11 @@ export function FindAvailableAgents() {
     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`)
+            axios.get(`/rest/agents/countries/`+ picked.country.id + `?page=0&pageSize=5`, {
+                headers: {
+                  'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+                }
+            })
             .then(res => {
                 if (res.status == 403) {
                     navigate('/forbidden');
@@ -32,7 +36,11 @@ export function FindAvailableAgents() {
 
         if (picked.skill !== null && (picked.country === null || picked.country === '')){
             console.log("skill", picked.skill)
-            axios.get(`/agents/skills/` + picked.skill.id + `?page=0&pageSize=5`)
+            axios.get(`/rest/agents/skills/` + picked.skill.id + `?page=0&pageSize=5`, {
+                headers: {
+                  'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+                }
+            })
             .then(res => {
                 if (res.status == 403) {
                     navigate('/forbidden');
@@ -44,7 +52,11 @@ export function FindAvailableAgents() {
 
         if ((picked.skill !== null && picked.skill !== '') && (picked.country !== null && picked.country !== '')){
             console.log("both", picked.country.id, picked.skill.id);
-            axios.get(`/agents/countries/` + picked.country.id + `/skills/` + picked.skill.id + `?page=0&pageSize=10`)
+            axios.get(`/rest/agents/countries/` + picked.country.id + `/skills/` + picked.skill.id + `?page=0&pageSize=10`, {
+                headers: {
+                  'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+                }
+            })
             .then(res => {
                 if (res.status == 403) {
                     navigate('/forbidden');
@@ -60,7 +72,11 @@ export function FindAvailableAgents() {
     },[picked]);
 
     useEffect(() => {
-        axios.get(`/agents/allSkills?page=0&pageSize=0`)
+        axios.get(`/rest/agents/allSkills?page=0&pageSize=0`, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+        })
         .then(res => {
             if (res.status == 403) {
                 navigate('/forbidden');
@@ -69,7 +85,11 @@ export function FindAvailableAgents() {
             setSkills(skillsData);
         });
 
-        axios.get(`/countries/allCountries?page=0&pageSize=0`)
+        axios.get(`/rest/countries/allCountries?page=0&pageSize=0`, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+        })
         .then(res => {
             if (res.status == 403) {
                 navigate('/forbidden');

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

-import { Component } from 'react';
+import { Component, useState } from 'react';
 import { Roles, Main } from "./Main";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import.macro';
 import { Button } from '@mui/material';
+import axios from 'axios';
+import { setEnvironmentData } from 'worker_threads';
 
 interface ILogInProps{
     main: Main
 }
 
-interface ILogInState{
-    email: string,
-    password: string,
-}
 
-export class LogIn extends Component<ILogInProps, ILogInState>{
-    constructor(props: ILogInProps){
-        super(props);
-        this.state = {
-            email: "",
-            password: ""
-        }
-        this.onLogInClick = this.onLogInClick.bind(this)
-    }
+export function LogIn(props: ILogInProps) {
+    let navigate = useNavigate();
+
+    const handleSubmit = (event: any) => {
+        event.preventDefault();
 
-    onLogInClick() {
-        sessionStorage.setItem("loggedIn", "ok")
-        // TODO login function
-        this.props.main.setState( () => ({
-            userId: 0, userRole: Roles.Operator, loggedIn: true 
-        }));
+        axios({
+            method: 'post',
+            url: `/keycloak/realms/pa165-secret-service-archive/protocol/openid-connect/token`,
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            data: 'client_id=archive-login&username=' + event.target.username.value + '&password=' + event.target.username.value + '&grant_type=password&client_secret=mrmAhajtblAVVAQ8whrylOYQrN1W0axk'
+        })
+        .then(function (response) {
+            console.log(response.data.access_token);
+            sessionStorage.setItem("access_token",response.data.access_token);
+            navigate(`/home`);
+            props.main.setState({userName: event.target.username.value});
+          })
+          .catch(function (error) {
+            sessionStorage.removeItem("access_token");
+            alert("invalid username or password")
+        });
     }
 
-    render(){
-        // this.props.main.setState(() => ({userRole: Roles.Operator}));
-        // console.log(this.props.main.state.userRole)
-        return(
-            <div className="container-fluid vh-100 mt-4">
-                <div className="rounded d-flex justify-content-center">
-                    <div className="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
-                        <div className="text-center">
-                            <h3 className="text-primary">Sign In</h3>
-                        </div>
-                        <form>
-                            <div className="p-4">
-                                <div className="input-group mb-3">
-                                    <span className="input-group-text bg-primary">
-                                        <FontAwesomeIcon icon={solid("envelope")} style={{color:"white"}}/>
-                                    </span>
-                                    <input type="email" className="form-control" placeholder="Enter email" 
-                onChange={ event => this.setState({ email: event.target.value })}/>
-                                </div>
-                                <div className="input-group mb-3">
-                                    <span className="input-group-text bg-primary">
-                                        <FontAwesomeIcon icon={solid("key")} style={{color:"white"}}/>
-                                    </span>
-                                    <input type="password" className="form-control" placeholder="Enter password"
-                onChange={ event => this.setState({ password: event.target.value })}/>
-                                </div>
-                                <Button component={Link} to={"/home"} onClick={this.onLogInClick} className="btn btn-primary text-center mt-2" type="submit">
-                                    Login
-                                </Button>
-                                <p className="text-center mt-5">Don't have an account?&nbsp;
-                                    <Link to={"your mum"} className="text-primary">Sign Up</Link>
-                                </p>
-                            </div>
-                        </form>
+    return(
+        <div className="container-fluid vh-100 mt-4">
+            <div className="rounded d-flex justify-content-center">
+                <div className="col-md-4 col-sm-12 shadow-lg p-5 bg-light">
+                    <div className="text-center">
+                        <h3 className="text-primary">Sign In</h3>
                     </div>
+                    <form onSubmit={ handleSubmit }>
+                        <div className="p-4">
+                            <div className="input-group mb-3">
+                                <span className="input-group-text bg-primary">
+                                    <FontAwesomeIcon icon={solid("user")} style={{color:"white"}} />
+                                </span>
+                                <input type="text" name="username" className="form-control" placeholder="Enter username"/>
+                            </div>
+                            <div className="input-group mb-3">
+                                <span className="input-group-text bg-primary">
+                                    <FontAwesomeIcon icon={solid("key")} style={{color:"white"}}/>
+                                </span>
+                                <input type="password" name="password" className="form-control" placeholder="Enter password" required/>
+                            </div>
+                            <Button className="btn btn-primary text-center mt-2" type="submit">
+                                Login
+                            </Button>
+                            <p className="text-center mt-5">Don't have an account?&nbsp;
+                                <Link to={"your mum"} className="text-primary">Sign Up</Link>
+                            </p>
+                        </div>
+                    </form>
                 </div>
             </div>
-        )
-    }
-}
\ No newline at end of file
+        </div>
+    )
+}

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

@@ -20,7 +20,7 @@ export enum Roles{
 
 interface IMainState{
     loggedIn: boolean;
-    userId?: number;
+    userName?: string;
     userRole?: Roles;
 }
 
@@ -33,7 +33,7 @@ export class Main extends Component<IMainProps, IMainState>{
         super(props);
         this.state = {
             loggedIn : false,
-            userId: undefined,
+            userName: undefined,
             userRole: undefined
         }
     }
@@ -45,7 +45,7 @@ export class Main extends Component<IMainProps, IMainState>{
                 <Routes>
                     <Route path="/login" element={ <LogIn main={ this }/> }/>
                     <Route path="/" element={ <Base /> }/>
-                    <Route path="/home" element={ <Home userName="USER"/> }/>
+                    <Route path="/home" element={ <Home userName={ this.state.userName }/> }/>
                     <Route path="/agents" element={ <AgentsList/> }/>
                     <Route path="/missions" element={ <MissionsList/> }/>
                     <Route path="/findAgent" element={ <FindAvailableAgents/> }/>

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

@@ -17,14 +17,18 @@ export function MissionDetail() {
     }
 
     useEffect(() => {
-        axios.get(`/missions/` + id)
-            .then(res => {
-                if (res.status == 403) {
-                    navigate('/forbidden');
-                }
-                const missionData = res.data;
-                setMission(missionData);
-            });
+        axios.get(`/rest/missions/` + id, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+        })
+        .then(res => {
+            if (res.status == 403) {
+                navigate('/forbidden');
+            }
+            const missionData = res.data;
+            setMission(missionData);
+        });
     },[]);
 
     if (mission === null) {

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

@@ -14,14 +14,34 @@ export function MissionsList () {
     const navigate = useNavigate();
 
     useEffect(() => {
-        axios.get(`/missions/allMissions?page=` + page + `&pageSize=18`)
+        console.log('Bearer ' + sessionStorage.getItem('access_token'));
+        axios.get(`/rest/missions/allMissions?page=` + page + `&pageSize=18`, {
+            headers: {
+              'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')
+            }
+          })
         .then(res => {
             if (res.status == 403) {
                 navigate('/forbidden');
             }
             const agentData = res.data;
             setMissions(agentData);
-        });
+        })
+        .catch(function (error) {
+            if (error.response) {
+              // Request made and server responded
+              console.log(error.response.data);
+              console.log(error.response.status);
+              console.log(error.response.headers);
+            } else if (error.request) {
+              // The request was made but no response was received
+              console.log(error.request);
+            } else {
+              // Something happened in setting up the request that triggered an Error
+              console.log('Error', error.message);
+            }
+        
+          });;
         console.log(missions)
     },[page]);
 

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

@@ -24,7 +24,7 @@ export class NavBar extends Component<INavBarProps, INavBarState>{
     }
 
     render(){
-        if (sessionStorage.getItem("loggedIn") === "ok") {
+        if (sessionStorage.getItem("access_token") !== null) {
             return(
                 <Navbar bg="primary" variant="dark">
                 <Container>

ssa-frontend/secret_service_archive/src/setupProxy.js

+const createProxyMiddleware = require('http-proxy-middleware');
+ 
+module.exports = function (app) {
+  app.use(
+    createProxyMiddleware('/keycloak', {
+      target: 'http://localhost:8080', // API endpoint 1
+      changeOrigin: true,
+      pathRewrite: {
+        "^/keycloak": "",
+      },
+      headers: {
+        Connection: "keep-alive"
+      }
+    })
+  );
+  app.use(
+    createProxyMiddleware('/rest', {
+      target: 'http://localhost:6969/pa165/rest', // API endpoint 2
+      changeOrigin: true,
+      pathRewrite: {
+        "^/rest": "",
+      },
+      headers: {
+        Connection: "keep-alive"
+      }
+    })
+  );
+}
\ No newline at end of file