refactor(profile): split avatar and bindings cards
This commit is contained in:
IanShaw027
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<ProfileIdentityBindingsSection
|
||||
:user="user"
|
||||
:linuxdo-enabled="linuxdoEnabled"
|
||||
:oidc-enabled="oidcEnabled"
|
||||
:oidc-provider-name="oidcProviderName"
|
||||
:wechat-enabled="wechatEnabled"
|
||||
:wechat-open-enabled="wechatOpenEnabled"
|
||||
:wechat-mp-enabled="wechatMpEnabled"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
|
||||
import type { User } from '@/types'
|
||||
|
||||
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
|
||||
}
|
||||
)
|
||||
</script>
|
||||
280
frontend/src/components/user/profile/ProfileAvatarCard.vue
Normal file
280
frontend/src/components/user/profile/ProfileAvatarCard.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div 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>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('profile.avatar.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-5 px-6 py-6 sm:flex-row sm:items-start">
|
||||
<div
|
||||
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
|
||||
v-if="avatarPreviewUrl"
|
||||
:src="avatarPreviewUrl"
|
||||
:alt="displayName"
|
||||
class="h-full w-full object-cover"
|
||||
>
|
||||
<span v-else>{{ avatarInitial }}</span>
|
||||
</div>
|
||||
|
||||
<div class="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">
|
||||
{{ displayName }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('profile.avatar.uploadHint') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
data-testid="profile-avatar-input"
|
||||
v-model="avatarDraft"
|
||||
rows="3"
|
||||
class="input min-h-[88px]"
|
||||
:placeholder="t('profile.avatar.inputPlaceholder')"
|
||||
/>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<label class="btn btn-secondary btn-sm cursor-pointer">
|
||||
<input
|
||||
data-testid="profile-avatar-file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
@change="handleAvatarFileChange"
|
||||
>
|
||||
{{ t('profile.avatar.uploadAction') }}
|
||||
</label>
|
||||
|
||||
<button
|
||||
data-testid="profile-avatar-save"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="avatarSaving"
|
||||
@click="handleAvatarSave"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
data-testid="profile-avatar-delete"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm"
|
||||
:disabled="avatarSaving"
|
||||
@click="handleAvatarDelete"
|
||||
>
|
||||
{{ t('common.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { userAPI } from '@/api'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import type { User } from '@/types'
|
||||
import { extractApiErrorMessage } from '@/utils/apiError'
|
||||
|
||||
const props = defineProps<{
|
||||
user: User | null
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const authStore = useAuthStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const targetAvatarUploadBytes = 20 * 1024
|
||||
const avatarScaleSteps = [1, 0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
|
||||
const avatarQualitySteps = [0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
|
||||
const avatarDraft = ref(props.user?.avatar_url?.trim() || '')
|
||||
const avatarSaving = ref(false)
|
||||
|
||||
const displayName = computed(() => props.user?.username?.trim() || props.user?.email?.trim() || 'User')
|
||||
const avatarInitial = computed(() => displayName.value.charAt(0).toUpperCase() || 'U')
|
||||
const avatarPreviewUrl = computed(() => avatarDraft.value.trim() || props.user?.avatar_url?.trim() || '')
|
||||
|
||||
watch(
|
||||
() => props.user?.avatar_url,
|
||||
(value) => {
|
||||
avatarDraft.value = value?.trim() || ''
|
||||
}
|
||||
)
|
||||
|
||||
function validateAvatarInput(value: string): string | null {
|
||||
const normalized = value.trim()
|
||||
if (!normalized) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (normalized.startsWith('data:')) {
|
||||
if (!/^data:image\/[a-zA-Z0-9.+-]+;base64,/i.test(normalized)) {
|
||||
appStore.showError(t('profile.avatar.invalidValue'))
|
||||
return null
|
||||
}
|
||||
return normalized
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = new URL(normalized)
|
||||
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
|
||||
return normalized
|
||||
}
|
||||
} catch {
|
||||
// Invalid URL is handled below.
|
||||
}
|
||||
|
||||
appStore.showError(t('profile.avatar.invalidValue'))
|
||||
return null
|
||||
}
|
||||
|
||||
function readFileAsDataURL(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
|
||||
reader.onerror = () => reject(reader.error ?? new Error('avatar_read_failed'))
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
function loadImage(dataURL: string): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.onload = () => resolve(image)
|
||||
image.onerror = () => reject(new Error(t('profile.avatar.readFailed')))
|
||||
image.src = dataURL
|
||||
})
|
||||
}
|
||||
|
||||
function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob> {
|
||||
return new Promise((resolve, reject) => {
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
reject(new Error(t('profile.avatar.compressFailed')))
|
||||
return
|
||||
}
|
||||
resolve(blob)
|
||||
}, type, quality)
|
||||
})
|
||||
}
|
||||
|
||||
async function compressAvatarFile(file: File): Promise<File> {
|
||||
const sourceDataURL = await readFileAsDataURL(file)
|
||||
const image = await loadImage(sourceDataURL)
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) {
|
||||
throw new Error(t('profile.avatar.compressFailed'))
|
||||
}
|
||||
|
||||
for (const scale of avatarScaleSteps) {
|
||||
const width = Math.max(1, Math.round(image.naturalWidth * scale))
|
||||
const height = Math.max(1, Math.round(image.naturalHeight * scale))
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
ctx.drawImage(image, 0, 0, width, height)
|
||||
|
||||
for (const quality of avatarQualitySteps) {
|
||||
const blob = await canvasToBlob(canvas, 'image/webp', quality)
|
||||
if (blob.size <= targetAvatarUploadBytes) {
|
||||
const fileName = file.name.replace(/\.[^.]+$/, '') || 'avatar'
|
||||
return new File([blob], `${fileName}.webp`, { type: 'image/webp' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(t('profile.avatar.compressTooLarge'))
|
||||
}
|
||||
|
||||
async function prepareAvatarUpload(file: File): Promise<File> {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
throw new Error(t('profile.avatar.invalidType'))
|
||||
}
|
||||
if (file.type === 'image/gif') {
|
||||
if (file.size > targetAvatarUploadBytes) {
|
||||
throw new Error(t('profile.avatar.gifTooLarge'))
|
||||
}
|
||||
return file
|
||||
}
|
||||
if (file.size <= targetAvatarUploadBytes) {
|
||||
return file
|
||||
}
|
||||
return compressAvatarFile(file)
|
||||
}
|
||||
|
||||
async function handleAvatarFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement | null
|
||||
const file = input?.files?.[0]
|
||||
if (input) {
|
||||
input.value = ''
|
||||
}
|
||||
if (!file) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const preparedFile = await prepareAvatarUpload(file)
|
||||
const dataURL = await readFileAsDataURL(preparedFile)
|
||||
const normalized = validateAvatarInput(dataURL)
|
||||
if (!normalized) {
|
||||
return
|
||||
}
|
||||
avatarDraft.value = normalized
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarSave() {
|
||||
const normalized = validateAvatarInput(avatarDraft.value)
|
||||
if (!normalized) {
|
||||
return
|
||||
}
|
||||
|
||||
avatarSaving.value = true
|
||||
try {
|
||||
const updated = await userAPI.updateProfile({ avatar_url: normalized })
|
||||
authStore.user = updated
|
||||
avatarDraft.value = updated.avatar_url?.trim() || ''
|
||||
appStore.showSuccess(t('profile.avatar.saveSuccess'))
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
} finally {
|
||||
avatarSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarDelete() {
|
||||
if (avatarSaving.value) {
|
||||
return
|
||||
}
|
||||
if (!avatarDraft.value.trim() && !props.user?.avatar_url?.trim()) {
|
||||
appStore.showError(t('profile.avatar.emptyDeleteHint'))
|
||||
return
|
||||
}
|
||||
|
||||
avatarSaving.value = true
|
||||
try {
|
||||
const updated = await userAPI.updateProfile({ avatar_url: '' })
|
||||
authStore.user = updated
|
||||
avatarDraft.value = ''
|
||||
appStore.showSuccess(t('profile.avatar.deleteSuccess'))
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
} finally {
|
||||
avatarSaving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,103 +1,125 @@
|
||||
<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">
|
||||
<div class="card overflow-hidden">
|
||||
<div 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') }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ t('profile.authBindings.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-2">
|
||||
<div class="divide-y divide-gray-100 dark:divide-dark-700">
|
||||
<div
|
||||
v-for="item in providerItems"
|
||||
:key="item.provider"
|
||||
class="rounded-xl bg-white/80 px-3 py-3 dark:bg-dark-800/70"
|
||||
class="px-6 py-5"
|
||||
>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<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>
|
||||
<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">
|
||||
<div
|
||||
:class="providerIconClass(item.provider)"
|
||||
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold"
|
||||
>
|
||||
<Icon
|
||||
v-if="item.provider === 'email'"
|
||||
name="mail"
|
||||
size="sm"
|
||||
class="text-current"
|
||||
/>
|
||||
<span v-else>{{ providerInitial(item.provider) }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.provider === 'email'"
|
||||
class="mt-3 grid gap-2 sm:grid-cols-[minmax(0,1.4fr)_auto]"
|
||||
>
|
||||
<input
|
||||
v-model.trim="emailBindingForm.email"
|
||||
data-testid="profile-binding-email-input"
|
||||
type="email"
|
||||
class="input"
|
||||
:placeholder="t('profile.authBindings.emailPlaceholder')"
|
||||
:disabled="isSendingEmailCode || isBindingEmail"
|
||||
/>
|
||||
<button
|
||||
data-testid="profile-binding-email-send-code"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm"
|
||||
:disabled="isSendingEmailCode || isBindingEmail"
|
||||
@click="sendEmailCode"
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<h3 class="font-medium text-gray-900 dark:text-white">
|
||||
{{ item.label }}
|
||||
</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="providerSummary(item.provider)"
|
||||
class="mt-1 text-sm text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{
|
||||
isSendingEmailCode
|
||||
? t('common.loading')
|
||||
: t('profile.authBindings.sendCodeAction')
|
||||
}}
|
||||
</button>
|
||||
<input
|
||||
v-model.trim="emailBindingForm.verifyCode"
|
||||
data-testid="profile-binding-email-code-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
maxlength="6"
|
||||
class="input"
|
||||
:placeholder="t('profile.authBindings.codePlaceholder')"
|
||||
:disabled="isBindingEmail"
|
||||
/>
|
||||
<input
|
||||
v-model="emailBindingForm.password"
|
||||
data-testid="profile-binding-email-password-input"
|
||||
type="password"
|
||||
class="input"
|
||||
:placeholder="emailPasswordPlaceholder"
|
||||
:disabled="isBindingEmail"
|
||||
/>
|
||||
<button
|
||||
data-testid="profile-binding-email-submit"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm sm:col-span-2"
|
||||
:disabled="isBindingEmail"
|
||||
@click="bindEmail"
|
||||
{{ providerSummary(item.provider) }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="item.provider === 'email'"
|
||||
class="mt-4 grid gap-2 sm:grid-cols-[minmax(0,1.4fr)_auto]"
|
||||
>
|
||||
{{
|
||||
isBindingEmail
|
||||
? t('common.loading')
|
||||
: emailSubmitActionLabel
|
||||
}}
|
||||
</button>
|
||||
<input
|
||||
v-model.trim="emailBindingForm.email"
|
||||
data-testid="profile-binding-email-input"
|
||||
type="email"
|
||||
class="input"
|
||||
:placeholder="t('profile.authBindings.emailPlaceholder')"
|
||||
:disabled="isSendingEmailCode || isBindingEmail"
|
||||
/>
|
||||
<button
|
||||
data-testid="profile-binding-email-send-code"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm"
|
||||
:disabled="isSendingEmailCode || isBindingEmail"
|
||||
@click="sendEmailCode"
|
||||
>
|
||||
{{
|
||||
isSendingEmailCode
|
||||
? t('common.loading')
|
||||
: t('profile.authBindings.sendCodeAction')
|
||||
}}
|
||||
</button>
|
||||
<input
|
||||
v-model.trim="emailBindingForm.verifyCode"
|
||||
data-testid="profile-binding-email-code-input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
maxlength="6"
|
||||
class="input"
|
||||
:placeholder="t('profile.authBindings.codePlaceholder')"
|
||||
:disabled="isBindingEmail"
|
||||
/>
|
||||
<input
|
||||
v-model="emailBindingForm.password"
|
||||
data-testid="profile-binding-email-password-input"
|
||||
type="password"
|
||||
class="input"
|
||||
:placeholder="emailPasswordPlaceholder"
|
||||
:disabled="isBindingEmail"
|
||||
/>
|
||||
<button
|
||||
data-testid="profile-binding-email-submit"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm sm:col-span-2"
|
||||
:disabled="isBindingEmail"
|
||||
@click="bindEmail"
|
||||
>
|
||||
{{
|
||||
isBindingEmail
|
||||
? t('common.loading')
|
||||
: emailSubmitActionLabel
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<div class="flex shrink-0 items-center gap-3">
|
||||
<button
|
||||
v-if="item.canBind"
|
||||
:data-testid="`profile-binding-${item.provider}-action`"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm"
|
||||
class="btn btn-primary btn-sm"
|
||||
@click="startBinding(item.provider)"
|
||||
>
|
||||
{{ t('profile.authBindings.bindAction', { providerName: item.label }) }}
|
||||
@@ -119,6 +141,7 @@ import {
|
||||
type WeChatOAuthPublicSettings,
|
||||
} from '@/api/auth'
|
||||
import { bindEmailIdentity, sendEmailBindingCode, startOAuthBinding } from '@/api/user'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import { useAppStore, useAuthStore } from '@/stores'
|
||||
import type { User, UserAuthBindingStatus, UserAuthProvider } from '@/types'
|
||||
|
||||
@@ -265,6 +288,39 @@ const providerItems = computed(() => [
|
||||
},
|
||||
])
|
||||
|
||||
function providerInitial(provider: UserAuthProvider): string {
|
||||
if (provider === 'linuxdo') {
|
||||
return 'L'
|
||||
}
|
||||
if (provider === 'wechat') {
|
||||
return 'W'
|
||||
}
|
||||
if (provider === 'oidc') {
|
||||
return 'O'
|
||||
}
|
||||
return 'E'
|
||||
}
|
||||
|
||||
function providerIconClass(provider: UserAuthProvider): string {
|
||||
if (provider === 'linuxdo') {
|
||||
return 'bg-orange-100 text-orange-600 dark:bg-orange-900/20 dark:text-orange-300'
|
||||
}
|
||||
if (provider === 'wechat') {
|
||||
return 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-300'
|
||||
}
|
||||
if (provider === 'oidc') {
|
||||
return 'bg-sky-100 text-sky-600 dark:bg-sky-900/20 dark:text-sky-300'
|
||||
}
|
||||
return 'bg-primary-100 text-primary-600 dark:bg-primary-900/20 dark:text-primary-300'
|
||||
}
|
||||
|
||||
function providerSummary(provider: UserAuthProvider): string {
|
||||
if (provider === 'email') {
|
||||
return currentUser.value?.email || ''
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
function startBinding(provider: UserAuthProvider): void {
|
||||
if (provider === 'email') {
|
||||
return
|
||||
|
||||
@@ -17,8 +17,11 @@
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="truncate text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{{ user?.email }}
|
||||
{{ 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') }}
|
||||
@@ -47,438 +50,23 @@
|
||||
</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>
|
||||
|
||||
<div
|
||||
class="mt-4 rounded-2xl border border-gray-100 bg-white/90 p-4 dark:border-dark-700 dark:bg-dark-900/30"
|
||||
>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{{ t('profile.avatar.title') }}
|
||||
</h3>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('profile.avatar.description') }}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
data-testid="profile-avatar-delete"
|
||||
type="button"
|
||||
class="btn btn-secondary btn-sm"
|
||||
:disabled="avatarSaving"
|
||||
@click="handleAvatarDelete"
|
||||
>
|
||||
{{ t('common.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-3">
|
||||
<label
|
||||
for="profile-avatar-input"
|
||||
class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ t('profile.avatar.inputLabel') }}
|
||||
</label>
|
||||
<textarea
|
||||
id="profile-avatar-input"
|
||||
data-testid="profile-avatar-input"
|
||||
v-model="avatarDraft"
|
||||
rows="3"
|
||||
class="input min-h-[88px]"
|
||||
:placeholder="t('profile.avatar.inputPlaceholder')"
|
||||
/>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<label class="btn btn-secondary btn-sm cursor-pointer">
|
||||
<input
|
||||
data-testid="profile-avatar-file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
@change="handleAvatarFileChange"
|
||||
>
|
||||
{{ t('profile.avatar.uploadAction') }}
|
||||
</label>
|
||||
<button
|
||||
data-testid="profile-avatar-save"
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="avatarSaving"
|
||||
@click="handleAvatarSave"
|
||||
>
|
||||
{{ t('common.save') }}
|
||||
</button>
|
||||
<span class="text-xs text-gray-400 dark:text-gray-500">
|
||||
{{ t('profile.avatar.uploadHint') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProfileIdentityBindingsSection
|
||||
class="mt-4"
|
||||
:user="user"
|
||||
:linuxdo-enabled="linuxdoEnabled"
|
||||
:oidc-enabled="oidcEnabled"
|
||||
:oidc-provider-name="oidcProviderName"
|
||||
:wechat-enabled="wechatEnabled"
|
||||
:wechat-open-enabled="wechatOpenEnabled"
|
||||
:wechat-mp-enabled="wechatMpEnabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { userAPI } from '@/api'
|
||||
import Icon from '@/components/icons/Icon.vue'
|
||||
import ProfileIdentityBindingsSection from '@/components/user/profile/ProfileIdentityBindingsSection.vue'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import type { User, UserAuthProvider, UserProfileSourceContext } from '@/types'
|
||||
import { extractApiErrorMessage } from '@/utils/apiError'
|
||||
import type { User } from '@/types'
|
||||
|
||||
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 props = defineProps<{
|
||||
user: User | null
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const authStore = useAuthStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const maxAvatarBytes = 100 * 1024
|
||||
const targetAvatarUploadBytes = 20 * 1024
|
||||
const avatarScaleSteps = [1, 0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
|
||||
const avatarQualitySteps = [0.92, 0.84, 0.76, 0.68, 0.6, 0.52, 0.44, 0.36]
|
||||
const avatarDraft = ref(props.user?.avatar_url?.trim() || '')
|
||||
const avatarSaving = ref(false)
|
||||
|
||||
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')
|
||||
|
||||
watch(
|
||||
() => props.user?.avatar_url,
|
||||
(value) => {
|
||||
avatarDraft.value = value?.trim() || ''
|
||||
}
|
||||
)
|
||||
|
||||
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
|
||||
})
|
||||
|
||||
function estimateDataURLByteSize(value: string): number {
|
||||
const [, encoded = ''] = value.split(',', 2)
|
||||
const sanitized = encoded.replace(/\s+/g, '')
|
||||
const padding = sanitized.endsWith('==') ? 2 : sanitized.endsWith('=') ? 1 : 0
|
||||
return Math.max(0, Math.floor((sanitized.length * 3) / 4) - padding)
|
||||
}
|
||||
|
||||
function validateAvatarInput(value: string): string | null {
|
||||
const normalized = value.trim()
|
||||
if (!normalized) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (normalized.startsWith('data:')) {
|
||||
if (!/^data:image\/[a-zA-Z0-9.+-]+;base64,/i.test(normalized)) {
|
||||
appStore.showError(t('profile.avatar.invalidValue'))
|
||||
return null
|
||||
}
|
||||
if (estimateDataURLByteSize(normalized) > maxAvatarBytes) {
|
||||
appStore.showError(t('profile.avatar.fileTooLarge'))
|
||||
return null
|
||||
}
|
||||
return normalized
|
||||
}
|
||||
|
||||
try {
|
||||
const parsed = new URL(normalized)
|
||||
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
|
||||
return normalized
|
||||
}
|
||||
} catch {
|
||||
// Invalid URL is handled below.
|
||||
}
|
||||
|
||||
appStore.showError(t('profile.avatar.invalidValue'))
|
||||
return null
|
||||
}
|
||||
|
||||
function readFileAsDataURL(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
|
||||
reader.onerror = () => reject(reader.error ?? new Error('avatar_read_failed'))
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
function loadImage(dataURL: string): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.onload = () => resolve(image)
|
||||
image.onerror = () => reject(new Error(t('profile.avatar.readFailed')))
|
||||
image.src = dataURL
|
||||
})
|
||||
}
|
||||
|
||||
function canvasToBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob> {
|
||||
return new Promise((resolve, reject) => {
|
||||
canvas.toBlob((blob) => {
|
||||
if (!blob) {
|
||||
reject(new Error(t('profile.avatar.compressFailed')))
|
||||
return
|
||||
}
|
||||
resolve(blob)
|
||||
}, type, quality)
|
||||
})
|
||||
}
|
||||
|
||||
async function compressAvatarFile(file: File): Promise<File> {
|
||||
const sourceDataURL = await readFileAsDataURL(file)
|
||||
const image = await loadImage(sourceDataURL)
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) {
|
||||
throw new Error(t('profile.avatar.compressFailed'))
|
||||
}
|
||||
|
||||
for (const scale of avatarScaleSteps) {
|
||||
const width = Math.max(1, Math.round(image.naturalWidth * scale))
|
||||
const height = Math.max(1, Math.round(image.naturalHeight * scale))
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
ctx.clearRect(0, 0, width, height)
|
||||
ctx.drawImage(image, 0, 0, width, height)
|
||||
|
||||
for (const quality of avatarQualitySteps) {
|
||||
const blob = await canvasToBlob(canvas, 'image/webp', quality)
|
||||
if (blob.size <= targetAvatarUploadBytes) {
|
||||
const fileName = file.name.replace(/\.[^.]+$/, '') || 'avatar'
|
||||
return new File([blob], `${fileName}.webp`, { type: 'image/webp' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(t('profile.avatar.compressTooLarge'))
|
||||
}
|
||||
|
||||
async function prepareAvatarUpload(file: File): Promise<File> {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
throw new Error(t('profile.avatar.invalidType'))
|
||||
}
|
||||
if (file.type === 'image/gif') {
|
||||
if (file.size > targetAvatarUploadBytes) {
|
||||
throw new Error(t('profile.avatar.gifTooLarge'))
|
||||
}
|
||||
return file
|
||||
}
|
||||
if (file.size <= targetAvatarUploadBytes) {
|
||||
return file
|
||||
}
|
||||
return compressAvatarFile(file)
|
||||
}
|
||||
|
||||
async function handleAvatarFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement | null
|
||||
const file = input?.files?.[0]
|
||||
if (input) {
|
||||
input.value = ''
|
||||
}
|
||||
if (!file) {
|
||||
return
|
||||
}
|
||||
if (!file.type.startsWith('image/')) {
|
||||
appStore.showError(t('profile.avatar.invalidType'))
|
||||
return
|
||||
}
|
||||
if (file.size > maxAvatarBytes) {
|
||||
appStore.showError(t('profile.avatar.fileTooLarge'))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const preparedFile = await prepareAvatarUpload(file)
|
||||
const dataURL = await readFileAsDataURL(preparedFile)
|
||||
const normalized = validateAvatarInput(dataURL)
|
||||
if (!normalized) {
|
||||
return
|
||||
}
|
||||
avatarDraft.value = normalized
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarSave() {
|
||||
const normalized = validateAvatarInput(avatarDraft.value)
|
||||
if (!normalized) {
|
||||
return
|
||||
}
|
||||
|
||||
avatarSaving.value = true
|
||||
try {
|
||||
const updated = await userAPI.updateProfile({ avatar_url: normalized })
|
||||
authStore.user = updated
|
||||
avatarDraft.value = updated.avatar_url?.trim() || ''
|
||||
appStore.showSuccess(t('profile.avatar.saveSuccess'))
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
} finally {
|
||||
avatarSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAvatarDelete() {
|
||||
if (avatarSaving.value) {
|
||||
return
|
||||
}
|
||||
if (!avatarDraft.value.trim() && !props.user?.avatar_url?.trim()) {
|
||||
appStore.showError(t('profile.avatar.emptyDeleteHint'))
|
||||
return
|
||||
}
|
||||
|
||||
avatarSaving.value = true
|
||||
try {
|
||||
const updated = await userAPI.updateProfile({ avatar_url: '' })
|
||||
authStore.user = updated
|
||||
avatarDraft.value = ''
|
||||
appStore.showSuccess(t('profile.avatar.deleteSuccess'))
|
||||
} catch (error: unknown) {
|
||||
appStore.showError(extractApiErrorMessage(error, t('common.error')))
|
||||
} finally {
|
||||
avatarSaving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,214 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
|
||||
import type { User } from '@/types'
|
||||
|
||||
const {
|
||||
updateProfileMock,
|
||||
showSuccessMock,
|
||||
showErrorMock,
|
||||
authStoreState
|
||||
} = vi.hoisted(() => ({
|
||||
updateProfileMock: vi.fn(),
|
||||
showSuccessMock: vi.fn(),
|
||||
showErrorMock: vi.fn(),
|
||||
authStoreState: {
|
||||
user: null as User | null
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/api', () => ({
|
||||
userAPI: {
|
||||
updateProfile: updateProfileMock
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/auth', () => ({
|
||||
useAuthStore: () => authStoreState
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/app', () => ({
|
||||
useAppStore: () => ({
|
||||
showSuccess: showSuccessMock,
|
||||
showError: showErrorMock
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/utils/apiError', () => ({
|
||||
extractApiErrorMessage: (error: unknown) => (error as Error).message || 'request failed'
|
||||
}))
|
||||
|
||||
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.avatar.title') return 'Profile avatar'
|
||||
if (key === 'profile.avatar.description') return 'Upload and manage your avatar'
|
||||
if (key === 'profile.avatar.uploadAction') return 'Upload image'
|
||||
if (key === 'profile.avatar.uploadHint') return 'Uploaded images are compressed to 20KB when possible'
|
||||
if (key === 'profile.avatar.saveSuccess') return 'Avatar updated'
|
||||
if (key === 'profile.avatar.deleteSuccess') return 'Avatar removed'
|
||||
if (key === 'profile.avatar.invalidType') return 'Please choose an image file'
|
||||
if (key === 'profile.avatar.gifTooLarge') return 'GIF avatars must already be 20KB or smaller'
|
||||
if (key === 'profile.avatar.compressTooLarge') return 'Unable to compress this image below 20KB'
|
||||
if (key === 'profile.avatar.compressFailed') return 'Failed to compress the selected image'
|
||||
if (key === 'profile.avatar.readFailed') return 'Failed to read the selected image'
|
||||
if (key === 'common.save') return 'Save'
|
||||
if (key === 'common.delete') return 'Delete'
|
||||
if (key === 'profile.avatar.compressedReady') return `Compressed from ${params?.from} to ${params?.to}`
|
||||
if (key === 'profile.avatar.sizeReady') return `Ready: ${params?.size}`
|
||||
return key
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function createUser(overrides: Partial<User> = {}): User {
|
||||
return {
|
||||
id: 5,
|
||||
username: 'alice',
|
||||
email: 'alice@example.com',
|
||||
avatar_url: null,
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
async function flushAsyncWork(): Promise<void> {
|
||||
await Promise.resolve()
|
||||
await Promise.resolve()
|
||||
}
|
||||
|
||||
const originalFileReader = globalThis.FileReader
|
||||
const originalImage = globalThis.Image
|
||||
const originalCreateElement = document.createElement.bind(document)
|
||||
|
||||
function installAvatarCompressionMocks(blobSize = 8 * 1024) {
|
||||
class MockFileReader {
|
||||
result: string | ArrayBuffer | null = null
|
||||
onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
|
||||
onerror: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
|
||||
error: DOMException | null = null
|
||||
|
||||
readAsDataURL(blob: Blob) {
|
||||
if (blob.type === 'image/webp') {
|
||||
this.result = 'data:image/webp;base64,' + Buffer.from('compressed-avatar').toString('base64')
|
||||
} else {
|
||||
this.result = 'data:image/png;base64,' + Buffer.from('original-avatar').toString('base64')
|
||||
}
|
||||
this.onload?.call(this as unknown as FileReader, new ProgressEvent('load'))
|
||||
}
|
||||
}
|
||||
|
||||
class MockImage {
|
||||
naturalWidth = 1200
|
||||
naturalHeight = 1200
|
||||
onload: (() => void) | null = null
|
||||
onerror: (() => void) | null = null
|
||||
|
||||
set src(_value: string) {
|
||||
this.onload?.()
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.FileReader = MockFileReader as unknown as typeof FileReader
|
||||
globalThis.Image = MockImage as unknown as typeof Image
|
||||
vi.spyOn(document, 'createElement').mockImplementation(((tagName: string, options?: ElementCreationOptions) => {
|
||||
if (tagName === 'canvas') {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0,
|
||||
getContext: () => ({
|
||||
clearRect: vi.fn(),
|
||||
drawImage: vi.fn()
|
||||
}),
|
||||
toBlob: (callback: BlobCallback) => {
|
||||
callback(new Blob([new Uint8Array(blobSize)], { type: 'image/webp' }))
|
||||
}
|
||||
} as unknown as HTMLCanvasElement
|
||||
}
|
||||
return originalCreateElement(tagName, options)
|
||||
}) as typeof document.createElement)
|
||||
}
|
||||
|
||||
describe('ProfileAvatarCard', () => {
|
||||
beforeEach(() => {
|
||||
updateProfileMock.mockReset()
|
||||
showSuccessMock.mockReset()
|
||||
showErrorMock.mockReset()
|
||||
authStoreState.user = null
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
globalThis.FileReader = originalFileReader
|
||||
globalThis.Image = originalImage
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
it('compresses an uploaded image that exceeds the 20KB target before saving', async () => {
|
||||
installAvatarCompressionMocks()
|
||||
const updatedUser = createUser({ avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI=' })
|
||||
updateProfileMock.mockResolvedValue(updatedUser)
|
||||
authStoreState.user = createUser()
|
||||
|
||||
const wrapper = mount(ProfileAvatarCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fileInput = wrapper.get('[data-testid="profile-avatar-file-input"]')
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [new File([new Uint8Array(220 * 1024)], 'avatar.png', { type: 'image/png' })],
|
||||
configurable: true
|
||||
})
|
||||
|
||||
await fileInput.trigger('change')
|
||||
await flushAsyncWork()
|
||||
await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).toHaveBeenCalledWith({
|
||||
avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI='
|
||||
})
|
||||
expect(showErrorMock).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('deletes the current avatar', async () => {
|
||||
const updatedUser = createUser({ avatar_url: null })
|
||||
updateProfileMock.mockResolvedValue(updatedUser)
|
||||
authStoreState.user = createUser({ avatar_url: 'https://cdn.example.com/old.png' })
|
||||
|
||||
const wrapper = mount(ProfileAvatarCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.get('[data-testid="profile-avatar-delete"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: '' })
|
||||
expect(authStoreState.user?.avatar_url).toBeNull()
|
||||
expect(showSuccessMock).toHaveBeenCalledWith('Avatar removed')
|
||||
})
|
||||
})
|
||||
@@ -1,75 +1,29 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
|
||||
import type { User } from '@/types'
|
||||
|
||||
const {
|
||||
updateProfileMock,
|
||||
showSuccessMock,
|
||||
showErrorMock,
|
||||
authStoreState
|
||||
} = vi.hoisted(() => ({
|
||||
updateProfileMock: vi.fn(),
|
||||
showSuccessMock: vi.fn(),
|
||||
showErrorMock: vi.fn(),
|
||||
authStoreState: {
|
||||
user: null as User | null
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/api', () => ({
|
||||
userAPI: {
|
||||
updateProfile: updateProfileMock
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/auth', () => ({
|
||||
useAuthStore: () => authStoreState
|
||||
useAuthStore: () => ({
|
||||
user: null
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/app', () => ({
|
||||
useAppStore: () => ({
|
||||
showSuccess: showSuccessMock,
|
||||
showError: showErrorMock
|
||||
showError: vi.fn(),
|
||||
showSuccess: vi.fn()
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/utils/apiError', () => ({
|
||||
extractApiErrorMessage: (error: unknown) => (error as Error).message || 'request failed'
|
||||
}))
|
||||
|
||||
vi.mock('vue-i18n', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('vue-i18n')>()
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string, params?: Record<string, string>) => {
|
||||
t: (key: string) => {
|
||||
if (key === 'profile.administrator') return 'Administrator'
|
||||
if (key === 'profile.user') return 'User'
|
||||
if (key === 'profile.avatar.title') return 'Profile avatar'
|
||||
if (key === 'profile.avatar.description') return 'Set avatar by image URL or upload'
|
||||
if (key === 'profile.avatar.inputLabel') return 'Avatar URL or data URL'
|
||||
if (key === 'profile.avatar.inputPlaceholder') return 'https://cdn.example.com/avatar.png'
|
||||
if (key === 'profile.avatar.uploadAction') return 'Upload image'
|
||||
if (key === 'profile.avatar.uploadHint') return 'Images must be 100KB or smaller and will be compressed to 20KB'
|
||||
if (key === 'profile.avatar.saveSuccess') return 'Avatar updated'
|
||||
if (key === 'profile.avatar.deleteSuccess') return 'Avatar removed'
|
||||
if (key === 'profile.avatar.invalidType') return 'Please choose an image file'
|
||||
if (key === 'profile.avatar.fileTooLarge') return 'Avatar image must be 100KB or smaller'
|
||||
if (key === 'profile.avatar.gifTooLarge') return 'GIF avatars must already be 20KB or smaller'
|
||||
if (key === 'profile.avatar.compressTooLarge') return 'Unable to compress this image below 20KB'
|
||||
if (key === 'profile.avatar.compressFailed') return 'Failed to compress the selected image'
|
||||
if (key === 'profile.avatar.readFailed') return 'Failed to read the selected image'
|
||||
if (key === 'profile.avatar.invalidValue') return 'Enter a valid avatar URL or image data URL'
|
||||
if (key === 'profile.avatar.emptyDeleteHint') return 'Avatar already removed'
|
||||
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.source.avatar') return `Avatar synced from ${params?.providerName || 'provider'}`
|
||||
if (key === 'profile.authBindings.source.username') return `Username synced from ${params?.providerName || 'provider'}`
|
||||
if (key === 'common.save') return 'Save'
|
||||
if (key === 'common.delete') return 'Delete'
|
||||
return key
|
||||
}
|
||||
})
|
||||
@@ -96,204 +50,23 @@ function createUser(overrides: Partial<User> = {}): User {
|
||||
}
|
||||
}
|
||||
|
||||
async function flushAsyncWork(): Promise<void> {
|
||||
await Promise.resolve()
|
||||
await Promise.resolve()
|
||||
}
|
||||
|
||||
const originalFileReader = globalThis.FileReader
|
||||
const originalImage = globalThis.Image
|
||||
const originalCreateElement = document.createElement.bind(document)
|
||||
|
||||
function installAvatarCompressionMocks() {
|
||||
class MockFileReader {
|
||||
result: string | ArrayBuffer | null = null
|
||||
onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
|
||||
onerror: ((this: FileReader, ev: ProgressEvent<FileReader>) => any) | null = null
|
||||
error: DOMException | null = null
|
||||
|
||||
readAsDataURL(blob: Blob) {
|
||||
if (blob.type === 'image/webp') {
|
||||
this.result = 'data:image/webp;base64,' + Buffer.from('compressed-avatar').toString('base64')
|
||||
} else {
|
||||
this.result = 'data:image/png;base64,' + Buffer.from('original-avatar').toString('base64')
|
||||
}
|
||||
this.onload?.call(this as unknown as FileReader, new ProgressEvent('load'))
|
||||
}
|
||||
}
|
||||
|
||||
class MockImage {
|
||||
naturalWidth = 1200
|
||||
naturalHeight = 1200
|
||||
onload: (() => void) | null = null
|
||||
onerror: (() => void) | null = null
|
||||
|
||||
set src(_value: string) {
|
||||
this.onload?.()
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.FileReader = MockFileReader as unknown as typeof FileReader
|
||||
globalThis.Image = MockImage as unknown as typeof Image
|
||||
vi.spyOn(document, 'createElement').mockImplementation(((tagName: string, options?: ElementCreationOptions) => {
|
||||
if (tagName === 'canvas') {
|
||||
return {
|
||||
width: 0,
|
||||
height: 0,
|
||||
getContext: () => ({
|
||||
clearRect: vi.fn(),
|
||||
drawImage: vi.fn(),
|
||||
}),
|
||||
toBlob: (callback: BlobCallback) => {
|
||||
callback(new Blob([new Uint8Array(8 * 1024)], { type: 'image/webp' }))
|
||||
},
|
||||
} as unknown as HTMLCanvasElement
|
||||
}
|
||||
return originalCreateElement(tagName, options)
|
||||
}) as typeof document.createElement)
|
||||
}
|
||||
|
||||
describe('ProfileInfoCard', () => {
|
||||
beforeEach(() => {
|
||||
updateProfileMock.mockReset()
|
||||
showSuccessMock.mockReset()
|
||||
showErrorMock.mockReset()
|
||||
authStoreState.user = null
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
globalThis.FileReader = originalFileReader
|
||||
globalThis.Image = originalImage
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
it('saves a remote avatar URL and updates the auth store', async () => {
|
||||
const updatedUser = createUser({ avatar_url: 'https://cdn.example.com/new.png' })
|
||||
updateProfileMock.mockResolvedValue(updatedUser)
|
||||
authStoreState.user = createUser()
|
||||
|
||||
it('renders basic account information without avatar or bindings actions', () => {
|
||||
const wrapper = mount(ProfileInfoCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
user: createUser()
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true,
|
||||
ProfileIdentityBindingsSection: true
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.get('[data-testid="profile-avatar-input"]').setValue('https://cdn.example.com/new.png')
|
||||
await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: 'https://cdn.example.com/new.png' })
|
||||
expect(authStoreState.user?.avatar_url).toBe('https://cdn.example.com/new.png')
|
||||
expect(showSuccessMock).toHaveBeenCalledWith('Avatar updated')
|
||||
})
|
||||
|
||||
it('rejects an oversized data URL before sending the request', async () => {
|
||||
authStoreState.user = createUser()
|
||||
const oversized = `data:image/png;base64,${Buffer.from(new Uint8Array(102401)).toString('base64')}`
|
||||
|
||||
const wrapper = mount(ProfileInfoCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true,
|
||||
ProfileIdentityBindingsSection: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.get('[data-testid="profile-avatar-input"]').setValue(oversized)
|
||||
await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).not.toHaveBeenCalled()
|
||||
expect(showErrorMock).toHaveBeenCalledWith('Avatar image must be 100KB or smaller')
|
||||
})
|
||||
|
||||
it('compresses uploaded images under 100KB before saving', async () => {
|
||||
installAvatarCompressionMocks()
|
||||
const updatedUser = createUser({ avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI=' })
|
||||
updateProfileMock.mockResolvedValue(updatedUser)
|
||||
authStoreState.user = createUser()
|
||||
|
||||
const wrapper = mount(ProfileInfoCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true,
|
||||
ProfileIdentityBindingsSection: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const fileInput = wrapper.get('[data-testid="profile-avatar-file-input"]')
|
||||
Object.defineProperty(fileInput.element, 'files', {
|
||||
value: [new File([new Uint8Array(80 * 1024)], 'avatar.png', { type: 'image/png' })],
|
||||
configurable: true
|
||||
})
|
||||
|
||||
await fileInput.trigger('change')
|
||||
await flushAsyncWork()
|
||||
await wrapper.get('[data-testid="profile-avatar-save"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).toHaveBeenCalledWith({
|
||||
avatar_url: 'data:image/webp;base64,Y29tcHJlc3NlZC1hdmF0YXI='
|
||||
})
|
||||
})
|
||||
|
||||
it('deletes the current avatar', async () => {
|
||||
const updatedUser = createUser({ avatar_url: null })
|
||||
updateProfileMock.mockResolvedValue(updatedUser)
|
||||
authStoreState.user = createUser({ avatar_url: 'https://cdn.example.com/old.png' })
|
||||
|
||||
const wrapper = mount(ProfileInfoCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true,
|
||||
ProfileIdentityBindingsSection: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.get('[data-testid="profile-avatar-delete"]').trigger('click')
|
||||
|
||||
expect(updateProfileMock).toHaveBeenCalledWith({ avatar_url: '' })
|
||||
expect(authStoreState.user?.avatar_url).toBeNull()
|
||||
expect(showSuccessMock).toHaveBeenCalledWith('Avatar removed')
|
||||
})
|
||||
|
||||
it('renders third-party source hints from profile_sources', () => {
|
||||
authStoreState.user = createUser({
|
||||
avatar_url: 'https://cdn.example.com/linuxdo.png',
|
||||
profile_sources: {
|
||||
avatar: { provider: 'linuxdo', source: 'linuxdo' },
|
||||
username: { provider: 'linuxdo', source: 'linuxdo' }
|
||||
}
|
||||
})
|
||||
|
||||
const wrapper = mount(ProfileInfoCard, {
|
||||
props: {
|
||||
user: authStoreState.user
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
Icon: true,
|
||||
ProfileIdentityBindingsSection: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.text()).toContain('Avatar synced from LinuxDo')
|
||||
expect(wrapper.text()).toContain('Username synced from LinuxDo')
|
||||
expect(wrapper.text()).toContain('alice@example.com')
|
||||
expect(wrapper.text()).toContain('alice')
|
||||
expect(wrapper.text()).toContain('User')
|
||||
expect(wrapper.find('[data-testid="profile-avatar-save"]').exists()).toBe(false)
|
||||
expect(wrapper.find('[data-testid="profile-binding-email-status"]').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -943,15 +943,14 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
title: 'Profile Avatar',
|
||||
description: 'Set your avatar with a remote image URL or upload an image under 100KB. Uploaded images are compressed to 20KB.',
|
||||
description: 'Set your avatar with a remote image URL or upload an image. Static uploads are compressed to 20KB before saving.',
|
||||
inputLabel: 'Avatar URL or data URL',
|
||||
inputPlaceholder: 'https://cdn.example.com/avatar.png',
|
||||
uploadAction: 'Upload image',
|
||||
uploadHint: 'Uploaded images must be 100KB or smaller. Static images are compressed to 20KB.',
|
||||
uploadHint: 'Static uploads are compressed to 20KB when possible. GIF uploads must already be within 20KB.',
|
||||
saveSuccess: 'Avatar updated',
|
||||
deleteSuccess: 'Avatar removed',
|
||||
invalidType: 'Please choose an image file',
|
||||
fileTooLarge: 'Avatar image must be 100KB or smaller',
|
||||
gifTooLarge: 'GIF avatars must already be 20KB or smaller',
|
||||
compressTooLarge: 'Unable to compress this image below 20KB. Try a smaller image.',
|
||||
compressFailed: 'Failed to compress the selected image.',
|
||||
|
||||
@@ -947,15 +947,14 @@ export default {
|
||||
},
|
||||
avatar: {
|
||||
title: '资料头像',
|
||||
description: '支持填写远程图片 URL，或上传不超过 100KB 的头像图片；上传图片会自动压缩到 20KB 以内。',
|
||||
description: '支持填写远程图片 URL，或上传头像图片；静态图片会自动压缩到 20KB 以内后再保存。',
|
||||
inputLabel: '头像 URL 或 data URL',
|
||||
inputPlaceholder: 'https://cdn.example.com/avatar.png',
|
||||
uploadAction: '上传图片',
|
||||
uploadHint: '上传图片需不超过 100KB，静态图片会自动压缩到 20KB 以内',
|
||||
uploadHint: '上传图片时会自动压缩静态图片到 20KB 以内，GIF 需自行控制在 20KB 以内',
|
||||
saveSuccess: '头像已更新',
|
||||
deleteSuccess: '头像已删除',
|
||||
invalidType: '请选择图片文件',
|
||||
fileTooLarge: '头像图片必须不超过 100KB',
|
||||
gifTooLarge: 'GIF 头像必须在 20KB 以内',
|
||||
compressTooLarge: '无法将图片压缩到 20KB 以内，请换一张更小的图片',
|
||||
compressFailed: '压缩所选图片失败',
|
||||
|
||||
@@ -22,7 +22,11 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProfileInfoCard
|
||||
<ProfileInfoCard :user="user" />
|
||||
|
||||
<ProfileAvatarCard :user="user" />
|
||||
|
||||
<ProfileAccountBindingsCard
|
||||
:user="user"
|
||||
:linuxdo-enabled="linuxdoOAuthEnabled"
|
||||
:oidc-enabled="oidcOAuthEnabled"
|
||||
@@ -73,6 +77,8 @@ import { Icon } from '@/components/icons'
|
||||
import StatCard from '@/components/common/StatCard.vue'
|
||||
import AppLayout from '@/components/layout/AppLayout.vue'
|
||||
import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
|
||||
import ProfileAccountBindingsCard from '@/components/user/profile/ProfileAccountBindingsCard.vue'
|
||||
import ProfileAvatarCard from '@/components/user/profile/ProfileAvatarCard.vue'
|
||||
import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
|
||||
import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
|
||||
import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
|
||||
|
||||
101
frontend/src/views/user/__tests__/ProfileView.spec.ts
Normal file
101
frontend/src/views/user/__tests__/ProfileView.spec.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import ProfileView from '@/views/user/ProfileView.vue'
|
||||
|
||||
const {
|
||||
fetchPublicSettingsMock,
|
||||
refreshUserMock,
|
||||
authState
|
||||
} = vi.hoisted(() => ({
|
||||
fetchPublicSettingsMock: vi.fn(),
|
||||
refreshUserMock: vi.fn(),
|
||||
authState: {
|
||||
user: null as Record<string, unknown> | null,
|
||||
refreshUser: vi.fn()
|
||||
}
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/auth', () => ({
|
||||
useAuthStore: () => authState
|
||||
}))
|
||||
|
||||
vi.mock('@/stores/app', () => ({
|
||||
useAppStore: () => ({
|
||||
fetchPublicSettings: fetchPublicSettingsMock
|
||||
})
|
||||
}))
|
||||
|
||||
vi.mock('@/utils/format', () => ({
|
||||
formatDate: () => 'April 2026'
|
||||
}))
|
||||
|
||||
vi.mock('vue-i18n', async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import('vue-i18n')>()
|
||||
return {
|
||||
...actual,
|
||||
useI18n: () => ({
|
||||
t: (key: string) => key
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
describe('ProfileView', () => {
|
||||
beforeEach(() => {
|
||||
refreshUserMock.mockReset()
|
||||
fetchPublicSettingsMock.mockReset()
|
||||
refreshUserMock.mockResolvedValue(undefined)
|
||||
authState.refreshUser = refreshUserMock
|
||||
authState.user = {
|
||||
id: 1,
|
||||
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'
|
||||
}
|
||||
fetchPublicSettingsMock.mockResolvedValue({
|
||||
contact_info: '',
|
||||
balance_low_notify_enabled: false,
|
||||
balance_low_notify_threshold: 0,
|
||||
linuxdo_oauth_enabled: true,
|
||||
wechat_oauth_enabled: true,
|
||||
wechat_oauth_open_enabled: true,
|
||||
wechat_oauth_mp_enabled: false,
|
||||
oidc_oauth_enabled: true,
|
||||
oidc_oauth_provider_name: 'OIDC'
|
||||
})
|
||||
})
|
||||
|
||||
it('renders info, avatar, and account binding cards as separate sections', async () => {
|
||||
const wrapper = mount(ProfileView, {
|
||||
global: {
|
||||
stubs: {
|
||||
AppLayout: { template: '<div><slot /></div>' },
|
||||
StatCard: { template: '<div class="stat-card" />' },
|
||||
ProfileInfoCard: { template: '<div data-testid="profile-info-card" />' },
|
||||
ProfileAvatarCard: { template: '<div data-testid="profile-avatar-card" />' },
|
||||
ProfileAccountBindingsCard: { template: '<div data-testid="profile-account-bindings-card" />' },
|
||||
ProfileEditForm: true,
|
||||
ProfileBalanceNotifyCard: true,
|
||||
ProfilePasswordForm: true,
|
||||
ProfileTotpCard: true,
|
||||
Icon: true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await flushPromises()
|
||||
|
||||
const html = wrapper.html()
|
||||
expect(html.indexOf('profile-info-card')).toBeGreaterThan(-1)
|
||||
expect(html.indexOf('profile-avatar-card')).toBeGreaterThan(html.indexOf('profile-info-card'))
|
||||
expect(html.indexOf('profile-account-bindings-card')).toBeGreaterThan(html.indexOf('profile-avatar-card'))
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user