feat(auth): reclaim stale identities and refresh profile UI

2026-04-21 07:48:24 -07:00
parent c0371e9104
commit d5819181ea
16 changed files with 633 additions and 105 deletions
--- a/frontend/src/components/user/profile/ProfileAvatarCard.vue
+++ b/frontend/src/components/user/profile/ProfileAvatarCard.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.avatar.title') }}
      </h2>
@@ -9,8 +12,9 @@
      </p>
    </div>

-    <div class="flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start">
+    <div :class="props.embedded ? 'space-y-3' : 'flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start'">
      <div
+        v-if="!props.embedded"
        class="flex h-24 w-24 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 text-3xl font-bold text-white shadow-lg shadow-primary-500/20"
      >
        <img
@@ -22,9 +26,12 @@
        <span v-else>{{ avatarInitial }}</span>
      </div>

-      <div class="min-w-0 flex-1 space-y-4">
+      <div :class="props.embedded ? 'space-y-3' : 'min-w-0 flex-1 space-y-4'">
        <div class="space-y-1">
-          <p class="text-sm font-medium text-gray-900 dark:text-white">
+          <p v-if="props.embedded" class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.avatar.title') }}
+          </p>
+          <p v-else class="text-sm font-medium text-gray-900 dark:text-white">
            {{ displayName }}
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-400">
@@ -78,9 +85,12 @@ import { useAuthStore } from '@/stores/auth'
 import type { User } from '@/types'
 import { extractApiErrorMessage } from '@/utils/apiError'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  user: User | null
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const { t } = useI18n()
 const authStore = useAuthStore()
--- a/frontend/src/components/user/profile/ProfileEditForm.vue
+++ b/frontend/src/components/user/profile/ProfileEditForm.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.editProfile') }}
      </h2>
    </div>
-    <div class="px-6 py-6">
+    <div :class="props.embedded ? '' : 'px-6 py-6'">
      <form @submit.prevent="handleUpdateProfile" class="space-y-4">
+        <div v-if="props.embedded">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.editProfile') }}
+          </p>
+        </div>
        <div>
          <label for="username" class="input-label">
            {{ t('profile.username') }}
@@ -37,9 +45,12 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { userAPI } from '@/api'

-const props = defineProps<{
+const props = withDefaults(defineProps<{
  initialUsername: string
-}>()
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const { t } = useI18n()
 const authStore = useAuthStore()
--- a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
+++ b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="card overflow-hidden">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card overflow-hidden'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.authBindings.title') }}
      </h2>
@@ -9,11 +12,23 @@
      </p>
    </div>

-    <div class="divide-y divide-gray-100 dark:divide-dark-700">
+    <div :class="props.embedded ? 'space-y-4' : 'divide-y divide-gray-100 dark:divide-dark-700'">
+      <div v-if="props.embedded">
+        <p class="text-sm font-semibold text-gray-900 dark:text-white">
+          {{ t('profile.authBindings.title') }}
+        </p>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          {{ t('profile.authBindings.description') }}
+        </p>
+      </div>
      <div
        v-for="item in providerItems"
        :key="item.provider"
-        class="px-6 py-5"
+        :class="
+          props.embedded
+            ? 'rounded-2xl border border-gray-100 bg-gray-50/70 p-4 dark:border-dark-700 dark:bg-dark-900/30'
+            : 'px-6 py-5'
+        "
      >
        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
          <div class="flex min-w-0 flex-1 items-start gap-4">
@@ -154,6 +169,7 @@ const props = withDefaults(
    wechatEnabled?: boolean
    wechatOpenEnabled?: boolean
    wechatMpEnabled?: boolean
+    embedded?: boolean
  }>(),
  {
    linuxdoEnabled: false,
@@ -162,6 +178,7 @@ const props = withDefaults(
    wechatEnabled: false,
    wechatOpenEnabled: undefined,
    wechatMpEnabled: undefined,
+    embedded: false,
  }
 )

--- a/frontend/src/components/user/profile/ProfileInfoCard.vue
+++ b/frontend/src/components/user/profile/ProfileInfoCard.vue
@@ -3,9 +3,9 @@
    <div
      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">
+      <div class="flex flex-col gap-5 lg:flex-row lg:items-start">
        <div
-          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"
+          class="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-[1.5rem] bg-gradient-to-br from-primary-500 to-primary-600 text-2xl font-bold text-white shadow-lg shadow-primary-500/20"
        >
          <img
            v-if="avatarUrl"
@@ -15,48 +15,78 @@
          >
          <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">
