feat(player): 玩家端短信找回密码

支持手机号验证码重置密码,重置成功后跳转登录页;SMS 增加 reset_password 场景与 purpose 隔离。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-12 13:12:00 +08:00
parent e140861a2b
commit ff89c31b51
16 changed files with 597 additions and 13 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { defaultPhoneIsoForLocale, getPhoneDialFromIso } from '@thebet365/shared';
@@ -26,6 +26,15 @@ const password = ref('');
const error = ref('');
const loading = ref(false);
const resetSuccess = computed(() => route.query.reset === 'success');
function goForgotPassword() {
router.push({
path: '/forgot-password',
query: route.query.redirect ? { redirect: route.query.redirect as string } : {},
});
}
function switchLoginMode(mode: LoginMode) {
if (loginMode.value === mode) return;
loginMode.value = mode;
@@ -113,11 +122,16 @@ function goRegister() {
<input v-model="password" class="field-input" type="password" required autocomplete="current-password" />
</div>
<button type="button" class="btn-forgot" @click="goForgotPassword">
{{ t('auth.forgot_password') }}
</button>
<button type="button" class="btn-mode-switch" @click="switchLoginMode(loginMode === 'account' ? 'phone' : 'account')">
{{ loginMode === 'account' ? t('auth.login_by_phone') : t('auth.login_by_account') }}
</button>
<RobotVerify ref="captchaRef" />
<p v-if="resetSuccess" class="success">{{ t('auth.reset_success') }}</p>
<p v-if="error" class="error">{{ error }}</p>
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
{{ t('auth.login') }}
@@ -218,6 +232,22 @@ label {
cursor: pointer;
}
.btn-forgot {
align-self: flex-end;
margin: -4px 0 0;
padding: 0;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.btn-forgot:active {
color: rgba(255, 255, 255, 0.75);
}
.btn-mode-switch:active {
color: rgba(240, 216, 117, 0.95);
}
@@ -275,4 +305,12 @@ label {
font-size: 13px;
font-weight: 600;
}
.success {
margin: 0;
color: #6ee7a0;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
</style>