修复短信登录手机号校验
This commit is contained in:
@@ -19,8 +19,9 @@ import {
|
||||
Table,
|
||||
Tabs,
|
||||
Typography,
|
||||
type InputRef,
|
||||
} from 'antd'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Navigate, useNavigate } from 'react-router'
|
||||
|
||||
import {
|
||||
@@ -64,11 +65,13 @@ export default function WorkerLoginPage() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [registerForm] = Form.useForm()
|
||||
const [loginSmsForm] = Form.useForm<{ phone: string; code: string }>()
|
||||
const loginSmsPhoneInputRef = useRef<InputRef>(null)
|
||||
const [resetForm] = Form.useForm<{ phone: string; code: string; password: string }>()
|
||||
const [deviceForm] = Form.useForm<{ username: string; password: string }>()
|
||||
const [countdown, setCountdown] = useState(0)
|
||||
const [loginSmsCountdown, setLoginSmsCountdown] = useState(0)
|
||||
const [loginMode, setLoginMode] = useState<'password' | 'sms'>('password')
|
||||
const [loginSmsPhone, setLoginSmsPhone] = useState('')
|
||||
const [resetCountdown, setResetCountdown] = useState(0)
|
||||
const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
|
||||
const [deviceManagerOpen, setDeviceManagerOpen] = useState(false)
|
||||
@@ -129,7 +132,7 @@ export default function WorkerLoginPage() {
|
||||
}
|
||||
|
||||
async function requestLoginSmsCode() {
|
||||
const phone = String(loginSmsForm.getFieldValue('phone') || '').trim()
|
||||
const phone = getLoginSmsPhone()
|
||||
if (!/^1[3-9]\d{9}$/.test(phone)) {
|
||||
message.error('请先填写正确的手机号')
|
||||
return
|
||||
@@ -153,7 +156,7 @@ export default function WorkerLoginPage() {
|
||||
async function submitSmsLogin(values: { phone: string; code: string }) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const response = await loginWorkerBySmsCode(values)
|
||||
const response = await loginWorkerBySmsCode({ ...values, phone: getLoginSmsPhone() })
|
||||
setWorkerSession(response.data.token, response.data.expiresAt, response.data.worker)
|
||||
message.success('登录成功')
|
||||
void navigate('/hall', { replace: true })
|
||||
@@ -164,6 +167,10 @@ export default function WorkerLoginPage() {
|
||||
}
|
||||
}
|
||||
|
||||
function getLoginSmsPhone() {
|
||||
return String(loginSmsPhoneInputRef.current?.input?.value || loginSmsPhone).trim()
|
||||
}
|
||||
|
||||
async function loadManagedDevices(values?: { username: string; password: string }) {
|
||||
const credentials = values || deviceForm.getFieldsValue()
|
||||
if (!credentials.username || !credentials.password) {
|
||||
@@ -406,23 +413,29 @@ export default function WorkerLoginPage() {
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
ref={loginSmsPhoneInputRef}
|
||||
prefix={<MobileOutlined />}
|
||||
maxLength={11}
|
||||
placeholder="注册时使用的手机号"
|
||||
value={loginSmsPhone}
|
||||
onChange={(event) => setLoginSmsPhone(event.target.value)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="短信验证码"
|
||||
name="code"
|
||||
rules={[{ required: true, message: '请输入短信验证码' }]}
|
||||
>
|
||||
<Form.Item label="短信验证码" required>
|
||||
<Space.Compact style={{ width: '100%' }}>
|
||||
<Input
|
||||
prefix={<SafetyCertificateOutlined />}
|
||||
maxLength={6}
|
||||
placeholder="6 位数字验证码"
|
||||
/>
|
||||
<Form.Item
|
||||
name="code"
|
||||
noStyle
|
||||
rules={[{ required: true, message: '请输入短信验证码' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<SafetyCertificateOutlined />}
|
||||
maxLength={6}
|
||||
placeholder="6 位数字验证码"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
htmlType="button"
|
||||
loading={loading}
|
||||
disabled={loginSmsCountdown > 0}
|
||||
onClick={requestLoginSmsCode}
|
||||
|
||||
Reference in New Issue
Block a user