-            {{ displayName }}
-          </h2>
-          <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
-            {{ user?.email }}
-          </p>
-          <div class="mt-1 flex items-center gap-2">
-            <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
-              {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
-            </span>
-            <span
-              :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
-            >
-              {{
-                user?.status === 'active'
-                  ? t('common.active')
-                  : t('common.disabled')
-              }}
-            </span>
+        <div class="min-w-0 flex-1 space-y-5">
+          <div class="space-y-2">
+            <div class="flex flex-wrap items-center gap-2">
+              <h2 class="truncate text-xl font-semibold text-gray-900 dark:text-white">
+                {{ displayName }}
+              </h2>
+              <span :class="['badge', user?.role === 'admin' ? 'badge-primary' : 'badge-gray']">
+                {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
+              </span>
+              <span
+                :class="['badge', user?.status === 'active' ? 'badge-success' : 'badge-danger']"
+              >
+                {{
+                  user?.status === 'active'
+                    ? t('common.active')
+                    : t('common.disabled')
+                }}
+              </span>
+            </div>
+            <p class="truncate text-sm text-gray-500 dark:text-gray-400">
+              {{ user?.email }}
+            </p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.username') }}
+              </p>
+              <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.username || displayName }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.email') }}
+              </p>
+              <p class="mt-1 truncate text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.email || '-' }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.status') }}
+              </p>
+              <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                {{
+                  user?.status === 'active'
+                    ? t('common.active')
+                    : user?.status
+                      ? t('common.disabled')
+                      : '-'
+                }}
+              </p>
+            </div>
+            <div class="rounded-2xl bg-white/75 px-4 py-3 shadow-sm ring-1 ring-white/70 dark:bg-dark-900/40 dark:ring-dark-700">
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-gray-400 dark:text-gray-500">
+                {{ t('profile.role') }}
+              </p>
+              <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                {{ user?.role === 'admin' ? t('profile.administrator') : t('profile.user') }}
+              </p>
+            </div>
          </div>
        </div>
      </div>
    </div>
-    <div class="px-6 py-4">
-      <div class="space-y-3">
-        <div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
-          <Icon name="mail" size="sm" class="text-gray-400 dark:text-gray-500" />
-          <span class="truncate">{{ user?.email }}</span>
-        </div>
-        <div
-          v-if="user?.username"
-          class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400"
-        >
-          <Icon name="user" size="sm" class="text-gray-400 dark:text-gray-500" />
-          <span class="truncate">{{ user.username }}</span>
-        </div>
-      </div>

+    <div class="space-y-6 px-6 py-6">
      <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"
+        class="grid gap-2 rounded-2xl border border-gray-100 bg-gray-50/80 p-4 text-xs text-gray-500 dark:border-dark-700 dark:bg-dark-900/30 dark:text-gray-400"
      >
        <div
          v-for="hint in sourceHints"
@@ -67,6 +97,39 @@
          <span>{{ hint.text }}</span>
        </div>
      </div>
+
+      <div class="grid gap-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+          <ProfileAvatarCard
+            :user="user"
+            embedded
+          />
+        </div>
+
+        <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+          <ProfileEditForm
+            :initial-username="user?.username || ''"
+            embedded
+          />
+        </div>
+      </div>
+
+      <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+        <ProfileIdentityBindingsSection
+          :user="user"
+          :linuxdo-enabled="linuxdoEnabled"
+          :oidc-enabled="oidcEnabled"
+          :oidc-provider-name="oidcProviderName"
+          :wechat-enabled="wechatEnabled"
+          :wechat-open-enabled="wechatOpenEnabled"
+          :wechat-mp-enabled="wechatMpEnabled"
+          embedded
+        />
+      </div>
+
+      <div class="rounded-3xl border border-gray-100 bg-gray-50/70 p-5 dark:border-dark-700 dark:bg-dark-900/30">
+        <ProfilePasswordForm embedded />
+      </div>
    </div>
  </div>
 </template>
@@ -75,11 +138,28 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Icon from '@/components/icons/Icon.vue'
+import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
+import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
+import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
+import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
 import type { User, UserAuthProvider, UserProfileSourceContext } from '@/types'

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

 const { t } = useI18n()

--- a/frontend/src/components/user/profile/ProfilePasswordForm.vue
+++ b/frontend/src/components/user/profile/ProfilePasswordForm.vue
@@ -1,12 +1,20 @@
 <template>
-  <div class="card">
-    <div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
+  <div :class="props.embedded ? 'space-y-4' : 'card'">
+    <div
+      v-if="!props.embedded"
+      class="border-b border-gray-100 px-6 py-4 dark:border-dark-700"
+    >
      <h2 class="text-lg font-medium text-gray-900 dark:text-white">
        {{ t('profile.changePassword') }}
      </h2>
    </div>
-    <div class="px-6 py-6">
+    <div :class="props.embedded ? '' : 'px-6 py-6'">
      <form @submit.prevent="handleChangePassword" class="space-y-4">
+        <div v-if="props.embedded">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
+            {{ t('profile.changePassword') }}
+          </p>
+        </div>
        <div>
          <label for="old_password" class="input-label">
            {{ t('profile.currentPassword') }}
@@ -70,6 +78,11 @@ import { userAPI } from '@/api'

 const { t } = useI18n()
 const appStore = useAppStore()
+const props = withDefaults(defineProps<{
+  embedded?: boolean
+}>(), {
+  embedded: false,
+})

 const loading = ref(false)
 const form = ref({