WIP - more work on sign in feature

This commit is contained in:
Rick Watson 2019-05-14 23:18:24 +01:00
parent c74c287e21
commit cf693ca341
4 changed files with 39 additions and 10 deletions

View File

@ -12,7 +12,7 @@ import WiFiConfiguration from './containers/WiFiConfiguration';
import NTPConfiguration from './containers/NTPConfiguration';
import OTAConfiguration from './containers/OTAConfiguration';
import APConfiguration from './containers/APConfiguration';
import LoginPage from './containers/LoginPage';
import SignInPage from './containers/SignInPage';
class AppRouting extends Component {
@ -24,7 +24,7 @@ class AppRouting extends Component {
return (
<AuthenticationWrapper>
<Switch>
<Route exact path="/" component={LoginPage} />
<Route exact path="/" component={SignInPage} />
<AuthenticatedRoute exact path="/wifi-configuration" component={WiFiConfiguration} />
<AuthenticatedRoute exact path="/ap-configuration" component={APConfiguration} />
<AuthenticatedRoute exact path="/ntp-configuration" component={NTPConfiguration} />

View File

@ -98,7 +98,7 @@ class MenuAppBar extends React.Component {
const drawer = (
<div>
<Toolbar>
<Typography variant="title" color="primary">
<Typography variant="h6" color="primary">
{APP_NAME}
</Typography>
<Divider absolute />
@ -146,7 +146,7 @@ class MenuAppBar extends React.Component {
>
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" noWrap>
<Typography variant="h6" color="inherit" noWrap>
{sectionTitle}
</Typography>
</Toolbar>

View File

@ -9,3 +9,4 @@ export const LIST_NETWORKS_ENDPOINT = ENDPOINT_ROOT + "listNetworks";
export const WIFI_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "wifiSettings";
export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus";
export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings";
export const SIGN_IN_ENDPOINT = ENDPOINT_ROOT + "signIn";

View File

@ -7,6 +7,9 @@ import Typography from '@material-ui/core/Typography';
import Fab from '@material-ui/core/Fab';
import { APP_NAME } from '../constants/App';
import ForwardIcon from '@material-ui/icons/Forward';
import { withNotifier } from '../components/SnackbarNotification';
import { SIGN_IN_ENDPOINT } from '../constants/Endpoints';
import { withAuthenticationContext } from '../authentication/Context';
const styles = theme => ({
loginPage: {
@ -20,7 +23,7 @@ const styles = theme => ({
paddingTop: "200px",
backgroundImage: 'url("/app/icon.png")',
backgroundRepeat: "no-repeat",
backgroundPosition: "50% "+ theme.spacing.unit * 2 +"px",
backgroundPosition: "50% " + theme.spacing.unit * 2 + "px",
backgroundSize: "auto 150px",
textAlign: "center"
},
@ -49,7 +52,8 @@ class LoginPage extends Component {
super(props);
this.state = {
username: '',
password: ''
password: '',
fetched: false
};
}
@ -57,8 +61,32 @@ class LoginPage extends Component {
this.setState({ [name]: event.target.value });
};
onSubmit = event => {
// TODO
onSubmit = () => {
const { username, password } = this.state;
const { authenticationContext } = this.props;
this.setState({ fetched: false });
fetch(SIGN_IN_ENDPOINT, {
method: 'POST',
body: JSON.stringify({ username, password }),
headers: new Headers({
'Content-Type': 'application/json'
})
})
.then(response => {
if (response.status === 200) {
return response.json();
} else if (response.status === 401) {
throw Error("Login details invalid!");
} else {
throw Error("Invalid status code: " + response.status);
}
}).then(json =>{
authenticationContext.signIn(json.access_token);
})
.catch(error => {
this.props.raiseNotification(error.message);
this.setState({ fetched: true });
});
};
render() {
@ -91,7 +119,7 @@ class LoginPage extends Component {
/>
<Fab variant="extended" color="primary" className={classes.button} type="submit">
<ForwardIcon className={classes.extendedIcon} />
Login
Sign In
</Fab>
</ValidatorForm>
</Paper>
@ -101,4 +129,4 @@ class LoginPage extends Component {
}
export default withStyles(styles)(LoginPage);
export default withAuthenticationContext(withNotifier(withStyles(styles)(LoginPage)));