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

View File

@ -98,7 +98,7 @@ class MenuAppBar extends React.Component {
const drawer = ( const drawer = (
<div> <div>
<Toolbar> <Toolbar>
<Typography variant="title" color="primary"> <Typography variant="h6" color="primary">
{APP_NAME} {APP_NAME}
</Typography> </Typography>
<Divider absolute /> <Divider absolute />
@ -146,7 +146,7 @@ class MenuAppBar extends React.Component {
> >
<MenuIcon /> <MenuIcon />
</IconButton> </IconButton>
<Typography variant="title" color="inherit" noWrap> <Typography variant="h6" color="inherit" noWrap>
{sectionTitle} {sectionTitle}
</Typography> </Typography>
</Toolbar> </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_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "wifiSettings";
export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus"; export const WIFI_STATUS_ENDPOINT = ENDPOINT_ROOT + "wifiStatus";
export const OTA_SETTINGS_ENDPOINT = ENDPOINT_ROOT + "otaSettings"; 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 Fab from '@material-ui/core/Fab';
import { APP_NAME } from '../constants/App'; import { APP_NAME } from '../constants/App';
import ForwardIcon from '@material-ui/icons/Forward'; 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 => ({ const styles = theme => ({
loginPage: { loginPage: {
@ -49,7 +52,8 @@ class LoginPage extends Component {
super(props); super(props);
this.state = { this.state = {
username: '', username: '',
password: '' password: '',
fetched: false
}; };
} }
@ -57,8 +61,32 @@ class LoginPage extends Component {
this.setState({ [name]: event.target.value }); this.setState({ [name]: event.target.value });
}; };
onSubmit = event => { onSubmit = () => {
// TODO 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() { render() {
@ -91,7 +119,7 @@ class LoginPage extends Component {
/> />
<Fab variant="extended" color="primary" className={classes.button} type="submit"> <Fab variant="extended" color="primary" className={classes.button} type="submit">
<ForwardIcon className={classes.extendedIcon} /> <ForwardIcon className={classes.extendedIcon} />
Login Sign In
</Fab> </Fab>
</ValidatorForm> </ValidatorForm>
</Paper> </Paper>
@ -101,4 +129,4 @@ class LoginPage extends Component {
} }
export default withStyles(styles)(LoginPage); export default withAuthenticationContext(withNotifier(withStyles(styles)(LoginPage)));