Completed basic login functionality.

gui/src/components/Navigation.js

@@ -23,7 +23,7 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import MenuIcon from '@material-ui/icons/Menu'
 import { Link, withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
-import { MuiThemeProvider, IconButton, Button, Checkbox, FormLabel, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Dialog } from '@material-ui/core'
+import { MuiThemeProvider, IconButton, Button, Checkbox, FormLabel, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Dialog, FormGroup, LinearProgress } from '@material-ui/core'
 import { genTheme, repoTheme, archiveTheme, encTheme, analyticsTheme } from '../config'
 import { ErrorSnacks } from './errors'
 import classNames from 'classnames'
@@ -76,26 +76,40 @@ class LoginLogoutComponent extends React.Component {
         borderColor: theme.palette.getContrastText(theme.palette.primary.main),
         marginRight: theme.spacing.unit * 4
       }
+    },
+    errorText: {
+      marginTop: theme.spacing.unit,
+      marginBottom: theme.spacing.unit
     }
   })
 
   constructor(props) {
     super(props)
-    this.handleLoginDialogClosed = this.handleLoginDialogClosed.bind(this)
     this.handleLogout = this.handleLogout.bind(this)
     this.handleChange = this.handleChange.bind(this)
   }
 
   state = {
     loginDialogOpen: false,
-    userName: null,
-    password: null
+    userName: '',
+    password: '',
+    loggingIn: false,
+    failure: false
   }
 
   handleLoginDialogClosed(withLogin) {
     this.setState({loginDialogOpen: false})
     if (withLogin) {
-      this.props.login(this.state.userName, this.state.password)
+      this.setState({loggingIn: true})
+      this.props.login(this.state.userName, this.state.password, (success) => {
+        if (success) {
+          this.setState({loggingIn: false, loginDialogOpen: false, failure: false})
+        } else {
+          this.setState({loggingIn: false, failure: true, loginDialogOpen: true})
+        }
+      })
+    } else {
+      this.setState({loggingIn: false, failure: false, userName: '', password: '', loginDialogOpen: false})
     }
   }
 
@@ -111,6 +125,7 @@ class LoginLogoutComponent extends React.Component {
 
   render() {
     const { classes, userName } = this.props
+    const { loggingIn, failure } = this.state
     if (userName) {
       return (
         <div className={classes.root}>
@@ -126,7 +141,7 @@ class LoginLogoutComponent extends React.Component {
           <Button color="inherit" variant="outlined" onClick={() => this.setState({loginDialogOpen: true})}>Login</Button>
           <Dialog
             open={this.state.loginDialogOpen}
-            onClose={this.handleLoginDialogClosed}
+            onClose={() => this.handleLoginDialogClosed(false)}
           >
             <DialogTitle>Login</DialogTitle>
             <DialogContent>
@@ -135,31 +150,39 @@ class LoginLogoutComponent extends React.Component {
                 do not have an account, please go to the nomad repository and
                 create one.
               </DialogContentText>
-              <TextField
-                autoFocus
-                margin="dense"
-                id="uaseName"
-                label="Email Address"
-                type="email"
-                fullWidth
-                value={this.state.userName}
-                onChange={this.handleChange('userName')}
-              />
-              <TextField
-                margin="dense"
-                id="password"
-                label="Password"
-                type="password"
-                fullWidth
-                value={this.state.password}
-                onChange={this.handleChange('password')}
-              />
+              {loggingIn ? <LinearProgress/> : ''}
+              {failure ? <DialogContentText className={classes.errorText} color="error">Wrong username or password!</DialogContentText> : ''}
+              <FormGroup>
+                <TextField
+                  disabled={loggingIn}
+                  autoFocus
+                  margin="dense"
+                  id="uaseName"
+                  label="Email Address"
+                  type="email"
+                  fullWidth
+                  value={this.state.userName}
+                  onChange={this.handleChange('userName')}
+                />
+                <TextField
+                  disabled={loggingIn}
+                  margin="dense"
+                  id="password"
+                  label="Password"
+                  type="password"
+                  fullWidth
+                  value={this.state.password}
+                  onChange={this.handleChange('password')}
+                />
+              </FormGroup>
             </DialogContent>
             <DialogActions>
-              <Button onClick={this.handleLoginDialogClosed} color="primary">
+              <Button onClick={() => this.handleLoginDialogClosed(false)} color="primary">
                 Cancel
               </Button>
-              <Button onClick={() => this.handleLoginDialogClosed(true)} color="primary">
+              <Button onClick={() => this.handleLoginDialogClosed(true)} color="primary"
+                disabled={this.state.userName === '' || this.state.password === ''}
+              >
                 Login
               </Button>
             </DialogActions>

gui/src/components/api.js

@@ -4,6 +4,7 @@ import { withErrors } from './errors'
 import { UploadRequest } from '@navjobs/upload'
 import Swagger from 'swagger-client'
 import { apiBase } from '../config'
+import { Typography } from '@material-ui/core'
 
 const ApiContext = React.createContext()
 
@@ -213,6 +214,17 @@ class Api {
       .then(response => response.body)
   }
 
+  async authenticate(userName, password) {
+    const client = await this.swaggerPromise
+    return client.apis.auth.get_token()
+      .catch(error => {
+        if (error.response.status !== 401) {
+          this.handleApiError(error)
+        }
+      })
+      .then(response => response !== undefined)
+  }
+
   _cachedMetaInfo = null
 
   async getMetaInfo() {
@@ -272,8 +284,14 @@ export class ApiProvider extends React.Component {
     api: new Api(),
     token: null,
     userName: null,
-    login: (userName, password) => {
-      this.setState({api: new Api(userName, password), userName: userName})
+    login: (userName, password, callback) => {
+      const api = new Api(userName, password)
+      api.authenticate().then(result => {
+        if (result) {
+          this.setState({api: api, userName: userName})
+        }
+        callback(result)
+      })
     },
     logout: () => {
       this.setState({api: new Api(), userName: null})
@@ -296,9 +314,11 @@ export function withApi(loginRequired) {
       return (
         <ApiContext.Consumer>
           {apiContext => (
-            <Component
-              {...props} api={apiContext.api} userName={apiContext.userName}
-              login={apiContext.login} logout={apiContext.logout} />
+            (apiContext.userName || !loginRequired)
+              ? <Component
+                {...props} api={apiContext.api} userName={apiContext.userName}
+                login={apiContext.login} logout={apiContext.logout} />
+              : <Typography color="error">Please login to use this functionality</Typography>
           )}
         </ApiContext.Consumer>
       )