Merge pull request #1298 from vishwajeet-eGov/HLM-728

HLM 728

tenant-portal/src/App.js

@@ -1,5 +1,5 @@
 import "./App.css";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes , Navigate } from "react-router-dom";
 import { useKeycloak } from "@react-keycloak/web";
 import Login from "./components/Login";
 import Home from "./components/Home/Home";
@@ -8,6 +8,25 @@ import CreateSchema from "./components/CreateSchema/CreateSchema";
 import Header from "./components/Header/Header"
 import config from "./config.json"
 import Footer from "./components/Footer/Footer";
+import ToastComponent from './components/Toast/Toast';
+import axios from 'axios';
+
+const {keycloak} = useKeycloak();
+axios.interceptors.response.use(
+  response => response,
+  error => {
+    if (error.response.status === 401) {
+      keycloak.logout() 
+
+    }
+    else if (error.response.status === 403) {
+      <ToastComponent header="Unauthorized access" toastBody="You are not authorized to view this resource" />
+
+    }
+    else if(error.response){
+      <ToastComponent header="Error" toastBody={error.response.data} /> 
+    }
+  });
 
 
 function App() {
@@ -35,6 +54,7 @@ function App() {
         </Routes>
       </Router>
       <Footer/>
+      <ToastComponent/>
     </div>
   );
 }

tenant-portal/src/components/Toast/Toast.css

@@ -0,0 +1,19 @@
+.toast-container{
+    z-index: 10;
+    opacity: 1;
+    background-color: #4E4E4E;
+    margin-right: 3.5rem;
+    width: 100%;
+    position: absolute;
+     bottom: 0;
+     right: 0;
+     color: #FFFFFF;
+     box-shadow: 0px 6px 20px #C1CFD933;
+     border-radius: 5px;
+}
+
+.toast-header{
+    background-color: #4E4E4E;
+    color: #FFFFFF;
+    border: 1px solid #717171;
+}

tenant-portal/src/components/Toast/Toast.js

@@ -0,0 +1,24 @@
+import React,{ useState } from 'react';
+import { Toast } from 'react-bootstrap';
+import './Toast.css';
+
+function ToastComponent({
+    header,
+    toastBody
+}) {
+    const [showToast, setShowToast] = useState(true);
+    const toggleShow = () => setShowToast(!showToast);
+
+    return (
+        <Toast className="toast-container" show={showToast} onClose={toggleShow} >
+        <Toast.Header className="toast-header">
+            <strong className="mr-auto">{header} </strong>
+        </Toast.Header>
+        <Toast.Body className="toast-body">
+            {toastBody}
+        </Toast.Body>
+        </Toast>
+    );
+}
+
+export default ToastComponent;

tenant-portal/src/index.js

@@ -17,7 +17,7 @@ root.render(
               <App />
           </Suspense>
       </ReactKeycloakProvider>
-  </React.StrictMode>
+   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

tenant-portal/src/utils/keycloak.js

@@ -1,5 +1,5 @@
 import Keycloak from 'keycloak-js';
 
-const keycloak = new Keycloak('/tenant-portal/keycloak.json');
+const keycloak = new Keycloak('/keycloak.json');
 
 export default keycloak