You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
4.2 KiB
107 lines
4.2 KiB
import React from "react";
|
|
import {Input} from "../ui/InputGroup";
|
|
import {Button, Form} from 'react-bootstrap'
|
|
import {RegisterProps, RegisterState} from "../entity";
|
|
import {JSONResponse, Method, request} from "../interface";
|
|
import {API} from "../api";
|
|
import {RegisterRes, RegisterTransform} from "../result";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {register} from '../public'
|
|
|
|
/**
|
|
* 注册
|
|
*/
|
|
export class Register extends React.Component<RegisterProps, RegisterState>{
|
|
|
|
constructor(props: Readonly<RegisterProps>) {
|
|
super(props)
|
|
this.state={
|
|
confirmPwd: "",
|
|
managerId:"",
|
|
password:"",
|
|
tipContent:null
|
|
}
|
|
}
|
|
|
|
//注册
|
|
register(){
|
|
let that=this
|
|
request(API.account.register,Method.POST, {
|
|
managerId:this.state.managerId,
|
|
password:this.state.password
|
|
},new RegisterTransform(),function (res:JSONResponse<RegisterRes>) {
|
|
switch (res.customResult) {
|
|
case RegisterRes.ok:
|
|
that.setState({
|
|
tipContent:<div><h3 className="text-center text-info">注册成功</h3>
|
|
<Button className={"col-3 ml-auto mr-auto"} block={true} onClick={()=>that.props.toLogin()}>返回登录</Button></div>
|
|
})
|
|
break
|
|
case RegisterRes.fail:
|
|
that.setState({
|
|
tipContent:<h3 className="text-center text-danger">注册失败,请联系管理员</h3>
|
|
})
|
|
break
|
|
case RegisterRes.user_repeat:
|
|
that.setState({
|
|
tipContent:<h3 className="text-center text-danger">注册失败，账号：{that.state.managerId}已存在</h3>
|
|
})
|
|
break
|
|
}
|
|
})
|
|
}
|
|
|
|
//检查密码
|
|
checkPwd(){
|
|
return this.state.confirmPwd.length>0&&this.state.password===this.state.confirmPwd
|
|
}
|
|
|
|
//检查表单
|
|
check(){
|
|
return this.isNotEmpty(this.state.managerId,this.state.password)
|
|
&&this.checkPwd()
|
|
}
|
|
|
|
//检查是否为空
|
|
isNotEmpty(...value:(string | number)[]){
|
|
for(let index in value){
|
|
if(value[index].toString().length===0){
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="d-flex align-items-center" style={{height:window.screen.availHeight+'px'}}>
|
|
<div className="container">
|
|
|
|
<Form>
|
|
|
|
<Input col={4} name="managerId" type="text" desc="管理员账号" value={this.state.managerId} onChange={(value: string)=>{
|
|
this.setState({...this.state,...{managerId:value}})}} valid={{check:this.isNotEmpty(this.state.managerId)}}/>
|
|
|
|
<Input col={4} name="password" type="password" desc="管理员密码" value={this.state.password}
|
|
onChange={(value: string)=>{this.setState({password:value})}} valid={{check:this.isNotEmpty(this.state.password)}}/>
|
|
|
|
<Input col={4} name="confirmPwd" type="password" desc="确认密码" placeholder="请确认密码" value={this.state.confirmPwd}
|
|
onChange={(value: string)=>{this.setState({confirmPwd:value})}}
|
|
valid={{check:this.checkPwd(),
|
|
invalid:this.state.confirmPwd.length>0&&this.state.password!==this.state.confirmPwd?"密码和确认密码不一致":"验证失败"}}/>
|
|
|
|
<Button variant="success" className="mt-3 col-2 mr-3" disabled={!this.check()} onClick={()=>register(this,this.state.managerId,this.state.password)}>注册</Button>
|
|
|
|
<Button variant="info" className="mt-3 col-2" onClick={()=>this.props.toLogin()}>返回登陆</Button>
|
|
|
|
</Form>
|
|
</div>
|
|
|
|
<MyDialog content={this.state.tipContent} open={this.state.tipContent!=null} titleId={"register-dialog"}
|
|
menuName={"提示"} onClose={()=>this.setState({
|
|
tipContent:null
|
|
})}/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|