✨ [#390] Add button to the UI

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>
   );

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;
+  });
+}

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;

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}
     />
   );