From dbee12b9ef040be368722992056d4b3192950ea1 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Thu, 3 Oct 2024 16:42:53 +0200
Subject: [PATCH] :sparkles: [#390] Add button to the UI

---
 frontend/src/App.tsx                          | 22 +++++++++++++++----
 frontend/src/lib/api/auth.ts                  | 12 ++++++++++
 .../src/lib/contexts/ExtraConfigContext.ts    | 16 ++++++++++++++
 frontend/src/pages/login/Login.tsx            | 20 ++++++++++++++++-
 4 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/lib/contexts/ExtraConfigContext.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b0ca5e142..efd92fc33 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -27,7 +27,10 @@ import {
 import { useAsync } from "react-use";
 
 import "./App.css";
-import { User, whoAmI } from "./lib/api/auth";
+import { User, getOIDCInfo, whoAmI } from "./lib/api/auth";
+import ExtraConfigContext, {
+  OidcInfo,
+} from "./lib/contexts/ExtraConfigContext";
 import { formatUser } from "./lib/format/user";
 
 function App() {
@@ -38,12 +41,21 @@ function App() {
   const handle = match?.handle as Record<string, unknown>;
 
   const [user, setUser] = useState<User | null>(null);
+  const [oidcInfo, setOidcInfo] = useState<OidcInfo>({
+    enabled: false,
+    loginUrl: "",
+  });
 
   useAsync(async () => {
     const user = await whoAmI();
     setUser(user);
   }, [state]);
 
+  useAsync(async () => {
+    const info = await getOIDCInfo();
+    setOidcInfo(info);
+  }, [state]);
+
   const breadcrumbItems = (
     (handle?.breadcrumbItems || []) as BreadcrumbItem[]
   ).map((b) => ({
@@ -150,9 +162,11 @@ function App() {
           ],
         }}
       >
-        <ModalService>
-          <Outlet />
-        </ModalService>
+        <ExtraConfigContext.Provider value={{ oidc: oidcInfo }}>
+          <ModalService>
+            <Outlet />
+          </ModalService>
+        </ExtraConfigContext.Provider>
       </NavigationContext.Provider>
     </div>
   );
diff --git a/frontend/src/lib/api/auth.ts b/frontend/src/lib/api/auth.ts
index 86d37a79b..9a076ea56 100644
--- a/frontend/src/lib/api/auth.ts
+++ b/frontend/src/lib/api/auth.ts
@@ -1,4 +1,5 @@
 import { cacheDelete, cacheMemo } from "../cache/cache";
+import { OidcInfo } from "../contexts/ExtraConfigContext";
 import { request } from "./request";
 
 export type User = {
@@ -46,3 +47,14 @@ export async function whoAmI() {
     return promise;
   });
 }
+
+/**
+ * API call to get info about OIDC.
+ */
+export async function getOIDCInfo() {
+  return cacheMemo("getOIDCInfo", async () => {
+    const response = await request("GET", "/oidc-info");
+    const promise: Promise<OidcInfo> = response.json();
+    return promise;
+  });
+}
diff --git a/frontend/src/lib/contexts/ExtraConfigContext.ts b/frontend/src/lib/contexts/ExtraConfigContext.ts
new file mode 100644
index 000000000..546c39c5a
--- /dev/null
+++ b/frontend/src/lib/contexts/ExtraConfigContext.ts
@@ -0,0 +1,16 @@
+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/pages/login/Login.tsx b/frontend/src/pages/login/Login.tsx
index 3b21cf824..2ed70460c 100644
--- a/frontend/src/pages/login/Login.tsx
+++ b/frontend/src/pages/login/Login.tsx
@@ -1,6 +1,13 @@
-import { AttributeData, LoginTemplate, forceArray } from "@maykin-ui/admin-ui";
+import {
+  AttributeData,
+  LoginTemplate,
+  LoginTemplateProps,
+  forceArray,
+} from "@maykin-ui/admin-ui";
+import { useContext } from "react";
 import { useActionData, useSubmit } from "react-router-dom";
 
+import ExtraConfigContext from "../../lib/contexts/ExtraConfigContext";
 import "./Login.css";
 
 export type LoginProps = React.ComponentProps<"main"> & {
@@ -11,6 +18,8 @@ export type LoginProps = React.ComponentProps<"main"> & {
  * Login page
  */
 export function LoginPage({ ...props }: LoginProps) {
+  const { oidc } = useContext(ExtraConfigContext);
+
   const fields = [
     {
       autoFocus: true,
@@ -38,6 +47,14 @@ export function LoginPage({ ...props }: LoginProps) {
   );
   const { detail, nonFieldErrors, ...errors } = formErrors;
 
+  const oidcProps: Partial<LoginTemplateProps> = {};
+  if (oidc?.enabled) {
+    oidcProps.urlOidcLogin = oidc.loginUrl;
+    oidcProps.labelOidcLogin = "Organisatie login";
+  }
+
+  console.log(oidc, oidcProps, props);
+
   return (
     <LoginTemplate
       slotPrimaryNavigation={<></>} // FIXME: Should be easier to override
@@ -48,6 +65,7 @@ export function LoginPage({ ...props }: LoginProps) {
         onSubmit: (_, data) =>
           submit(data as AttributeData<string>, { method: "POST" }),
       }}
+      {...oidcProps}
       {...props}
     />
   );