Secure queen routes (#25)

* wip

* case folder issue

* restore folder

* restore authentication-v2

* Update SurveyUnitMapping.tsx

* display version

* bump queens version

drama-queen/package.json

@@ -1,7 +1,7 @@
 {
   "name": "drama-queen",
   "private": true,
-  "version": "1.3.4",
+  "version": "1.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port 5000 --strictPort",
@@ -14,7 +14,7 @@
     "dexie-react-hooks": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.9.0"
+    "react-router-dom": "^6.14.1"
   },
   "devDependencies": {
     "@types/node": "^18.15.0",

drama-queen/src/pages/Env.tsx → drama-queen/src/pages/env/DisplayValues.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import './Env.css'
+import './env.css'
 
-function Env() {
+export function EnvPage() {
   return (
     <div className="App">
-      <h1>Drama Queen</h1>
+      <h1>Drama Queen v{APP_VERSION}</h1>
       <div className="card">
         <p>Les variables d'environnements</p>
         <p className="read-the-docs">
@@ -18,6 +18,4 @@ function Env() {
       </div>
     </div >
   )
-}
-
-export default Env
+};

drama-queen/src/pages/env/index.ts

@@ -0,0 +1 @@
+export * from "./DisplayValues";

drama-queen/src/pages/queenMapping/SurveyUnitMapping.tsx

@@ -0,0 +1,25 @@
+import { db } from 'indexedDb'
+import { useParams } from 'react-router-dom'
+import { useLiveQuery } from "dexie-react-hooks";
+import { READ_ONLY } from "utils/constants";
+
+type Params = {
+  readonly?: typeof READ_ONLY;
+  id: string;
+}
+
+export function SurveyUnitMapping() {
+  const { readonly, id } = useParams<Params>();
+
+  const surveyUnit = useLiveQuery(
+    () => db.surveyUnit.get({ id: id }), [id]
+  )
+
+  if (!surveyUnit) return <div>In Progress</div>
+
+  //return <Navigate to={(`/queen/${readonly ? `${readonly}/` : ''}questionnaire/${surveyUnit?.questionnaireId}/survey-unit/${id}`)} />
+  //We know that we will reload the entire app but it's due on purpose
+  //Because of a faulty architecture and a queen non-modification constraint, we need to know which queen we're going to redirect to when the DramaQueen is mounted.
+  window.location.href = `/queen/${readonly ? `${readonly}/` : ''}questionnaire/${surveyUnit?.questionnaireId}/survey-unit/${id}`;
+  return null;
+}

drama-queen/src/pages/QueenMapping/VisualisationMapping.tsx → drama-queen/src/pages/queenMapping/VisualisationMapping.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { isQueenV2Survey } from "utils/checkLunaticVersion/isQueenV2Survey";
 
-function VisualisationMapping() {
+export function VisualisationMapping() {
   const [searchParams,] = useSearchParams();
   const questionnaireUrl = searchParams.get("questionnaire")
   const [isQueenV2, setIsQueenV2] = useState<boolean | undefined>(undefined);
@@ -23,6 +23,4 @@ function VisualisationMapping() {
   if (!isSurveyFetched) return <div>Loading</div>
 
   return isQueenV2 ? <queen-v2-app /> : <queen-app />
-}
-
-export default VisualisationMapping
+}

drama-queen/src/pages/queenMapping/index.ts

@@ -0,0 +1,2 @@
+export * from "./SurveyUnitMapping";
+export * from "./VisualisationMapping";

drama-queen/src/routing/createRoutes.tsx

@@ -0,0 +1,39 @@
+import { EnvPage } from "pages/env";
+import { SurveyUnitMapping, VisualisationMapping } from "pages/queenMapping";
+import { READ_ONLY } from "utils/constants";
+import type { RouteObject } from "react-router-dom";
+
+//ReadOnly path is a bad pattern must be change (affects pearl,moog,queen)
+export const createRoutes = (queenVersion: 1 | 2 = 1): RouteObject[] => {
+  const queenElement = queenVersion === 1 ? <queen-app /> : <queen-v2-app />;
+  return [
+    {
+      path: "queen/env",
+      element: <EnvPage />
+    },
+    {
+      path: `/queen/:${READ_ONLY}?/survey-unit/:id`,
+      element: <SurveyUnitMapping />
+    },
+    {
+      path: `/queen/:${READ_ONLY}?/questionnaire/:questionnaireId/survey-unit/:surveyUnitId`,
+      element: queenElement
+    },
+    {
+      path: "/queen/visualize/*",
+      element: <VisualisationMapping />
+    },
+    {
+      path: "/queen/synchronize",
+      element: queenElement
+    },
+    {
+      path: "/queen/authentication/*",
+      element: queenElement
+    },
+    {
+      path: "/queen/authentication-v2/*",
+      element: queenElement
+    },
+  ]
+}

drama-queen/src/routing/router-factory.ts

@@ -1,5 +1,5 @@
 import { createBrowserRouter, createMemoryRouter } from "react-router-dom";
-import { routes } from "./routes";
+import { createRoutes } from "./createRoutes";
 import { RoutingStrategy } from "./types";
 
 interface CreateRouterProps {
@@ -8,10 +8,17 @@ interface CreateRouterProps {
 }
 
 export function createRouter({ strategy, initialPathname }: CreateRouterProps) {
+  const lowerHref = window.location.href.toLowerCase();
+  const keywords = ["queenv2", "authentication-v2"];
+  const isQueenV2 = keywords.some((keyword) => lowerHref.includes(keyword));
+
+  const appRoutes = createRoutes(isQueenV2 ? 2 : 1);
   if (strategy === "browser") {
-    return createBrowserRouter(routes);
+    return createBrowserRouter(appRoutes);
   }
 
   const initialEntries = [initialPathname || "/"];
-  return createMemoryRouter(routes, { initialEntries: initialEntries });
+  return createMemoryRouter(appRoutes, {
+    initialEntries: initialEntries,
+  });
 }

drama-queen/src/vite-env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/client" />
 
+declare const APP_VERSION: string;
 interface ImportMetaEnv {
   readonly VITE_QUEEN_URL: string;
   readonly VITE_QUEEN_V2_URL: string;

drama-queen/vite.config.ts

@@ -7,6 +7,10 @@ import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode }) => {
   return {
+    define: {
+      // eslint-disable-next-line no-undef
+      APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    },
     plugins: [
       react(),
       federation({
@@ -41,7 +45,11 @@ export default defineConfig(({ command, mode }) => {
         strategies: "injectManifest",
         srcDir: "src",
         filename: "sw.js",
-        includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+        includeAssets: [
+          "favicon.ico",
+          "apple-touch-icon.png",
+          "masked-icon.svg",
+        ],
         manifest: {
           name: "Questionnaire",
           short_name: "Questionnaire",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "drama-queen-container",
   "private": true,
-  "version": "1.2.6",
+  "version": "1.3.0",
   "workspaces": [
     "drama-queen",
     "queen-v2",
@@ -10,11 +10,11 @@
   "scripts": {
     "build": "lerna run build",
     "build:drama-queen": "lerna run build --scope 'drama-queen'",
-    "build:queen-cra": "lerna run build --scope 'queen-cra'",
+    "build:queen": "lerna run build --scope 'queen'",
     "build:queen-v2": "lerna run build --scope 'queen-v2'",
     "serve:drama-queen": "lerna run serve --scope 'drama-queen'",
     "dev:drama-queen": "lerna run dev --scope 'drama-queen'",
-    "dev:queen-cra": "lerna run start --scope 'queen'",
+    "dev:queen": "lerna run start --scope 'queen'",
     "dev:queen-v2": "lerna run start --scope 'queen-v2'",
     "stop": "kill-port --port 5000,5001,5002"
   },

queen-v2/configuration/files/oidc.json

@@ -8,7 +8,7 @@
     "response_type": "code",
     "post_logout_redirect_uri": "my_origin/",
     "scope": "openid profile email",
-    "silent_redirect_uri": "my_origin/authentication-v2/silent_callback",
+    "silent_redirect_uri": "my_origin/authentication/silent_callback",
     "automaticSilentRenew": true,
     "loadUserInfo": true
   }

queen-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "queen-v2",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Web application for the management of questionnaires powered by Lunatic",
   "repository": {
     "type": "git",

queen-v2/src/components/router/rooter.js

@@ -17,7 +17,7 @@ const Rooter = () => {
     <Switch>
       <Route
         path={`/queen/:${READ_ONLY}?/questionnaire/:idQ/survey-unit/:idSU`}
-        component={OrchestratorManager}
+        component={secure(OrchestratorManager)}
       />
       <Route path={`/queen/:${READ_ONLY}?/survey-unit/:idSU`} component={QueenRedirect} />
       {!standalone && <Route path="/queen/synchronize" component={secure(Synchronize)} />}

queen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "queen",
-  "version": "0.10.17",
+  "version": "0.10.17-rc.1",
   "description": "Web application for the management of questionnaires powered by Lunatic",
   "repository": {
     "type": "git",

queen/src/components/auth/provider/AuthProviderOIDC.js

@@ -45,17 +45,17 @@ const AuthProviderOIDC = ({ children }) => {
       });
   }, [conf]);
 
-  if (loading) return <Loader />;
+  if (loading) return <Loader message="loading" />;
   if (error) return <Error message={D.noAuthFile} />;
   return (
     <AuthenticationProvider
       configuration={oidcConf}
       isEnabled={oidcConf.isEnabled}
       UserStore={InMemoryWebStorage}
-      callbackComponentOverride={() => <Loader />}
-      authenticating={() => <Loader />}
+      callbackComponentOverride={() => <Loader message="callbackComponentOverride" />}
+      authenticating={() => <Loader message="authenticating" />}
       notAuthorized={() => <Error message={D.unauthorized} />}
-      sessionLostComponent={() => <Loader />}
+      sessionLostComponent={() => <Loader message="sessionLostComponent" />}
     >
       {children}
     </AuthenticationProvider>

queen/src/components/router/rooter.js

@@ -16,7 +16,7 @@ const Rooter = () => {
     <Switch>
       <Route
         path={`/queen/:${READ_ONLY}?/questionnaire/:idQ/survey-unit/:idSU`}
-        component={OrchestratorManager}
+        component={secure(OrchestratorManager)}
       />
       <Route path={`/queen/:${READ_ONLY}?/survey-unit/:idSU`} component={QueenRedirect} />
       {!standalone && <Route path="/queen/synchronize" component={secure(Synchronize)} />}