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