Customisable OIDC label #325 (#327)

components/Auth/OpenID.vue

@@ -4,7 +4,14 @@
       :href="`/auth/oidc?redirect=${route.query.redirect ?? '/'}`"
       class="transition rounded-md grow inline-flex items-center justify-center bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
     >
-      <i18n-t keypath="auth.signin.externalProvider" tag="span" scope="global">
+      <i18n-t
+        keypath="auth.signin.signinWithExternalProvider"
+        tag="span"
+        scope="global"
+      >
+        <template #externalProvider>{{
+          providerName || $t("auth.signin.externalProvider")
+        }}</template>
         <template #arrow>
           <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
         </template>
@@ -15,4 +22,6 @@
 
 <script setup lang="ts">
 const route = useRoute();
+
+const { providerName = undefined } = defineProps<{ providerName?: string }>();
 </script>

i18n/locales/en_us.json

@@ -78,13 +78,14 @@
       "usernameFormat": "Must be 5 or more characters, and lowercase"
     },
     "signin": {
-      "externalProvider": "Sign in with external provider {arrow}",
+      "externalProvider": "external provider",
       "forgot": "Forgot password?",
       "noAccount": "Don't have an account? Ask an admin to create one for you.",
       "or": "OR",
       "pageTitle": "Sign in to Drop",
       "rememberMe": "Remember me",
       "signin": "Sign in",
+      "signinWithExternalProvider": "Sign in with {externalProvider} {arrow}",
       "title": "Sign in to your account"
     },
     "signout": "Signout",

pages/auth/signin.vue

@@ -26,16 +26,21 @@
 
         <div class="mt-10">
           <div>
-            <AuthSimple v-if="enabledAuths.includes('Simple' as AuthMec)" />
+            <AuthSimple
+              v-if="enabledAuthProviders.includes('Simple' as AuthMec)"
+            />
             <div
-              v-if="enabledAuths.length > 1"
+              v-if="enabledAuthProviders.length > 1"
               class="py-4 flex flex-row items-center justify-center gap-x-4 font-bold text-sm text-zinc-600"
             >
               <span class="h-[1px] grow bg-zinc-600" />
               {{ $t("auth.signin.or") }}
               <span class="h-[1px] grow bg-zinc-600" />
             </div>
-            <AuthOpenID v-if="enabledAuths.includes('OpenID' as AuthMec)" />
+            <AuthOpenID
+              v-if="enabledAuthProviders.includes('OpenID' as AuthMec)"
+              :provider-name="oidcProviderName"
+            />
           </div>
         </div>
       </div>
@@ -55,7 +60,8 @@ import type { AuthMec } from "~/prisma/client/enums";
 import DropLogo from "~/components/DropLogo.vue";
 
 const { t } = useI18n();
-const enabledAuths = await $dropFetch("/api/v1/auth");
+const { enabledAuthProviders, oidcProviderName } =
+  await $dropFetch("/api/v1/auth");
 
 const route = useRoute();
 const superlevel = route.query.superlevel;

server/api/v1/auth/index.get.ts

@@ -1,5 +1,8 @@
 import authManager from "~/server/internal/auth";
 
 export default defineEventHandler(() => {
-  return authManager.getEnabledAuthProviders();
+  return {
+    enabledAuthProviders: authManager.getEnabledAuthProviders(),
+    oidcProviderName: process.env.OIDC_PROVIDER_NAME,
+  };
 });