Show OIDC provider name on the OIDC login button (#19581)

1. Related issue #13198

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/app/account/sign-in/sign-in.component.html

@@ -26,8 +26,26 @@
                         <button
                             type="button"
                             id="log_oidc"
-                            class="btn btn-primary btn-block">
-                            <span>{{ 'BUTTON.LOG_IN_OIDC' | translate }}</span>
+                            class="btn btn-primary btn-block oidc-login-button">
+                            <span>
+                                <ng-container
+                                    *ngIf="
+                                        getOIDCProviderName();
+                                        else ProviderName
+                                    ">
+                                    {{
+                                        'BUTTON.LOG_IN_OIDC_WITH_PROVIDER_NAME'
+                                            | translate
+                                                : {
+                                                      providerName:
+                                                          getOIDCProviderName()
+                                                  }
+                                    }}
+                                </ng-container>
+                                <ng-template #ProviderName>
+                                    {{ 'BUTTON.LOG_IN_OIDC' | translate }}
+                                </ng-template>
+                            </span>
                         </button>
                     </a>
                     <div class="divider-container mt-1 mb-1">

src/portal/src/app/account/sign-in/sign-in.component.scss

@@ -103,3 +103,7 @@
     text-align: right;
     padding-top: 2rem;
 }
+
+.oidc-login-button {
+    text-transform: unset !important;
+}

src/portal/src/app/account/sign-in/sign-in.component.ts

@@ -151,6 +151,9 @@ export class SignInComponent implements AfterViewChecked, OnInit {
                 CONFIG_AUTH_MODE.OIDC_AUTH
         );
     }
+    getOIDCProviderName(): string {
+        return this.appConfigService.getConfig()?.oidc_provider_name || null;
+    }
     clickRememberMe($event: any): void {
         if ($event && $event.target) {
             this.rememberMe = $event.target.checked;

src/portal/src/app/services/app-config.ts

@@ -31,6 +31,7 @@ export class AppConfig {
     show_popular_repo: boolean;
     banner_message: string;
     current_time: string;
+    oidc_provider_name: string;
 
     constructor() {
         // Set default value
@@ -52,5 +53,6 @@ export class AppConfig {
         this.read_only = false;
         this.show_popular_repo = false;
         this.banner_message = '';
+        this.oidc_provider_name = '';
     }
 }

src/portal/src/i18n/lang/de-de-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "LÖSCHEN",
         "LOG_IN": "EINLOGGEN",
         "LOG_IN_OIDC": "Über OIDC Provider einloggen",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Neuen Account registrieren",
         "SIGN_UP": "Registrieren",
         "CONFIRM": "BESTÄTIGEN",

src/portal/src/i18n/lang/en-us-lang.json

@@ -27,7 +27,8 @@
         "OK": "OK",
         "DELETE": "DELETE",
         "LOG_IN": "LOG IN",
-        "LOG_IN_OIDC": "Login via OIDC provider",
+        "LOG_IN_OIDC": "LOGIN VIA OIDC PROVIDER",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Sign up for an account",
         "SIGN_UP": "SIGN UP",
         "CONFIRM": "CONFIRM",

src/portal/src/i18n/lang/es-es-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "ELIMINAR",
         "LOG_IN": "IDENTIFICARSE",
         "LOG_IN_OIDC": "Login Via OIDC proveedor",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Registrar una cuenta",
         "SIGN_UP": "REGISTRARSE",
         "CONFIRM": "CONFIRMAR",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "Supprimer",
         "LOG_IN": "S'identifier",
         "LOG_IN_OIDC": "Connexion via fournisseur OIDC",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Ouvrir un compte",
         "SIGN_UP": "S'inscrire",
         "CONFIRM": "Confirmer",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "REMOVER",
         "LOG_IN": "ENTRAR",
         "LOG_IN_OIDC": "Entrar com provedor OIDC",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Criar uma nova conta",
         "SIGN_UP": "CADASTRO",
         "CONFIRM": "CONFIRMAR",

src/portal/src/i18n/lang/tr-tr-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "SİL",
         "LOG_IN": "OTURUM AÇ",
         "LOG_IN_OIDC": "OIDC sağlayıcı üzerinden giriş yapın",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
         "SIGN_UP_LINK": "Bir hesap için kayıt olun",
         "SIGN_UP": "KAYIT OL",
         "CONFIRM": "ONAYLA",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -28,6 +28,7 @@
         "DELETE": "删除",
         "LOG_IN": "登录",
         "LOG_IN_OIDC": "通过OIDC提供商登录",
+        "LOG_IN_OIDC_WITH_PROVIDER_NAME": "通过 {{providerName}} 登录",
         "SIGN_UP_LINK": "注册账号",
         "SIGN_UP": "注册",
         "CONFIRM": "确定",

src/portal/src/i18n/lang/zh-tw-lang.json

@@ -28,6 +28,7 @@
     "DELETE": "刪除",
     "LOG_IN": "登入",
     "LOG_IN_OIDC": "透過 OIDC 提供者登入",
+    "LOG_IN_OIDC_WITH_PROVIDER_NAME": "LOGIN WITH {{providerName}}",
     "SIGN_UP_LINK": "註冊帳號",
     "SIGN_UP": "註冊",
     "CONFIRM": "確認",