feat(player): 玩家端短信找回密码
支持手机号验证码重置密码,重置成功后跳转登录页;SMS 增加 reset_password 场景与 purpose 隔离。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,12 +1,14 @@
|
||||
import { Controller, Get, Post, Delete, Body, UseGuards, Query, Param } from '@nestjs/common';
|
||||
import { Controller, Get, Post, Delete, Body, UseGuards, Query, Param, Req } from '@nestjs/common';
|
||||
import type { Request } from 'express';
|
||||
import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
|
||||
import { AuthService } from './auth.service';
|
||||
import { InvitesService } from './invites.service';
|
||||
import { SystemConfigService } from '../../shared/config/system-config.service';
|
||||
import { LoginDto, ChangePasswordDto, RegisterDto, GenerateInviteDto } from './auth.dto';
|
||||
import { LoginDto, ChangePasswordDto, RegisterDto, GenerateInviteDto, ForgotPasswordDto } from './auth.dto';
|
||||
import { Public, CurrentUser } from '../../shared/common/decorators';
|
||||
import { JwtAuthGuard } from './guards';
|
||||
import { jsonResponse } from '../../shared/common/filters';
|
||||
import { getClientIp } from '../../shared/common/client-ip.util';
|
||||
|
||||
@ApiTags('Auth')
|
||||
@Controller()
|
||||
@@ -45,6 +47,20 @@ export class AuthController {
|
||||
return jsonResponse(result);
|
||||
}
|
||||
|
||||
@Public()
|
||||
@Post('player/auth/forgot-password')
|
||||
async playerForgotPassword(@Body() dto: ForgotPasswordDto, @Req() req: Request) {
|
||||
const result = await this.auth.resetPasswordByPhone({
|
||||
phone: dto.phone,
|
||||
countryCode: dto.countryCode,
|
||||
smsCode: dto.smsCode,
|
||||
sessionId: dto.sessionId,
|
||||
newPassword: dto.newPassword,
|
||||
ipAddress: getClientIp(req),
|
||||
});
|
||||
return jsonResponse(result);
|
||||
}
|
||||
|
||||
@UseGuards(JwtAuthGuard)
|
||||
@ApiBearerAuth()
|
||||
@Get('manage/invite')
|
||||
|
||||
@@ -66,6 +66,29 @@ export class ChangePasswordDto {
|
||||
newPassword!: string;
|
||||
}
|
||||
|
||||
export class ForgotPasswordDto {
|
||||
@ApiProperty({ description: '本地手机号,不含国家区号' })
|
||||
@IsString()
|
||||
phone!: string;
|
||||
|
||||
@ApiProperty({ description: '国家区号,不含 +,如 86' })
|
||||
@IsString()
|
||||
countryCode!: string;
|
||||
|
||||
@ApiProperty({ description: '短信验证码' })
|
||||
@IsString()
|
||||
smsCode!: string;
|
||||
|
||||
@ApiProperty({ description: '发送验证码返回的 sessionId' })
|
||||
@IsString()
|
||||
sessionId!: string;
|
||||
|
||||
@ApiProperty()
|
||||
@IsString()
|
||||
@MinLength(8)
|
||||
newPassword!: string;
|
||||
}
|
||||
|
||||
export class GenerateInviteDto {
|
||||
@ApiProperty({ required: false, description: 'Decimal cashback rate, e.g. 0.01 = 1%. Admin only.' })
|
||||
@IsOptional()
|
||||
|
||||
@@ -9,6 +9,7 @@ import { PrismaService } from '../../shared/prisma/prisma.service';
|
||||
import { SystemConfigService } from '../../shared/config/system-config.service';
|
||||
import { InvitesService } from './invites.service';
|
||||
import { SmsService } from './sms/sms.service';
|
||||
import { AuditService } from '../operations/audit/audit.service';
|
||||
import { normalizePhone, resolvePlayerLoginCandidates, stripLocalPhoneDigits } from './sms/phone.util';
|
||||
|
||||
const MAX_LOGIN_FAILS = 5;
|
||||
@@ -30,6 +31,7 @@ export class AuthService {
|
||||
private systemConfig: SystemConfigService,
|
||||
private invites: InvitesService,
|
||||
private sms: SmsService,
|
||||
private audit: AuditService,
|
||||
) {}
|
||||
|
||||
/** 平台管理员 / 代理统一登录(按 userType 签发对应 JWT) */
|
||||
@@ -227,6 +229,7 @@ export class AuthService {
|
||||
countryCode: data.countryCode,
|
||||
code: data.smsCode.trim(),
|
||||
sessionId: data.sessionId.trim(),
|
||||
expectedPurpose: 'register',
|
||||
});
|
||||
|
||||
const { parentId, sponsorId, inviteId } = await this.resolveInviteSponsor(data.inviteCode);
|
||||
@@ -362,6 +365,83 @@ export class AuthService {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
async resetPasswordByPhone(data: {
|
||||
phone: string;
|
||||
countryCode: string;
|
||||
smsCode: string;
|
||||
sessionId: string;
|
||||
newPassword: string;
|
||||
ipAddress?: string;
|
||||
}) {
|
||||
const settings = await this.systemConfig.getPlayerAccountSettings();
|
||||
if (!settings.allowPasswordChange) {
|
||||
throw appForbidden('PASSWORD_CHANGE_DISABLED');
|
||||
}
|
||||
|
||||
if (!data.newPassword || data.newPassword.length < 8) {
|
||||
throw appBadRequest('PASSWORD_MIN_LENGTH');
|
||||
}
|
||||
if (!data.smsCode?.trim() || !data.sessionId?.trim()) {
|
||||
throw appBadRequest('SMS_CODE_REQUIRED');
|
||||
}
|
||||
|
||||
await this.sms.verifyCode({
|
||||
phone: data.phone,
|
||||
countryCode: data.countryCode,
|
||||
code: data.smsCode.trim(),
|
||||
sessionId: data.sessionId.trim(),
|
||||
expectedPurpose: 'reset_password',
|
||||
});
|
||||
|
||||
const player = await this.findPlayerByPhone(data.countryCode, data.phone);
|
||||
if (!player) {
|
||||
throw appBadRequest('PHONE_NOT_REGISTERED');
|
||||
}
|
||||
if (player.status === 'DISABLED') {
|
||||
throw appForbidden('ACCOUNT_DISABLED');
|
||||
}
|
||||
|
||||
const hash = await this.hashPassword(data.newPassword);
|
||||
await this.prisma.userAuth.update({
|
||||
where: { userId: player.id },
|
||||
data: {
|
||||
passwordHash: hash,
|
||||
loginFailCount: 0,
|
||||
lockedUntil: null,
|
||||
},
|
||||
});
|
||||
await this.prisma.userPreference.updateMany({
|
||||
where: { userId: player.id },
|
||||
data: { managedPassword: null },
|
||||
});
|
||||
|
||||
await this.audit.log({
|
||||
operatorId: player.id,
|
||||
operatorType: 'PLAYER',
|
||||
action: 'FORGOT_PASSWORD_RESET',
|
||||
module: 'identity',
|
||||
targetType: 'user',
|
||||
targetId: player.id.toString(),
|
||||
ipAddress: data.ipAddress,
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
private async findPlayerByPhone(countryCode: string, phone: string) {
|
||||
const dial = countryCode.replace(/\D/g, '');
|
||||
const phoneLocal = stripLocalPhoneDigits(phone);
|
||||
const pref = await this.prisma.userPreference.findFirst({
|
||||
where: {
|
||||
phoneCountryDial: dial,
|
||||
phoneLocal,
|
||||
user: { deletedAt: null, userType: 'PLAYER' },
|
||||
},
|
||||
select: { user: { select: { id: true, status: true } } },
|
||||
});
|
||||
return pref?.user ?? null;
|
||||
}
|
||||
|
||||
async hashPassword(password: string): Promise<string> {
|
||||
return bcrypt.hash(password, 10);
|
||||
}
|
||||
|
||||
@@ -20,6 +20,7 @@ export class SmsController {
|
||||
countryCode: dto.countryCode.trim(),
|
||||
locale: dto.locale,
|
||||
clientIp: getClientIp(req),
|
||||
purpose: dto.purpose,
|
||||
});
|
||||
return jsonResponse(result);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { IsString, IsOptional } from 'class-validator';
|
||||
import { IsString, IsOptional, IsIn } from 'class-validator';
|
||||
import { ApiProperty } from '@nestjs/swagger';
|
||||
import type { SmsPurpose } from './sms.types';
|
||||
|
||||
export class SendSmsCodeDto {
|
||||
@ApiProperty({ example: '13800138000', description: '本地手机号,不含国家区号' })
|
||||
@@ -14,6 +15,11 @@ export class SendSmsCodeDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
locale?: string;
|
||||
|
||||
@ApiProperty({ required: false, enum: ['register', 'reset_password'] })
|
||||
@IsOptional()
|
||||
@IsIn(['register', 'reset_password'])
|
||||
purpose?: SmsPurpose;
|
||||
}
|
||||
|
||||
export class VerifySmsCodeDto {
|
||||
|
||||
@@ -3,13 +3,15 @@ import { ConfigService } from '@nestjs/config';
|
||||
import { randomUUID } from 'node:crypto';
|
||||
import { normalizeLocale } from '@thebet365/shared';
|
||||
import { RedisService } from '../../../shared/redis/redis.service';
|
||||
import { appBadRequest, appTooManyRequests } from '../../../shared/common/app-error';
|
||||
import { PrismaService } from '../../../shared/prisma/prisma.service';
|
||||
import { SystemConfigService } from '../../../shared/config/system-config.service';
|
||||
import { appBadRequest, appForbidden, appTooManyRequests } from '../../../shared/common/app-error';
|
||||
import { ChuanglanClient } from './chuanglan/client';
|
||||
import { loadSmsBusinessConfig } from './chuanglan/config';
|
||||
import { generateSixDigitCode } from './code';
|
||||
import { normalizePhone } from './phone.util';
|
||||
import { renderVerifySms } from './templates';
|
||||
import type { SmsLang } from './sms.types';
|
||||
import { normalizePhone, stripLocalPhoneDigits } from './phone.util';
|
||||
import { renderResetPasswordSms, renderVerifySms } from './templates';
|
||||
import type { SmsLang, SmsPurpose } from './sms.types';
|
||||
|
||||
const codeKey = (sessionId: string) => `sms:code:${sessionId}`;
|
||||
const phoneRateKey = (phone: string) => `sms:rate:phone:${phone}`;
|
||||
@@ -29,6 +31,8 @@ export class SmsService {
|
||||
constructor(
|
||||
private redis: RedisService,
|
||||
private chuanglan: ChuanglanClient,
|
||||
private prisma: PrismaService,
|
||||
private systemConfig: SystemConfigService,
|
||||
config: ConfigService,
|
||||
) {
|
||||
this.smsCfg = loadSmsBusinessConfig(config);
|
||||
@@ -39,9 +43,15 @@ export class SmsService {
|
||||
countryCode: string;
|
||||
locale?: string;
|
||||
clientIp: string;
|
||||
purpose?: SmsPurpose;
|
||||
}): Promise<{ sessionId: string }> {
|
||||
const purpose: SmsPurpose = params.purpose ?? 'register';
|
||||
const phone = normalizePhone(params.countryCode, params.phone);
|
||||
|
||||
if (purpose === 'reset_password') {
|
||||
await this.assertPlayerCanResetPassword(params.countryCode, params.phone);
|
||||
}
|
||||
|
||||
const [phoneLimited, ipLimited] = await Promise.all([
|
||||
this.redis.exists(phoneRateKey(phone)),
|
||||
this.redis.exists(ipRateKey(params.clientIp)),
|
||||
@@ -53,7 +63,10 @@ export class SmsService {
|
||||
const code = generateSixDigitCode();
|
||||
const sessionId = randomUUID();
|
||||
const lang = mapLocaleToSmsLang(params.locale);
|
||||
const msg = renderVerifySms(lang, code);
|
||||
const msg =
|
||||
purpose === 'reset_password'
|
||||
? renderResetPasswordSms(lang, code)
|
||||
: renderVerifySms(lang, code);
|
||||
|
||||
const result = await this.chuanglan.sendSms(phone, msg, sessionId);
|
||||
if (!result.success) {
|
||||
@@ -63,7 +76,7 @@ export class SmsService {
|
||||
await Promise.all([
|
||||
this.redis.set(
|
||||
codeKey(sessionId),
|
||||
JSON.stringify({ phone, code }),
|
||||
JSON.stringify({ phone, code, purpose }),
|
||||
this.smsCfg.codeTtlSeconds,
|
||||
),
|
||||
this.redis.set(phoneRateKey(phone), '1', this.smsCfg.rateLimitSeconds),
|
||||
@@ -78,6 +91,7 @@ export class SmsService {
|
||||
countryCode: string;
|
||||
code: string;
|
||||
sessionId: string;
|
||||
expectedPurpose?: SmsPurpose;
|
||||
}): Promise<void> {
|
||||
const phone = normalizePhone(params.countryCode, params.phone);
|
||||
const raw = await this.redis.get(codeKey(params.sessionId));
|
||||
@@ -85,11 +99,43 @@ export class SmsService {
|
||||
throw appBadRequest('SMS_CODE_EXPIRED');
|
||||
}
|
||||
|
||||
const cached = JSON.parse(raw) as { phone: string; code: string };
|
||||
const cached = JSON.parse(raw) as { phone: string; code: string; purpose?: SmsPurpose };
|
||||
const cachedPurpose: SmsPurpose = cached.purpose ?? 'register';
|
||||
const expectedPurpose = params.expectedPurpose ?? 'register';
|
||||
|
||||
if (cachedPurpose !== expectedPurpose) {
|
||||
throw appBadRequest('SMS_CODE_INVALID');
|
||||
}
|
||||
if (cached.phone !== phone || cached.code !== params.code.trim()) {
|
||||
throw appBadRequest('SMS_CODE_INVALID');
|
||||
}
|
||||
|
||||
await this.redis.del(codeKey(params.sessionId));
|
||||
}
|
||||
|
||||
private async assertPlayerCanResetPassword(countryCode: string, phone: string): Promise<void> {
|
||||
const dial = countryCode.replace(/\D/g, '');
|
||||
const phoneLocal = stripLocalPhoneDigits(phone);
|
||||
|
||||
const pref = await this.prisma.userPreference.findFirst({
|
||||
where: {
|
||||
phoneCountryDial: dial,
|
||||
phoneLocal,
|
||||
user: { deletedAt: null, userType: 'PLAYER' },
|
||||
},
|
||||
include: { user: { select: { status: true } } },
|
||||
});
|
||||
|
||||
if (!pref) {
|
||||
throw appBadRequest('PHONE_NOT_REGISTERED');
|
||||
}
|
||||
if (pref.user.status === 'DISABLED') {
|
||||
throw appForbidden('ACCOUNT_DISABLED');
|
||||
}
|
||||
|
||||
const settings = await this.systemConfig.getPlayerAccountSettings();
|
||||
if (!settings.allowPasswordChange) {
|
||||
throw appForbidden('PASSWORD_CHANGE_DISABLED');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
export type SmsLang = 'zh' | 'en' | 'vi' | 'ms' | 'kh';
|
||||
|
||||
export type SmsPurpose = 'register' | 'reset_password';
|
||||
|
||||
export interface ChuanglanSendResponse {
|
||||
code: string;
|
||||
message: string;
|
||||
|
||||
@@ -14,3 +14,18 @@ export function renderVerifySms(lang: SmsLang | undefined, code: string): string
|
||||
const tpl = TEMPLATES[key] ?? TEMPLATES.default ?? TEMPLATES.zh;
|
||||
return tpl.replace('{code}', code);
|
||||
}
|
||||
|
||||
const RESET_TEMPLATES: Record<string, string> = {
|
||||
default: '您正在重置密码,验证码:{code}。5分钟内有效,请勿泄露。',
|
||||
zh: '您正在重置密码,验证码:{code}。5分钟内有效,请勿泄露。',
|
||||
en: 'Password reset code: {code}. Valid for 5 minutes. Do not share.',
|
||||
vi: 'Mã đặt lại mật khẩu: {code}. Có hiệu lực trong 5 phút.',
|
||||
ms: 'Kod tetapan semula kata laluan: {code}. Sah selama 5 minit.',
|
||||
kh: 'កូដកំណត់ពាក្យសម្ងាត់ឡើងវិញ៖ {code} ។ មានសុពលភាព ៥ នាទី។',
|
||||
};
|
||||
|
||||
export function renderResetPasswordSms(lang: SmsLang | undefined, code: string): string {
|
||||
const key = lang?.trim() || 'zh';
|
||||
const tpl = RESET_TEMPLATES[key] ?? RESET_TEMPLATES.default ?? RESET_TEMPLATES.zh;
|
||||
return tpl.replace('{code}', code);
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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: '客服',
|
||||
|
||||
@@ -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);
|
||||
|
||||
322
apps/player/src/views/ForgotPasswordView.vue
Normal file
322
apps/player/src/views/ForgotPasswordView.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -834,6 +834,11 @@ export const API_ERROR_MESSAGES = {
|
||||
'en-US': 'This phone number is already registered',
|
||||
'ms-MY': 'Nombor telefon ini sudah didaftarkan',
|
||||
},
|
||||
PHONE_NOT_REGISTERED: {
|
||||
'zh-CN': '该手机号未注册',
|
||||
'en-US': 'This phone number is not registered',
|
||||
'ms-MY': 'Nombor telefon ini belum didaftarkan',
|
||||
},
|
||||
SMS_CODE_REQUIRED: {
|
||||
'zh-CN': '请填写短信验证码',
|
||||
'en-US': 'SMS verification code is required',
|
||||
|
||||
Reference in New Issue
Block a user