Commit c6d85924 authored by IanShaw027's avatar IanShaw027
Browse files

feat: add profile auth identity binding flow

parent 13d9780d
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')
})
})
...@@ -940,6 +940,26 @@ export default { ...@@ -940,6 +940,26 @@ export default {
maxEmailsReached: 'Maximum number of notification emails reached', maxEmailsReached: 'Maximum number of notification emails reached',
unverified: 'Unverified', unverified: 'Unverified',
verified: 'Verified', verified: 'Verified',
},
authBindings: {
title: 'Connected Sign-In Methods',
description: 'View current bindings and connect another provider to this account.',
bindAction: 'Bind {providerName}',
bindSuccess: 'Account linked successfully',
status: {
bound: 'Bound',
notBound: 'Not bound',
},
providers: {
email: 'Email',
linuxdo: 'LinuxDo',
oidc: '{providerName}',
wechat: 'WeChat',
},
source: {
avatar: 'Avatar is currently synced from {providerName}',
username: 'Nickname is currently synced from {providerName}',
},
} }
}, },
......
...@@ -944,6 +944,26 @@ export default { ...@@ -944,6 +944,26 @@ export default {
maxEmailsReached: '已达到通知邮箱数量上限', maxEmailsReached: '已达到通知邮箱数量上限',
unverified: '未验证', unverified: '未验证',
verified: '已验证', verified: '已验证',
},
authBindings: {
title: '登录方式绑定',
description: '查看当前绑定状态,并将更多第三方登录方式关联到这个账号。',
bindAction: '绑定 {providerName}',
bindSuccess: '账号绑定成功',
status: {
bound: '已绑定',
notBound: '未绑定',
},
providers: {
email: '邮箱',
linuxdo: 'LinuxDo',
oidc: '{providerName}',
wechat: '微信',
},
source: {
avatar: '头像当前来自 {providerName}',
username: '昵称当前来自 {providerName}',
},
} }
}, },
......
...@@ -34,10 +34,47 @@ export interface NotifyEmailEntry { ...@@ -34,10 +34,47 @@ export interface NotifyEmailEntry {
// ==================== User & Auth Types ==================== // ==================== User & Auth Types ====================
export type UserAuthProvider = 'email' | 'linuxdo' | 'oidc' | 'wechat'
export interface UserAuthBindingStatus {
bound?: boolean
provider?: UserAuthProvider | string
provider_key?: string | null
provider_subject?: string | null
issuer?: string | null
label?: string | null
provider_label?: string | null
metadata?: Record<string, unknown>
}
export interface UserProfileSourceContext {
provider?: UserAuthProvider | string
source?: string | null
label?: string | null
provider_label?: string | null
}
export interface User { export interface User {
id: number id: number
username: string username: string
email: string email: string
avatar_url?: string | null
avatar_source?: string | UserProfileSourceContext | null
username_source?: string | UserProfileSourceContext | null
display_name_source?: string | UserProfileSourceContext | null
nickname_source?: string | UserProfileSourceContext | null
profile_sources?: {
avatar?: string | UserProfileSourceContext | null
username?: string | UserProfileSourceContext | null
display_name?: string | UserProfileSourceContext | null
nickname?: string | UserProfileSourceContext | null
}
auth_bindings?: Partial<Record<UserAuthProvider, boolean | UserAuthBindingStatus>>
identity_bindings?: Partial<Record<UserAuthProvider, boolean | UserAuthBindingStatus>>
email_bound?: boolean
linuxdo_bound?: boolean
oidc_bound?: boolean
wechat_bound?: boolean
role: 'admin' | 'user' // User role for authorization role: 'admin' | 'user' // User role for authorization
balance: number // User balance for API usage balance: number // User balance for API usage
concurrency: number // Allowed concurrent requests concurrency: number // Allowed concurrent requests
......
...@@ -136,6 +136,9 @@ import { useAuthStore, useAppStore } from '@/stores' ...@@ -136,6 +136,9 @@ import { useAuthStore, useAppStore } from '@/stores'
import { import {
completeLinuxDoOAuthRegistration, completeLinuxDoOAuthRegistration,
exchangePendingOAuthCompletion, exchangePendingOAuthCompletion,
getOAuthCompletionKind,
isOAuthLoginCompletion,
persistOAuthTokenContext,
type OAuthAdoptionDecision, type OAuthAdoptionDecision,
type PendingOAuthExchangeResponse type PendingOAuthExchangeResponse
} from '@/api/auth' } from '@/api/auth'
...@@ -162,6 +165,7 @@ const suggestedAvatarUrl = ref('') ...@@ -162,6 +165,7 @@ const suggestedAvatarUrl = ref('')
const adoptDisplayName = ref(true) const adoptDisplayName = ref(true)
const adoptAvatar = ref(true) const adoptAvatar = ref(true)
const needsAdoptionConfirmation = ref(false) const needsAdoptionConfirmation = ref(false)
const bindSuccessMessage = t('profile.authBindings.bindSuccess')
function parseFragmentParams(): URLSearchParams { function parseFragmentParams(): URLSearchParams {
const raw = typeof window !== 'undefined' ? window.location.hash : '' const raw = typeof window !== 'undefined' ? window.location.hash : ''
...@@ -209,18 +213,19 @@ function hasSuggestedProfile(completion: { ...@@ -209,18 +213,19 @@ function hasSuggestedProfile(completion: {
return Boolean(completion.suggested_display_name || completion.suggested_avatar_url) return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
} }
async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) { async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
if (!completion.access_token) { if (getOAuthCompletionKind(completion) === 'bind') {
throw new Error(t('auth.linuxdo.callbackMissingToken')) const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
appStore.showSuccess(bindSuccessMessage)
await router.replace(bindRedirect)
return
} }
if (completion.refresh_token) { if (!isOAuthLoginCompletion(completion)) {
localStorage.setItem('refresh_token', completion.refresh_token) throw new Error(t('auth.linuxdo.callbackMissingToken'))
}
if (completion.expires_in) {
localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
} }
persistOAuthTokenContext(completion)
await authStore.setToken(completion.access_token) await authStore.setToken(completion.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirect) await router.replace(redirect)
...@@ -236,12 +241,7 @@ async function handleSubmitInvitation() { ...@@ -236,12 +241,7 @@ async function handleSubmitInvitation() {
invitationCode.value.trim(), invitationCode.value.trim(),
currentAdoptionDecision() currentAdoptionDecision()
) )
if (tokenData.refresh_token) { persistOAuthTokenContext(tokenData)
localStorage.setItem('refresh_token', tokenData.refresh_token)
}
if (tokenData.expires_in) {
localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
}
await authStore.setToken(tokenData.access_token) await authStore.setToken(tokenData.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirectTo.value) await router.replace(redirectTo.value)
...@@ -258,7 +258,7 @@ async function handleContinueLogin() { ...@@ -258,7 +258,7 @@ async function handleContinueLogin() {
isSubmitting.value = true isSubmitting.value = true
try { try {
const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision()) const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
await finalizeLogin(completion, redirectTo.value) await finalizeCompletion(completion, redirectTo.value)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
...@@ -305,7 +305,7 @@ onMounted(async () => { ...@@ -305,7 +305,7 @@ onMounted(async () => {
return return
} }
await finalizeLogin(completion, redirect) await finalizeCompletion(completion, redirect)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
......
...@@ -145,7 +145,10 @@ import { useAuthStore, useAppStore } from '@/stores' ...@@ -145,7 +145,10 @@ import { useAuthStore, useAppStore } from '@/stores'
import { import {
completeOIDCOAuthRegistration, completeOIDCOAuthRegistration,
exchangePendingOAuthCompletion, exchangePendingOAuthCompletion,
getOAuthCompletionKind,
getPublicSettings, getPublicSettings,
isOAuthLoginCompletion,
persistOAuthTokenContext,
type OAuthAdoptionDecision, type OAuthAdoptionDecision,
type PendingOAuthExchangeResponse type PendingOAuthExchangeResponse
} from '@/api/auth' } from '@/api/auth'
...@@ -172,6 +175,7 @@ const suggestedAvatarUrl = ref('') ...@@ -172,6 +175,7 @@ const suggestedAvatarUrl = ref('')
const adoptDisplayName = ref(true) const adoptDisplayName = ref(true)
const adoptAvatar = ref(true) const adoptAvatar = ref(true)
const needsAdoptionConfirmation = ref(false) const needsAdoptionConfirmation = ref(false)
const bindSuccessMessage = t('profile.authBindings.bindSuccess')
function parseFragmentParams(): URLSearchParams { function parseFragmentParams(): URLSearchParams {
const raw = typeof window !== 'undefined' ? window.location.hash : '' const raw = typeof window !== 'undefined' ? window.location.hash : ''
...@@ -231,18 +235,19 @@ function hasSuggestedProfile(completion: { ...@@ -231,18 +235,19 @@ function hasSuggestedProfile(completion: {
return Boolean(completion.suggested_display_name || completion.suggested_avatar_url) return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
} }
async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) { async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
if (!completion.access_token) { if (getOAuthCompletionKind(completion) === 'bind') {
throw new Error(t('auth.oidc.callbackMissingToken')) const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
appStore.showSuccess(bindSuccessMessage)
await router.replace(bindRedirect)
return
} }
if (completion.refresh_token) { if (!isOAuthLoginCompletion(completion)) {
localStorage.setItem('refresh_token', completion.refresh_token) throw new Error(t('auth.oidc.callbackMissingToken'))
}
if (completion.expires_in) {
localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
} }
persistOAuthTokenContext(completion)
await authStore.setToken(completion.access_token) await authStore.setToken(completion.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirect) await router.replace(redirect)
...@@ -258,12 +263,7 @@ async function handleSubmitInvitation() { ...@@ -258,12 +263,7 @@ async function handleSubmitInvitation() {
invitationCode.value.trim(), invitationCode.value.trim(),
currentAdoptionDecision() currentAdoptionDecision()
) )
if (tokenData.refresh_token) { persistOAuthTokenContext(tokenData)
localStorage.setItem('refresh_token', tokenData.refresh_token)
}
if (tokenData.expires_in) {
localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
}
await authStore.setToken(tokenData.access_token) await authStore.setToken(tokenData.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirectTo.value) await router.replace(redirectTo.value)
...@@ -280,7 +280,7 @@ async function handleContinueLogin() { ...@@ -280,7 +280,7 @@ async function handleContinueLogin() {
isSubmitting.value = true isSubmitting.value = true
try { try {
const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision()) const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
await finalizeLogin(completion, redirectTo.value) await finalizeCompletion(completion, redirectTo.value)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
...@@ -329,7 +329,7 @@ onMounted(async () => { ...@@ -329,7 +329,7 @@ onMounted(async () => {
return return
} }
await finalizeLogin(completion, redirect) await finalizeCompletion(completion, redirect)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
......
...@@ -140,27 +140,16 @@ import { useRoute, useRouter } from 'vue-router' ...@@ -140,27 +140,16 @@ import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { AuthLayout } from '@/components/layout' import { AuthLayout } from '@/components/layout'
import Icon from '@/components/icons/Icon.vue' import Icon from '@/components/icons/Icon.vue'
import { apiClient } from '@/api/client'
import { useAuthStore, useAppStore } from '@/stores' import { useAuthStore, useAppStore } from '@/stores'
import {
interface OAuthTokenResponse { completeWeChatOAuthRegistration,
access_token: string exchangePendingOAuthCompletion,
refresh_token: string getOAuthCompletionKind,
expires_in: number isOAuthLoginCompletion,
token_type: string persistOAuthTokenContext,
} type OAuthAdoptionDecision,
type PendingOAuthExchangeResponse
interface PendingOAuthExchangeResponse { } from '@/api/auth'
access_token?: string
refresh_token?: string
expires_in?: number
token_type?: string
redirect?: string
error?: string
adoption_required?: boolean
suggested_display_name?: string
suggested_avatar_url?: string
}
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
...@@ -182,6 +171,7 @@ const suggestedAvatarUrl = ref('') ...@@ -182,6 +171,7 @@ const suggestedAvatarUrl = ref('')
const adoptDisplayName = ref(true) const adoptDisplayName = ref(true)
const adoptAvatar = ref(true) const adoptAvatar = ref(true)
const needsAdoptionConfirmation = ref(false) const needsAdoptionConfirmation = ref(false)
const bindSuccessMessage = t('profile.authBindings.bindSuccess')
const providerName = 'WeChat' const providerName = 'WeChat'
...@@ -200,10 +190,10 @@ function sanitizeRedirectPath(path: string | null | undefined): string { ...@@ -200,10 +190,10 @@ function sanitizeRedirectPath(path: string | null | undefined): string {
return path return path
} }
function currentAdoptionDecision(): Record<string, boolean> { function currentAdoptionDecision(): OAuthAdoptionDecision {
return { return {
adopt_display_name: adoptDisplayName.value, adoptDisplayName: adoptDisplayName.value,
adopt_avatar: adoptAvatar.value, adoptAvatar: adoptAvatar.value
} }
} }
...@@ -224,49 +214,35 @@ function hasSuggestedProfile(completion: PendingOAuthExchangeResponse): boolean ...@@ -224,49 +214,35 @@ function hasSuggestedProfile(completion: PendingOAuthExchangeResponse): boolean
return Boolean(completion.suggested_display_name || completion.suggested_avatar_url) return Boolean(completion.suggested_display_name || completion.suggested_avatar_url)
} }
async function exchangePendingOAuthCompletion(): Promise<PendingOAuthExchangeResponse> { async function finalizeCompletion(completion: PendingOAuthExchangeResponse, redirect: string) {
const { data } = await apiClient.post<PendingOAuthExchangeResponse>('/auth/oauth/pending/exchange', {}) if (getOAuthCompletionKind(completion) === 'bind') {
return data const bindRedirect = sanitizeRedirectPath(completion.redirect || '/profile')
} appStore.showSuccess(bindSuccessMessage)
await router.replace(bindRedirect)
async function finalizeLogin(completion: PendingOAuthExchangeResponse, redirect: string) { return
if (!completion.access_token) {
throw new Error(t('auth.oidc.callbackMissingToken'))
} }
if (completion.refresh_token) { if (!isOAuthLoginCompletion(completion)) {
localStorage.setItem('refresh_token', completion.refresh_token) throw new Error(t('auth.oidc.callbackMissingToken'))
}
if (completion.expires_in) {
localStorage.setItem('token_expires_at', String(Date.now() + completion.expires_in * 1000))
} }
persistOAuthTokenContext(completion)
await authStore.setToken(completion.access_token) await authStore.setToken(completion.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirect) await router.replace(redirect)
} }
async function completeWeChatOAuthRegistration(invitation: string): Promise<OAuthTokenResponse> {
const { data } = await apiClient.post<OAuthTokenResponse>('/auth/oauth/wechat/complete-registration', {
invitation_code: invitation,
...currentAdoptionDecision(),
})
return data
}
async function handleSubmitInvitation() { async function handleSubmitInvitation() {
invitationError.value = '' invitationError.value = ''
if (!invitationCode.value.trim()) return if (!invitationCode.value.trim()) return
isSubmitting.value = true isSubmitting.value = true
try { try {
const tokenData = await completeWeChatOAuthRegistration(invitationCode.value.trim()) const tokenData = await completeWeChatOAuthRegistration(
if (tokenData.refresh_token) { invitationCode.value.trim(),
localStorage.setItem('refresh_token', tokenData.refresh_token) currentAdoptionDecision()
} )
if (tokenData.expires_in) { persistOAuthTokenContext(tokenData)
localStorage.setItem('token_expires_at', String(Date.now() + tokenData.expires_in * 1000))
}
await authStore.setToken(tokenData.access_token) await authStore.setToken(tokenData.access_token)
appStore.showSuccess(t('auth.loginSuccess')) appStore.showSuccess(t('auth.loginSuccess'))
await router.replace(redirectTo.value) await router.replace(redirectTo.value)
...@@ -282,11 +258,8 @@ async function handleSubmitInvitation() { ...@@ -282,11 +258,8 @@ async function handleSubmitInvitation() {
async function handleContinueLogin() { async function handleContinueLogin() {
isSubmitting.value = true isSubmitting.value = true
try { try {
const { data } = await apiClient.post<PendingOAuthExchangeResponse>( const completion = await exchangePendingOAuthCompletion(currentAdoptionDecision())
'/auth/oauth/pending/exchange', await finalizeCompletion(completion, redirectTo.value)
currentAdoptionDecision()
)
await finalizeLogin(data, redirectTo.value)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
...@@ -333,7 +306,7 @@ onMounted(async () => { ...@@ -333,7 +306,7 @@ onMounted(async () => {
return return
} }
await finalizeLogin(completion, redirect) await finalizeCompletion(completion, redirect)
} catch (e: unknown) { } catch (e: unknown) {
const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } } const err = e as { message?: string; response?: { data?: { detail?: string; message?: string } } }
errorMessage.value = errorMessage.value =
......
...@@ -39,10 +39,14 @@ vi.mock('@/stores', () => ({ ...@@ -39,10 +39,14 @@ vi.mock('@/stores', () => ({
}) })
})) }))
vi.mock('@/api/auth', () => ({ vi.mock('@/api/auth', async () => {
const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
return {
...actual,
exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args), exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
completeLinuxDoOAuthRegistration: (...args: any[]) => completeLinuxDoOAuthRegistration(...args) completeLinuxDoOAuthRegistration: (...args: any[]) => completeLinuxDoOAuthRegistration(...args)
})) }
})
describe('LinuxDoCallbackView', () => { describe('LinuxDoCallbackView', () => {
beforeEach(() => { beforeEach(() => {
...@@ -132,6 +136,64 @@ describe('LinuxDoCallbackView', () => { ...@@ -132,6 +136,64 @@ describe('LinuxDoCallbackView', () => {
expect(replace).toHaveBeenCalledWith('/dashboard') expect(replace).toHaveBeenCalledWith('/dashboard')
}) })
it('treats a completion without token as bind success and returns to profile', async () => {
exchangePendingOAuthCompletion.mockResolvedValue({})
mount(LinuxDoCallbackView, {
global: {
stubs: {
AuthLayout: { template: '<div><slot /></div>' },
Icon: true,
RouterLink: { template: '<a><slot /></a>' },
transition: false
}
}
})
await flushPromises()
expect(setToken).not.toHaveBeenCalled()
expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
expect(replace).toHaveBeenCalledWith('/profile')
})
it('supports bind completion after adoption confirmation', async () => {
exchangePendingOAuthCompletion
.mockResolvedValueOnce({
redirect: '/dashboard',
adoption_required: true,
suggested_display_name: 'LinuxDo Nick',
suggested_avatar_url: 'https://cdn.example/linuxdo.png'
})
.mockResolvedValueOnce({
redirect: '/profile/security'
})
const wrapper = mount(LinuxDoCallbackView, {
global: {
stubs: {
AuthLayout: { template: '<div><slot /></div>' },
Icon: true,
RouterLink: { template: '<a><slot /></a>' },
transition: false
}
}
})
await flushPromises()
await wrapper.findAll('button')[0].trigger('click')
await flushPromises()
expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
adoptDisplayName: true,
adoptAvatar: true
})
expect(setToken).not.toHaveBeenCalled()
expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
expect(replace).toHaveBeenCalledWith('/profile/security')
})
it('renders adoption choices for invitation flow and submits the selected values', async () => { it('renders adoption choices for invitation flow and submits the selected values', async () => {
exchangePendingOAuthCompletion.mockResolvedValue({ exchangePendingOAuthCompletion.mockResolvedValue({
error: 'invitation_required', error: 'invitation_required',
......
...@@ -45,11 +45,15 @@ vi.mock('@/stores', () => ({ ...@@ -45,11 +45,15 @@ vi.mock('@/stores', () => ({
}) })
})) }))
vi.mock('@/api/auth', () => ({ vi.mock('@/api/auth', async () => {
const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
return {
...actual,
exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args), exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletion(...args),
completeOIDCOAuthRegistration: (...args: any[]) => completeOIDCOAuthRegistration(...args), completeOIDCOAuthRegistration: (...args: any[]) => completeOIDCOAuthRegistration(...args),
getPublicSettings: (...args: any[]) => getPublicSettings(...args) getPublicSettings: (...args: any[]) => getPublicSettings(...args)
})) }
})
describe('OidcCallbackView', () => { describe('OidcCallbackView', () => {
beforeEach(() => { beforeEach(() => {
...@@ -143,6 +147,43 @@ describe('OidcCallbackView', () => { ...@@ -143,6 +147,43 @@ describe('OidcCallbackView', () => {
expect(replace).toHaveBeenCalledWith('/dashboard') expect(replace).toHaveBeenCalledWith('/dashboard')
}) })
it('supports bind completion after adoption confirmation', async () => {
exchangePendingOAuthCompletion
.mockResolvedValueOnce({
redirect: '/dashboard',
adoption_required: true,
suggested_display_name: 'OIDC Nick',
suggested_avatar_url: 'https://cdn.example/oidc.png'
})
.mockResolvedValueOnce({
redirect: '/profile'
})
const wrapper = mount(OidcCallbackView, {
global: {
stubs: {
AuthLayout: { template: '<div><slot /></div>' },
Icon: true,
RouterLink: { template: '<a><slot /></a>' },
transition: false
}
}
})
await flushPromises()
await wrapper.findAll('button')[0].trigger('click')
await flushPromises()
expect(exchangePendingOAuthCompletion).toHaveBeenNthCalledWith(2, {
adoptDisplayName: true,
adoptAvatar: true
})
expect(setToken).not.toHaveBeenCalled()
expect(showSuccess).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
expect(replace).toHaveBeenCalledWith('/profile')
})
it('renders adoption choices for invitation flow and submits the selected values', async () => { it('renders adoption choices for invitation flow and submits the selected values', async () => {
exchangePendingOAuthCompletion.mockResolvedValue({ exchangePendingOAuthCompletion.mockResolvedValue({
error: 'invitation_required', error: 'invitation_required',
......
...@@ -3,14 +3,16 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' ...@@ -3,14 +3,16 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
import WechatCallbackView from '@/views/auth/WechatCallbackView.vue' import WechatCallbackView from '@/views/auth/WechatCallbackView.vue'
const { const {
postMock, exchangePendingOAuthCompletionMock,
completeWeChatOAuthRegistrationMock,
replaceMock, replaceMock,
setTokenMock, setTokenMock,
showSuccessMock, showSuccessMock,
showErrorMock, showErrorMock,
routeState, routeState,
} = vi.hoisted(() => ({ } = vi.hoisted(() => ({
postMock: vi.fn(), exchangePendingOAuthCompletionMock: vi.fn(),
completeWeChatOAuthRegistrationMock: vi.fn(),
replaceMock: vi.fn(), replaceMock: vi.fn(),
setTokenMock: vi.fn(), setTokenMock: vi.fn(),
showSuccessMock: vi.fn(), showSuccessMock: vi.fn(),
...@@ -86,15 +88,19 @@ vi.mock('@/stores', () => ({ ...@@ -86,15 +88,19 @@ vi.mock('@/stores', () => ({
}), }),
})) }))
vi.mock('@/api/client', () => ({ vi.mock('@/api/auth', async () => {
apiClient: { const actual = await vi.importActual<typeof import('@/api/auth')>('@/api/auth')
post: postMock, return {
}, ...actual,
})) exchangePendingOAuthCompletion: (...args: any[]) => exchangePendingOAuthCompletionMock(...args),
completeWeChatOAuthRegistration: (...args: any[]) => completeWeChatOAuthRegistrationMock(...args),
}
})
describe('WechatCallbackView', () => { describe('WechatCallbackView', () => {
beforeEach(() => { beforeEach(() => {
postMock.mockReset() exchangePendingOAuthCompletionMock.mockReset()
completeWeChatOAuthRegistrationMock.mockReset()
replaceMock.mockReset() replaceMock.mockReset()
setTokenMock.mockReset() setTokenMock.mockReset()
showSuccessMock.mockReset() showSuccessMock.mockReset()
...@@ -104,14 +110,12 @@ describe('WechatCallbackView', () => { ...@@ -104,14 +110,12 @@ describe('WechatCallbackView', () => {
}) })
it('does not send adoption decisions during the initial exchange', async () => { it('does not send adoption decisions during the initial exchange', async () => {
postMock.mockResolvedValueOnce({ exchangePendingOAuthCompletionMock.mockResolvedValue({
data: {
access_token: 'access-token', access_token: 'access-token',
refresh_token: 'refresh-token', refresh_token: 'refresh-token',
expires_in: 3600, expires_in: 3600,
redirect: '/dashboard', redirect: '/dashboard',
adoption_required: true, adoption_required: true,
},
}) })
setTokenMock.mockResolvedValue({}) setTokenMock.mockResolvedValue({})
...@@ -128,28 +132,24 @@ describe('WechatCallbackView', () => { ...@@ -128,28 +132,24 @@ describe('WechatCallbackView', () => {
await flushPromises() await flushPromises()
expect(postMock).toHaveBeenCalledWith('/auth/oauth/pending/exchange', {}) expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledWith()
expect(postMock).toHaveBeenCalledTimes(1) expect(exchangePendingOAuthCompletionMock).toHaveBeenCalledTimes(1)
}) })
it('waits for explicit adoption confirmation before finishing a non-invitation login', async () => { it('waits for explicit adoption confirmation before finishing a non-invitation login', async () => {
postMock exchangePendingOAuthCompletionMock
.mockResolvedValueOnce({ .mockResolvedValueOnce({
data: {
redirect: '/dashboard', redirect: '/dashboard',
adoption_required: true, adoption_required: true,
suggested_display_name: 'WeChat Nick', suggested_display_name: 'WeChat Nick',
suggested_avatar_url: 'https://cdn.example/wechat.png', suggested_avatar_url: 'https://cdn.example/wechat.png',
},
}) })
.mockResolvedValueOnce({ .mockResolvedValueOnce({
data: {
access_token: 'wechat-access-token', access_token: 'wechat-access-token',
refresh_token: 'wechat-refresh-token', refresh_token: 'wechat-refresh-token',
expires_in: 3600, expires_in: 3600,
token_type: 'Bearer', token_type: 'Bearer',
redirect: '/dashboard', redirect: '/dashboard',
},
}) })
setTokenMock.mockResolvedValue({}) setTokenMock.mockResolvedValue({})
...@@ -179,34 +179,66 @@ describe('WechatCallbackView', () => { ...@@ -179,34 +179,66 @@ describe('WechatCallbackView', () => {
await buttons[0].trigger('click') await buttons[0].trigger('click')
await flushPromises() await flushPromises()
expect(postMock).toHaveBeenNthCalledWith(1, '/auth/oauth/pending/exchange', {}) expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(1)
expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/pending/exchange', { expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
adopt_display_name: true, adoptDisplayName: true,
adopt_avatar: false, adoptAvatar: false,
}) })
expect(setTokenMock).toHaveBeenCalledWith('wechat-access-token') expect(setTokenMock).toHaveBeenCalledWith('wechat-access-token')
expect(replaceMock).toHaveBeenCalledWith('/dashboard') expect(replaceMock).toHaveBeenCalledWith('/dashboard')
expect(localStorage.getItem('refresh_token')).toBe('wechat-refresh-token') expect(localStorage.getItem('refresh_token')).toBe('wechat-refresh-token')
}) })
it('renders adoption choices for invitation flow and submits the selected values', async () => { it('supports bind completion after adoption confirmation', async () => {
postMock exchangePendingOAuthCompletionMock
.mockResolvedValueOnce({
redirect: '/dashboard',
adoption_required: true,
suggested_display_name: 'WeChat Nick',
suggested_avatar_url: 'https://cdn.example/wechat.png',
})
.mockResolvedValueOnce({ .mockResolvedValueOnce({
data: { redirect: '/profile/connections',
})
const wrapper = mount(WechatCallbackView, {
global: {
stubs: {
AuthLayout: { template: '<div><slot /></div>' },
Icon: true,
RouterLink: { template: '<a><slot /></a>' },
transition: false,
},
},
})
await flushPromises()
await wrapper.findAll('button')[0].trigger('click')
await flushPromises()
expect(exchangePendingOAuthCompletionMock).toHaveBeenNthCalledWith(2, {
adoptDisplayName: true,
adoptAvatar: true,
})
expect(setTokenMock).not.toHaveBeenCalled()
expect(showSuccessMock).toHaveBeenCalledWith('profile.authBindings.bindSuccess')
expect(replaceMock).toHaveBeenCalledWith('/profile/connections')
})
it('renders adoption choices for invitation flow and submits the selected values', async () => {
exchangePendingOAuthCompletionMock.mockResolvedValue({
error: 'invitation_required', error: 'invitation_required',
redirect: '/subscriptions', redirect: '/subscriptions',
adoption_required: true, adoption_required: true,
suggested_display_name: 'WeChat Nick', suggested_display_name: 'WeChat Nick',
suggested_avatar_url: 'https://cdn.example/wechat.png', suggested_avatar_url: 'https://cdn.example/wechat.png',
},
}) })
.mockResolvedValueOnce({ completeWeChatOAuthRegistrationMock.mockResolvedValue({
data: {
access_token: 'wechat-invite-token', access_token: 'wechat-invite-token',
refresh_token: 'wechat-invite-refresh', refresh_token: 'wechat-invite-refresh',
expires_in: 600, expires_in: 600,
token_type: 'Bearer', token_type: 'Bearer',
},
}) })
const wrapper = mount(WechatCallbackView, { const wrapper = mount(WechatCallbackView, {
...@@ -230,10 +262,9 @@ describe('WechatCallbackView', () => { ...@@ -230,10 +262,9 @@ describe('WechatCallbackView', () => {
await wrapper.get('button').trigger('click') await wrapper.get('button').trigger('click')
await flushPromises() await flushPromises()
expect(postMock).toHaveBeenNthCalledWith(2, '/auth/oauth/wechat/complete-registration', { expect(completeWeChatOAuthRegistrationMock).toHaveBeenCalledWith('INVITE-CODE', {
invitation_code: 'INVITE-CODE', adoptDisplayName: false,
adopt_display_name: false, adoptAvatar: true,
adopt_avatar: true,
}) })
expect(setTokenMock).toHaveBeenCalledWith('wechat-invite-token') expect(setTokenMock).toHaveBeenCalledWith('wechat-invite-token')
expect(replaceMock).toHaveBeenCalledWith('/subscriptions') expect(replaceMock).toHaveBeenCalledWith('/subscriptions')
......
...@@ -2,18 +2,53 @@ ...@@ -2,18 +2,53 @@
<AppLayout> <AppLayout>
<div class="mx-auto max-w-4xl space-y-6"> <div class="mx-auto max-w-4xl space-y-6">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-3"> <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
<StatCard :title="t('profile.accountBalance')" :value="formatCurrency(user?.balance || 0)" :icon="WalletIcon" icon-variant="success" /> <StatCard
<StatCard :title="t('profile.concurrencyLimit')" :value="user?.concurrency || 0" :icon="BoltIcon" icon-variant="warning" /> :title="t('profile.accountBalance')"
<StatCard :title="t('profile.memberSince')" :value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })" :icon="CalendarIcon" icon-variant="primary" /> :value="formatCurrency(user?.balance || 0)"
:icon="WalletIcon"
icon-variant="success"
/>
<StatCard
:title="t('profile.concurrencyLimit')"
:value="user?.concurrency || 0"
:icon="BoltIcon"
icon-variant="warning"
/>
<StatCard
:title="t('profile.memberSince')"
:value="formatDate(user?.created_at || '', { year: 'numeric', month: 'long' })"
:icon="CalendarIcon"
icon-variant="primary"
/>
</div> </div>
<ProfileInfoCard :user="user" />
<div v-if="contactInfo" class="card border-primary-200 bg-primary-50 dark:bg-primary-900/20 p-6"> <ProfileInfoCard
:user="user"
:linuxdo-enabled="linuxdoOAuthEnabled"
:oidc-enabled="oidcOAuthEnabled"
:oidc-provider-name="oidcOAuthProviderName"
:wechat-enabled="wechatOAuthEnabled"
/>
<div
v-if="contactInfo"
class="card border-primary-200 bg-primary-50 p-6 dark:bg-primary-900/20"
>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="p-3 bg-primary-100 rounded-xl text-primary-600"><Icon name="chat" size="lg" /></div> <div class="rounded-xl bg-primary-100 p-3 text-primary-600">
<div><h3 class="font-semibold text-primary-800 dark:text-primary-200">{{ t('common.contactSupport') }}</h3><p class="text-sm font-medium">{{ contactInfo }}</p></div> <Icon name="chat" size="lg" />
</div> </div>
<div>
<h3 class="font-semibold text-primary-800 dark:text-primary-200">
{{ t('common.contactSupport') }}
</h3>
<p class="text-sm font-medium">{{ contactInfo }}</p>
</div> </div>
</div>
</div>
<ProfileEditForm :initial-username="user?.username || ''" /> <ProfileEditForm :initial-username="user?.username || ''" />
<ProfileBalanceNotifyCard <ProfileBalanceNotifyCard
v-if="user && balanceLowNotifyEnabled" v-if="user && balanceLowNotifyEnabled"
:enabled="user.balance_notify_enabled ?? true" :enabled="user.balance_notify_enabled ?? true"
...@@ -22,6 +57,7 @@ ...@@ -22,6 +57,7 @@
:system-default-threshold="systemDefaultThreshold" :system-default-threshold="systemDefaultThreshold"
:user-email="user.email" :user-email="user.email"
/> />
<ProfilePasswordForm /> <ProfilePasswordForm />
<ProfileTotpCard /> <ProfileTotpCard />
</div> </div>
...@@ -29,26 +65,78 @@ ...@@ -29,26 +65,78 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, h, onMounted } from 'vue'; import { useI18n } from 'vue-i18n' import { computed, h, onMounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'; import { formatDate } from '@/utils/format' import { useI18n } from 'vue-i18n'
import { authAPI } from '@/api'; import AppLayout from '@/components/layout/AppLayout.vue' import { authAPI } from '@/api'
import { Icon } from '@/components/icons'
import StatCard from '@/components/common/StatCard.vue' import StatCard from '@/components/common/StatCard.vue'
import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue' import AppLayout from '@/components/layout/AppLayout.vue'
import ProfileEditForm from '@/components/user/profile/ProfileEditForm.vue'
import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue' import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.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' import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue' import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue'
import { Icon } from '@/components/icons' import { useAuthStore } from '@/stores/auth'
import { formatDate } from '@/utils/format'
const { t } = useI18n()
const authStore = useAuthStore()
const user = computed(() => authStore.user)
const { t } = useI18n(); const authStore = useAuthStore(); const user = computed(() => authStore.user)
const contactInfo = ref('') const contactInfo = ref('')
const balanceLowNotifyEnabled = ref(false) const balanceLowNotifyEnabled = ref(false)
const systemDefaultThreshold = ref(0) const systemDefaultThreshold = ref(0)
const linuxdoOAuthEnabled = ref(false)
const wechatOAuthEnabled = ref(false)
const oidcOAuthEnabled = ref(false)
const oidcOAuthProviderName = ref('OIDC')
const WalletIcon = {
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]
)
}
const BoltIcon = {
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]
)
}
const CalendarIcon = {
render: () =>
h(
'svg',
{ fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
[h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]
)
}
onMounted(async () => {
const profileRefresh = authStore.refreshUser().catch((error) => {
console.error('Failed to refresh profile:', error)
})
const settingsLoad = authAPI.getPublicSettings()
.then((settings) => {
contactInfo.value = settings.contact_info || ''
balanceLowNotifyEnabled.value = settings.balance_low_notify_enabled ?? false
systemDefaultThreshold.value = settings.balance_low_notify_threshold ?? 0
linuxdoOAuthEnabled.value = settings.linuxdo_oauth_enabled ?? false
wechatOAuthEnabled.value = settings.wechat_oauth_enabled ?? false
oidcOAuthEnabled.value = settings.oidc_oauth_enabled ?? false
oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
})
.catch((error) => {
console.error('Failed to load settings:', error)
})
const WalletIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M21 12a2.25 2.25 0 00-2.25-2.25H15a3 3 0 11-6 0H5.25A2.25 2.25 0 003 12' })]) } await Promise.all([profileRefresh, settingsLoad])
const BoltIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'm3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' })]) } })
const CalendarIcon = { render: () => h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' }, [h('path', { d: 'M6.75 3v2.25M17.25 3v2.25' })]) }
onMounted(async () => { try { const s = await authAPI.getPublicSettings(); contactInfo.value = s.contact_info || ''; balanceLowNotifyEnabled.value = s.balance_low_notify_enabled ?? false; systemDefaultThreshold.value = s.balance_low_notify_threshold ?? 0 } catch (error) { console.error('Failed to load settings:', error) } }) const formatCurrency = (value: number) => `$${value.toFixed(2)}`
const formatCurrency = (v: number) => `$${v.toFixed(2)}`
</script> </script>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment