add optional displayName attribute for providers, shown on login button (configurable via *_PROVIDER_NAME)

Signed-off-by: nicolasschneider <[email protected]>

Author: n1cc00

packages/account-client/src/client.ts

@@ -23,6 +23,7 @@ import {
   type PersonId,
   type PersonInfo,
   type PersonUuid,
+  type ProviderInfo,
   type SocialIdType,
   Version,
   type WorkspaceInfoWithStatus,
@@ -52,7 +53,7 @@ import { getClientTimezone } from './utils'
 /** @public */
 export interface AccountClient {
   // Static methods
-  getProviders: () => Promise<string[]>
+  getProviders: () => Promise<ProviderInfo[]>
 
   // RPC
   getUserWorkspaces: () => Promise<WorkspaceInfoWithStatus[]>
@@ -217,7 +218,7 @@ class AccountClientImpl implements AccountClient {
     this.rpc = withRetryUntilTimeout(this._rpc.bind(this), retryTimeoutMs ?? 5000)
   }
 
-  async getProviders (): Promise<string[]> {
+  async getProviders (): Promise<ProviderInfo[]> {
     return await withRetryUntilMaxAttempts(async () => {
       const response = await fetch(concatLink(this.url, '/providers'))
 

packages/core/src/classes.ts

@@ -869,4 +869,9 @@ export interface AccountInfo {
   locale?: string
 }
 
+export interface ProviderInfo {
+  name: string
+  displayName?: string
+}
+
 export type SocialKey = Pick<SocialId, 'type' | 'value'>

plugins/login-resources/src/components/Providers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { concatLink } from '@hcengineering/core'
+  import { concatLink, type ProviderInfo } from '@hcengineering/core'
   import { getMetadata } from '@hcengineering/platform'
   import { AnySvelteComponent, Button, Grid, deviceOptionsStore, getCurrentLocation } from '@hcengineering/ui'
   import { onMount } from 'svelte'
@@ -12,28 +12,41 @@
   interface Provider {
     name: string
     component: AnySvelteComponent
+    displayName: null
   }
 
   const providers: Provider[] = [
     {
       name: 'google',
-      component: Google
+      component: Google,
+      displayName: null
     },
     {
       name: 'github',
-      component: Github
+      component: Github,
+      displayName: null
     },
     {
       name: 'openid',
-      component: OpenId
+      component: OpenId,
+      displayName: null
     }
   ]
 
   let enabledProviders: Provider[] = []
 
   onMount(() => {
-    void getProviders().then((res) => {
-      enabledProviders = providers.filter((provider) => res.includes(provider.name))
+    void getProviders().then((res: ProviderInfo[]) => {
+      enabledProviders = providers
+        .map((provider) => {
+          const match = res.find((r) => r.name === provider.name)
+          if (!match) return null
+          return {
+            ...provider,
+            displayName: match.displayName
+          }
+        })
+        .filter((p): p is Provider & { displayName: string } => p !== null)
     })
   })
 
@@ -70,7 +83,7 @@
         <a href={getLink(provider)}>
           <Button kind={'contrast'} shape={'round2'} size={'x-large'} width="100%" stopPropagation={false}>
             <svelte:fragment slot="content">
-              <svelte:component this={provider.component} />
+              <svelte:component this={provider.component} displayName={provider.displayName} />
             </svelte:fragment>
           </Button>
         </a>

plugins/login-resources/src/components/providers/Github.svelte

@@ -2,9 +2,11 @@
   import { Label } from '@hcengineering/ui'
   import Github from '../icons/Github.svelte'
   import login from '../../plugin'
+
+  export let displayName = 'Github'
 </script>
 
 <div class="flex-row-center flex-gap-2">
   <Github />
-  <Label label={login.string.ContinueWith} params={{ provider: 'Github' }} />
+  <Label label={login.string.ContinueWith} params={{ provider: displayName }} />
 </div>

plugins/login-resources/src/components/providers/Google.svelte

@@ -2,9 +2,11 @@
   import { Label } from '@hcengineering/ui'
   import Google from '../icons/Google.svelte'
   import login from '../../plugin'
+
+  export let displayName = 'Google'
 </script>
 
 <div class="flex-row-center flex-gap-2">
   <Google />
-  <Label label={login.string.ContinueWith} params={{ provider: 'Google' }} />
+  <Label label={login.string.ContinueWith} params={{ provider: displayName }} />
 </div>

plugins/login-resources/src/components/providers/OpenId.svelte

@@ -2,9 +2,12 @@
   import { Label } from '@hcengineering/ui'
   import OpenId from '../icons/OpenId.svelte'
   import login from '../../plugin'
+  import { getMetadata } from '@hcengineering/platform'
+
+  const openIdDisplayName = getMetadata(login.metadata.OpenIdDisplayName) ?? 'OpenId'
 </script>
 
 <div class="flex-row-center flex-gap-2">
   <OpenId />
-  <Label label={login.string.ContinueWith} params={{ provider: 'OpenId' }} />
+  <Label label={login.string.ContinueWith} params={{ provider: openIdDisplayName }} />
 </div>

plugins/login-resources/src/utils.ts

@@ -30,7 +30,8 @@ import {
   type AccountUuid,
   type Person,
   type WorkspaceInfoWithStatus,
-  type WorkspaceUserOperation
+  type WorkspaceUserOperation,
+  type ProviderInfo
 } from '@hcengineering/core'
 import { loginId } from '@hcengineering/login'
 import platform, {
@@ -851,8 +852,8 @@ export async function getLoginInfoFromQuery (): Promise<LoginInfo | WorkspaceLog
   }
 }
 
-export async function getProviders (): Promise<string[]> {
-  let providers: string[]
+export async function getProviders (): Promise<ProviderInfo[]> {
+  let providers: ProviderInfo[]
 
   try {
     providers = await getAccountClient(null).getProviders()

pods/authProviders/src/github.ts

@@ -1,4 +1,5 @@
 import { type AccountDB } from '@hcengineering/account'
+import { type ProviderInfo } from '@hcengineering/core'
 import { BrandingMap, concatLink, MeasureContext, getBranding, SocialIdType } from '@hcengineering/core'
 import Router from 'koa-router'
 import { Strategy as GitHubStrategy } from 'passport-github2'
@@ -14,9 +15,11 @@ export function registerGithub (
   frontUrl: string,
   brandings: BrandingMap,
   signUpDisabled?: boolean
-): string | undefined {
+): ProviderInfo | undefined {
   const GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID
   const GITHUB_CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET
+  const name = 'github'
+  const displayName = process.env.GITHUB_DISPLAY_NAME
 
   const redirectURL = '/auth/github/callback'
   if (GITHUB_CLIENT_ID === undefined || GITHUB_CLIENT_SECRET === undefined) return
@@ -80,5 +83,5 @@ export function registerGithub (
     }
   )
 
-  return 'github'
+  return { name, displayName }
 }

pods/authProviders/src/google.ts

@@ -1,4 +1,5 @@
 import { type AccountDB } from '@hcengineering/account'
+import { type ProviderInfo } from '@hcengineering/core'
 import { BrandingMap, concatLink, MeasureContext, getBranding, SocialIdType } from '@hcengineering/core'
 import Router from 'koa-router'
 import { Strategy as GoogleStrategy } from 'passport-google-oauth20'
@@ -14,9 +15,11 @@ export function registerGoogle (
   frontUrl: string,
   brandings: BrandingMap,
   signUpDisabled?: boolean
-): string | undefined {
+): ProviderInfo | undefined {
   const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID
   const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET
+  const name = 'google'
+  const displayName = process.env.GOOGLE_DISPLAY_NAME
 
   const redirectURL = '/auth/google/callback'
   if (GOOGLE_CLIENT_ID === undefined || GOOGLE_CLIENT_SECRET === undefined) return
@@ -85,5 +88,5 @@ export function registerGoogle (
     }
   )
 
-  return 'google'
+  return { name, displayName }
 }

pods/authProviders/src/index.ts

@@ -6,7 +6,7 @@ import { registerGithub } from './github'
 import { registerGoogle } from './google'
 import { registerOpenid } from './openid'
 import { registerToken } from './token'
-import { BrandingMap, MeasureContext } from '@hcengineering/core'
+import { BrandingMap, MeasureContext, type ProviderInfo } from '@hcengineering/core'
 import { type AccountDB } from '@hcengineering/account'
 
 export type Passport = typeof passport
@@ -20,7 +20,7 @@ export type AuthProvider = (
   frontUrl: string,
   brandings: BrandingMap,
   signUpDisabled?: boolean
-) => string | undefined
+) => ProviderInfo | undefined
 
 export function registerProviders (
   ctx: MeasureContext,
@@ -62,7 +62,7 @@ export function registerProviders (
 
   registerToken(ctx, passport, router, accountsUrl, db, frontUrl, brandings)
 
-  const res: string[] = []
+  const res: ProviderInfo[] = []
   const providers: AuthProvider[] = [registerGoogle, registerGithub, registerOpenid]
   for (const provider of providers) {
     const value = provider(ctx, passport, router, accountsUrl, db, frontUrl, brandings, signUpDisabled)

pods/authProviders/src/openid.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 //
 import { type AccountDB } from '@hcengineering/account'
+import { type ProviderInfo } from '@hcengineering/core'
 import { BrandingMap, concatLink, MeasureContext, getBranding, SocialIdType } from '@hcengineering/core'
 import Router from 'koa-router'
 import { Issuer, Strategy } from 'openid-client'
@@ -29,10 +30,12 @@ export function registerOpenid (
   frontUrl: string,
   brandings: BrandingMap,
   signUpDisabled?: boolean
-): string | undefined {
+): ProviderInfo | undefined {
   const openidClientId = process.env.OPENID_CLIENT_ID
   const openidClientSecret = process.env.OPENID_CLIENT_SECRET
   const issuer = process.env.OPENID_ISSUER
+  const name = 'openid'
+  const displayName = process.env.OPENID_DISPLAY_NAME
 
   const redirectURL = '/auth/openid/callback'
   if (openidClientId === undefined || openidClientSecret === undefined || issuer === undefined) return
@@ -110,5 +113,5 @@ export function registerOpenid (
     }
   )
 
-  return 'openid'
+  return { name, displayName }
 }