Merge pull request AOT-Technologies#2068 from abilpraju-aot/bugfix/FW…

…F-3342-Auth-issue

Autherization for role check

forms-flow-web/src/components/AccessDenied/accessDenied.scss

@@ -0,0 +1,12 @@
+.access-denied-text {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 2rem;
+    color: var(--ff-black);
+    opacity: 1;
+  }
+  .access-denied{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1rem;
+    color: var(--ff-black);
+    opacity: 1;
+  }

forms-flow-web/src/components/AccessDenied/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { kcServiceInstance } from "../PrivateRoute"; // Import the kcServiceInstance function
+import accessDeniedIcon from "./AccessDenied.svg"; 
+import './accessDenied.scss';
+import { useTranslation } from "react-i18next";
+const AccessDenied = () => {
+  const { t } = useTranslation();
+  const handleLogout = () => {
+    const kcInstance = kcServiceInstance(); // Get the Keycloak instance
+    kcInstance.userLogout();
+  };
+
+  return (
+      <div className="d-flex flex-column  align-items-center text-center">
+      <img src={accessDeniedIcon} alt="Access Denied Icon" className="mb-4 mt-2"/>
+      <h1 className="access-denied-text">{t("Access Denied")}</h1>
+      <span className="access-denied">{t("You don't have permission to access this page.")}</span>
+      <span className="access-denied">{t("Please contact your administrator or try again later.")}</span>
+      <button className="btn btn-primary me-1 mt-4" onClick={handleLogout}>{t("Return to login")}</button>
+    </div>
+  );
+};
+
+export default AccessDenied;

forms-flow-web/src/components/Form/Item/Edit.js

@@ -100,7 +100,7 @@ const Edit = React.memo(() => {
   const [formDescription, setFormDescription] = useState("");
   const lang = useSelector((state) => state.user.lang);
   const history = useHistory();
-  const { t } = useTranslation();
+  const { t} = useTranslation();
   const [show, setShow] = useState(false);
   const [currentFormLoading, setCurrentFormLoading] = useState(false);
   const [saveAsNewVersionselected, setSaveAsNewVersion] = useState(false);

forms-flow-web/src/components/PrivateRoute.jsx

@@ -50,7 +50,7 @@ import {
 } from "../apiManager/endpoints/config";
 import { AppConfig } from "../config";
 import { getFormioRoleIds } from "../apiManager/services/userservices";
-import { toast } from "react-toastify";
+import AccessDenied from "./AccessDenied";
 
 export const kcServiceInstance = (tenantId = null) => {
   return KeycloakService.getInstance(
@@ -78,7 +78,7 @@ const PrivateRoute = React.memo((props) => {
   const redirecUrl = MULTITENANCY_ENABLED ? `/tenant/${tenantId}/` : `/`;
   const selectedLanguage = useSelector((state) => state.user.lang);
   const tenant = useSelector((state) => state.tenants);
-
+  const [authError, setAuthError] = React.useState(false);
   const [kcInstance, setKcInstance] = React.useState(getKcInstance());
 
   const authenticate = (instance, store) => {
@@ -126,10 +126,7 @@ const PrivateRoute = React.memo((props) => {
         instance.initKeycloak((authenticated) => {
           if(!authenticated)
           {
-           toast.error("Unauthorized Access.",{autoClose: 3000});
-           setTimeout(function() {
-            instance.userLogout();
-          }, 3000);
+            setAuthError(true);
           }
           else{
             authenticate(instance, props.store);
@@ -230,7 +227,9 @@ const PrivateRoute = React.memo((props) => {
   );
   return (
     <>
-      {isAuth ? (
+      {authError ? (
+        <AccessDenied />
+      ) : isAuth ? (
         <Suspense fallback={<Loading />}>
           <Switch>
             {ENABLE_FORMS_MODULE && (
@@ -276,7 +275,7 @@ const PrivateRoute = React.memo((props) => {
             )}
 
             <Route exact path={BASE_ROUTE}>
-             {userRoles.length && <Redirect
+              {userRoles.length && <Redirect
                 to={
                   userRoles?.includes(STAFF_REVIEWER)
                     ? `${redirecUrl}task`