276 lines
9.4 KiB
JavaScript
276 lines
9.4 KiB
JavaScript
import React ,{ useState , useRef } from 'react';
|
||
import { Form , Input , Button , message } from 'antd';
|
||
import user from "./image/user.png";
|
||
import lock from "./image/lock.png";
|
||
import shield from './image/shield.png';
|
||
import phone from './image/phone.svg';
|
||
import axios from 'axios';
|
||
import cookie from 'react-cookies';
|
||
import { setmiyah } from 'educoder';
|
||
|
||
const phonereg = /^([1][3456789])\d{9}$/
|
||
const emailreg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
|
||
function Bind(props){
|
||
const { form } = props;
|
||
const seconds = useRef();
|
||
let interval = undefined;
|
||
const { getFieldDecorator , getFieldsValue } = form;
|
||
const [ bindFlag , setBindFlag] = useState(true);
|
||
const [ captchaFlag , setCaptchaFlag ] = useState(true);
|
||
const [secondsStr, setSecondsStr] = useState(60);
|
||
const [ getCaptchaBut , setGetCaptchaBut ] = useState(true);
|
||
|
||
const type = props.match.params.type;
|
||
|
||
//判断用户名（username）是否注册
|
||
function usernameConfirm(rule, value, callback){
|
||
value ? axios.post(`/accounts/check.json`, {
|
||
value: value,
|
||
type: 1
|
||
}).then(response => {
|
||
if(response){
|
||
if (response.data.status === -1) {
|
||
callback('该名称已经被使用');
|
||
} else {
|
||
const { captcha , password , confirm_password,username} = getFieldsValue();
|
||
if( captcha && password && confirm_password && (password === confirm_password) &&(phonereg.test(username) || emailreg.test(username)) ){
|
||
setBindFlag(false);
|
||
}
|
||
}
|
||
}
|
||
callback();
|
||
}):callback();
|
||
}
|
||
|
||
function accountConfirm(rule, value, callback){
|
||
if(value){
|
||
const { captcha , password , confirm_password,register_username} = getFieldsValue();
|
||
if(!(phonereg.test(value) || emailreg.test(value))){
|
||
setCaptchaFlag(true);
|
||
callback(`请输入正确的手机号或邮箱地址`);
|
||
}else{
|
||
setCaptchaFlag(false);
|
||
if(captcha && password && confirm_password && (password === confirm_password) && register_username){
|
||
setBindFlag(false);
|
||
}
|
||
}
|
||
callback();
|
||
}else{
|
||
setBindFlag(true);
|
||
callback();
|
||
}
|
||
}
|
||
function psdConfirm(r,v,c){
|
||
if(v){
|
||
const { username , captcha , confirm_password , register_username } = getFieldsValue();
|
||
if(register_username && (phonereg.test(username) || emailreg.test(username)) && captcha && confirm_password && (v=== confirm_password) ){
|
||
setBindFlag(false);
|
||
}else{
|
||
setBindFlag(true);
|
||
}
|
||
c();
|
||
}else{
|
||
c();
|
||
setBindFlag(true);
|
||
}
|
||
}
|
||
function captchaConfirm(r,v,c){
|
||
if(v){
|
||
const { username , password , confirm_password , register_username } = getFieldsValue();
|
||
if(register_username && (phonereg.test(username) || emailreg.test(username)) && password && confirm_password && (password ===confirm_password) ){
|
||
setBindFlag(false);
|
||
}else{
|
||
setBindFlag(true);
|
||
}
|
||
c();
|
||
}else{
|
||
c();
|
||
setBindFlag(true);
|
||
}
|
||
}
|
||
function repsdConfirm(r,v,c){
|
||
if(v){
|
||
const { username , password , register_username , captcha} = getFieldsValue();
|
||
if(v !== password){
|
||
c("两次输入的密码不一样");
|
||
}else{
|
||
c();
|
||
}
|
||
if((phonereg.test(username) || emailreg.test(username)) && password && register_username && captcha){
|
||
setBindFlag(false);
|
||
}else{
|
||
setBindFlag(true);
|
||
}
|
||
c();
|
||
}else{
|
||
c();
|
||
}
|
||
}
|
||
|
||
//获取验证码
|
||
function getCaptcha() {
|
||
const { username }= getFieldsValue();
|
||
if (username) {
|
||
// 倒计时开始
|
||
setCaptchaFlag(true);
|
||
setGetCaptchaBut(false);
|
||
seconds.current = 60;
|
||
setSecondsStr(60);
|
||
!interval && clearInterval(interval);
|
||
interval = setInterval(() => {
|
||
if (seconds.current > 1) {
|
||
let oldSeconds = seconds.current;
|
||
seconds.current = oldSeconds - 1;
|
||
setSecondsStr(oldSeconds - 1);
|
||
} else {
|
||
clearInterval(interval);
|
||
//倒计时结束->可以获取验证码
|
||
setCaptchaFlag(false);
|
||
setGetCaptchaBut(true);
|
||
}
|
||
}, 1000)
|
||
|
||
//请求获取验证码接口
|
||
axios.get(`/accounts/get_verification_code.json`, {
|
||
params: {
|
||
login: username,
|
||
type: 1,
|
||
smscode: setmiyah(username),
|
||
}
|
||
}).then(response => {
|
||
if (response.data && response.data.status === 0) {
|
||
//验证码发送成功
|
||
setGetCaptchaBut(false);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
// 绑定登录
|
||
function bindRegFunc(){
|
||
form.validateFields((err, values) => {
|
||
if (!err) {
|
||
var url = '/accounts/register.json';
|
||
axios.post(url,{
|
||
namespace: values.register_username,
|
||
login: values.username,
|
||
password: values.password,
|
||
password_confirmation: values.confirm_password,
|
||
code: values.captcha,
|
||
type
|
||
}).then(response=>{
|
||
if(response.data && response.data.status === -6){
|
||
//验证码不正确
|
||
form.setFields({captcha: {value:values.captcha,errors:[new Error('验证码错误，请重新输入')]}});
|
||
|
||
}else if(response.data && response.data.status === 0){
|
||
//注册成功，页面跳转即可，注册后登录流程forge处理了
|
||
cookie.save("supplyphone",true);
|
||
cookie.save("login",response.data.login);
|
||
window.location.href = "/"+values.register_username;
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
return(
|
||
<div>
|
||
<Form className="bind_form">
|
||
<Form.Item>
|
||
{getFieldDecorator('register_username',{
|
||
rules:[
|
||
{
|
||
required:true,
|
||
message:"请输入用户名"
|
||
},
|
||
{
|
||
pattern: /^[a-zA-Z]/,
|
||
message: "用户名必须以字母开头"
|
||
},
|
||
{
|
||
pattern: /[a-zA-Z0-9]$/,
|
||
message: "用户名只能使用英文字母和数字"
|
||
},
|
||
{
|
||
min: 4,
|
||
max: 15,
|
||
message: "用户名长度为4到15个字符"
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => { usernameConfirm(rule, value, callback) }
|
||
}
|
||
],
|
||
validateTrigger:"onBlur",
|
||
validateFirst: true,
|
||
})(<Input placeholder="请输入4-15位用户名，以字母开头，只能使用字母和数字" addonBefore={<img src={user} alt="" width="13px" />} size="large" autoComplete="off"/>)}
|
||
</Form.Item>
|
||
<Form.Item>
|
||
{getFieldDecorator('username',{
|
||
rules:[
|
||
{
|
||
required:true,
|
||
message:"请输入手机号或邮箱地址"
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => { accountConfirm(rule, value, callback) }
|
||
}
|
||
],
|
||
validateTrigger:"onInput",
|
||
})(<Input className="account" addonBefore={<img src={phone} alt="" width="13px" />} size="large" placeholder="请输入手机号或邮箱地址"/>)}
|
||
</Form.Item>
|
||
<Form.Item>
|
||
<div className="login_register_head">
|
||
{getFieldDecorator('captcha', {
|
||
rules: [{
|
||
required: true,
|
||
message: "请输入验证码"
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => { captchaConfirm(rule, value, callback) }
|
||
}],
|
||
validateTrigger: "onInput",
|
||
})(
|
||
<Input className="captcha" size="large" addonBefore={<img src={shield} alt="" width="13px" />} placeholder="请输入验证码" autoComplete="off"/>
|
||
)}
|
||
<Button type="primary" ghost size="large" className={captchaFlag ? 'codeBut disable':'codeBut'} disabled={captchaFlag} onClick={getCaptcha}>{getCaptchaBut ? "获取验证码":`重发(${secondsStr}s)`}</Button>
|
||
</div>
|
||
</Form.Item>
|
||
<Form.Item>
|
||
{getFieldDecorator('password', {
|
||
rules: [
|
||
{
|
||
required:true,
|
||
message:"请输入登录密码"
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => { psdConfirm(rule, value, callback) }
|
||
}
|
||
],
|
||
validateTrigger:"onInput",
|
||
})(
|
||
<Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请输入登录密码" />,
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item>
|
||
{getFieldDecorator('confirm_password', {
|
||
rules: [
|
||
{
|
||
required:true,
|
||
message:"请再次输入登录密码"
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => { repsdConfirm(rule, value, callback) }
|
||
}
|
||
],
|
||
validateTrigger:"onBlur",
|
||
})(
|
||
<Input.Password autoComplete="new-password" addonBefore={<img src={lock} alt="" width="13px" />} className="psd" size="large" placeholder="请确认登录密码" />,
|
||
)}
|
||
</Form.Item>
|
||
<Button type="primary" disabled={bindFlag} size="large" style={{width:"100%",marginTop:"40px"}} onClick={bindRegFunc}>
|
||
注册并登录
|
||
</Button>
|
||
</Form>
|
||
</div>
|
||
)
|
||
}
|
||
export default Form.create({ name: 'Bind' })(Bind); |