Authentication support via IdP

.env

@@ -0,0 +1 @@
+VITE_BaseURL="https://api-test.ramanchada.ideaconsult.net/"

package.json

@@ -18,16 +18,21 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@react-keycloak/web": "^3.4.0",
     "@tanstack/react-table": "^8.13.2",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "easy-autocomplete": "^1.3.5",
     "framer-motion": "^10.18.0",
     "jquery": "^3.7.1",
     "json-format-highlight": "^1.0.4",
+    "keycloak-js": "^26.0.0",
     "lucide-react": "^0.350.0",
+    "oidc-client-ts": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-oidc-context": "^3.2.0",
     "react-router-dom": "^6.22.0",
     "survey-core": "latest",
     "survey-react-ui": "latest",

public/serviceWorker.js

@@ -0,0 +1,44 @@
+let accessToken = "";
+
+self.addEventListener("install", (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "TOKEN") {
+    accessToken = event.data.token;
+    console.log(accessToken);
+  }
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const url = new URL(event.request.url);
+
+  if (
+    accessToken &&
+    url.origin.startsWith("https://") &&
+    url.origin.endsWith(".ideaconsult.net/template") &&
+    request.method === "GET" &&
+    url.origin !== "https://iam.ideaconsult.net" &&
+    url.origin !== "https://idp.ideaconsult.net" &&
+    // request.destination === "image" &&
+    event.request.headers["Authorization"] == undefined
+  ) {
+    const authRequest = new Request(request, {
+      headers: new Headers({
+        ...request.headers,
+        Authorization: `Bearer ${accessToken}`,
+      }),
+      mode: "cors",
+    });
+    event.respondWith(fetch(authRequest));
+    console.log("with token");
+  } else {
+    console.log("without token");
+  }
+});

src/DataTable/TemplateTable.tsx

@@ -87,6 +87,11 @@ export default function TemplateTable({ data }) {
     },
   });
 
