Working on user list.

client/src/layout/components/AppLayout.js

@@ -16,7 +16,7 @@ class AppLayout extends React.Component {
       username: this.username.value,
       password: this.password.value
     }
-    console.log(data)
+    console.log('submit login data', data)
     loginRequest(data)
     //const { fileUploadStart } = this.props.actions
     //const { files } = this.playerListFile

client/src/users/components/UserList.js

@@ -1,12 +1,14 @@
 import React from 'react'
 
 class UserList extends React.Component {
+  constructor () {
+    super()
+  }
+
   render () {
-    const state = this.props.state.users
-    const actions = this.props.state.usersActions
-    if (state.tokenData) {
-      actions.getUserList()
-    }
+    const { state, actions } = this.props
+    console.log('UserList', state, actions)
+
     let user = null
 
     return (
@@ -22,6 +24,7 @@ class UserList extends React.Component {
           <input type="password" ref={(input) => {this.password = input}} id="password"></input>
           <input type="submit" value={user ? "Aenderungen speichern" : "Benutzer anlegen"} />
         </form>
+        <input type="button" onClick={actions.getUserList} value="Aktualisieren" />
         <table>
           <thead>
             <tr>
@@ -33,7 +36,7 @@ class UserList extends React.Component {
             <tr>
               <td>{user.name}</td><td>{user.username}</td><td><a>editieren</a><a>loeschen</a></td>
             </tr>
-            }) : null}
+            }) : ""}
           </tbody>
         </table>
       </div>

client/src/users/state.js

@@ -16,10 +16,11 @@ export const actions = {
             data
         }
     },
-    loginSuccess: (token) => {
+    loginSuccess: (token, tokenData) => {
         return {
             type: 'USER/LOGIN_SUCCESS',
-            token
+            token,
+            tokenData
         }
     },
     loginFailure: () => {
@@ -66,7 +67,9 @@ console.log('State actions', actions)
 /** state definition */
 export const state = {
     loginRequested: false,
-    users: {},
+    userListRequested: false,
+    userListInitialized: false,
+    users: [],
     token: null,
     tokenData: null
 }
@@ -78,17 +81,15 @@ export function reducer (state = [], action) {
         case 'USER/LOGIN_REQUEST':
             return { ...state, loginRequested: true }
         case 'USER/LOGIN_SUCCESS':
-            const tokenData = action.token ? jwt.decode(action.token, null, true) : null
-            console.log(tokenData)
-            return { ...state, loginRequested: false, token: action.token, tokenData }
+            return { ...state, loginRequested: false, token: action.token, tokenData: action.tokenData }
         case 'USER/LOGIN_FAILURE':
             return { ...state, loginRequested: false }
         case 'USER/GET_USER_LIST':
-            return { ...state }
+            return { ...state, userListRequested: true, userListInitialized: true }
         case 'USER/GET_USER_LIST_SUCCESS':
-            return { ...state, users: action.users }
+            return { ...state, userListRequested: false, users: action.users }
         case 'USER/GET_USER_LIST_FAILURE':
-            return { ...state }
+            return { ...state, userListRequested: false }
         default:
             return state
     }
@@ -109,33 +110,39 @@ function * login (action) {
             console.log(responseJson.msg)
             throw new Error(responseJson.msg)
         }
-        console.log('User login success!', actions.loginSuccess(responseJson.token))
-        yield put(actions.loginSuccess(responseJson.token))
+        const { token } = responseJson
+        const tokenData = jwt.decode(token, null, true)
+        localStorage.setItem('accessToken', token)
+        localStorage.setItem('accessTokenData', JSON.stringify(tokenData))
+        console.log('User login success!', token, tokenData)
+        yield put(actions.loginSuccess(token, tokenData))
     } catch (error) {
-        console.log('User login failure!', actions.loginFailure(error))
+        console.log('User login failure!', error)
         yield put(actions.loginFailure(error))
     }
 }
 
 function * getUserList (action) {
     try {
-        console.log('User list requested')
+        const token = localStorage.getItem('accessToken')
+        console.log('User list requested', action, token)
         const response = yield call(fetch, 'http://localhost:3002/api/users', {
             method: 'GET',
-            headers: {
+            headers: new Headers({
                 'Content-Type': 'application/json',
-                'x-access-token': action.token
-            },
+                'x-access-token': token
+            })
         })
+        console.log('Received response')
         const responseJson = yield response.json()
         if (response.status != 200) {
-            console.log(responseJson.msg)
+            console.log('User list received error', responseJson.msg)
             throw new Error(responseJson.msg)
         }
-        console.log('Get user list success!', actions.userListFailure(responseJson.users))
-        yield put(actions.userListFailure(responseJson.users))
+        console.log('Get user list success!', responseJson.users)
+        yield put(actions.userListSuccess(responseJson.users))
     } catch (error) {
-        console.log('Get user list failure!', actions.userListFailure(error))
+        console.log('Get user list failure!', error)
         yield put(actions.userListFailure(error.toString()))
     }
 }

server/package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-register": "^6.24.1",
+    "cors": "^2.8.4",
     "html-inline": "^1.2.0",
     "nodemon": "^1.17.4"
   },

server/src/restServer/api.js

@@ -1,4 +1,5 @@
 import express from 'express'
+import cors from 'cors'
 import bodyParser from 'body-parser'
 import mongoose from 'mongoose'
 import bhttp from 'bhttp'
@@ -12,6 +13,7 @@ import { authenticate, verify } from './routes/authenticate'
 
 const port = process.env.PORT || 3002
 const app = express()
+app.use(cors())
 
 app.use(bodyParser.urlencoded({ extended: false }))
 app.use(bodyParser.json())

server/src/restServer/routes/authenticate.js

@@ -43,33 +43,36 @@ authenticate.post('/login', (req, res) => {
   console.log("Trying to log in.")
   const { username, password } = req.body
   if (!username || !password) {
+    console.log('parameters missing', username, password)
     return res.status(400).json({
       msg: 'Parameters username and password are required' 
     })
   }
 
   User.findOne({ username }, (err, user) => {
-    console.log('hoppla!')
     if (err) {
+      console.log('login', err)
       return res.status(400).json({ 
         msg: err.toString() 
       })
     }
     if (!user) {
+      console.log('login user not found')
       return res.status(400).json({ 
         msg: 'Authentication failed. User not found.' 
       })
     }
-    console.log(password, user)
     if (!bcrypt.compareSync(password, user.password)) {
+      console.log('login password mismatch')
       return res.status(400).json({ 
         msg: 'Authentication failed. Wrong password' 
       })
     } else {
       const token = jwt.encode({
-        exp: Date.now() + 24*60*60*1000,
-        data: { username: user.username, name: user.name }
+        expires: Date.now() + 24*60*60*1000,
+        user: { username: user.username, name: user.name }
       }, config.secret)
+      console.log('login successful', user.username)
       return res.json({ 
         token
       })
@@ -82,11 +85,11 @@ const verify = express.Router()
 verify.use( (req, res, next) => {
   console.log("Trying to authenticate token.")
   const token = req.headers['x-access-token']
+  console.log('Got token', req.headers, token)
 
   if (token) {
-
     const decoded = jwt.decode(token, config.secret)
-    if (decoded.exp < Date.now()) {
+    if (decoded.expires < Date.now()) {
       return res.status(403).json({
         msg: 'Token expired.'
       })

server/src/restServer/routes/users.js

@@ -14,7 +14,7 @@ users.get('/', (req, res) => {
       }
 
       return res.json({
-          users: JSON.stringify(users)
+          users
       })
   })
 })