Add ReactJS to project
AlexGames73
6 years ago
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