WIP - more work on sign in feature

interface/src/AppRouting.js

@@ -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} />

interface/src/components/MenuAppBar.js

@@ -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>

interface/src/constants/Endpoints.js

@@ -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";

interface/src/containers/LoginPage.js → interface/src/containers/SignInPage.js

@@ -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)));