fix(frontend): Added Error Page for when user is with right credentia…

…ls but not subscribed to the App
eclipse-tractusx · Feb 15, 2024 · 87149d2 · 87149d2
1 parent 2d4df2e
commit 87149d2
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,10 +11,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update dependency on vulnerability for @adobe/css-tools and axios
 - Fix styles on Save Reports and Upload Ratings
 - Fix roles that are shown on Table info
+- Fix finding for entering country risk if user is not subscribed
 
 ### Changed
 - Updated arc42 documentation to align with the EDC updated Country Risk application.
 
+### Added
+- Added Error Page for when user is with right credentials but not subscribed to the App
+
+
 ## [1.3.0] - 2023-12-06
 
 ### Added 

diff --git a/src/App.js b/src/App.js
@@ -31,6 +31,7 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import AboutPage from "./components/dashboard/AboutCard/AboutPage";
 import { FooterPortal } from "./components/dashboard/Footer/FooterPortal";
+import ErrorPageCR from "./components/dashboard/ErrorPage/ErrorPageCR";
 
 function App() {
   return (
@@ -42,18 +43,17 @@ function App() {
               <CompanyUserProvider>
                 <ReportProvider>
                   <ReloadProvider>
-                    <Router>
-                      <div className="navbar">
-                        <NavigationBar />
-                      </div>
-                      <div className="App">
-                        <Routes>
-                          <Route path="/" element={<Dashboard />} />
-                          <Route path="/about" element={<AboutPage />} />
-                        </Routes>
-                        <FooterPortal />
-                      </div>
-                    </Router>
+                    <div className="navbar">
+                      <NavigationBar />
+                    </div>
+                    <div className="App">
+                      <Routes>
+                        <Route path="/" element={<Dashboard />} />
+                        <Route path="/about" element={<AboutPage />} />
+                        <Route path="/error" element={<ErrorPageCR />} />
+                      </Routes>
+                      <FooterPortal />
+                    </div>
                   </ReloadProvider>
                 </ReportProvider>
               </CompanyUserProvider>

diff --git a/src/components/dashboard/AboutCard/AboutPage.js b/src/components/dashboard/AboutCard/AboutPage.js
@@ -29,7 +29,7 @@ export default function AboutPage() {
   return (
     <div className="AboutPage">
       <PageHeader title="About" topPage={false} headerHeight={200}>
-        <PageBreadcrumb style background="rgb(223, 228, 234)" />
+        <PageBreadcrumb title={"About"} style background="rgb(223, 228, 234)" />
       </PageHeader>
       <div className="AboutCardContainer">
         <AboutCard className="AboutCard" {...legalJson} />

diff --git a/src/components/dashboard/ErrorPage/ErrorPageCR.js b/src/components/dashboard/ErrorPage/ErrorPageCR.js
@@ -0,0 +1,62 @@
+/********************************************************************************
+ * Copyright (c) 2022,2024 BMW Group AG
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { AboutCard, PageHeader } from "@catena-x/portal-shared-components";
+import legalJson from "../../../legal-notice.json";
+import { Link } from "@mui/icons-material";
+import { Breadcrumb, Typography } from "@catena-x/portal-shared-components";
+import { PageBreadcrumb } from "../PageBreadCrumb/PageBreadcrumb";
+import "./error.scss";
+import { ErrorPage } from "@catena-x/portal-shared-components";
+import { FooterPortal } from "../Footer/FooterPortal";
+import NavigationBar from "../NavigationBar/NavigationBar";
+import { useNavigate } from "react-router-dom";
+import { getPortalLink } from "../../services/EnvironmentService";
+const ErrorPageCR = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="Error">
+      <NavigationBar />
+      <PageHeader title="Error" topPage={false} headerHeight={200}>
+
+      </PageHeader>
+      <ErrorPage
+        additionalDescription="Please contact your admin."
+        color="gray"
+        description="The server encountered an internal error or misconfiguration and was unable to complete your request."
+        header="401 (Unauthorized)"
+        homeButtonTitle="Homepage"
+        hasNavigation={false}
+        onHomeClick={() => {
+          window.location.href = getPortalLink() + "/appmarketplace";
+        }}
+        onReloadClick={() => {
+          navigate("/");
+        }}
+        reloadButtonTitle="Reload Page"
+        title="Oops, Something went wrong, subscribe to Country Risk App not found."
+      />
+      <FooterPortal></FooterPortal>
+    </div>
+  );
+};
+
+export default ErrorPageCR;
diff --git a/src/components/dashboard/ErrorPage/error.scss b/src/components/dashboard/ErrorPage/error.scss
@@ -0,0 +1,28 @@
+/********************************************************************************
+* Copyright (c) 2022,2024 BMW Group AG
+* Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+*
+* See the NOTICE file(s) distributed with this work for additional
+* information regarding copyright ownership.
+*
+* This program and the accompanying materials are made available under the
+* terms of the Apache License, Version 2.0 which is available at
+* https://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* SPDX-License-Identifier: Apache-2.0
+********************************************************************************/
+
+.ErrorPage {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: 100;
+  font-size: small;
+}
diff --git a/src/components/dashboard/PageBreadCrumb/PageBreadcrumb.js b/src/components/dashboard/PageBreadCrumb/PageBreadcrumb.js
@@ -32,7 +32,7 @@ function isParamsEmpty(params) {
   return true;
 }
 
-export const PageBreadcrumb = () => {
+export const PageBreadcrumb = ({ title }) => {
   const navigate = useNavigate();
   const params = useParams();
   const location = useLocation();
@@ -54,7 +54,7 @@ export const PageBreadcrumb = () => {
   }, [location, params]);
 
   const getCrumbTitle = (crumb) => {
-    return "About";
+    return title;
   };
 
   const breadcrumbs = () => {

diff --git a/src/components/dashboard/RootComponent/RootComponent.js b/src/components/dashboard/RootComponent/RootComponent.js
@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2022,2024 BMW Group AG
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+import React, { useState, useEffect } from "react";
+import App from "../../../App";
+import ErrorPageCR from "../ErrorPage/ErrorPageCR";
+
+const RootComponent = ({ user }) => {
+  const [shouldShowErrorPage, setShouldShowErrorPage] = useState(false);
+
+  useEffect(() => {
+    if (user.access) {
+      setShouldShowErrorPage(false);
+    } else {
+      setShouldShowErrorPage(true);
+    }
+  }, [user]);
+
+  return shouldShowErrorPage ? <ErrorPageCR /> : <App />;
+};
+
+export default RootComponent;
diff --git a/src/components/services/UserService.js b/src/components/services/UserService.js
@@ -55,17 +55,39 @@ const keycloakConfigBpdm = {
 
 const KC = new Keycloak(keycloakConfigCountryRisk);
 
+var hasAcess = false;
+
+const getHasAcess = () => hasAcess;
+
 const init = (onAuthenticatedCallback) => {
   KC.init({
     onLoad: "login-required",
     silentCheckSsoRedirectUri:
       window.location.origin + "/silent-check-sso.html",
     pkceMethod: "S256",
   }).then((authenticated) => {
-    if (authenticated) {
-      info(`${getUsername()} authenticated`);
+    // Extrai resource_access do tokenParsed para simplificar a leitura
+    const resourceAccess = KC.tokenParsed?.resource_access || {};
+    // Verifica se resourceAccess contém a propriedade especificada pelo clientId
+    const hasClientAccess = resourceAccess.hasOwnProperty(
+      keycloakConfigCountryRisk.clientId
+    );
+
+    if (
+      authenticated &&
+      Object.keys(resourceAccess).length > 0 &&
+      hasClientAccess
+    ) {
+      info("authenticated with access");
+      hasAcess = true; // Assume que hasAcess está definida em algum lugar do seu código
+      onAuthenticatedCallback(getLoggedUser());
+    } else if (authenticated) {
+      // Isso cobre tanto a falta de clientId quanto resourceAccess vazio
+      info("authenticated without sufficient access");
+      hasAcess = false;
       onAuthenticatedCallback(getLoggedUser());
     } else {
+      info("User not authenticated, initiating login");
       doLogin();
     }
   });
@@ -143,6 +165,7 @@ const getLoggedUser = () => ({
   isAdmin: isAdmin(),
   token: getToken(),
   parsedToken: getParsedToken(),
+  access: getHasAcess(),
 });
 
 const UserService = {

diff --git a/src/index.js b/src/index.js
@@ -19,15 +19,16 @@
  ********************************************************************************/
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import { Provider } from "react-redux";
+
 import {
   SharedThemeProvider,
   SharedCssBaseline,
 } from "cx-portal-shared-components";
 import UserService from "./components/services/UserService";
 import { getHostname } from "./components/services/EnvironmentService";
 
+import RootComponent from "./components/dashboard/RootComponent/RootComponent";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 const hostname = getHostname();
 if (hostname.includes("country-risk-dashboard.dev")) import("./index-dev.scss");
 if (hostname.includes("country-risk-dashboard.int")) import("./index-int.scss");
@@ -36,26 +37,18 @@ else {
 }
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-if(hostname==="localhost"){
+
+UserService.init((user) => {
   root.render(
     <React.StrictMode>
-      <SharedCssBaseline />
+      {" "}
+      <SharedCssBaseline />{" "}
       <SharedThemeProvider>
-        <App />
-      </SharedThemeProvider>
+        {" "}
+        <Router>
+          <RootComponent user={user} />{" "}
+        </Router>
+      </SharedThemeProvider>{" "}
     </React.StrictMode>
   );
-} else {
-  UserService.init((user) => {
-    root.render(
-      <React.StrictMode>
-        {" "}
-        <SharedCssBaseline />{" "}
-        <SharedThemeProvider>
-          {" "}
-          <App />{" "}
-        </SharedThemeProvider>{" "}
-      </React.StrictMode>
-    );
-  });
-}
+});