Merge branch 'login' of gitlab.science.ru.nl:thalia/ThaliApp-react into feature-navigation

app/actions/actionTypes.js

-export const LOGIN = 'LOGIN';
 export const NAVIGATE = 'NAVIGATE';
 export const BACK = 'BACK';
+export const LOGINPROGRESS = 'LOGINPROGRESS';
+export const LOGINSUCCESS = 'LOGINSUCCESS';
+export const LOGINFAILURE = 'LOGINFAILURE';

app/actions/login.js

 import * as types from './actionTypes';
 
-export function login(username, password) {
+export function loginSuccess(username, token) {
   return {
-    type: types.LOGIN,
-    success: password === '42',
+    type: types.LOGINSUCCESS,
+    loginState: 'loggedIn',
+    username,
+    token,
+  };
+}
+
+export function loginProgress() {
+  return {
+    type: types.LOGINPROGRESS,
+    loginState: 'progress',
+  };
+}
+
+export function loginFailure() {
+  return {
+    type: types.LOGINFAILURE,
+    loginState: 'failure',
+  };
+}
+
+export function login(username, password) {
+  return (dispatch) => {
+    dispatch(loginProgress());
+    const data = {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+    };
+    return fetch('http://localhost:8000/api/token-auth', data)
+      .then(
+        response => response.json())
+      .then(
+        (responseJson) => {
+          if (responseJson.token) {
+            return dispatch(loginSuccess(username, responseJson.token));
+          }
+          return dispatch(loginFailure());
+        })
+      .catch(() => dispatch(loginFailure()));
   };
 }

app/components/Login.js

@@ -4,6 +4,17 @@ import { connect } from 'react-redux';
 
 import * as actions from '../actions/login';
 
+const loginResult = (status) => {
+  switch (status) {
+    case 'progress':
+      return 'Logging in';
+    case 'failure':
+      return 'Login failed';
+    default:
+      return '';
+  }
+};
+
 class Login extends Component {
   constructor(props) {
     super(props);
@@ -14,12 +25,12 @@ class Login extends Component {
   }
 
   render() {
-    const { loginError, login } = this.props;
+    const { loginState, login } = this.props;
     return (
       <View>
         <TextInput
           placeholder="Username"
-          onChangeText={username => this.setState({ username })}
+          onChangeText={name => this.setState({ name })}
         />
         <TextInput
           placeholder="Password"
@@ -27,15 +38,15 @@ class Login extends Component {
           onChangeText={password => this.setState({ password })}
         />
         <Button title="Log in" onPress={() => login(this.state.username, this.state.password)} />
-        <Text>{ loginError ? 'Login faal' : '' }</Text>
+        <Text>{loginResult(loginState)}</Text>
       </View>
     );
   }
 }
 
 Login.propTypes = {
+  loginState: React.PropTypes.string.isRequired,
   login: React.PropTypes.func.isRequired,
-  loginError: React.PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = state => state.login;

app/reducers/login.js

 import * as types from '../actions/actionTypes';
 
 const initialState = {
-  loggedIn: false,
-  loginError: false,
+  loginState: '',
+  token: '',
+  username: '',
 };
 
 export default function login(state = initialState, action = {}) {
   switch (action.type) {
-    case types.LOGIN:
-      if (action.success) {
-        return { ...state, loginError: false, loggedIn: true };
-      }
-      return { ...state, loginError: true };
+    case types.LOGINSUCCESS:
+      return { ...state, loginState: 'success', username: action.username, token: action.token };
+    case types.LOGINFAILURE:
+      return { ...state, loginState: 'failure' };
+    case types.LOGINPROGRESS:
+      return { ...state, loginState: 'progress' };
     default:
       return { ...state };
   }