Add {PROVIDER}_DISPLAY_NAME env-var (#8967)

Signed-off-by: nicolasschneider <nicschnei@icloud.com>

packages/account-client/src/client.ts

@@ -45,14 +45,15 @@ import type {
   RegionInfo,
   SocialId,
   WorkspaceLoginInfo,
-  WorkspaceOperation
+  WorkspaceOperation,
+  ProviderInfo
 } from './types'
 import { getClientTimezone } from './utils'
 
 /** @public */
 export interface AccountClient {
   // Static methods
-  getProviders: () => Promise<string[]>
+  getProviders: () => Promise<ProviderInfo[]>
 
   // RPC
   getUserWorkspaces: () => Promise<WorkspaceInfoWithStatus[]>
@@ -219,7 +220,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/account-client/src/types.ts

@@ -109,3 +109,8 @@ export interface IntegrationSecret {
 }
 
 export type IntegrationSecretKey = Omit<IntegrationSecret, 'secret'>
+
+export interface ProviderInfo {
+  name: string
+  displayName?: string
+}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { concatLink } from '@hcengineering/core'
   import { getMetadata } from '@hcengineering/platform'
+  import { type ProviderInfo } from '@hcengineering/account-client'
   import { AnySvelteComponent, Button, Grid, deviceOptionsStore, getCurrentLocation } from '@hcengineering/ui'
   import { onMount } from 'svelte'
   import login from '../plugin'
@@ -12,28 +13,26 @@
   interface Provider {
     name: string
     component: AnySvelteComponent
+    displayName?: string
   }
 
-  const providers: Provider[] = [
-    {
-      name: 'google',
-      component: Google
-    },
-    {
-      name: 'github',
-      component: Github
-    },
-    {
-      name: 'openid',
-      component: OpenId
-    }
-  ]
+  const providerMap: Record<string, AnySvelteComponent> = {
+    google: Google,
+    github: Github,
+    openid: OpenId
+  }
 
   let enabledProviders: Provider[] = []
 
   onMount(() => {
-    void getProviders().then((res) => {
-      enabledProviders = providers.filter((provider) => res.includes(provider.name))
+    void getProviders().then((res: ProviderInfo[]) => {
+      enabledProviders = res.map((provider) => {
+        const component = providerMap[provider.name]
+        return {
+          ...provider,
+          component
+        }
+      })
     })
   })
 
@@ -70,7 +69,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,11 @@
   import { Label } from '@hcengineering/ui'
   import OpenId from '../icons/OpenId.svelte'
   import login from '../../plugin'
+
+  export let displayName = '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: displayName }} />
 </div>

plugins/login-resources/src/utils.ts

@@ -19,7 +19,8 @@ import type {
   OtpInfo,
   RegionInfo,
   WorkspaceLoginInfo,
-  WorkspaceInviteInfo
+  WorkspaceInviteInfo,
+  ProviderInfo
 } from '@hcengineering/account-client'
 import { getClient as getAccountClientRaw } from '@hcengineering/account-client'
 import { Analytics } from '@hcengineering/analytics'
@@ -842,8 +843,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/package.json

@@ -48,6 +48,7 @@
     "mongodb": "^6.12.0",
     "@hcengineering/core": "^0.6.32",
     "@hcengineering/account": "^0.6.0",
+    "@hcengineering/account-client": "^0.6.0",
     "passport-custom": "~1.1.1",
     "passport-google-oauth20": "~2.0.0",
     "passport-github2": "~0.1.12",

pods/authProviders/src/github.ts

@@ -1,4 +1,5 @@
 import { type AccountDB } from '@hcengineering/account'
+import { type ProviderInfo } from '@hcengineering/account-client'
 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/account-client'
 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

@@ -8,6 +8,7 @@ import { registerOpenid } from './openid'
 import { registerToken } from './token'
 import { BrandingMap, MeasureContext } from '@hcengineering/core'
 import { type AccountDB } from '@hcengineering/account'
+import { type ProviderInfo } from '@hcengineering/account-client'
 
 export type Passport = typeof passport
 
@@ -20,7 +21,7 @@ export type AuthProvider = (
   frontUrl: string,
   brandings: BrandingMap,
   signUpDisabled?: boolean
-) => string | undefined
+) => ProviderInfo | undefined
 
 export function registerProviders (
   ctx: MeasureContext,
@@ -62,7 +63,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/account-client'
 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 }
 }