|
|
|
@ -5,58 +5,290 @@ const {
|
|
|
|
|
FormControl,
|
|
|
|
|
FormLabel,
|
|
|
|
|
TextField,
|
|
|
|
|
Button
|
|
|
|
|
Button,
|
|
|
|
|
InputAdornment,
|
|
|
|
|
IconButton,
|
|
|
|
|
Icon,
|
|
|
|
|
Dialog,
|
|
|
|
|
DialogTitle,
|
|
|
|
|
DialogContent,
|
|
|
|
|
DialogContentText,
|
|
|
|
|
DialogActions
|
|
|
|
|
} = window['material-ui'];
|
|
|
|
|
const { Component } = window['React'];
|
|
|
|
|
const React = window['React'];
|
|
|
|
|
|
|
|
|
|
class RegisterForm extends Component{
|
|
|
|
|
validate(field, state) {
|
|
|
|
|
switch (field) {
|
|
|
|
|
case "login":
|
|
|
|
|
return (
|
|
|
|
|
(state[field].length >= 4) &&
|
|
|
|
|
/^[_'.@A-Za-z0-9-]*$/.test(state[field])
|
|
|
|
|
);
|
|
|
|
|
case "password":
|
|
|
|
|
return (
|
|
|
|
|
(state[field].length >= 6)
|
|
|
|
|
);
|
|
|
|
|
case "passwordConfirm":
|
|
|
|
|
return (
|
|
|
|
|
(state[field].length >= 6) &&
|
|
|
|
|
(state[field] === state["password"])
|
|
|
|
|
);
|
|
|
|
|
case "email":
|
|
|
|
|
return (
|
|
|
|
|
(/.+@.+\..+/i.test(state[field]))
|
|
|
|
|
);
|
|
|
|
|
case "firstName":
|
|
|
|
|
return (
|
|
|
|
|
(state[field].length >= 2)
|
|
|
|
|
);
|
|
|
|
|
case "lastName":
|
|
|
|
|
return (
|
|
|
|
|
(state[field].length >= 2)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
fields = ["login", "password", "passwordConfirm", "email", "firstName", "lastName"];
|
|
|
|
|
labels = {
|
|
|
|
|
login: "Логин",
|
|
|
|
|
password: "Пароль",
|
|
|
|
|
passwordConfirm: "Подтверждение пароля",
|
|
|
|
|
email: "Email",
|
|
|
|
|
firstName: "Имя",
|
|
|
|
|
lastName: "Фамилия",
|
|
|
|
|
};
|
|
|
|
|
typeInputs = {
|
|
|
|
|
login: "text",
|
|
|
|
|
password: "password",
|
|
|
|
|
passwordConfirm: "password",
|
|
|
|
|
email: "email",
|
|
|
|
|
firstName: "text",
|
|
|
|
|
lastName: "text",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
dialogContents = {
|
|
|
|
|
login: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Длина логина должна быть <b>не менее 4 символов</b> и <b>не превышать 50 символов</b>.<br/>
|
|
|
|
|
Логин может состоять из:<br/>
|
|
|
|
|
1. Строчных или заглавных букв латинского алфавита<br/>
|
|
|
|
|
2. Цифр<br/>
|
|
|
|
|
3. знаков препинания <b>_'.@-</b><br/>
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
password: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Длина пароля должна быть <b>не менее 6 символов</b> и <b>не превышать 50 символов</b>.
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
passwordConfirm: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Пароли должны совпадать и соответствовать требованиям пароля
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
email: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Почта должна соответвовать примеру: <b>example@domain.com</b>
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
firstName: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Длина имени должна быть <b>не менее 2 символов</b> и <b>не превышать 50 символов</b>.
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
lastName: (
|
|
|
|
|
<DialogContentText>
|
|
|
|
|
Длина Фамилии должна быть <b>не менее 2 символов</b> и <b>не превышать 50 символов</b>.
|
|
|
|
|
</DialogContentText>
|
|
|
|
|
),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class RegisterForm extends React.Component{
|
|
|
|
|
state = {
|
|
|
|
|
isValidUsername: false,
|
|
|
|
|
isValidPassword: false,
|
|
|
|
|
username: "",
|
|
|
|
|
isValid_login: true,
|
|
|
|
|
isValid_password: true,
|
|
|
|
|
isValid_passwordConfirm: true,
|
|
|
|
|
isValid_email: true,
|
|
|
|
|
isValid_firstName: true,
|
|
|
|
|
isValid_lastName: true,
|
|
|
|
|
login: "",
|
|
|
|
|
password: "",
|
|
|
|
|
errorsMessage: ""
|
|
|
|
|
passwordConfirm: "",
|
|
|
|
|
email: "",
|
|
|
|
|
firstName: "",
|
|
|
|
|
lastName: "",
|
|
|
|
|
error_login: "",
|
|
|
|
|
error_password: "",
|
|
|
|
|
error_passwordConfirm: "",
|
|
|
|
|
error_email: "",
|
|
|
|
|
error_firstName: "",
|
|
|
|
|
error_lastName: "",
|
|
|
|
|
isComplete: false,
|
|
|
|
|
errorsMessage: "",
|
|
|
|
|
infoAbout: "",
|
|
|
|
|
infoIsOpen: false,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleChangeUsername = event => {
|
|
|
|
|
handleChange = field => event => {
|
|
|
|
|
this.setState({
|
|
|
|
|
username: event.target.value,
|
|
|
|
|
isValidUsername: (event.target.value.length > 4)
|
|
|
|
|
[field]: event.target.value,
|
|
|
|
|
["isValid_"+field]: true
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleChangePassword = event => {
|
|
|
|
|
this.setState({
|
|
|
|
|
password: event.target.value,
|
|
|
|
|
isValidPassword: (event.target.value.length > 4)
|
|
|
|
|
isValid = state => {
|
|
|
|
|
let result = true;
|
|
|
|
|
this.fields.forEach(field => {
|
|
|
|
|
result = result && state["isValid_"+field];
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSubmit = loginForm => () => {
|
|
|
|
|
if (loginForm.state.isValidUsername && loginForm.state.isValidPassword){
|
|
|
|
|
$.post(
|
|
|
|
|
"/api/1.0/users/register",
|
|
|
|
|
loginForm.state,
|
|
|
|
|
this.handleResponseAjaxPost(loginForm)("success")
|
|
|
|
|
).fail(this.handleResponseAjaxPost(loginForm)("error"));
|
|
|
|
|
registerFormToJson = function () {
|
|
|
|
|
let formData = {};
|
|
|
|
|
$(".register-form").find(":input").not(":button").each(function () {
|
|
|
|
|
if ($(this).val() == null || $(this).val() === "") {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
formData[$(this).attr("name")] = $(this).val();
|
|
|
|
|
});
|
|
|
|
|
return JSON.stringify(formData);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleSubmit = registerForm => () => {
|
|
|
|
|
let valids = {};
|
|
|
|
|
this.fields.forEach(field => {
|
|
|
|
|
valids["isValid_"+field]=this.validate(field, registerForm.state)
|
|
|
|
|
});
|
|
|
|
|
this.setState(valids);
|
|
|
|
|
if (this.isValid(valids)){
|
|
|
|
|
postToRest("/api/1.0/users/register", this.registerFormToJson(), null,
|
|
|
|
|
this.handleResponseAjaxPost(registerForm)("success"),
|
|
|
|
|
this.handleResponseAjaxPost(registerForm)("error"));
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleResponseAjaxPost = loginForm => status => response => {
|
|
|
|
|
handleResponseAjaxPost = registerForm => status => response => {
|
|
|
|
|
if (status === "success"){
|
|
|
|
|
window.location.href = "/index";
|
|
|
|
|
loginForm.setState({
|
|
|
|
|
errorsMessage: ""
|
|
|
|
|
registerForm.setState({
|
|
|
|
|
isComplete: true
|
|
|
|
|
});
|
|
|
|
|
} else if (status === "error"){
|
|
|
|
|
loginForm.setState({
|
|
|
|
|
errorsMessage: response.responseText,
|
|
|
|
|
password: "",
|
|
|
|
|
isValidPassword: false
|
|
|
|
|
})
|
|
|
|
|
switch (response.code) {
|
|
|
|
|
case 103:
|
|
|
|
|
registerForm.setState({
|
|
|
|
|
errorsMessage: response.message,
|
|
|
|
|
error_login: "Пользователь с таким логином уже существует",
|
|
|
|
|
isValid_login: false
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
case 102:
|
|
|
|
|
registerForm.setState({
|
|
|
|
|
errorsMessage: response.message,
|
|
|
|
|
error_email: "Пользователь с таким адресом уже существует",
|
|
|
|
|
isValid_email: false
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
registerForm.setState({
|
|
|
|
|
errorsMessage: response.message
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleClickInfo = field => () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
infoAbout: field,
|
|
|
|
|
infoIsOpen: true,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
handleCloseInfo = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
infoIsOpen: false
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
getForm = () => {
|
|
|
|
|
return (
|
|
|
|
|
<form className="register-form">
|
|
|
|
|
<FormControl component="fieldset" style={{width: '100%'}}>
|
|
|
|
|
<FormLabel error={true}>
|
|
|
|
|
<div
|
|
|
|
|
className="Container"
|
|
|
|
|
dangerouslySetInnerHTML={{__html: this.state.errorsMessage}}>
|
|
|
|
|
</div>
|
|
|
|
|
</FormLabel>
|
|
|
|
|
{this.fields.map(field => (
|
|
|
|
|
<TextField
|
|
|
|
|
label={this.labels[field]}
|
|
|
|
|
value={this.state[field]}
|
|
|
|
|
onChange={this.handleChange(field)}
|
|
|
|
|
margin="normal"
|
|
|
|
|
error={!this.state["isValid_"+field]}
|
|
|
|
|
helperText={!this.state["isValid_"+field] ? this.state["error_"+field] : ""}
|
|
|
|
|
InputProps={{
|
|
|
|
|
endAdornment: (
|
|
|
|
|
<InputAdornment position="end">
|
|
|
|
|
<IconButton
|
|
|
|
|
aria-label="Правила"
|
|
|
|
|
onClick={this.handleClickInfo(field)}
|
|
|
|
|
>
|
|
|
|
|
<Icon>info</Icon>
|
|
|
|
|
</IconButton>
|
|
|
|
|
</InputAdornment>
|
|
|
|
|
),
|
|
|
|
|
name: field
|
|
|
|
|
}}
|
|
|
|
|
type={this.typeInputs[field]}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
<Dialog
|
|
|
|
|
open={this.state.infoIsOpen}
|
|
|
|
|
onClose={this.handleCloseInfo}
|
|
|
|
|
aria-labelledby="form-dialog-title"
|
|
|
|
|
>
|
|
|
|
|
<DialogTitle id="form-dialog-title">{this.labels[this.state.infoAbout]}</DialogTitle>
|
|
|
|
|
<DialogContent>
|
|
|
|
|
{this.dialogContents[this.state.infoAbout]}
|
|
|
|
|
</DialogContent>
|
|
|
|
|
<DialogActions>
|
|
|
|
|
<Button onClick={this.handleCloseInfo} color="primary">
|
|
|
|
|
Закрыть
|
|
|
|
|
</Button>
|
|
|
|
|
</DialogActions>
|
|
|
|
|
</Dialog>
|
|
|
|
|
<Button
|
|
|
|
|
variant="contained"
|
|
|
|
|
onClick={this.handleSubmit(this)}
|
|
|
|
|
style={{margin: 'auto'}}
|
|
|
|
|
disabled={!this.isValid(this.state)}
|
|
|
|
|
>Зарегистрироваться</Button>
|
|
|
|
|
</FormControl>
|
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
getCompleteContent = () => {
|
|
|
|
|
return (
|
|
|
|
|
<div className="text-center">
|
|
|
|
|
<h5>Вам на почту <b>{this.state.email}</b> придет письмо с активацией аккаунта в течении нескольких минут.</h5>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
render(){
|
|
|
|
|
return <div> </div>;
|
|
|
|
|
return (
|
|
|
|
|
<Card onKeyPress={e => (e.key === 'Enter' ? this.handleSubmit(this)() : null)} tabIndex="0">
|
|
|
|
|
<CardHeader title={this.state.isComplete ? "Вы успешно зарегистрировались" : "Регистрация"}/>
|
|
|
|
|
<CardContent>
|
|
|
|
|
{this.state.isComplete ?
|
|
|
|
|
this.getCompleteContent() :
|
|
|
|
|
this.getForm()}
|
|
|
|
|
</CardContent>
|
|
|
|
|
</Card>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|