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

支持手机号验证码重置密码，重置成功后跳转登录页；SMS 增加 reset_password 场景与 purpose 隔离。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-12 13:12:00 +08:00
parent e140861a2b
commit ff89c31b51
16 changed files with 597 additions and 13 deletions
--- a/apps/player/src/composables/useSmsCode.ts
+++ b/apps/player/src/composables/useSmsCode.ts
@@ -30,7 +30,11 @@ export function useSmsCode() {
    }, 1000);
  }

-  async function send(phone: string, countryCode: string) {
+  async function send(
+    phone: string,
+    countryCode: string,
+    purpose: 'register' | 'reset_password' = 'register',
+  ) {
    if (countdown.value > 0 || sending.value) return;
    const trimmed = phone.trim();
    const dial = countryCode.replace(/\D/g, '');
@@ -46,6 +50,7 @@ export function useSmsCode() {
        phone: trimmed,
        countryCode: dial,
        locale,
+        purpose,
      });
      sessionId.value = data.data.sessionId;
      startCountdown();
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -91,6 +91,7 @@ export default {
    login_username_placeholder: 'Phone number or username',
    confirm_password: 'Confirm password',
    password_mismatch: 'Passwords do not match',
+    password_min_length: 'Password must be at least 8 characters',
    password_placeholder: 'Enter password',
    login_btn: 'Log In',
    login_failed: 'Login failed, please try again',
@@ -108,6 +109,13 @@ export default {
    resend_sms: 'Retry in {sec}s',
    country_search: 'Search country or code',
    country_not_found: 'No matching country',
+    forgot_password: 'Forgot password?',
+    forgot_password_title: 'Reset password',
+    reset_password_btn: 'Reset password',
+    reset_success: 'Password reset. Please sign in with your new password. Contact your agent if you cannot log in.',
+    reset_failed: 'Reset failed. Please try again.',
+    phone_not_registered: 'This phone number is not registered',
+    back_to_login: 'Back to login',
  },
  support: {
    short: 'Support',
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -97,6 +97,7 @@ export default {
    login_username_placeholder: 'Nombor telefon atau akaun',
    confirm_password: 'Sahkan kata laluan',
    password_mismatch: 'Kata laluan tidak sepadan',
+    password_min_length: 'Kata laluan mestilah sekurang-kurangnya 8 aksara',
    password_placeholder: 'Masukkan kata laluan',
    login_btn: 'Log Masuk',
    login_failed: 'Log masuk gagal, sila cuba lagi',
@@ -114,6 +115,13 @@ export default {
    resend_sms: 'Cuba lagi dalam {sec}s',
    country_search: 'Cari negara atau kod',
    country_not_found: 'Tiada negara sepadan',
+    forgot_password: 'Lupa kata laluan?',
+    forgot_password_title: 'Tetapkan semula kata laluan',
+    reset_password_btn: 'Tetapkan semula',
+    reset_success: 'Kata laluan ditetapkan semula. Sila log masuk dengan kata laluan baharu. Hubungi ejen anda jika tidak dapat log masuk.',
+    reset_failed: 'Gagal menetapkan semula. Sila cuba lagi.',
+    phone_not_registered: 'Nombor telefon ini belum didaftarkan',
+    back_to_login: 'Kembali ke log masuk',
  },
  support: {
    short: 'Sokongan',
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -91,6 +91,7 @@ export default {
    login_username_placeholder: '手机号或账号',
    confirm_password: '确认密码',
    password_mismatch: '两次密码不一致',
+    password_min_length: '密码至少 8 位',
    password_placeholder: '请输入密码',
    login_btn: '登录',
    login_failed: '登录失败，请重试',
@@ -108,6 +109,13 @@ export default {
    resend_sms: '{sec}s 后重试',
    country_search: '搜索国家或区号',
    country_not_found: '未找到匹配国家',
+    forgot_password: '忘记密码？',
+    forgot_password_title: '重置密码',
+    reset_password_btn: '重置密码',
+    reset_success: '密码已重置，请使用新密码登录。若无法登录请联系代理。',
+    reset_failed: '重置失败，请重试',
+    phone_not_registered: '该手机号未注册',
+    back_to_login: '返回登录',
  },
  support: {
    short: '客服',
--- a/apps/player/src/router/index.ts
+++ b/apps/player/src/router/index.ts
@@ -6,6 +6,7 @@ const router = createRouter({
  routes: [
    { path: '/login', component: () => import('../views/LoginView.vue') },
    { path: '/register', component: () => import('../views/RegisterView.vue') },
+    { path: '/forgot-password', component: () => import('../views/ForgotPasswordView.vue') },
    {
      path: '/',
      component: () => import('../layouts/MainLayout.vue'),
@@ -34,7 +35,7 @@ const router = createRouter({

 router.beforeEach((to) => {
  const auth = useAuthStore();
-  if ((to.path === '/login' || to.path === '/register') && auth.token) return '/';
+  if ((to.path === '/login' || to.path === '/register' || to.path === '/forgot-password') && auth.token) return '/';
  // 需要登录的页面 — 未登录时弹出登录提示，留在当前页
  if (to.meta.requiresAuth && !auth.token) {
    auth.showLoginPrompt(to.fullPath);
--- a/apps/player/src/views/ForgotPasswordView.vue
+++ b/apps/player/src/views/ForgotPasswordView.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { defaultPhoneIsoForLocale, getPhoneDialFromIso } from '@thebet365/shared';
+import { useSmsCode } from '../composables/useSmsCode';
+import api from '../api';
+import LocaleSwitcher from '../components/LocaleSwitcher.vue';
+import PhoneCountrySelect from '../components/PhoneCountrySelect.vue';
+import loginBg from '../assets/images/h5bg.webp';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const phone = ref('');
+const countryIso = ref(defaultPhoneIsoForLocale(locale.value));
+const smsCode = ref('');
+const password = ref('');
+const confirmPassword = ref('');
+const error = ref('');
+const loading = ref(false);
+
+const { sessionId, countdown, sending, error: smsError, send } = useSmsCode();
+
+async function sendCode() {
+  await send(phone.value, getPhoneDialFromIso(countryIso.value), 'reset_password');
+}
+
+function mapApiError(code: string | undefined): string {
+  if (!code) return t('auth.reset_failed');
+  if (code === 'PHONE_NOT_REGISTERED') return t('auth.phone_not_registered');
+  if (code === 'PASSWORD_CHANGE_DISABLED') return t('profile.password_unavailable_hint');
+  if (code === 'ACCOUNT_DISABLED') return t('auth.login_failed');
+  if (code === 'PASSWORD_MIN_LENGTH') return t('auth.password_min_length');
+  if (code === 'SMS_CODE_REQUIRED' || code === 'SMS_CODE_INVALID' || code === 'SMS_CODE_EXPIRED') {
+    return t('auth.sms_code_required');
+  }
+  if (code === 'SMS_RATE_LIMIT') return t('auth.send_sms');
+  return code;
+}
+
+function fieldError(): string {
+  if (error.value) return error.value;
+  if (smsError.value === 'phone_required') return t('auth.phone_required');
+  if (smsError.value === 'PHONE_NOT_REGISTERED') return t('auth.phone_not_registered');
+  if (smsError.value) return mapApiError(smsError.value);
+  return '';
+}
+
+async function submit() {
+  if (!sessionId.value) {
+    error.value = t('auth.sms_required');
+    return;
+  }
+  if (!smsCode.value.trim()) {
+    error.value = t('auth.sms_code_required');
+    return;
+  }
+  if (!password.value || password.value.length < 8) {
+    error.value = t('auth.password_min_length');
+    return;
+  }
+  if (password.value !== confirmPassword.value) {
+    error.value = t('auth.password_mismatch');
+    return;
+  }
+
+  loading.value = true;
+  error.value = '';
+  try {
+    await api.post('/player/auth/forgot-password', {
+      phone: phone.value.trim(),
+      countryCode: getPhoneDialFromIso(countryIso.value),
+      smsCode: smsCode.value.trim(),
+      sessionId: sessionId.value,
+      newPassword: password.value,
+    });
+    const query: Record<string, string> = { reset: 'success' };
+    if (typeof route.query.redirect === 'string' && route.query.redirect) {
+      query.redirect = route.query.redirect;
+    }
+    router.push({ path: '/login', query });
+  } catch (e: unknown) {
+    const code = (e as { response?: { data?: { error?: string } } })?.response?.data?.error;
+    error.value = mapApiError(code);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goLogin() {
+  router.push({
+    path: '/login',
+    query: route.query.redirect ? { redirect: route.query.redirect as string } : {},
+  });
+}
+</script>
+
+<template>
+  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+    <div class="login-lang">
+      <LocaleSwitcher compact />
+    </div>
+    <form @submit.prevent="submit" class="login-form ps-gold-frame">
+      <h2 class="form-title">{{ t('auth.forgot_password_title') }}</h2>
+
+      <div class="field">
+        <label>{{ t('auth.phone') }}</label>
+        <div class="inline-row">
+          <PhoneCountrySelect v-model="countryIso" />
+          <input
+            v-model="phone"
+            class="field-input"
+            type="tel"
+            required
+            autocomplete="tel-national"
+            :placeholder="t('auth.phone_local_placeholder')"
+          />
+        </div>
+      </div>
+
+      <div class="field">
+        <label>{{ t('auth.sms_code') }}</label>
+        <div class="inline-row">
+          <input
+            v-model="smsCode"
+            class="field-input"
+            inputmode="numeric"
+            maxlength="6"
+            autocomplete="one-time-code"
+            :placeholder="t('auth.sms_code_placeholder')"
+          />
+          <button
+            type="button"
+            class="btn-secondary"
+            :disabled="sending || countdown > 0 || !phone.trim()"
+            @click="sendCode"
+          >
+            {{ countdown > 0 ? `${countdown}s` : t('auth.send_sms') }}
+          </button>
+        </div>
+      </div>
+
+      <div class="field">
+        <label>{{ t('auth.password') }}</label>
+        <input
+          v-model="password"
+          class="field-input"
+          type="password"
+          required
+          autocomplete="new-password"
+          minlength="8"
+          :placeholder="t('auth.password_placeholder')"
+        />
+      </div>
+
+      <div class="field">
+        <label>{{ t('auth.confirm_password') }}</label>
+        <input
+          v-model="confirmPassword"
+          class="field-input"
+          type="password"
+          required
+          autocomplete="new-password"
+          minlength="8"
+        />
+      </div>
+
+      <p v-if="fieldError()" class="error">{{ fieldError() }}</p>
+
+      <button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
+        {{ t('auth.reset_password_btn') }}
+      </button>
+      <button type="button" class="btn-skip" @click="goLogin">
+        {{ t('auth.back_to_login') }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-lang {
+  position: absolute;
+  top: max(12px, env(safe-area-inset-top));
+  right: 16px;
+  z-index: 2;
+}
+
+.login-page {
+  position: relative;
+  height: 100%;
+  min-height: 100dvh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 30vh 16px calc(10vh + max(20px, env(safe-area-inset-bottom)));
+  background-color: var(--tertiary);
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+}
+
+.login-form {
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+}
+
+.form-title {
+  margin: 0 0 2px;
+  font-size: 16px;
+  font-weight: 800;
+  color: #fff;
+  text-align: center;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.field-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #0d0d0d;
+  color: var(--text);
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.field-input::placeholder {
+  color: rgba(255, 255, 255, 0.32);
+}
+
+.field-input:focus {
+  outline: none;
+  border-color: #555;
+}
+
+.inline-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.inline-row .field-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.btn-secondary {
+  flex-shrink: 0;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #141414;
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.btn-secondary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-login {
+  margin-top: 2px;
+  padding: 9px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.btn-login:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-skip {
+  margin-top: 2px;
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-skip:active {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.error {
+  margin: 0;
+  color: var(--danger);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+</style>
--- a/apps/player/src/views/LoginView.vue
+++ b/apps/player/src/views/LoginView.vue
@@ -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>