Commit 4585e5fc authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

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

parents df375a13 0533a6e7
export const LOGIN = 'LOGIN';
export const NAVIGATE = 'NAVIGATE'; export const NAVIGATE = 'NAVIGATE';
export const BACK = 'BACK'; export const BACK = 'BACK';
export const LOGINPROGRESS = 'LOGINPROGRESS';
export const LOGINSUCCESS = 'LOGINSUCCESS';
export const LOGINFAILURE = 'LOGINFAILURE';
import * as types from './actionTypes'; import * as types from './actionTypes';
export function login(username, password) { export function loginSuccess(username, token) {
return { return {
type: types.LOGIN, type: types.LOGINSUCCESS,
success: password === '42', 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()));
}; };
} }
...@@ -4,6 +4,17 @@ import { connect } from 'react-redux'; ...@@ -4,6 +4,17 @@ import { connect } from 'react-redux';
import * as actions from '../actions/login'; 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 { class Login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -14,12 +25,12 @@ class Login extends Component { ...@@ -14,12 +25,12 @@ class Login extends Component {
} }
render() { render() {
const { loginError, login } = this.props; const { loginState, login } = this.props;
return ( return (
<View> <View>
<TextInput <TextInput
placeholder="Username" placeholder="Username"
onChangeText={username => this.setState({ username })} onChangeText={name => this.setState({ name })}
/> />
<TextInput <TextInput
placeholder="Password" placeholder="Password"
...@@ -27,15 +38,15 @@ class Login extends Component { ...@@ -27,15 +38,15 @@ class Login extends Component {
onChangeText={password => this.setState({ password })} onChangeText={password => this.setState({ password })}
/> />
<Button title="Log in" onPress={() => login(this.state.username, this.state.password)} /> <Button title="Log in" onPress={() => login(this.state.username, this.state.password)} />
<Text>{ loginError ? 'Login faal' : '' }</Text> <Text>{loginResult(loginState)}</Text>
</View> </View>
); );
} }
} }
Login.propTypes = { Login.propTypes = {
loginState: React.PropTypes.string.isRequired,
login: React.PropTypes.func.isRequired, login: React.PropTypes.func.isRequired,
loginError: React.PropTypes.bool.isRequired,
}; };
const mapStateToProps = state => state.login; const mapStateToProps = state => state.login;
......
import * as types from '../actions/actionTypes'; import * as types from '../actions/actionTypes';
const initialState = { const initialState = {
loggedIn: false, loginState: '',
loginError: false, token: '',
username: '',
}; };
export default function login(state = initialState, action = {}) { export default function login(state = initialState, action = {}) {
switch (action.type) { switch (action.type) {
case types.LOGIN: case types.LOGINSUCCESS:
if (action.success) { return { ...state, loginState: 'success', username: action.username, token: action.token };
return { ...state, loginError: false, loggedIn: true }; case types.LOGINFAILURE:
} return { ...state, loginState: 'failure' };
return { ...state, loginError: true }; case types.LOGINPROGRESS:
return { ...state, loginState: 'progress' };
default: default:
return { ...state }; return { ...state };
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment