115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
import { Container, TextField, InputAdornment, Link, Button } from "@mui/material";
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
|
|
import LockIcon from '@mui/icons-material/Lock';
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import yzs from "../business/request.js";
|
|
import Agreement from "./Agreement.js";
|
|
import { validatePhoneNumber, textHintOfValidatePhoneNumber } from "../business/utilities.js"
|
|
|
|
export default function ({ udid, firstEnter, onChange, agreeAgreement, onAgreeChange }) {
|
|
const code = useRef(null);
|
|
const [seconds, setSeconds] = useState(0); // 倒计时
|
|
const account = useSelector(state => state.user.account)
|
|
const verificationCode = useSelector(state => state.user.verificationCode)
|
|
|
|
useEffect(() => {
|
|
const timer = window.setInterval(() => {
|
|
if (seconds > 0) {
|
|
setSeconds(seconds - 1);
|
|
} else {
|
|
code.current.disabled = false;
|
|
}
|
|
}, 1000);
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [seconds]);
|
|
|
|
const onClick = (event) => {
|
|
event.preventDefault();
|
|
code.current.disabled = true;
|
|
yzs.send_phone_code(udid, account)
|
|
setSeconds(60);
|
|
};
|
|
|
|
return <Container disableGutters={true}
|
|
sx={{
|
|
width: 300,
|
|
height: 200,
|
|
}}
|
|
>
|
|
<TextField
|
|
name="username"
|
|
autoComplete="username"
|
|
hiddenLabel
|
|
placeholder="请输入手机号码"
|
|
variant="outlined"
|
|
value={account}
|
|
color="primary"
|
|
size="small"
|
|
fullWidth
|
|
error={firstEnter ? false : !validatePhoneNumber(account)}
|
|
helperText={firstEnter ? "" : textHintOfValidatePhoneNumber(account)}
|
|
onChange={onChange}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<PhoneIphoneIcon />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
sx={{
|
|
minHeight: 64,
|
|
}}
|
|
/>
|
|
<TextField
|
|
sx={{
|
|
minHeight: 50,
|
|
}}
|
|
hiddenLabel
|
|
fullWidth
|
|
name="verification_code"
|
|
placeholder="请输入验证码"
|
|
type="text"
|
|
autoComplete="current-password"
|
|
variant="outlined"
|
|
size="small"
|
|
value={verificationCode}
|
|
onChange={onChange}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LockIcon />
|
|
</InputAdornment>
|
|
),
|
|
|
|
endAdornment: <InputAdornment position="end">
|
|
<Link ref={code}
|
|
color={seconds > 0 ? "#FFB3B3" : "red"}
|
|
component="button" underline="none" onClick={onClick}>{seconds > 0 ? `重新发送(${seconds})` : "发送动态码"}</Link>
|
|
</InputAdornment>
|
|
}}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
color="primary"
|
|
fullWidth
|
|
disabled={!agreeAgreement}
|
|
sx={{
|
|
marginTop: 1.5,
|
|
backgroundColor: "#FF595A",
|
|
'&:hover': {
|
|
backgroundColor: '#FF595A',
|
|
},
|
|
'&:active': {
|
|
backgroundColor: '#FF595A',
|
|
},
|
|
}}
|
|
>
|
|
登录
|
|
</Button>
|
|
<Agreement agree={agreeAgreement} onChange={onAgreeChange} />
|
|
</Container>
|
|
} |