feat: add profile auth identity binding flow

2026-04-20 18:28:44 +08:00
parent 13d9780df4
commit c6d8592484
31 changed files with 3419 additions and 239 deletions
--- a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
+++ b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="rounded-2xl border border-gray-100 bg-gray-50/80 p-4 dark:border-dark-700 dark:bg-dark-900/30">
+    <div>
+      <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+        {{ t('profile.authBindings.title') }}
+      </h3>
+      <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        {{ t('profile.authBindings.description') }}
+      </p>
+    </div>
+
+    <div class="mt-4 space-y-2">
+      <div
+        v-for="item in providerItems"
+        :key="item.provider"
+        class="flex items-center justify-between gap-3 rounded-xl bg-white/80 px-3 py-2.5 dark:bg-dark-800/70"
+      >
+        <div class="min-w-0">
+          <div class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ item.label }}
+          </div>
+        </div>
+
+        <div class="flex shrink-0 items-center gap-2">
+          <span
+            :data-testid="`profile-binding-${item.provider}-status`"
+            :class="['badge', item.bound ? 'badge-success' : 'badge-gray']"
+          >
+            {{
+              item.bound
+                ? t('profile.authBindings.status.bound')
+                : t('profile.authBindings.status.notBound')
+            }}
+          </span>
+
+          <button
+            v-if="item.canBind"
+            :data-testid="`profile-binding-${item.provider}-action`"
+            type="button"
+            class="btn btn-secondary btn-sm"
+            @click="startBinding(item.provider)"
+          >
+            {{ t('profile.authBindings.bindAction', { providerName: item.label }) }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { startOAuthBinding } from '@/api/user'
+import type { User, UserAuthBindingStatus, UserAuthProvider } from '@/types'
+
+const props = withDefaults(
+  defineProps<{
+    user: User | null
+    linuxdoEnabled?: boolean
+    oidcEnabled?: boolean
+    oidcProviderName?: string
+    wechatEnabled?: boolean
+  }>(),
+  {
+    linuxdoEnabled: false,
+    oidcEnabled: false,
+    oidcProviderName: 'OIDC',
+    wechatEnabled: false,
+  }
+)
+
+const { t } = useI18n()
+const route = useRoute()
+
+function normalizeBindingStatus(binding: boolean | UserAuthBindingStatus | undefined): boolean | null {
+  if (typeof binding === 'boolean') {
+    return binding
+  }
+  if (!binding) {
+    return null
+  }
+  if (typeof binding.bound === 'boolean') {
+    return binding.bound
+  }
+  return Boolean(binding.provider_subject || binding.issuer || binding.provider_key)
+}
+
+function getBindingStatus(provider: UserAuthProvider): boolean {
+  const currentUser = props.user
+
+  if (provider === 'email') {
+    return typeof currentUser?.email_bound === 'boolean'
+      ? currentUser.email_bound
+      : Boolean(currentUser?.email)
+  }
+
+  const directFlag = currentUser?.[`${provider}_bound` as keyof User]
+  if (typeof directFlag === 'boolean') {
+    return directFlag
+  }
+
+  const nested = currentUser?.auth_bindings?.[provider] ?? currentUser?.identity_bindings?.[provider]
+  const normalized = normalizeBindingStatus(nested)
+  return normalized ?? false
+}
+
+const providerItems = computed(() => [
+  {
+    provider: 'email' as const,
+    label: t('profile.authBindings.providers.email'),
+    bound: getBindingStatus('email'),
+    canBind: false,
+  },
+  {
+    provider: 'linuxdo' as const,
+    label: t('profile.authBindings.providers.linuxdo'),
+    bound: getBindingStatus('linuxdo'),
+    canBind: props.linuxdoEnabled && !getBindingStatus('linuxdo'),
+  },
+  {
+    provider: 'oidc' as const,
+    label: t('profile.authBindings.providers.oidc', { providerName: props.oidcProviderName }),
+    bound: getBindingStatus('oidc'),
+    canBind: props.oidcEnabled && !getBindingStatus('oidc'),
+  },
+  {
+    provider: 'wechat' as const,
+    label: t('profile.authBindings.providers.wechat'),
+    bound: getBindingStatus('wechat'),
+    canBind: props.wechatEnabled && !getBindingStatus('wechat'),
+  },
+])
+
+function startBinding(provider: UserAuthProvider): void {
+  if (provider === 'email') {
+    return
+  }
+  startOAuthBinding(provider, {
+    redirectTo: route.fullPath || '/profile',
+  })
+}
+</script>
--- a/frontend/src/components/user/profile/ProfileInfoCard.vue
+++ b/frontend/src/components/user/profile/ProfileInfoCard.vue
@@ -4,11 +4,16 @@
      class="border-b border-gray-100 bg-gradient-to-r from-primary-500/10 to-primary-600/5 px-6 py-5 dark:border-dark-700 dark:from-primary-500/20 dark:to-primary-600/10"
    >
      <div class="flex items-center gap-4">
-        <!-- Avatar -->
        <div
-          class="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
+          class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
        >
-          {{ user?.email?.charAt(0).toUpperCase() || 'U' }}
+          <img
+            v-if="avatarUrl"
+            :src="avatarUrl"
+            :alt="displayName"
+            class="h-full w-full object-cover"
+          >
+          <span v-else>{{ avatarInitial }}</span>
        </div>
        <div class="min-w-0 flex-1">
          <h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
@@ -41,18 +46,163 @@
          <span class="truncate">{{ user.username }}</span>
        </div>
      </div>
+
+      <div
+        v-if="sourceHints.length"
+        class="mt-4 grid gap-2 rounded-2xl border border-gray-100 bg-gray-50/80 p-3 text-xs text-gray-500 dark:border-dark-700 dark:bg-dark-900/30 dark:text-gray-400"
+      >
+        <div
+          v-for="hint in sourceHints"
+          :key="hint.key"
+          class="flex items-start gap-2"
+        >
+          <Icon name="link" size="sm" class="mt-0.5 text-gray-400 dark:text-gray-500" />
+          <span>{{ hint.text }}</span>
+        </div>
+      </div>
+
+      <ProfileIdentityBindingsSection
+        class="mt-4"
+        :user="user"
+        :linuxdo-enabled="linuxdoEnabled"
+        :oidc-enabled="oidcEnabled"
+        :oidc-provider-name="oidcProviderName"
+        :wechat-enabled="wechatEnabled"
+      />
    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Icon from '@/components/icons/Icon.vue'
-import type { User } from '@/types'
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import type { User, UserAuthProvider, UserProfileSourceContext } from '@/types'

-defineProps<{
-  user: User | null
-}>()
+const props = withDefaults(
+  defineProps<{
+    user: User | null
+    linuxdoEnabled?: boolean
+    oidcEnabled?: boolean
+    oidcProviderName?: string
+    wechatEnabled?: boolean
+  }>(),
+  {
+    linuxdoEnabled: false,
+    oidcEnabled: false,
+    oidcProviderName: 'OIDC',
+    wechatEnabled: false,
+  }
+)

 const { t } = useI18n()
+
+const providerLabels = computed<Record<UserAuthProvider, string>>(() => ({
+  email: t('profile.authBindings.providers.email'),
+  linuxdo: t('profile.authBindings.providers.linuxdo'),
+  oidc: t('profile.authBindings.providers.oidc', { providerName: props.oidcProviderName }),
+  wechat: t('profile.authBindings.providers.wechat'),
+}))
+
+const avatarUrl = computed(() => props.user?.avatar_url?.trim() || '')
+const displayName = computed(() => props.user?.username?.trim() || props.user?.email?.trim() || 'User')
+const avatarInitial = computed(() => displayName.value.charAt(0).toUpperCase() || 'U')
+
+function normalizeProvider(value: string): UserAuthProvider | null {
+  const normalized = value.trim().toLowerCase()
+  if (normalized === 'email' || normalized === 'linuxdo' || normalized === 'wechat') {
+    return normalized
+  }
+  if (normalized === 'oidc' || normalized.startsWith('oidc:') || normalized.startsWith('oidc/')) {
+    return 'oidc'
+  }
+  return null
+}
+
+function readObjectString(source: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = source[key]
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim()
+    }
+  }
+  return ''
+}
+
+function resolveThirdPartySource(
+  rawSource: string | UserProfileSourceContext | null | undefined
+): { provider: UserAuthProvider; label: string } | null {
+  if (!rawSource) {
+    return null
+  }
+
+  if (typeof rawSource === 'string') {
+    const provider = normalizeProvider(rawSource)
+    if (!provider || provider === 'email') {
+      return null
+    }
+    return {
+      provider,
+      label: providerLabels.value[provider],
+    }
+  }
+
+  const sourceRecord = rawSource as Record<string, unknown>
+  const provider = normalizeProvider(
+    readObjectString(sourceRecord, 'provider', 'source', 'provider_type', 'auth_provider')
+  )
+  if (!provider || provider === 'email') {
+    return null
+  }
+
+  const explicitLabel = readObjectString(
+    sourceRecord,
+    'provider_label',
+    'label',
+    'provider_name',
+    'providerName'
+  )
+
+  return {
+    provider,
+    label: explicitLabel || providerLabels.value[provider],
+  }
+}
+
+const sourceHints = computed(() => {
+  const currentUser = props.user
+  if (!currentUser) {
+    return []
+  }
+
+  const hints: Array<{ key: string; text: string }> = []
+  const avatarSource = resolveThirdPartySource(
+    currentUser.profile_sources?.avatar ?? currentUser.avatar_source
+  )
+  const usernameSource = resolveThirdPartySource(
+    currentUser.profile_sources?.username ??
+      currentUser.profile_sources?.display_name ??
+      currentUser.profile_sources?.nickname ??
+      currentUser.display_name_source ??
+      currentUser.username_source ??
+      currentUser.nickname_source
+  )
+
+  if (avatarSource) {
+    hints.push({
+      key: 'avatar',
+      text: t('profile.authBindings.source.avatar', { providerName: avatarSource.label }),
+    })
+  }
+
+  if (usernameSource) {
+    hints.push({
+      key: 'username',
+      text: t('profile.authBindings.source.username', { providerName: usernameSource.label }),
+    })
+  }
+
+  return hints
+})
 </script>
