From 89fd3ca0c562dfbb9cd9429e6ea848645845827b Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 10 Oct 2024 15:28:47 +0200
Subject: [PATCH] :ok_hand: [#390] Make context provider specific to OIDC

---
 frontend/src/App.tsx                            | 12 ++++++------
 frontend/src/lib/api/auth.ts                    |  4 ++--
 frontend/src/lib/contexts/ExtraConfigContext.ts | 16 ----------------
 frontend/src/lib/contexts/OidcConfigContext.ts  | 13 +++++++++++++
 frontend/src/pages/login/Login.stories.tsx      | 12 +++++-------
 frontend/src/pages/login/Login.tsx              |  9 +++++----
 6 files changed, 31 insertions(+), 35 deletions(-)
 delete mode 100644 frontend/src/lib/contexts/ExtraConfigContext.ts
 create mode 100644 frontend/src/lib/contexts/OidcConfigContext.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index efd92fc33..383eabdfe 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -28,9 +28,9 @@ import { useAsync } from "react-use";
 
 import "./App.css";
 import { User, getOIDCInfo, whoAmI } from "./lib/api/auth";
-import ExtraConfigContext, {
-  OidcInfo,
-} from "./lib/contexts/ExtraConfigContext";
+import OidcConfigContext, {
+  OidcConfigContextType,
+} from "./lib/contexts/OidcConfigContext";
 import { formatUser } from "./lib/format/user";
 
 function App() {
@@ -41,7 +41,7 @@ function App() {
   const handle = match?.handle as Record<string, unknown>;
 
   const [user, setUser] = useState<User | null>(null);
-  const [oidcInfo, setOidcInfo] = useState<OidcInfo>({
+  const [oidcInfo, setOidcInfo] = useState<OidcConfigContextType>({
     enabled: false,
     loginUrl: "",
   });
@@ -162,11 +162,11 @@ function App() {
           ],
         }}
       >
-        <ExtraConfigContext.Provider value={{ oidc: oidcInfo }}>
+        <OidcConfigContext.Provider value={oidcInfo}>
           <ModalService>
             <Outlet />
           </ModalService>
-        </ExtraConfigContext.Provider>
+        </OidcConfigContext.Provider>
       </NavigationContext.Provider>
     </div>
   );
diff --git a/frontend/src/lib/api/auth.ts b/frontend/src/lib/api/auth.ts
index 9a076ea56..d40ad2c15 100644
--- a/frontend/src/lib/api/auth.ts
+++ b/frontend/src/lib/api/auth.ts
@@ -1,5 +1,5 @@
 import { cacheDelete, cacheMemo } from "../cache/cache";
-import { OidcInfo } from "../contexts/ExtraConfigContext";
+import { OidcConfigContextType } from "../contexts/OidcConfigContext";
 import { request } from "./request";
 
 export type User = {
@@ -54,7 +54,7 @@ export async function whoAmI() {
 export async function getOIDCInfo() {
   return cacheMemo("getOIDCInfo", async () => {
     const response = await request("GET", "/oidc-info");
-    const promise: Promise<OidcInfo> = response.json();
+    const promise: Promise<OidcConfigContextType> = response.json();
     return promise;
   });
 }
diff --git a/frontend/src/lib/contexts/ExtraConfigContext.ts b/frontend/src/lib/contexts/ExtraConfigContext.ts
deleted file mode 100644
index 546c39c5a..000000000
--- a/frontend/src/lib/contexts/ExtraConfigContext.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createContext } from "react";
-
-export type OidcInfo = {
-  enabled: boolean;
-  loginUrl: string;
-};
-
-export type ExtraConfigContextType = {
-  oidc?: OidcInfo;
-};
-
-const ExtraConfigContext: React.Context<ExtraConfigContextType> = createContext(
-  {},
-);
-
-export default ExtraConfigContext;
diff --git a/frontend/src/lib/contexts/OidcConfigContext.ts b/frontend/src/lib/contexts/OidcConfigContext.ts
new file mode 100644
index 000000000..c7747a702
--- /dev/null
+++ b/frontend/src/lib/contexts/OidcConfigContext.ts
@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type OidcConfigContextType = {
+  enabled: boolean;
+  loginUrl: string;
+};
+
+const OidcConfigContext: React.Context<OidcConfigContextType> = createContext({
+  enabled: false,
+  loginUrl: "",
+} as OidcConfigContextType);
+
+export default OidcConfigContext;
diff --git a/frontend/src/pages/login/Login.stories.tsx b/frontend/src/pages/login/Login.stories.tsx
index 6daaba26b..a1e625106 100644
--- a/frontend/src/pages/login/Login.stories.tsx
+++ b/frontend/src/pages/login/Login.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { expect, within } from "@storybook/test";
 
 import { ReactRouterDecorator } from "../../../.storybook/decorators";
-import ExtraConfigContext from "../../lib/contexts/ExtraConfigContext";
+import OidcConfigContext from "../../lib/contexts/OidcConfigContext";
 import { LoginPage } from "./Login";
 
 const meta: Meta<typeof LoginPage> = {
@@ -23,16 +23,14 @@ export const LoginPageStory: Story = {
 
 export const LoginPageWithOIDC: Story = {
   render: (args) => (
-    <ExtraConfigContext.Provider
+    <OidcConfigContext.Provider
       value={{
-        oidc: {
-          enabled: true,
-          loginUrl: "http://backend.nl/oidc/authenticate",
-        },
+        enabled: true,
+        loginUrl: "http://backend.nl/oidc/authenticate",
       }}
     >
       <LoginPage />
-    </ExtraConfigContext.Provider>
+    </OidcConfigContext.Provider>
   ),
   play: async (context) => {
     const canvas = within(context.canvasElement);
diff --git a/frontend/src/pages/login/Login.tsx b/frontend/src/pages/login/Login.tsx
index 078a7b9b9..f597223c1 100644
--- a/frontend/src/pages/login/Login.tsx
+++ b/frontend/src/pages/login/Login.tsx
@@ -7,7 +7,7 @@ import {
 import { useContext } from "react";
 import { useActionData, useSubmit } from "react-router-dom";
 
-import ExtraConfigContext from "../../lib/contexts/ExtraConfigContext";
+import OidcConfigContext from "../../lib/contexts/OidcConfigContext";
 import "./Login.css";
 
 export type LoginProps = React.ComponentProps<"main"> & {
@@ -30,7 +30,8 @@ const makeRedirectUrl = (oidcLoginUrl: string) => {
  * Login page
  */
 export function LoginPage({ ...props }: LoginProps) {
-  const { oidc } = useContext(ExtraConfigContext);
+  const { enabled: oidcEnabled, loginUrl: oidcLoginUrl } =
+    useContext(OidcConfigContext);
 
   const fields = [
     {
@@ -60,8 +61,8 @@ export function LoginPage({ ...props }: LoginProps) {
   const { detail, nonFieldErrors, ...errors } = formErrors;
 
   const oidcProps: Partial<LoginTemplateProps> = {};
-  if (oidc?.enabled) {
-    oidcProps.urlOidcLogin = makeRedirectUrl(oidc.loginUrl);
+  if (oidcEnabled) {
+    oidcProps.urlOidcLogin = makeRedirectUrl(oidcLoginUrl);
     oidcProps.labelOidcLogin = "Organisatie login";
   }