+  console.log(table.getPageCount());
+  // console.log(table.getState().pagination.pageIndex);
+  const pageCount = table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex;
+
   const setIdShosen = useSetIsShosen();
   useEffect(() => {
     setIdShosen(data && rowSelection ? data[rowSelection]?.uuid : null);
@@ -164,6 +169,12 @@ export default function TemplateTable({ data }) {
         >
           Previous
         </button>
+        <div className="paginationPageCount">
+          <p>
+            page <span className="pageCurrent">{currentPage + 1}</span> of{" "}
+            <span className="pageCurrent">{pageCount}</span>
+          </p>
+        </div>
         <button
           className="paginBtn"
           variant="outline"

src/DialogComp/styles.css

@@ -137,6 +137,31 @@ button[disabled] {
   color: #919191;
 }
 
+.buttonLogin {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 0.3rem 1rem;
+  border: 1px solid #def4ff !important;
+  background: #fff;
+  color: #282828;
+  white-space: nowrap;
+  border-radius: 6px;
+}
+.buttonLogin:hover {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 9px;
+  padding: 0.3rem 1rem;
+  border: 1px solid #def4ff !important;
+  background: #def4ff !important;
+  color: #282828;
+  white-space: nowrap;
+  border-radius: 6px;
+}
+
 .IconButton {
   font-family: inherit;
   border-radius: 100%;

src/MenuBar/Header.css

@@ -3,6 +3,8 @@
   display: flex;
   align-items: center;
   border-bottom: 1px solid #e2e2e2;
+  justify-content: space-between;
+  padding: 0 1rem 0 0;
 }
 
 .headerStartScreen {

src/MenuBar/LogoBar.tsx

@@ -1,19 +1,35 @@
 import React, { useState } from "react";
-import { Navigate } from "react-router-dom";
 import "./Header.css";
 
-import PreferencesDialog from "@/DialogComp/PreferencesDialog";
+import { useKeycloak } from "@react-keycloak/web";
+import { useNavigate } from "react-router-dom";
 
-import { useSetUuid, useSetIsShosen } from "../store/store";
 import { Link } from "react-router-dom";
-import Button from "@/ui/Button";
+import { useSetIsShosen, useSetUuid } from "../store/store";
 
 export default function LogoBar({ startScreen, uuid, setProjectID }) {
   const setUUID = useSetUuid();
   const setIdShosen = useSetIsShosen();
   const [projectName, setProjectName] = useState(() =>
     localStorage.getItem("project")
   );
+
+  const { keycloak } = useKeycloak();
+  const navigate = useNavigate();
+
+  const username = keycloak.tokenParsed?.preferred_username
+    ? keycloak.tokenParsed?.preferred_username
+    : localStorage.getItem("username");
+
+  const stored_token = localStorage.getItem("token");
+
+  const logoutHandle = () => {
+    navigate("/");
+    localStorage.removeItem("username");
+    localStorage.removeItem("token");
+    localStorage.removeItem("refreshToken");
+    keycloak.logout();
+  };
   return (
     <div className={startScreen ? "headerStartScreen" : "header"}>
       <div>
@@ -32,19 +48,30 @@ export default function LogoBar({ startScreen, uuid, setProjectID }) {
           </h1>
         </Link>
       </div>
-      <div style={{ display: "flex", gap: "22px", alignItems: "center" }}>
-        {projectName ? (
-          <div className="projectName">
-            <span className="projectLabel">Project:</span>
-            <span>{projectName}</span>
-          </div>
+      <div className="userInfo">
+        <div className="username">
+          {keycloak.authenticated || username ? username : ""}
+        </div>
+        {keycloak.authenticated || stored_token ? (
+          <button
+            onClick={() => {
+              logoutHandle();
+            }}
+            className="buttonLogin"
+          >
+            Log out
+          </button>
         ) : (
-          <p className="projectPromt">Project is not selected</p>
+          <button
+            onClick={() => {
+              // navigate("/");
+              keycloak.login();
+            }}
+            className="buttonLogin"
+          >
+            Log in
+          </button>
         )}
-        <PreferencesDialog
-          setProjectName={setProjectName}
-          projectName={projectName}
-        />
       </div>
     </div>
   );

src/MenuBar/TopMenuBar.tsx

@@ -6,9 +6,9 @@ import "./Header.css";
 
 import config from "../utils/config";
 
-import { useIntermediateData, useUuid, useProjectID } from "../store/store";
+import { useIntermediateData, useProjectID, useUuid } from "../store/store";
 
-import { postRequestUUID, downloadFile } from "../lib/request";
+import { downloadFile, postRequestUUID } from "../lib/request";
 
 export default function TopMenuBar() {
   const [copied, setCopied] = useState(false);

src/StartScreenComp/StartScreenComp.css

@@ -3,11 +3,23 @@
   background-color: #fff;
   padding: 0 2rem;
 }
+.description {
+  line-height: 1.6rem;
+}
 .descriptionNew {
-  margin: 2rem;
+  margin: 1rem 0 2rem 2rem;
   display: flex;
   gap: 60px;
-  align-items: flex-start;
+  align-items: center;
+  gap: 120px;
+  justify-content: space-between;
+}
+
+.topBarAuth {
+  /* display: flex; */
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
 }
 
 .underDev {
@@ -19,6 +31,19 @@
   padding: 0.3rem 0.8rem;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
+  margin-top: -30px;
+}
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.username {
+  color: #6d6d6d;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: capitalize;
 }
 
 .createNewBtn {
@@ -137,9 +162,26 @@ th {
 .pagination {
   margin-top: 2rem;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: flex-end;
-  gap: 12px;
+  gap: 18px;
+}
+
+.paginationPageCount {
+  width: 110px;
+  /* color: #777777; */
+  /* text-transform: uppercase; */
+  font-size: 14px;
+}
+.pageCurrent {
+  display: inline-block;
+  background-color: #e3f6ff;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: 700;
 }
 
 .paginBtn {