|
|
@ -1,5 +1,4 @@ |
|
|
|
import React, { Component } from 'react'; |
|
|
|
|
|
|
|
import { withStyles } from '@material-ui/core/styles'; |
|
|
|
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator'; |
|
|
|
import Paper from '@material-ui/core/Paper'; |
|
|
@ -10,41 +9,42 @@ import ForwardIcon from '@material-ui/icons/Forward'; |
|
|
|
import { withNotifier } from '../components/SnackbarNotification'; |
|
|
|
import { SIGN_IN_ENDPOINT } from '../constants/Endpoints'; |
|
|
|
import { withAuthenticationContext } from '../authentication/Context'; |
|
|
|
import PasswordValidator from '../components/PasswordValidator'; |
|
|
|
|
|
|
|
const styles = theme => ({ |
|
|
|
loginPage: { |
|
|
|
padding: theme.spacing.unit * 2, |
|
|
|
height: "100vh", |
|
|
|
display: "flex" |
|
|
|
}, |
|
|
|
loginPanel: { |
|
|
|
margin: "auto", |
|
|
|
padding: theme.spacing.unit * 2, |
|
|
|
paddingTop: "200px", |
|
|
|
backgroundImage: 'url("/app/icon.png")', |
|
|
|
backgroundRepeat: "no-repeat", |
|
|
|
backgroundPosition: "50% " + theme.spacing.unit * 2 + "px", |
|
|
|
backgroundSize: "auto 150px", |
|
|
|
textAlign: "center" |
|
|
|
}, |
|
|
|
extendedIcon: { |
|
|
|
marginRight: theme.spacing.unit, |
|
|
|
}, |
|
|
|
loadingSettings: { |
|
|
|
margin: theme.spacing.unit, |
|
|
|
}, |
|
|
|
loadingSettingsDetails: { |
|
|
|
margin: theme.spacing.unit * 4, |
|
|
|
textAlign: "center" |
|
|
|
}, |
|
|
|
textField: { |
|
|
|
width: "100%" |
|
|
|
}, |
|
|
|
button: { |
|
|
|
marginRight: theme.spacing.unit * 2, |
|
|
|
marginTop: theme.spacing.unit * 2, |
|
|
|
const styles = theme => { |
|
|
|
return { |
|
|
|
loginPage: { |
|
|
|
display: "flex", |
|
|
|
height: "100vh", |
|
|
|
margin: "auto", |
|
|
|
padding: theme.spacing.unit * 2, |
|
|
|
justifyContent: "center", |
|
|
|
flexDirection: "column", |
|
|
|
maxWidth: theme.breakpoints.values.sm |
|
|
|
}, |
|
|
|
loginPanel: { |
|
|
|
textAlign: "center", |
|
|
|
padding: theme.spacing.unit * 2, |
|
|
|
paddingTop: "200px", |
|
|
|
backgroundImage: 'url("/app/icon.png")', |
|
|
|
backgroundRepeat: "no-repeat", |
|
|
|
backgroundPosition: "50% " + theme.spacing.unit * 2 + "px", |
|
|
|
backgroundSize: "auto 150px", |
|
|
|
width: "100%" |
|
|
|
}, |
|
|
|
extendedIcon: { |
|
|
|
marginRight: theme.spacing.unit, |
|
|
|
}, |
|
|
|
textField: { |
|
|
|
width: "100%" |
|
|
|
}, |
|
|
|
button: { |
|
|
|
marginRight: theme.spacing.unit * 2, |
|
|
|
marginTop: theme.spacing.unit * 2, |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
class LoginPage extends Component { |
|
|
|
|
|
|
@ -53,7 +53,7 @@ class LoginPage extends Component { |
|
|
|
this.state = { |
|
|
|
username: '', |
|
|
|
password: '', |
|
|
|
fetched: false |
|
|
|
processing: false |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
@ -64,7 +64,7 @@ class LoginPage extends Component { |
|
|
|
onSubmit = () => { |
|
|
|
const { username, password } = this.state; |
|
|
|
const { authenticationContext } = this.props; |
|
|
|
this.setState({ fetched: false }); |
|
|
|
this.setState({ processing: true }); |
|
|
|
fetch(SIGN_IN_ENDPOINT, { |
|
|
|
method: 'POST', |
|
|
|
body: JSON.stringify({ username, password }), |
|
|
@ -76,21 +76,22 @@ class LoginPage extends Component { |
|
|
|
if (response.status === 200) { |
|
|
|
return response.json(); |
|
|
|
} else if (response.status === 401) { |
|
|
|
throw Error("Login details invalid!"); |
|
|
|
throw Error("Invalid login details."); |
|
|
|
} else { |
|
|
|
throw Error("Invalid status code: " + response.status); |
|
|
|
} |
|
|
|
}).then(json =>{ |
|
|
|
}).then(json => { |
|
|
|
authenticationContext.signIn(json.access_token); |
|
|
|
this.setState({ processing: false }); |
|
|
|
}) |
|
|
|
.catch(error => { |
|
|
|
this.props.raiseNotification(error.message); |
|
|
|
this.setState({ fetched: true }); |
|
|
|
this.setState({ processing: false }); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
render() { |
|
|
|
const { username, password } = this.state; |
|
|
|
const { username, password, processing } = this.state; |
|
|
|
const { classes } = this.props; |
|
|
|
return ( |
|
|
|
<div className={classes.loginPage}> |
|
|
@ -98,6 +99,7 @@ class LoginPage extends Component { |
|
|
|
<Typography variant="h4">{APP_NAME}</Typography> |
|
|
|
<ValidatorForm onSubmit={this.onSubmit}> |
|
|
|
<TextValidator |
|
|
|
disabled={processing} |
|
|
|
validators={['required']} |
|
|
|
errorMessages={['Username is required']} |
|
|
|
name="username" |
|
|
@ -107,7 +109,8 @@ class LoginPage extends Component { |
|
|
|
onChange={this.handleValueChange('username')} |
|
|
|
margin="normal" |
|
|
|
/> |
|
|
|
<TextValidator |
|
|
|
<PasswordValidator |
|
|
|
disabled={processing} |
|
|
|
validators={['required']} |
|
|
|
errorMessages={['Password is required']} |
|
|
|
name="password" |
|
|
@ -117,7 +120,7 @@ class LoginPage extends Component { |
|
|
|
onChange={this.handleValueChange('password')} |
|
|
|
margin="normal" |
|
|
|
/> |
|
|
|
<Fab variant="extended" color="primary" className={classes.button} type="submit"> |
|
|
|
<Fab variant="extended" color="primary" className={classes.button} type="submit" disabled={processing}> |
|
|
|
<ForwardIcon className={classes.extendedIcon} /> |
|
|
|
Sign In |
|
|
|
</Fab> |
|
|
|