fix: enhance account settings with username and authentication method display #90

2026-03-23 16:37:56 +01:00
parent 0effb97691
commit ef45140d32
10 changed files with 68 additions and 13 deletions
@@ -3,29 +3,44 @@
 import { useTranslations } from 'next-intl';
 import { useAuthStore } from '@/stores/auth-store';
 import { useEmailStore } from '@/stores/email-store';
+import { useAccountStore } from '@/stores/account-store';
 import { SettingsSection, SettingItem } from './settings-section';
 import { formatFileSize } from '@/lib/utils';

 export function AccountSettings() {
  const t = useTranslations('settings.account');
-  const { username, serverUrl, isDemoMode, primaryIdentity } = useAuthStore();
+  const { username, serverUrl, isDemoMode, primaryIdentity, authMode, activeAccountId } = useAuthStore();
  const { quota } = useEmailStore();
+  const account = useAccountStore((s) => activeAccountId ? s.getAccountById(activeAccountId) : undefined);

  const quotaPercentage = quota ? Math.round((quota.used / quota.total) * 100) : 0;
-  const displayName = primaryIdentity?.name || (isDemoMode ? 'Demo User' : undefined);
+  const displayName = primaryIdentity?.name || account?.displayName || (isDemoMode ? 'Demo User' : undefined);
+  const email = primaryIdentity?.email || account?.email || username;

  return (
    <SettingsSection title={t('title')} description={t('description')}>
-      {/* Display Name (show in demo mode or when identity has a name) */}
-      {displayName && (
-        <SettingItem label={t('name_label')}>
-          <span className="text-sm text-foreground">{displayName}</span>
-        </SettingItem>
-      )}
+      {/* Display Name */}
+      <SettingItem label={t('name_label')}>
+        <span className="text-sm text-foreground">{displayName || t('../../common.unknown')}</span>
+      </SettingItem>

      {/* Email Address */}
      <SettingItem label={t('email.label')}>
-        <span className="text-sm text-foreground">{username || t('../../common.unknown')}</span>
+        <span className="text-sm text-foreground">{email || t('../../common.unknown')}</span>
+      </SettingItem>
+
+      {/* Username / Login (show when it differs from email) */}
+      {username && username !== email && (
+        <SettingItem label={t('username_label')}>
+          <span className="text-sm text-foreground">{username}</span>
+        </SettingItem>
+      )}
+
+      {/* Authentication Method */}
+      <SettingItem label={t('auth_method_label')}>
+        <span className="text-sm text-foreground">
+          {authMode === 'oauth' ? t('auth_method_oauth') : t('auth_method_basic')}
+        </span>
      </SettingItem>

      {/* Server */}
@@ -913,7 +913,11 @@
      "title": "Konto",
      "description": "Zeigen Sie Ihre Kontoinformationen an",
      "name_label": "Anzeigename",
+      "username_label": "Benutzername",
      "account_type_label": "Kontotyp",
+      "auth_method_label": "Authentifizierung",
+      "auth_method_oauth": "Single Sign-On (OAuth/OIDC)",
+      "auth_method_basic": "Passwort",
      "demo_account": "Demokonto",
      "email": {
        "label": "E-Mail-Adresse",
@@ -913,7 +913,11 @@
      "title": "Account",
      "description": "View your account information",
      "name_label": "Display Name",
+      "username_label": "Username",
      "account_type_label": "Account Type",
+      "auth_method_label": "Authentication",
+      "auth_method_oauth": "Single Sign-On (OAuth/OIDC)",
+      "auth_method_basic": "Password",
      "demo_account": "Demo Account",
      "email": {
        "label": "Email Address",
@@ -913,7 +913,11 @@
      "title": "Cuenta",
      "description": "Vea la información de su cuenta",
      "name_label": "Nombre para mostrar",
+      "username_label": "Nombre de usuario",
      "account_type_label": "Tipo de cuenta",
+      "auth_method_label": "Autenticación",
+      "auth_method_oauth": "Inicio de sesión único (OAuth/OIDC)",
+      "auth_method_basic": "Contraseña",
      "demo_account": "Cuenta de demostración",
      "email": {
        "label": "Dirección de Correo",
@@ -913,7 +913,11 @@
      "title": "Compte",
      "description": "Consultez les informations de votre compte",
      "name_label": "Nom d'affichage",
+      "username_label": "Nom d'utilisateur",
      "account_type_label": "Type de compte",
+      "auth_method_label": "Authentification",
+      "auth_method_oauth": "Authentification unique (OAuth/OIDC)",
+      "auth_method_basic": "Mot de passe",
      "demo_account": "Compte de démonstration",
      "email": {
        "label": "Adresse email",
@@ -913,7 +913,11 @@
      "title": "Account",
      "description": "Visualizza le informazioni del tuo account",
      "name_label": "Nome visualizzato",
+      "username_label": "Nome utente",
      "account_type_label": "Tipo di account",
+      "auth_method_label": "Autenticazione",
+      "auth_method_oauth": "Single Sign-On (OAuth/OIDC)",
+      "auth_method_basic": "Password",
      "demo_account": "Account dimostrativo",
      "email": {
        "label": "Indirizzo email",
@@ -913,7 +913,11 @@
      "title": "アカウント",
      "description": "アカウント情報を表示",
      "name_label": "表示名",
+      "username_label": "ユーザー名",
      "account_type_label": "アカウントタイプ",
+      "auth_method_label": "認証方法",
+      "auth_method_oauth": "シングルサインオン (OAuth/OIDC)",
+      "auth_method_basic": "パスワード",
      "demo_account": "デモアカウント",
      "email": {
        "label": "メールアドレス",
@@ -913,7 +913,11 @@
      "title": "Account",
      "description": "Bekijk je accountinformatie",
      "name_label": "Weergavenaam",
+      "username_label": "Gebruikersnaam",
      "account_type_label": "Accounttype",
+      "auth_method_label": "Authenticatie",
+      "auth_method_oauth": "Single Sign-On (OAuth/OIDC)",
+      "auth_method_basic": "Wachtwoord",
      "demo_account": "Demoaccount",
      "email": {
        "label": "E-mailadres",
@@ -913,7 +913,11 @@
      "title": "Conta",
      "description": "Visualize as informações da sua conta",
      "name_label": "Nome de exibição",
+      "username_label": "Nome de usuário",
      "account_type_label": "Tipo de conta",
+      "auth_method_label": "Autenticação",
+      "auth_method_oauth": "Login único (OAuth/OIDC)",
+      "auth_method_basic": "Senha",
      "demo_account": "Conta de demonstração",
      "email": {
        "label": "Endereço de E-mail",
@@ -486,8 +486,12 @@ export const useAuthStore = create<AuthState>()(
          });
          await client.connect();

-          const username = client.getUsername();
-          const { identities, primaryIdentity } = loadIdentities(await client.getIdentities(), username);
+          const jmapUsername = client.getUsername();
+          const { identities, primaryIdentity } = loadIdentities(await client.getIdentities(), jmapUsername);
+          // For OAuth/OIDC, the JMAP session account name may be the
+          // preferred_username claim rather than the real email address.
+          // Prefer the email from the primary identity when available.
+          const username = primaryIdentity?.email || jmapUsername;
          initializeFeatureStores(client);

          // Register in account store
@@ -602,8 +606,12 @@ export const useAuthStore = create<AuthState>()(
          });
          await client.connect();

-          const username = client.getUsername();
-          const { identities, primaryIdentity } = loadIdentities(await client.getIdentities(), username);
+          const jmapUsername = client.getUsername();
+          const { identities, primaryIdentity } = loadIdentities(await client.getIdentities(), jmapUsername);
+          // For SSO/OIDC, the JMAP session account name may be the
+          // preferred_username claim rather than the real email address.
+          // Prefer the email from the primary identity when available.
+          const username = primaryIdentity?.email || jmapUsername;
          initializeFeatureStores(client);

          const accountId = generateAccountId(username, ssoServerUrl);