121 lines
4.3 KiB
Vue
121 lines
4.3 KiB
Vue
<template>
|
|
<AppLayout>
|
|
<div
|
|
data-testid="profile-shell"
|
|
class="mx-auto max-w-6xl space-y-6"
|
|
>
|
|
<div class="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_360px]">
|
|
<div
|
|
data-testid="profile-primary-column"
|
|
class="space-y-6"
|
|
>
|
|
<ProfileInfoCard
|
|
:user="user"
|
|
:linuxdo-enabled="linuxdoOAuthEnabled"
|
|
:oidc-enabled="oidcOAuthEnabled"
|
|
:oidc-provider-name="oidcOAuthProviderName"
|
|
:wechat-enabled="wechatOAuthEnabled"
|
|
:wechat-open-enabled="wechatOAuthOpenEnabled"
|
|
:wechat-mp-enabled="wechatOAuthMPEnabled"
|
|
/>
|
|
</div>
|
|
|
|
<aside
|
|
data-testid="profile-secondary-column"
|
|
class="space-y-6"
|
|
>
|
|
<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="rounded-xl bg-primary-100 p-3 text-primary-600">
|
|
<Icon name="chat" size="lg" />
|
|
</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>
|
|
|
|
<ProfilePasswordForm />
|
|
|
|
<ProfileBalanceNotifyCard
|
|
v-if="user && balanceLowNotifyEnabled"
|
|
:enabled="user.balance_notify_enabled ?? true"
|
|
:threshold="user.balance_notify_threshold"
|
|
:extra-emails="user.balance_notify_extra_emails ?? []"
|
|
:system-default-threshold="systemDefaultThreshold"
|
|
:user-email="user.email"
|
|
/>
|
|
|
|
<ProfileTotpCard />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { Icon } from '@/components/icons'
|
|
import AppLayout from '@/components/layout/AppLayout.vue'
|
|
import ProfileBalanceNotifyCard from '@/components/user/profile/ProfileBalanceNotifyCard.vue'
|
|
import ProfileInfoCard from '@/components/user/profile/ProfileInfoCard.vue'
|
|
import ProfilePasswordForm from '@/components/user/profile/ProfilePasswordForm.vue'
|
|
import ProfileTotpCard from '@/components/user/profile/ProfileTotpCard.vue'
|
|
import { isWeChatWebOAuthEnabled } from '@/api/auth'
|
|
import { useAppStore } from '@/stores/app'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const { t } = useI18n()
|
|
const appStore = useAppStore()
|
|
const authStore = useAuthStore()
|
|
const user = computed(() => authStore.user)
|
|
|
|
const contactInfo = ref('')
|
|
const balanceLowNotifyEnabled = ref(false)
|
|
const systemDefaultThreshold = ref(0)
|
|
const linuxdoOAuthEnabled = ref(false)
|
|
const wechatOAuthEnabled = ref(false)
|
|
const wechatOAuthOpenEnabled = ref<boolean | undefined>(undefined)
|
|
const wechatOAuthMPEnabled = ref<boolean | undefined>(undefined)
|
|
const oidcOAuthEnabled = ref(false)
|
|
const oidcOAuthProviderName = ref('OIDC')
|
|
|
|
onMounted(async () => {
|
|
const profileRefresh = authStore.refreshUser().catch((error) => {
|
|
console.error('Failed to refresh profile:', error)
|
|
})
|
|
|
|
const settingsLoad = appStore.fetchPublicSettings()
|
|
.then((settings) => {
|
|
if (!settings) {
|
|
return
|
|
}
|
|
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 = isWeChatWebOAuthEnabled(settings)
|
|
wechatOAuthOpenEnabled.value = typeof settings.wechat_oauth_open_enabled === 'boolean'
|
|
? settings.wechat_oauth_open_enabled
|
|
: undefined
|
|
wechatOAuthMPEnabled.value = typeof settings.wechat_oauth_mp_enabled === 'boolean'
|
|
? settings.wechat_oauth_mp_enabled
|
|
: undefined
|
|
oidcOAuthEnabled.value = settings.oidc_oauth_enabled ?? false
|
|
oidcOAuthProviderName.value = settings.oidc_oauth_provider_name || 'OIDC'
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to load settings:', error)
|
|
})
|
|
|
|
await Promise.all([profileRefresh, settingsLoad])
|
|
})
|
|
</script>
|