From 23a1c8c7c664d1a687d59184034fcf59ec6207fd Mon Sep 17 00:00:00 2001
From: Chaoran Chen <mail@chaoran-chen.de>
Date: Sun, 29 Dec 2024 13:30:40 +0100
Subject: [PATCH] feat(website): show API URLs on API documentation page
 (#3359)

---
 .../src/pages/api-documentation/index.astro   | 35 +++++++++++++++++--
 website/src/utils/getAuthUrl.ts               |  9 +++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/website/src/pages/api-documentation/index.astro b/website/src/pages/api-documentation/index.astro
index fdce4687aa..b52f2ee0a4 100644
--- a/website/src/pages/api-documentation/index.astro
+++ b/website/src/pages/api-documentation/index.astro
@@ -3,8 +3,10 @@ import { authenticationApiDocsUrl } from './authenticationApiDocsUrl';
 import { getRuntimeConfig, getWebsiteConfig } from '../../config';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { routes } from '../../routes/routes.ts';
+import { getAuthBaseUrl } from '../../utils/getAuthUrl';
 
 const clientConfig = getRuntimeConfig().public;
+const keycloakUrl = getAuthBaseUrl();
 
 const websiteConfig = getWebsiteConfig();
 
@@ -24,7 +26,7 @@ const BUTTON_CLASS =
     <div class='container mx-auto p-8'>
         <h1 class='title'>API Documentation</h1>
 
-        <div>
+        <div class='mb-10'>
             <p class='mt-4 mb-4'>
                 There is a
                 <a
@@ -57,7 +59,7 @@ const BUTTON_CLASS =
             </p>
         </div>
 
-        <div class='mb-8 mt-10'>
+        <div class='mb-10'>
             <h2 class='text-xl font-semibold text-primary-400 mb-4'>Backend Server</h2>
             <div class='mb-4'>
                 Please note that Loculus is under continuous development and the endpoints are subject to change.
@@ -65,9 +67,13 @@ const BUTTON_CLASS =
             <a class={BUTTON_CLASS} href={clientConfig.backendUrl + '/swagger-ui/index.html'}>
                 View Backend API Documentation
             </a>
+            <div class='mt-8'>
+                <span class='font-medium'>URL of Backend Server:</span>
+                <code>{clientConfig.backendUrl}</code>
+            </div>
         </div>
 
-        <div>
+        <div class='mb-10'>
             <h2 class='text-xl font-semibold text-primary-400 mb-4'>LAPIS Query Engines</h2>
             <div class='space-y-4'>
                 {
@@ -78,6 +84,29 @@ const BUTTON_CLASS =
                     ))
                 }
             </div>
+            <div class='mt-8'>
+                <span class='font-medium'>URLs of LAPIS Query Engines:</span>
+                <ul class='list-disc ml-6'>
+                    {
+                        Object.entries(clientConfig.lapisUrls).map(([organism, url]) => (
+                            <li>
+                                {organismToDisplayName[organism]}: <code>{url}</code>
+                            </li>
+                        ))
+                    }
+                </ul>
+            </div>
+        </div>
+
+        <div>
+            <h2 class='text-xl font-semibold text-primary-400 mb-4'>Keycloak Server</h2>
+            <div>
+                We use the open source software <a href='https://www.keycloak.org/'>Keycloak</a> for authentication.
+            </div>
+            <div class='mt-2'>
+                <span class='font-medium'>URL of Keycloak Server:</span>
+                <code>{keycloakUrl}</code>
+            </div>
         </div>
     </div>
 </BaseLayout>
diff --git a/website/src/utils/getAuthUrl.ts b/website/src/utils/getAuthUrl.ts
index 24b30389c9..91a0b39ed8 100644
--- a/website/src/utils/getAuthUrl.ts
+++ b/website/src/utils/getAuthUrl.ts
@@ -20,3 +20,12 @@ export const getAuthUrl = async (redirectUrl: string) => {
     });
     /* eslint-enable @typescript-eslint/naming-convention */
 };
+
+export const getAuthBaseUrl = async () => {
+    const authUrl = await getAuthUrl('/');
+    const index = authUrl.indexOf('/realms');
+    if (index === -1) {
+        return null;
+    }
+    return authUrl.substring(0, index);
+};