feat: 资料更新
This commit is contained in:
@@ -27,7 +27,7 @@
|
||||
<div class="region-row">
|
||||
<div class="security-label">{{ t('Settings.region.region') }}</div>
|
||||
<div v-show="!isEditing" class="security-static field-box">
|
||||
{{ displayRegionLabel }}
|
||||
{{ t(`area.${displayRegionLabel}`) }}
|
||||
</div>
|
||||
<div v-show="isEditing" class="outlined-field select-field">
|
||||
<el-select
|
||||
@@ -38,7 +38,7 @@
|
||||
<el-option
|
||||
v-for="item in regionOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:label="t(`area.${item.key}`)"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
@@ -23,14 +23,14 @@
|
||||
:placeholder="t('Settings.security.newEmailPlaceholder')"
|
||||
@update:model-value="emit('update:newEmail', String($event))"
|
||||
/>
|
||||
<button
|
||||
<!-- <button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="emit('verify-email')"
|
||||
>
|
||||
{{ isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify') }}
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
{{ t('Settings.security.verifiedTip') }}
|
||||
|
||||
@@ -1,159 +1,165 @@
|
||||
<template>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner">
|
||||
<div class="title">{{ t('Settings.title') }}</div>
|
||||
<div class="slogan">{{ t('Settings.slogan') }}</div>
|
||||
</div>
|
||||
<div class="setting-wrapper mini-scrollbar">
|
||||
<div class="banner">
|
||||
<div class="title">{{ t('Settings.title') }}</div>
|
||||
<div class="slogan">{{ t('Settings.slogan') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-content">
|
||||
<ProfileSection
|
||||
v-model:first-name="draftData.firstName"
|
||||
v-model:last-name="draftData.lastName"
|
||||
v-model:username="draftData.username"
|
||||
v-model:role-model="roleModel"
|
||||
:display-data="displayData"
|
||||
:full-name="fullName"
|
||||
:is-editing="isEditing"
|
||||
:role-options="roleList"
|
||||
/>
|
||||
<div class="setting-content">
|
||||
<ProfileSection
|
||||
v-model:first-name="draftData.firstName"
|
||||
v-model:last-name="draftData.lastName"
|
||||
v-model:username="draftData.username"
|
||||
v-model:role-model="roleModel"
|
||||
:display-data="displayData"
|
||||
:full-name="fullName"
|
||||
:is-editing="isEditing"
|
||||
:role-options="roleList"
|
||||
/>
|
||||
|
||||
<div class="gap" />
|
||||
<div class="gap" />
|
||||
|
||||
<SecuritySection
|
||||
v-model:new-email="securityDraft.newEmail"
|
||||
v-model:new-password="securityDraft.newPassword"
|
||||
v-model:current-password="securityDraft.currentPassword"
|
||||
:email="displayData.email"
|
||||
:is-editing="isEditing"
|
||||
:is-email-verified="isEmailVerified"
|
||||
@reset-email="resetSecurityEmail"
|
||||
@reset-password="resetSecurityPassword"
|
||||
@verify-email="handleVerifyEmail"
|
||||
/>
|
||||
<SecuritySection
|
||||
v-model:new-email="securityDraft.newEmail"
|
||||
v-model:new-password="securityDraft.newPassword"
|
||||
v-model:current-password="securityDraft.currentPassword"
|
||||
:email="displayData.email"
|
||||
:is-editing="isEditing"
|
||||
:is-email-verified="isEmailVerified"
|
||||
@reset-email="resetSecurityEmail"
|
||||
@reset-password="resetSecurityPassword"
|
||||
@verify-email="handleVerifyEmail"
|
||||
/>
|
||||
|
||||
<div class="gap" />
|
||||
<div class="gap" />
|
||||
|
||||
<RegionSection
|
||||
v-model:language="draftData.language"
|
||||
v-model:region="draftData.region"
|
||||
:display-language-label="displayLanguageLabel"
|
||||
:display-region-label="displayRegionLabel"
|
||||
:is-editing="isEditing"
|
||||
:language-options="languageList"
|
||||
:region-options="regionList"
|
||||
/>
|
||||
<RegionSection
|
||||
v-model:language="draftData.language"
|
||||
v-model:region="draftData.region"
|
||||
:display-language-label="displayLanguageLabel"
|
||||
:display-region-label="displayRegionLabel"
|
||||
:is-editing="isEditing"
|
||||
:language-options="languageList"
|
||||
:region-options="regionList"
|
||||
/>
|
||||
|
||||
<div class="gap bottom-gap" />
|
||||
<div class="gap bottom-gap" />
|
||||
|
||||
<SettingsActions
|
||||
:is-editing="isEditing"
|
||||
:saving="saving"
|
||||
@edit="handleEdit"
|
||||
@save="handleSave"
|
||||
@discard="handleDiscard"
|
||||
/>
|
||||
</div>
|
||||
<SettingsActions
|
||||
:is-editing="isEditing"
|
||||
:saving="saving"
|
||||
@edit="handleEdit"
|
||||
@save="handleSave"
|
||||
@discard="handleDiscard"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
<Footer />
|
||||
|
||||
<EmailVerificationDialog
|
||||
:visible="isVerificationDialogVisible"
|
||||
:email="verificationTargetEmail"
|
||||
:saving="saving"
|
||||
@close="closeVerificationDialog"
|
||||
@resend="handleSendVerifyCode"
|
||||
@submit="handleVerificationSubmit"
|
||||
/>
|
||||
</div>
|
||||
<EmailVerificationDialog
|
||||
:visible="isVerificationDialogVisible"
|
||||
:email="verificationTargetEmail"
|
||||
:saving="saving"
|
||||
@close="closeVerificationDialog"
|
||||
@resend="handleSendVerifyCode"
|
||||
@submit="handleVerificationSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
||||
import ProfileSection from './components/ProfileSection.vue'
|
||||
import RegionSection from './components/RegionSection.vue'
|
||||
import SecuritySection from './components/SecuritySection.vue'
|
||||
import SettingsActions from './components/SettingsActions.vue'
|
||||
import { useSettingsForm } from './useSettingsForm'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
||||
import ProfileSection from './components/ProfileSection.vue'
|
||||
import RegionSection from './components/RegionSection.vue'
|
||||
import SecuritySection from './components/SecuritySection.vue'
|
||||
import SettingsActions from './components/SettingsActions.vue'
|
||||
import { useSettingsForm } from './useSettingsForm'
|
||||
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
const { t, locale } = useI18n({ useScope: 'global' })
|
||||
|
||||
const {
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog
|
||||
} = useSettingsForm({ t, locale })
|
||||
const {
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog,
|
||||
loadUserProfile
|
||||
} = useSettingsForm({ t, locale })
|
||||
|
||||
onMounted(() => {
|
||||
loadUserProfile()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting-wrapper {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
}
|
||||
.setting-wrapper {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 14.8rem;
|
||||
row-gap: 1.2rem;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
|
||||
linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
|
||||
}
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 14.8rem;
|
||||
row-gap: 1.2rem;
|
||||
background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
|
||||
linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
.title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 4rem;
|
||||
line-height: 3.6rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
.slogan {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
padding: 4rem 18rem 7rem;
|
||||
}
|
||||
.setting-content {
|
||||
padding: 4rem 18rem 7rem;
|
||||
}
|
||||
|
||||
.gap {
|
||||
height: 0.05rem;
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 4rem;
|
||||
background-color: #c4c4c4;
|
||||
.gap {
|
||||
height: 0.05rem;
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 4rem;
|
||||
background-color: #c4c4c4;
|
||||
|
||||
&.bottom-gap {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
&.bottom-gap {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
padding: 0 2rem !important;
|
||||
}
|
||||
:deep(.el-select-dropdown__item) {
|
||||
padding: 0 2rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,20 +13,19 @@ export const roleValues = [
|
||||
] as const
|
||||
|
||||
export const languageValues = ['english', 'chinese'] as const
|
||||
export const regionValues = ['hongKongSar', 'mainlandChina', 'singapore', 'unitedKingdom'] as const
|
||||
|
||||
|
||||
export type RoleValue = (typeof roleValues)[number]
|
||||
export type LanguageValue = (typeof languageValues)[number]
|
||||
export type RegionValue = (typeof regionValues)[number]
|
||||
|
||||
export interface SettingsData {
|
||||
firstName: string
|
||||
lastName: string
|
||||
email: string
|
||||
username: string
|
||||
role: RoleValue[]
|
||||
language: LanguageValue
|
||||
region: RegionValue
|
||||
roles: RoleValue[]
|
||||
language: LanguageValue | ''
|
||||
region: string | ''
|
||||
}
|
||||
|
||||
export interface SecurityDraft {
|
||||
|
||||
@@ -1,288 +1,335 @@
|
||||
import { computed, ref, shallowRef, watch, type Ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchUserProfile, type UserProfile, updateUserProfile } from '@/api/user'
|
||||
import regionList from '@/utils/area'
|
||||
import {
|
||||
languageValues,
|
||||
regionValues,
|
||||
roleValues,
|
||||
type LanguageValue,
|
||||
type RegionValue,
|
||||
type RoleValue,
|
||||
type SecurityDraft,
|
||||
type SettingsData
|
||||
languageValues,
|
||||
roleValues,
|
||||
type LanguageValue,
|
||||
type RoleValue,
|
||||
type SecurityDraft,
|
||||
type SettingsData
|
||||
} from './types'
|
||||
|
||||
type Translate = (key: string, ...args: unknown[]) => string
|
||||
|
||||
interface UseSettingsFormOptions {
|
||||
t: Translate
|
||||
locale: Ref<string>
|
||||
t: Translate
|
||||
locale: Ref<string>
|
||||
}
|
||||
|
||||
const languageLocaleMap: Record<LanguageValue, 'ENGLISH' | 'CHINESE_SIMPLIFIED'> = {
|
||||
english: 'ENGLISH',
|
||||
chinese: 'CHINESE_SIMPLIFIED'
|
||||
english: 'ENGLISH',
|
||||
chinese: 'CHINESE_SIMPLIFIED'
|
||||
}
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
const createDefaultData = (): SettingsData => ({
|
||||
firstName: 'Alexandra',
|
||||
lastName: 'Chen',
|
||||
email: 'alex.chen@gmail.com',
|
||||
username: '@alexandra_chen',
|
||||
role: ['student', 'graphicDesigner'],
|
||||
language: 'english',
|
||||
region: 'hongKongSar'
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
username: '',
|
||||
roles: [] as RoleValue[],
|
||||
language: '',
|
||||
region: ''
|
||||
})
|
||||
|
||||
const cloneSettingsData = (data: SettingsData): SettingsData => ({
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
role: [...data.role],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
firstName: data.firstName,
|
||||
lastName: data.lastName,
|
||||
email: data.email,
|
||||
username: data.username,
|
||||
roles: [...data.roles],
|
||||
language: data.language,
|
||||
region: data.region
|
||||
})
|
||||
|
||||
const normalizeLanguage = (language: string | null | undefined): LanguageValue => {
|
||||
if (!language) {
|
||||
return '' as LanguageValue
|
||||
}
|
||||
|
||||
const normalized = language.trim().toLowerCase()
|
||||
return normalized.includes('chinese') ? 'chinese' : 'english'
|
||||
}
|
||||
|
||||
const buildSettingsDataFromProfile = (profile: Partial<UserProfile>): SettingsData => ({
|
||||
firstName: profile.firstName || '',
|
||||
lastName: profile.lastName || '',
|
||||
username: profile.username || '',
|
||||
email: profile.email || '',
|
||||
roles: profile.roles || [],
|
||||
language: normalizeLanguage(profile.language),
|
||||
region: profile.region
|
||||
})
|
||||
|
||||
const createEmptySecurityDraft = (): SecurityDraft => ({
|
||||
newEmail: '',
|
||||
newPassword: '',
|
||||
currentPassword: ''
|
||||
newEmail: '',
|
||||
newPassword: '',
|
||||
currentPassword: ''
|
||||
})
|
||||
|
||||
export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
|
||||
const sourceData = ref<SettingsData>(createDefaultData())
|
||||
const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = shallowRef(false)
|
||||
const saving = shallowRef(false)
|
||||
const isVerificationDialogVisible = shallowRef(false)
|
||||
const verificationTargetEmail = shallowRef('')
|
||||
const verifiedEmail = shallowRef('')
|
||||
const sourceData = ref<SettingsData>(createDefaultData())
|
||||
const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = shallowRef(false)
|
||||
const saving = shallowRef(false)
|
||||
const isVerificationDialogVisible = shallowRef(false)
|
||||
const verificationTargetEmail = shallowRef('')
|
||||
const verifiedEmail = shallowRef('')
|
||||
|
||||
const roleList = computed(() =>
|
||||
roleValues.map((value) => ({
|
||||
name: t(`Settings.roles.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
const roleList = computed(() =>
|
||||
roleValues.map((value) => ({
|
||||
name: t(`Settings.roles.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const languageList = computed(() =>
|
||||
languageValues.map((value) => ({
|
||||
label: t(`Settings.languages.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
const languageList = computed(() =>
|
||||
languageValues.map((value) => ({
|
||||
label: t(`Settings.languages.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
|
||||
const regionList = computed(() =>
|
||||
regionValues.map((value) => ({
|
||||
label: t(`Settings.regions.${value}`),
|
||||
value
|
||||
}))
|
||||
)
|
||||
const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
const normalizedNewEmail = computed(() => securityDraft.value.newEmail.trim())
|
||||
const hasNewEmailChange = computed(
|
||||
() =>
|
||||
normalizedNewEmail.value.length > 0 &&
|
||||
normalizedNewEmail.value !== sourceData.value.email
|
||||
)
|
||||
const isEmailVerified = computed(
|
||||
() => hasNewEmailChange.value && verifiedEmail.value === normalizedNewEmail.value
|
||||
)
|
||||
const displayLanguageLabel = computed(() =>
|
||||
displayData.value.language ? t(`Settings.languages.${displayData.value.language}`) : ''
|
||||
)
|
||||
const displayRegionLabel = computed(() => {
|
||||
if (displayData.value.region) {
|
||||
const regionItem = regionList.find((item) => item.value === displayData.value.region)
|
||||
return regionItem.key
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
|
||||
const normalizedNewEmail = computed(() => securityDraft.value.newEmail.trim())
|
||||
const hasNewEmailChange = computed(
|
||||
() => normalizedNewEmail.value.length > 0 && normalizedNewEmail.value !== sourceData.value.email
|
||||
)
|
||||
const isEmailVerified = computed(
|
||||
() => hasNewEmailChange.value && verifiedEmail.value === normalizedNewEmail.value
|
||||
)
|
||||
const displayLanguageLabel = computed(() => t(`Settings.languages.${displayData.value.language}`))
|
||||
const displayRegionLabel = computed(() => t(`Settings.regions.${displayData.value.region}`))
|
||||
const fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
return `${data.firstName} ${data.lastName}`.trim()
|
||||
})
|
||||
|
||||
const fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
return `${data.firstName} ${data.lastName}`.trim()
|
||||
})
|
||||
const roleModel = computed<RoleValue[]>({
|
||||
get: () => displayData.value.roles,
|
||||
set: (value) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.roles = value
|
||||
return
|
||||
}
|
||||
|
||||
const roleModel = computed<RoleValue[]>({
|
||||
get: () => displayData.value.role,
|
||||
set: (value) => {
|
||||
if (isEditing.value) {
|
||||
draftData.value.role = value
|
||||
return
|
||||
}
|
||||
sourceData.value.roles = value
|
||||
}
|
||||
})
|
||||
|
||||
sourceData.value.role = value
|
||||
}
|
||||
})
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
const syncAppLanguage = (language: LanguageValue) => {
|
||||
const nextLocale = languageLocaleMap[language]
|
||||
locale.value = nextLocale
|
||||
localStorage.setItem('language', nextLocale)
|
||||
}
|
||||
|
||||
const syncAppLanguage = (language: LanguageValue) => {
|
||||
const nextLocale = languageLocaleMap[language]
|
||||
locale.value = nextLocale
|
||||
localStorage.setItem('language', nextLocale)
|
||||
}
|
||||
const loadUserProfile = async () => {
|
||||
try {
|
||||
const profile = (await fetchUserProfile()) as Partial<UserProfile>
|
||||
const nextData = buildSettingsDataFromProfile(profile)
|
||||
sourceData.value = cloneSettingsData(nextData)
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
if (sourceData.value.language) {
|
||||
syncAppLanguage(sourceData.value.language as LanguageValue)
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = true
|
||||
}
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
const handleEdit = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = true
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
securityDraft.value.newPassword = ''
|
||||
securityDraft.value.currentPassword = ''
|
||||
}
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = false
|
||||
}
|
||||
const resetSecurityPassword = () => {
|
||||
securityDraft.value.newPassword = ''
|
||||
securityDraft.value.currentPassword = ''
|
||||
}
|
||||
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
const handleDiscard = () => {
|
||||
resetDraftState()
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
const handleVerifyEmail = () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning(t('Settings.messages.enterNewEmailFirst'))
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning(t('Settings.messages.invalidEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning(t('Settings.messages.sameEmail'))
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success(t('Settings.messages.alreadyVerified'))
|
||||
return
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
}
|
||||
verificationTargetEmail.value = nextEmail
|
||||
handleSendVerifyCode()
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
const handleSendVerifyCode = () => {
|
||||
// AccountSendVerifyCode({
|
||||
// email: verificationTargetEmail.value,
|
||||
// operationType: 'FORGET_PWD'
|
||||
// }).then((res) => {
|
||||
// console.log(res)
|
||||
// ElMessage.success(t('Settings.messages.verificationCodeSent'))
|
||||
// isVerificationDialogVisible.value = true
|
||||
// })
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning(t('Settings.messages.enterVerificationCode'))
|
||||
return
|
||||
}
|
||||
|
||||
const buildNextData = (): SettingsData => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success(t('Settings.messages.verificationCompleted'))
|
||||
}
|
||||
|
||||
return {
|
||||
firstName: draftData.value.firstName.trim(),
|
||||
lastName: draftData.value.lastName.trim(),
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
role: [...draftData.value.role],
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
const buildNextData = (): SettingsData => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
return {
|
||||
firstName: draftData.value.firstName.trim(),
|
||||
lastName: draftData.value.lastName.trim(),
|
||||
username: draftData.value.username.trim(),
|
||||
email: nextEmail,
|
||||
roles: [...draftData.value.roles],
|
||||
language: draftData.value.language,
|
||||
region: draftData.value.region
|
||||
}
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning(t('Settings.messages.verifyEmailBeforeSave'))
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
sourceData.value = cloneSettingsData(nextData)
|
||||
const nextData = buildNextData()
|
||||
const previousLanguage = sourceData.value.language
|
||||
saving.value = true
|
||||
|
||||
if (nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language)
|
||||
}
|
||||
try {
|
||||
await updateUserProfile(nextData)
|
||||
sourceData.value = cloneSettingsData(nextData)
|
||||
console.log(nextData)
|
||||
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
if (nextData.language && nextData.language !== previousLanguage) {
|
||||
syncAppLanguage(nextData.language as LanguageValue)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success(t('Settings.messages.settingsUpdated'))
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
sourceData,
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog
|
||||
}
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
sourceData,
|
||||
draftData,
|
||||
securityDraft,
|
||||
isEditing,
|
||||
saving,
|
||||
isVerificationDialogVisible,
|
||||
verificationTargetEmail,
|
||||
roleList,
|
||||
languageList,
|
||||
regionList,
|
||||
displayData,
|
||||
isEmailVerified,
|
||||
displayLanguageLabel,
|
||||
displayRegionLabel,
|
||||
fullName,
|
||||
roleModel,
|
||||
handleEdit,
|
||||
handleDiscard,
|
||||
handleSave,
|
||||
resetSecurityEmail,
|
||||
resetSecurityPassword,
|
||||
handleVerifyEmail,
|
||||
handleSendVerifyCode,
|
||||
handleVerificationSubmit,
|
||||
closeVerificationDialog,
|
||||
loadUserProfile
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user