Browse Source

feat(auth): add toast notifications to register page

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
as
npmrun 4 days ago
parent
commit
b0ad1754c8
  1. 3
      app/pages/auth/login.vue
  2. 22
      app/pages/auth/register.vue

3
app/pages/auth/login.vue

@ -25,16 +25,13 @@ const { refresh } = useAuthSession()
async function fetchCaptcha() { async function fetchCaptcha() {
captcha.loading = true captcha.loading = true
const loadingToast = $toast.loading('加载验证码...', { toastId: 'captcha-loading' })
try { try {
const res = await $fetch<{ code: number; data: { captchaId: string; imageSvg: string } }>('/api/auth/captcha') const res = await $fetch<{ code: number; data: { captchaId: string; imageSvg: string } }>('/api/auth/captcha')
captcha.id = res.data.captchaId captcha.id = res.data.captchaId
captcha.svg = res.data.imageSvg captcha.svg = res.data.imageSvg
captcha.answer = '' captcha.answer = ''
$toast.update(loadingToast, { render: '验证码加载成功', type: 'success', isLoading: false, autoClose: 1500 })
} catch (e: any) { } catch (e: any) {
console.error('获取验证码失败', e) console.error('获取验证码失败', e)
$toast.update(loadingToast, { render: '验证码加载失败', type: 'error', isLoading: false, autoClose: 3000 })
} finally { } finally {
captcha.loading = false captcha.loading = false
} }

22
app/pages/auth/register.vue

@ -3,6 +3,8 @@ definePageMeta({
layout: false, layout: false,
}) })
const { $toast } = useNuxtApp()
const registerForm = reactive({ const registerForm = reactive({
username: '', username: '',
password: '', password: '',
@ -16,7 +18,6 @@ const captcha = reactive({
loading: false, loading: false,
}) })
const registerError = ref('')
const registerLoading = ref(false) const registerLoading = ref(false)
async function fetchCaptcha() { async function fetchCaptcha() {
@ -34,9 +35,8 @@ async function fetchCaptcha() {
} }
async function handleRegister() { async function handleRegister() {
registerError.value = ''
if (registerForm.password !== registerForm.confirmPassword) { if (registerForm.password !== registerForm.confirmPassword) {
registerError.value = '两次密码输入不一致' $toast.error('两次密码输入不一致')
return return
} }
registerLoading.value = true registerLoading.value = true
@ -50,9 +50,10 @@ async function handleRegister() {
captchaAnswer: captcha.answer, captchaAnswer: captcha.answer,
}, },
}) })
await navigateTo('/auth/login?tab=login') $toast.success('注册成功!正在跳转...')
setTimeout(() => navigateTo('/auth/login?tab=login'), 1500)
} catch (e: any) { } catch (e: any) {
registerError.value = e?.data?.statusMessage || e?.message || '注册失败' $toast.error(e?.data?.statusMessage || e?.message || '注册失败')
await fetchCaptcha() await fetchCaptcha()
} finally { } finally {
registerLoading.value = false registerLoading.value = false
@ -86,8 +87,6 @@ onMounted(fetchCaptcha)
</div> </div>
<form class="auth-form" @submit.prevent="handleRegister"> <form class="auth-form" @submit.prevent="handleRegister">
<div v-if="registerError" class="form-error">{{ registerError }}</div>
<div class="form-field"> <div class="form-field">
<input id="register-username" v-model="registerForm.username" type="text" placeholder=" " required /> <input id="register-username" v-model="registerForm.username" type="text" placeholder=" " required />
<label for="register-username">用户名</label> <label for="register-username">用户名</label>
@ -384,15 +383,6 @@ onMounted(fetchCaptcha)
opacity: 0.5; opacity: 0.5;
} }
.form-error {
padding: 12px 16px;
background: rgba(198, 69, 69, 0.08);
border: 1px solid rgba(198, 69, 69, 0.2);
border-radius: 6px;
color: var(--color-error);
font-size: 13px;
}
.submit-btn { .submit-btn {
display: flex; display: flex;
align-items: center; align-items: center;

Loading…
Cancel
Save