More specific access control headers to support cross origin Authorization

Pretty sign in page
Verify existing JWT on application mount

interface/src/containers/SignInPage.js

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