Commit 5c0ee8ea authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Logging in is slowly becoming more useful

parent 84b679b1
import * as types from './actionTypes'; import * as types from './actionTypes';
export function login() { export function login(username, password) {
return { return {
type: types.LOGIN, type: types.LOGIN,
username,
password,
}; };
} }
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, TextInput, Button } from 'react-native'; import { View, TextInput, Button, Text } from 'react-native';
export default class Login extends Component { export default class Login extends Component {
constructor(props) { constructor(props) {
...@@ -8,21 +8,28 @@ export default class Login extends Component { ...@@ -8,21 +8,28 @@ export default class Login extends Component {
username: '', username: '',
password: '', password: '',
}; };
this.login = props.login;
} }
render() { onPress() {
const { login } = this.props; return this.login.bind(null, this.state.username, this.state.password);
}
render() {
const { loginError } = this.props;
return ( return (
<View> <View>
<TextInput <TextInput
placeholder="Username" placeholder="Username"
onChangeText={username => this.setState({ username })}
/> />
<TextInput <TextInput
placeholder="Password" placeholder="Password"
secureTextEntry secureTextEntry
onChangeText={password => this.setState({ password })}
/> />
<Button title="Log in" onPress={login} /> <Button title="Log in" onPress={this.onPress()} />
<Text>{ loginError ? 'Login faal' : '' }</Text>
</View> </View>
); );
} }
......
import React, { Component } from 'react'; import React from 'react';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Login from '../components/Login'; import Login from '../components/Login';
import * as ThaliAppActions from '../actions/ThaliAppActions'; import * as ThaliAppActions from '../actions/ThaliAppActions';
class ThaliApp extends Component { const ThaliApp = (props) => {
render() { const { state, actions } = props;
// const { state, actions } = this.props; return (
return ( <Login
<Login loggedIn={state.loggedIn}
loggedIn={this.props.state.loggedIn} loginError={state.loginError}
{...this.props.actions} {...actions}
/> />
); );
} };
}
ThaliApp.propTypes = { ThaliApp.propTypes = {
state: React.PropTypes.objectOf(React.PropTypes.oneOfType([ state: React.PropTypes.objectOf(React.PropTypes.oneOfType([
......
import React, { Component } from 'react'; import React from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux'; import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
...@@ -9,13 +9,6 @@ import ThaliApp from './ThaliApp'; ...@@ -9,13 +9,6 @@ import ThaliApp from './ThaliApp';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore); const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers); const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer); const store = createStoreWithMiddleware(reducer);
const Main = () => <Provider store={store}><ThaliApp /></Provider>;
export default class App extends Component { export default Main;
render() {
return (
<Provider store={store}>
<ThaliApp />
</Provider>
);
}
}
...@@ -2,12 +2,16 @@ import * as types from '../actions/actionTypes'; ...@@ -2,12 +2,16 @@ import * as types from '../actions/actionTypes';
const initialState = { const initialState = {
loggedIn: false, loggedIn: false,
loginError: false,
}; };
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.LOGIN:
return { ...state, loggedIn: true }; if (action.password === '42') {
return { ...state, loginError: false, loggedIn: true };
}
return { ...state, loginError: true };
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