--- a/frontend/src/components/user/profile/tests/ProfileIdentityBindingsSection.spec.ts
+++ b/frontend/src/components/user/profile/tests/ProfileIdentityBindingsSection.spec.ts
@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import type { User } from '@/types'
+
+const routeState = vi.hoisted(() => ({
+  fullPath: '/profile',
+}))
+
+const locationState = vi.hoisted(() => ({
+  current: { href: 'http://localhost/profile' } as { href: string },
+}))
+
+vi.mock('vue-router', () => ({
+  useRoute: () => routeState,
+}))
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('vue-i18n')>()
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string, params?: Record<string, string>) => {
+        if (key === 'profile.authBindings.title') return 'Connected sign-in methods'
+        if (key === 'profile.authBindings.description') return 'Manage bound providers'
+        if (key === 'profile.authBindings.status.bound') return 'Bound'
+        if (key === 'profile.authBindings.status.notBound') return 'Not bound'
+        if (key === 'profile.authBindings.providers.email') return 'Email'
+        if (key === 'profile.authBindings.providers.linuxdo') return 'LinuxDo'
+        if (key === 'profile.authBindings.providers.wechat') return 'WeChat'
+        if (key === 'profile.authBindings.providers.oidc') return params?.providerName || 'OIDC'
+        if (key === 'profile.authBindings.bindAction') return `Bind ${params?.providerName || ''}`.trim()
+        return key
+      },
+    }),
+  }
+})
+
+function createUser(overrides: Partial<User> = {}): User {
+  return {
+    id: 7,
+    username: 'alice',
+    email: 'alice@example.com',
+    role: 'user',
+    balance: 10,
+    concurrency: 2,
+    status: 'active',
+    allowed_groups: null,
+    balance_notify_enabled: true,
+    balance_notify_threshold: null,
+    balance_notify_extra_emails: [],
+    created_at: '2026-04-20T00:00:00Z',
+    updated_at: '2026-04-20T00:00:00Z',
+    ...overrides,
+  }
+}
+
+describe('ProfileIdentityBindingsSection', () => {
+  beforeEach(() => {
+    routeState.fullPath = '/profile'
+    locationState.current = { href: 'http://localhost/profile' }
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: locationState.current,
+    })
+    Object.defineProperty(window.navigator, 'userAgent', {
+      configurable: true,
+      value: 'Mozilla/5.0',
+    })
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('renders provider binding states and provider-specific bind actions', () => {
+    const wrapper = mount(ProfileIdentityBindingsSection, {
+      props: {
+        user: createUser({
+          auth_bindings: {
+            email: { bound: true },
+            linuxdo: { bound: true },
+            oidc: { bound: false },
+            wechat: false,
+          },
+        }),
+        linuxdoEnabled: true,
+        oidcEnabled: true,
+        oidcProviderName: 'ExampleID',
+        wechatEnabled: true,
+      },
+    })
+
+    expect(wrapper.get('[data-testid="profile-binding-email-status"]').text()).toBe('Bound')
+    expect(wrapper.get('[data-testid="profile-binding-linuxdo-status"]').text()).toBe('Bound')
+    expect(wrapper.get('[data-testid="profile-binding-oidc-status"]').text()).toBe('Not bound')
+    expect(wrapper.get('[data-testid="profile-binding-oidc-action"]').text()).toBe(
+      'Bind ExampleID'
+    )
+    expect(wrapper.get('[data-testid="profile-binding-wechat-action"]').text()).toBe('Bind WeChat')
+  })
+
+  it('starts the WeChat bind flow for the current profile page', async () => {
+    const wrapper = mount(ProfileIdentityBindingsSection, {
+      props: {
+        user: createUser(),
+        linuxdoEnabled: false,
+        oidcEnabled: false,
+        wechatEnabled: true,
+      },
+    })
+
+    await wrapper.get('[data-testid="profile-binding-wechat-action"]').trigger('click')
+
+    expect(locationState.current.href).toContain('/api/v1/auth/oauth/wechat/start?')
+    expect(locationState.current.href).toContain('mode=open')
+    expect(locationState.current.href).toContain('intent=bind_current_user')
+    expect(locationState.current.href).toContain('redirect=%2Fprofile')
+  })
+})