WIP - more work on sign in feature

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