格式化代码，websocket功能完善
This commit is contained in:
@@ -9,12 +9,26 @@
|
||||
<div class="auth-card">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">找回密码</h1>
|
||||
<p class="auth-subtitle">输入您的邮箱，我们将发送重置密码链接</p>
|
||||
<p class="auth-subtitle">
|
||||
输入您的邮箱，我们将发送重置密码链接
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" class="auth-form" @finish="handleSubmit" layout="vertical">
|
||||
<a-form
|
||||
ref="forgotFormRef"
|
||||
:model="forgotForm"
|
||||
:rules="forgotRules"
|
||||
class="auth-form"
|
||||
@finish="handleSubmit"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="forgotForm.email" placeholder="请输入注册邮箱" size="large" @pressEnter="handleSubmit">
|
||||
<a-input
|
||||
v-model:value="forgotForm.email"
|
||||
placeholder="请输入注册邮箱"
|
||||
size="large"
|
||||
@pressEnter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined />
|
||||
</template>
|
||||
@@ -23,20 +37,36 @@
|
||||
|
||||
<a-form-item name="captcha" v-if="showCaptcha">
|
||||
<div style="display: flex; gap: 12px">
|
||||
<a-input v-model:value="forgotForm.captcha" placeholder="请输入验证码" size="large" style="flex: 1">
|
||||
<a-input
|
||||
v-model:value="forgotForm.captcha"
|
||||
placeholder="请输入验证码"
|
||||
size="large"
|
||||
style="flex: 1"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="default" size="large" :disabled="captchaDisabled" @click="sendCaptcha">
|
||||
<a-button
|
||||
type="default"
|
||||
size="large"
|
||||
:disabled="captchaDisabled"
|
||||
@click="sendCaptcha"
|
||||
>
|
||||
{{ captchaButtonText }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button type="primary" :loading="loading" size="large" html-type="submit" block>
|
||||
{{ loading ? '提交中...' : '发送重置链接' }}
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
block
|
||||
>
|
||||
{{ loading ? "提交中..." : "发送重置链接" }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
@@ -44,7 +74,9 @@
|
||||
<div class="auth-footer">
|
||||
<p class="auth-footer-text">
|
||||
想起密码了？
|
||||
<router-link to="/login" class="auth-link"> 返回登录 </router-link>
|
||||
<router-link to="/login" class="auth-link">
|
||||
返回登录
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,113 +84,113 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { MailOutlined, SafetyOutlined } from '@ant-design/icons-vue'
|
||||
import '@/assets/style/auth.scss'
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "ant-design-vue";
|
||||
import { MailOutlined, SafetyOutlined } from "@ant-design/icons-vue";
|
||||
import "@/assets/style/auth.scss";
|
||||
|
||||
defineOptions({
|
||||
name: 'ResetPasswordPage',
|
||||
})
|
||||
name: "ResetPasswordPage",
|
||||
});
|
||||
|
||||
const router = useRouter()
|
||||
const forgotFormRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const showCaptcha = ref(false)
|
||||
const captchaDisabled = ref(false)
|
||||
const countdown = ref(60)
|
||||
const router = useRouter();
|
||||
const forgotFormRef = ref(null);
|
||||
const loading = ref(false);
|
||||
const showCaptcha = ref(false);
|
||||
const captchaDisabled = ref(false);
|
||||
const countdown = ref(60);
|
||||
|
||||
// Forgot password form data
|
||||
const forgotForm = reactive({
|
||||
email: '',
|
||||
captcha: '',
|
||||
})
|
||||
email: "",
|
||||
captcha: "",
|
||||
});
|
||||
|
||||
// Captcha button text
|
||||
const captchaButtonText = ref('获取验证码')
|
||||
const captchaButtonText = ref("获取验证码");
|
||||
|
||||
// Form validation rules
|
||||
const forgotRules = {
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱地址' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址' },
|
||||
{ required: true, message: "请输入邮箱地址" },
|
||||
{ type: "email", message: "请输入正确的邮箱地址" },
|
||||
],
|
||||
captcha: [
|
||||
{ required: true, message: '请输入验证码' },
|
||||
{ len: 6, message: '验证码为6位数字' },
|
||||
{ required: true, message: "请输入验证码" },
|
||||
{ len: 6, message: "验证码为6位数字" },
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
// Send captcha code
|
||||
const sendCaptcha = async () => {
|
||||
if (!forgotForm.email) {
|
||||
message.warning('请先输入邮箱地址')
|
||||
return
|
||||
message.warning("请先输入邮箱地址");
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate email format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(forgotForm.email)) {
|
||||
message.warning('请输入正确的邮箱地址')
|
||||
return
|
||||
message.warning("请输入正确的邮箱地址");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Simulate API call - Replace with actual API call
|
||||
// Example: const response = await sendCaptchaApi(forgotForm.email)
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
|
||||
message.success('验证码已发送至您的邮箱')
|
||||
message.success("验证码已发送至您的邮箱");
|
||||
|
||||
// Start countdown
|
||||
captchaDisabled.value = true
|
||||
captchaDisabled.value = true;
|
||||
const timer = setInterval(() => {
|
||||
countdown.value--
|
||||
captchaButtonText.value = `${countdown.value}秒后重试`
|
||||
countdown.value--;
|
||||
captchaButtonText.value = `${countdown.value}秒后重试`;
|
||||
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
captchaDisabled.value = false
|
||||
captchaButtonText.value = '获取验证码'
|
||||
countdown.value = 60
|
||||
clearInterval(timer);
|
||||
captchaDisabled.value = false;
|
||||
captchaButtonText.value = "获取验证码";
|
||||
countdown.value = 60;
|
||||
}
|
||||
}, 1000)
|
||||
}, 1000);
|
||||
|
||||
showCaptcha.value = true
|
||||
showCaptcha.value = true;
|
||||
} catch (error) {
|
||||
console.error('Send captcha failed:', error)
|
||||
message.error('发送验证码失败，请稍后重试')
|
||||
console.error("Send captcha failed:", error);
|
||||
message.error("发送验证码失败，请稍后重试");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Handle submit
|
||||
const handleSubmit = async () => {
|
||||
if (!forgotFormRef.value) return
|
||||
if (!forgotFormRef.value) return;
|
||||
|
||||
try {
|
||||
await forgotFormRef.value.validate()
|
||||
loading.value = true
|
||||
await forgotFormRef.value.validate();
|
||||
loading.value = true;
|
||||
|
||||
// Simulate API call - Replace with actual API call
|
||||
// Example: const response = await forgotPasswordApi(forgotForm)
|
||||
|
||||
// Simulated delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500));
|
||||
|
||||
// Success message
|
||||
message.success('密码重置链接已发送至您的邮箱，请注意查收')
|
||||
message.success("密码重置链接已发送至您的邮箱，请注意查收");
|
||||
|
||||
// Redirect to login page
|
||||
setTimeout(() => {
|
||||
router.push('/login')
|
||||
}, 2000)
|
||||
router.push("/login");
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('Forgot password failed:', error)
|
||||
message.error('提交失败，请检查邮箱地址和验证码')
|
||||
console.error("Forgot password failed:", error);
|
||||
message.error("提交失败，请检查邮箱地址和验证码");
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user