feat: 验证码输入弹窗
This commit is contained in:
253
src/views/setting/components/EmailVerificationDialog.vue
Normal file
253
src/views/setting/components/EmailVerificationDialog.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div v-if="visible" class="verification-dialog" @click.self="handleClose">
|
||||
<div class="verification-dialog__panel">
|
||||
<button type="button" class="verification-dialog__close" @click="handleClose">
|
||||
<SvgIcon name="close" size="24" />
|
||||
</button>
|
||||
|
||||
<div class="verification-dialog__title">Check your new email</div>
|
||||
<div class="verification-dialog__subtitle">Enter the 6-digit code sent to</div>
|
||||
<div class="verification-dialog__email">{{ email }}</div>
|
||||
|
||||
<InputCode
|
||||
ref="verificationCodeRef"
|
||||
class="verification-code"
|
||||
@update:model-value="handleVerificationCodeChange"
|
||||
@submit="handleVerificationCodeChange"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="verification-dialog__submit"
|
||||
:disabled="saving || verificationCode.length !== 6"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="verification-dialog__resend"
|
||||
:disabled="resendCountdown > 0"
|
||||
@click="handleResend"
|
||||
>
|
||||
{{ resendCountdown > 0 ? `Resend Code in ${formattedResendCountdown}` : 'Resend Code' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import InputCode from '@/components/input-code.vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
visible: boolean
|
||||
email: string
|
||||
saving?: boolean
|
||||
}>(),
|
||||
{
|
||||
saving: false
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
resend: []
|
||||
submit: [code: string]
|
||||
}>()
|
||||
|
||||
const RESEND_COUNTDOWN_SECONDS = 60
|
||||
|
||||
const verificationCode = ref('')
|
||||
const resendCountdown = ref(RESEND_COUNTDOWN_SECONDS)
|
||||
const verificationCodeRef = ref<{ resetCode: (size?: number) => void } | null>(null)
|
||||
let resendCountdownTimer: ReturnType<typeof window.setInterval> | null = null
|
||||
|
||||
const formattedResendCountdown = computed(
|
||||
() => `00:${String(resendCountdown.value).padStart(2, '0')}`
|
||||
)
|
||||
|
||||
const clearResendCountdownTimer = () => {
|
||||
if (resendCountdownTimer) {
|
||||
window.clearInterval(resendCountdownTimer)
|
||||
resendCountdownTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const startResendCountdown = () => {
|
||||
clearResendCountdownTimer()
|
||||
resendCountdown.value = RESEND_COUNTDOWN_SECONDS
|
||||
resendCountdownTimer = window.setInterval(() => {
|
||||
if (resendCountdown.value <= 1) {
|
||||
resendCountdown.value = 0
|
||||
clearResendCountdownTimer()
|
||||
return
|
||||
}
|
||||
|
||||
resendCountdown.value -= 1
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const resetVerificationCodeInput = async () => {
|
||||
verificationCode.value = ''
|
||||
await nextTick()
|
||||
verificationCodeRef.value?.resetCode?.()
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleVerificationCodeChange = (value: string) => {
|
||||
verificationCode.value = value
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (verificationCode.value.length !== 6) return
|
||||
|
||||
emit('submit', verificationCode.value)
|
||||
}
|
||||
|
||||
const handleResend = async () => {
|
||||
if (resendCountdown.value > 0) return
|
||||
|
||||
emit('resend')
|
||||
startResendCountdown()
|
||||
await resetVerificationCodeInput()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (!visible) {
|
||||
clearResendCountdownTimer()
|
||||
verificationCode.value = ''
|
||||
resendCountdown.value = RESEND_COUNTDOWN_SECONDS
|
||||
return
|
||||
}
|
||||
|
||||
await resetVerificationCodeInput()
|
||||
startResendCountdown()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.email,
|
||||
async () => {
|
||||
if (!props.visible) return
|
||||
|
||||
await resetVerificationCodeInput()
|
||||
startResendCountdown()
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearResendCountdownTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.verification-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.verification-dialog__panel {
|
||||
width: 60rem;
|
||||
padding: 4.8rem 7.2rem 5rem;
|
||||
position: relative;
|
||||
background: #efefef;
|
||||
box-shadow: 0 2rem 6rem rgba(35, 35, 35, 0.14);
|
||||
}
|
||||
|
||||
.verification-dialog__close {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verification-dialog__title {
|
||||
color: #232323;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.verification-dialog__subtitle {
|
||||
margin-top: 2rem;
|
||||
color: #585858;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.8rem;
|
||||
}
|
||||
|
||||
.verification-dialog__email {
|
||||
margin-top: 0.8rem;
|
||||
color: #232323;
|
||||
text-align: center;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-top: 4.8rem;
|
||||
--input-code-justify-content: center;
|
||||
--input-code-input-gap: 1.4rem;
|
||||
--input-code-input-width: 6rem;
|
||||
--input-code-input-height: 6rem;
|
||||
}
|
||||
|
||||
.verification-dialog__submit {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
margin-top: 5rem;
|
||||
border: 0.1rem solid #232323;
|
||||
background: #232323;
|
||||
color: #ffffff;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.verification-dialog__resend {
|
||||
margin: 2rem auto 0;
|
||||
display: block;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #7c7c7c;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.6;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -118,7 +118,17 @@
|
||||
<div class="security-label">NEW EMAIL ADDRESS</div>
|
||||
<div class="outlined-field verify-field align-center">
|
||||
<el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
|
||||
<div class="verify-btn">Verify</div>
|
||||
<button
|
||||
type="button"
|
||||
class="verify-btn"
|
||||
:class="{ verified: isEmailVerified }"
|
||||
@click="handleVerifyEmail"
|
||||
>
|
||||
{{ isEmailVerified ? 'Verified' : 'Verify' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="isEmailVerified" class="security-tip verified-tip">
|
||||
Your new email has been verified and is ready to save.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -219,12 +229,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
<EmailVerificationDialog
|
||||
:visible="isVerificationDialogVisible"
|
||||
:email="verificationTargetEmail"
|
||||
:saving="saving"
|
||||
@close="closeVerificationDialog"
|
||||
@resend="handleSendVerifyCode"
|
||||
@submit="handleVerificationSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import EmailVerificationDialog from './components/EmailVerificationDialog.vue'
|
||||
import Radio from './components/Radio.vue'
|
||||
|
||||
interface SettingsData {
|
||||
@@ -294,8 +314,18 @@ const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
|
||||
const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
|
||||
const isEditing = ref(false)
|
||||
const saving = ref(false)
|
||||
const isVerificationDialogVisible = ref(false)
|
||||
const verificationTargetEmail = ref('')
|
||||
const verifiedEmail = ref('')
|
||||
|
||||
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 fullName = computed(() => {
|
||||
const data = displayData.value
|
||||
@@ -313,9 +343,18 @@ const roleModel = computed({
|
||||
}
|
||||
})
|
||||
|
||||
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
const resetEmailVerificationState = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
const resetDraftState = () => {
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const handleEdit = () => {
|
||||
@@ -329,6 +368,7 @@ const handleAddLink = () => {
|
||||
|
||||
const resetSecurityEmail = () => {
|
||||
securityDraft.value.newEmail = ''
|
||||
resetEmailVerificationState()
|
||||
}
|
||||
|
||||
const resetSecurityPassword = () => {
|
||||
@@ -341,6 +381,54 @@ const handleDiscard = () => {
|
||||
isEditing.value = false
|
||||
}
|
||||
|
||||
const closeVerificationDialog = () => {
|
||||
isVerificationDialogVisible.value = false
|
||||
verificationTargetEmail.value = ''
|
||||
}
|
||||
|
||||
const handleVerifyEmail = async () => {
|
||||
const nextEmail = normalizedNewEmail.value
|
||||
|
||||
if (!nextEmail) {
|
||||
ElMessage.warning('Please enter your new email address first')
|
||||
return
|
||||
}
|
||||
|
||||
if (!emailPattern.test(nextEmail)) {
|
||||
ElMessage.warning('Please enter a valid email address')
|
||||
return
|
||||
}
|
||||
|
||||
if (nextEmail === sourceData.value.email) {
|
||||
ElMessage.warning('Please enter a different email address')
|
||||
return
|
||||
}
|
||||
|
||||
if (verifiedEmail.value === nextEmail) {
|
||||
ElMessage.success('This email has already been verified')
|
||||
return
|
||||
}
|
||||
|
||||
verificationTargetEmail.value = nextEmail
|
||||
await handleSendVerifyCode()
|
||||
isVerificationDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendVerifyCode = () => {
|
||||
ElMessage.success('Verification code sent')
|
||||
}
|
||||
|
||||
const handleVerificationSubmit = (code: string) => {
|
||||
if (code.length !== 6) {
|
||||
ElMessage.warning('Please enter the 6-digit verification code')
|
||||
return
|
||||
}
|
||||
|
||||
verifiedEmail.value = verificationTargetEmail.value
|
||||
closeVerificationDialog()
|
||||
ElMessage.success('Email verification completed')
|
||||
}
|
||||
|
||||
const buildNextData = () => {
|
||||
const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
|
||||
return {
|
||||
@@ -356,6 +444,11 @@ const buildNextData = () => {
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (hasNewEmailChange.value && !isEmailVerified.value) {
|
||||
ElMessage.warning('Please verify your new email before saving')
|
||||
return
|
||||
}
|
||||
|
||||
const nextData = buildNextData()
|
||||
saving.value = true
|
||||
try {
|
||||
@@ -365,6 +458,7 @@ const handleSave = async () => {
|
||||
})
|
||||
draftData.value = cloneSettingsData(sourceData.value)
|
||||
securityDraft.value = createEmptySecurityDraft()
|
||||
resetEmailVerificationState()
|
||||
isEditing.value = false
|
||||
ElMessage.success('Settings updated')
|
||||
} catch (error) {
|
||||
@@ -373,6 +467,25 @@ const handleSave = async () => {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => securityDraft.value.newEmail,
|
||||
(value) => {
|
||||
const trimmedValue = value.trim()
|
||||
|
||||
if (verifiedEmail.value && trimmedValue !== verifiedEmail.value) {
|
||||
verifiedEmail.value = ''
|
||||
}
|
||||
|
||||
if (
|
||||
isVerificationDialogVisible.value &&
|
||||
verificationTargetEmail.value &&
|
||||
trimmedValue !== verificationTargetEmail.value
|
||||
) {
|
||||
closeVerificationDialog()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -697,6 +810,7 @@ const handleSave = async () => {
|
||||
|
||||
.verify-btn {
|
||||
border: none;
|
||||
min-width: 11rem;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
border-left: 0.1rem solid #979797;
|
||||
@@ -706,6 +820,12 @@ const handleSave = async () => {
|
||||
color: #232323;
|
||||
cursor: pointer;
|
||||
padding: 0 2rem;
|
||||
|
||||
&.verified {
|
||||
color: #ffffff;
|
||||
background: #232323;
|
||||
border-left-color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
.password-mask {
|
||||
@@ -790,6 +910,10 @@ const handleSave = async () => {
|
||||
.edit-btn {
|
||||
min-width: 12rem;
|
||||
}
|
||||
|
||||
.verified-tip {
|
||||
color: #6f7f68;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user