Feature: Improve UI for authentication provider display

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -68,14 +68,14 @@ import { catchError, takeUntil } from 'rxjs/operators';
 export class GfUserAccountSettingsComponent implements OnDestroy, OnInit {
   public appearancePlaceholder = $localize`Auto`;
   public baseCurrency: string;
-  public canLinkOidc: boolean = false;
+  public canLinkOidc = false;
   public currencies: string[] = [];
   public deleteOwnUserForm = this.formBuilder.group({
     accessToken: ['', Validators.required]
   });
-  public hasOidcLinked: boolean = false;
+  public hasOidcLinked = false;
-  public hasPermissionForAuthOidc: boolean = false;
+  public hasPermissionForAuthOidc = false;
-  public hasPermissionForAuthToken: boolean = false;
+  public hasPermissionForAuthToken = false;
   public hasPermissionToDeleteOwnUser: boolean;
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
@@ -211,6 +211,21 @@ export class GfUserAccountSettingsComponent implements OnDestroy, OnInit {
       });
   }
 
+  public getAuthProviderDisplayName(): string {
+    switch (this.user?.provider) {
+      case 'ANONYMOUS':
+        return 'Security Token';
+      case 'GOOGLE':
+        return 'Google';
+      case 'INTERNET_IDENTITY':
+        return 'Internet Identity';
+      case 'OIDC':
+        return 'OpenID Connect (OIDC)';
+      default:
+        return this.user?.provider || 'Unknown';
+    }
+  }
+
   public isCommunityLanguage() {
     return !['de', 'en'].includes(this.language);
   }
@@ -436,7 +451,7 @@ export class GfUserAccountSettingsComponent implements OnDestroy, OnInit {
             this.update();
             resolve();
           },
-          error: (error) => {
+          error: (error: Error) => {
             reject(error);
           }
         });

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -261,29 +261,25 @@
           </button>
         </div>
       </div>
-      @if (canLinkOidc || hasOidcLinked) {
+      <div class="align-items-center d-flex mt-4 py-1">
-        <div class="align-items-center d-flex mt-4 py-1">
+        <div class="pr-1 w-50">
-          <div class="pr-1 w-50">
+          <div i18n>Authentication Provider</div>
-            <div i18n>OIDC Provider</div>
-            <div class="hint-text text-muted" i18n>
-              Link your account to sign in with OpenID Connect
-            </div>
-          </div>
-          <div class="pl-1 w-50">
-            @if (hasOidcLinked) {
-              <span class="badge badge-success" i18n>
-                <ion-icon class="mr-1" name="link-outline"></ion-icon>
-                Linked
-              </span>
-            } @else {
-              <button color="primary" mat-flat-button (click)="onLinkOidc()">
-                <ion-icon class="mr-2" name="link-outline"></ion-icon>
-                <span i18n>Link OIDC Provider</span>
-              </button>
-            }
-          </div>
         </div>
-      }
+        <div class="pl-1 w-50">
+          <div>{{ getAuthProviderDisplayName() }}</div>
+          @if (canLinkOidc) {
+            <button
+              class="mt-2"
+              color="primary"
+              mat-flat-button
+              (click)="onLinkOidc()"
+            >
+              <ion-icon class="mr-2" name="link-outline"></ion-icon>
+              <span i18n>Link OIDC</span>
+            </button>
+          }
+        </div>
+      </div>
       @if (hasPermissionToDeleteOwnUser) {
         <hr class="mt-5" />
         <form