补齐登录之外的账号流程: - SkinSiteRegisterModal:邮箱验证码(60 秒倒计时)、密码与确认、 可选 QQ、按服务端配置显示邀请码,提交前走图片验证码。 - SkinSitePasswordResetModal:邮箱验证码、新密码与确认,同样走验证码。 - 登录弹窗底部增加「注册」「忘记密码」入口,取消或完成后回到登录。 - API 层补充注册、注册条件、邮箱验证码、密码重置接口。
This commit is contained in:
1 parent
d83a65a052
commit
3198eac35a
4 files changed
+625
No files matched your search
@@ -12,6 +12,8 @@ import { computed, ref } from 'vue'
|
||||
import { reloadSkinSiteSession, signInSkinSite } from '@/composables/skin-site-session'
|
||||
|
||||
import SkinSiteCaptchaModal from './SkinSiteCaptchaModal.vue'
|
||||
import SkinSitePasswordResetModal from './SkinSitePasswordResetModal.vue'
|
||||
import SkinSiteRegisterModal from './SkinSiteRegisterModal.vue'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
const { handleError, addNotification } = injectNotificationManager()
|
||||
@@ -22,6 +24,8 @@ const messages = defineMessages({
|
||||
password: { id: 'app.skin-site.login.password', defaultMessage: 'Password' },
|
||||
signIn: { id: 'app.skin-site.login.sign-in', defaultMessage: 'Sign in' },
|
||||
signingIn: { id: 'app.skin-site.login.signing-in', defaultMessage: 'Signing in…' },
|
||||
register: { id: 'app.skin-site.login.register', defaultMessage: 'Create account' },
|
||||
forgotPassword: { id: 'app.skin-site.login.forgot', defaultMessage: 'Forgot password?' },
|
||||
usernameHint: {
|
||||
id: 'app.skin-site.login.username-hint',
|
||||
defaultMessage: '3–16 characters, or a registered email address.',
|
||||
@@ -37,6 +41,18 @@ const PASSWORD_RE = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,50}$/
|
||||
|
||||
const modal = ref<InstanceType<typeof NewModal>>()
|
||||
const captchaModal = ref<InstanceType<typeof SkinSiteCaptchaModal>>()
|
||||
const registerModal = ref<InstanceType<typeof SkinSiteRegisterModal>>()
|
||||
const passwordResetModal = ref<InstanceType<typeof SkinSitePasswordResetModal>>()
|
||||
|
||||
function openRegister() {
|
||||
modal.value?.hide()
|
||||
registerModal.value?.show()
|
||||
}
|
||||
|
||||
function openPasswordReset() {
|
||||
modal.value?.hide()
|
||||
passwordResetModal.value?.show()
|
||||
}
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const working = ref(false)
|
||||
@@ -98,6 +114,10 @@ function cancel() {
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
function onRegisterSignedIn() {
|
||||
emit('signed-in')
|
||||
}
|
||||
|
||||
defineExpose({ show })
|
||||
</script>
|
||||
|
||||
@@ -115,6 +135,14 @@ defineExpose({ show })
|
||||
<StyledInput v-model="password" type="password" autocomplete="current-password" />
|
||||
<span class="text-xs text-secondary">{{ formatMessage(messages.passwordHint) }}</span>
|
||||
</label>
|
||||
<div class="flex justify-between text-sm">
|
||||
<button type="button" class="text-brand hover:underline" @click="openRegister">
|
||||
{{ formatMessage(messages.register) }}
|
||||
</button>
|
||||
<button type="button" class="text-brand hover:underline" @click="openPasswordReset">
|
||||
{{ formatMessage(messages.forgotPassword) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #actions>
|
||||
@@ -138,6 +166,17 @@ defineExpose({ show })
|
||||
</template>
|
||||
</NewModal>
|
||||
|
||||
<SkinSiteRegisterModal
|
||||
ref="registerModal"
|
||||
@signed-in="onRegisterSignedIn"
|
||||
@cancel="modal?.show()"
|
||||
/>
|
||||
<SkinSitePasswordResetModal
|
||||
ref="passwordResetModal"
|
||||
@done="modal?.show()"
|
||||
@cancel="modal?.show()"
|
||||
/>
|
||||
|
||||
<SkinSiteCaptchaModal
|
||||
ref="captchaModal"
|
||||
@verified="onCaptchaVerified"
|
||||
|
||||
Reference in new issue
Block a user