Add ReactJS to project
parent
c17591bf10
commit
383bbc343f
@ -0,0 +1,100 @@
|
|||||||
|
const {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardContent,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
TextField,
|
||||||
|
Button
|
||||||
|
} = window['material-ui'];
|
||||||
|
|
||||||
|
class LoginForm extends React.Component{
|
||||||
|
state = {
|
||||||
|
isValidUsername: false,
|
||||||
|
isValidPassword: false,
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
errorsMessage: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangeUsername = event => {
|
||||||
|
this.setState({
|
||||||
|
username: event.target.value,
|
||||||
|
isValidUsername: /^[_'.@A-Za-z0-9-]*$/.test(event.target.value)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangePassword = event => {
|
||||||
|
this.setState({
|
||||||
|
password: event.target.value,
|
||||||
|
isValidPassword: (event.target.value.length > 4)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSubmit = loginForm => () => {
|
||||||
|
if (loginForm.state.isValidUsername && loginForm.state.isValidPassword){
|
||||||
|
$.post(
|
||||||
|
"/login",
|
||||||
|
loginForm.state,
|
||||||
|
this.handleResponseAjaxPost(loginForm)("success")
|
||||||
|
).fail(this.handleResponseAjaxPost(loginForm)("error"));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleResponseAjaxPost = loginForm => status => response => {
|
||||||
|
if (status === "success"){
|
||||||
|
window.location.href = "/index";
|
||||||
|
loginForm.setState({
|
||||||
|
errorsMessage: ""
|
||||||
|
});
|
||||||
|
} else if (status === "error"){
|
||||||
|
loginForm.setState({
|
||||||
|
errorsMessage: response.responseText,
|
||||||
|
password: "",
|
||||||
|
isValidPassword: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return (
|
||||||
|
<Card onKeyPress={e => (e.key === 'Enter' ? this.handleSubmit(this)() : null)} tabIndex="0">
|
||||||
|
<CardHeader title="Вход"/>
|
||||||
|
<CardContent>
|
||||||
|
<form>
|
||||||
|
<FormControl component="fieldset" style={{width: '100%'}}>
|
||||||
|
<FormLabel error={true}>
|
||||||
|
<div
|
||||||
|
className="Container"
|
||||||
|
dangerouslySetInnerHTML={{__html: this.state.errorsMessage}}>
|
||||||
|
</div>
|
||||||
|
</FormLabel>
|
||||||
|
<TextField
|
||||||
|
label="Логин"
|
||||||
|
value={this.state.username}
|
||||||
|
onChange={this.handleChangeUsername}
|
||||||
|
margin="normal"
|
||||||
|
error={!this.state.isValidUsername}
|
||||||
|
helperText={!this.state.isValidUsername ? "Логин не соответствует требованиям ^[_'.@A-Za-z0-9-]*$" : ""}
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
label="Пароль"
|
||||||
|
value={this.state.password}
|
||||||
|
onChange={this.handleChangePassword}
|
||||||
|
margin="normal"
|
||||||
|
error={!this.state.isValidPassword}
|
||||||
|
helperText={!this.state.isValidPassword ? "Пароль должен содержать 5 символов" : ""}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={this.handleSubmit(this)}
|
||||||
|
style={{margin: 'auto'}}
|
||||||
|
disabled={!this.state.isValidUsername || !this.state.isValidPassword}
|
||||||
|
>Войти</Button>
|
||||||
|
</FormControl>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,62 @@
|
|||||||
|
const {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardContent,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
TextField,
|
||||||
|
Button
|
||||||
|
} = window['material-ui'];
|
||||||
|
|
||||||
|
class RegisterForm extends React.Component{
|
||||||
|
state = {
|
||||||
|
isValidUsername: false,
|
||||||
|
isValidPassword: false,
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
errorsMessage: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangeUsername = event => {
|
||||||
|
this.setState({
|
||||||
|
username: event.target.value,
|
||||||
|
isValidUsername: (event.target.value.length > 4)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangePassword = event => {
|
||||||
|
this.setState({
|
||||||
|
password: event.target.value,
|
||||||
|
isValidPassword: (event.target.value.length > 4)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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"));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleResponseAjaxPost = loginForm => status => response => {
|
||||||
|
if (status === "success"){
|
||||||
|
window.location.href = "/index";
|
||||||
|
loginForm.setState({
|
||||||
|
errorsMessage: ""
|
||||||
|
});
|
||||||
|
} else if (status === "error"){
|
||||||
|
loginForm.setState({
|
||||||
|
errorsMessage: response.responseText,
|
||||||
|
password: "",
|
||||||
|
isValidPassword: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <div> </div>;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,118 @@
|
|||||||
|
const {
|
||||||
|
Drawer, AppBar, Toolbar,
|
||||||
|
IconButton, Icon,
|
||||||
|
Typography, Menu, MenuItem,
|
||||||
|
List, ListItem, ListItemIcon,
|
||||||
|
ListItemText, Divider, ListSubheader,
|
||||||
|
withStyles
|
||||||
|
} = window['material-ui'];
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
root: {
|
||||||
|
flexGrow: 1,
|
||||||
|
},
|
||||||
|
grow: {
|
||||||
|
flexGrow: 1,
|
||||||
|
},
|
||||||
|
menuButton: {
|
||||||
|
marginLeft: -12,
|
||||||
|
marginRight: 20,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
class Navbar extends React.Component {
|
||||||
|
state = {
|
||||||
|
anchorEl: null,
|
||||||
|
left: false
|
||||||
|
};
|
||||||
|
|
||||||
|
handleMenu = event => {
|
||||||
|
this.setState({ anchorEl: event.currentTarget });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDrawer = value => () => {
|
||||||
|
this.setState({
|
||||||
|
left: value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClose = () => {
|
||||||
|
this.setState({ anchorEl: null });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { classes } = this.props;
|
||||||
|
const { anchorEl } = this.state;
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
|
||||||
|
let accountContent = null;
|
||||||
|
if ($('.isAuth').length !== 0)
|
||||||
|
accountContent = (
|
||||||
|
<div className="account-menu">
|
||||||
|
<IconButton
|
||||||
|
aria-owns={open ? 'menu-appbar' : undefined}
|
||||||
|
aria-haspopup="true"
|
||||||
|
onClick={this.handleMenu}
|
||||||
|
color="inherit"
|
||||||
|
>
|
||||||
|
{$('.isAuth')[0].textContent} <Icon>account_circle</Icon>
|
||||||
|
</IconButton>
|
||||||
|
<Menu
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'right',
|
||||||
|
}}
|
||||||
|
open={open}
|
||||||
|
onClose={this.handleClose}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={()=>{window.location.href="/acc-info"}}>Мой аккаунт</MenuItem>
|
||||||
|
<MenuItem onClick={()=>{window.location.href="/logout"}}>Выход</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.root}>
|
||||||
|
<AppBar>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton className={classes.menuButton} onClick={this.handleDrawer(true)} color="inherit" aria-label="Menu">
|
||||||
|
<Icon>menu</Icon>
|
||||||
|
</IconButton>
|
||||||
|
<Drawer open={this.state.left} onClose={this.handleDrawer(false)}>
|
||||||
|
<div className={classes.list} style={{width: '16rem'}}>
|
||||||
|
<List subheader={<ListSubheader component="div">Ссылки</ListSubheader>}>
|
||||||
|
{[
|
||||||
|
{label: 'НИО-17', link: '#landing'},
|
||||||
|
{label: 'Сайт кафедры', link: 'http://is.ulstu.ru'},
|
||||||
|
{label: 'КИАС РФФИ', link: 'https://kias.rfbr.ru/'}
|
||||||
|
].map(item => (
|
||||||
|
<ListItem button key={item.label} onClick={() => {window.location.href=item.link}}>
|
||||||
|
<ListItemIcon><Icon>label_important</Icon></ListItemIcon>
|
||||||
|
<ListItemText primary={item.label} />
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</List>
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
<Typography variant="h6" color="inherit" className={classes.grow}>
|
||||||
|
NG-Tracker
|
||||||
|
</Typography>
|
||||||
|
{accountContent}
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Navbar.propTypes = {
|
||||||
|
classes: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
ReactDOM.render(React.createElement(withStyles(styles)(Navbar), null, null), document.getElementById('react-navbar'));
|
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en"
|
||||||
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||||||
|
xmlns:form="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||||
|
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
|
||||||
|
layout:decorator="default">
|
||||||
|
|
||||||
|
<div class="container" layout:fragment="content" style="margin-top: 70px">
|
||||||
|
Login: <p th:text="${userDto.getLogin()}"></p>
|
||||||
|
Имя: <p th:text="${userDto.getFirstName()}"></p>
|
||||||
|
Фамилия: <p th:text="${userDto.getLastName()}"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</html>
|
Loading…
Reference in New Issue