Commit 7907f098 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Merge branch 'styling-login' into 'master'

Styling login

See merge request !30
parents 387eafb9 c61357d2
......@@ -9,3 +9,4 @@ export const CALENDARRETREIVED = 'CALENDARRETREIVED';
export const CALENDARERROR = 'CALENDARERROR';
export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
export const RESETLOGINSTATE = 'RESETLOGINSTATE';
......@@ -27,8 +27,15 @@ export function loginProgress() {
}
export function loginFailure() {
return {
type: types.LOGINFAILURE,
return (dispatch) => {
setTimeout(() => {
dispatch({
type: types.RESETLOGINSTATE,
});
}, 2000);
return dispatch({
type: types.LOGINFAILURE,
});
};
}
......@@ -38,6 +45,7 @@ export function logoutSuccess() {
};
}
function getUserInfo(token) {
const data = {
method: 'GET',
......
import React, { Component } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { View, TextInput, Text, Linking, Image, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import { connect } from 'react-redux';
import SnackBar from 'react-native-snackbar-component';
import styles from './style/login';
import { url } from '../url';
import * as actions from '../actions/login';
......@@ -17,6 +20,8 @@ const loginResult = (status) => {
}
};
const image = require('./logo.png');
class Login extends Component {
constructor(props) {
super(props);
......@@ -29,19 +34,37 @@ class Login extends Component {
render() {
const { loginState, login } = 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(this.state.username, this.state.password)} />
<Text>{loginResult(loginState)}</Text>
</View>
<KeyboardAvoidingView
style={styles.wrapper}
behavior="padding"
modalOpen="false"
>
<Image style={styles.logo} source={image} />
<View>
<TextInput
style={styles.input}
placeholder="Gebruikersnaam"
onChangeText={username => this.setState({ username })}
/>
<TextInput
style={styles.input}
placeholder="Wachtwoord"
secureTextEntry
onChangeText={password => this.setState({ password })}
onSubmitEditing={() => { login(this.state.username, this.state.password); }}
/>
</View>
<TouchableOpacity
style={styles.blackbutton} onPress={() =>
login(this.state.username, this.state.password)}
>
<Text style={styles.loginText}>INLOGGEN</Text>
</TouchableOpacity>
<Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
Wachtwoord vergeten?
</Text>
<SnackBar visible={loginState !== ''} textMessage={loginResult(loginState)} actionText="let's go" />
</KeyboardAvoidingView>
);
}
}
......
......@@ -82,7 +82,9 @@ const ReduxNavigator = (props) => {
</Drawer>);
}
return (
<View>
<View
style={styles.flex}
>
<View style={styles.statusBar}>
<StatusBar backgroundColor={colors.darkMagenta} barStyle="light-content" />
</View>
......
import { StyleSheet } from 'react-native';
import { colors } from '../../style';
const styles = StyleSheet.create({
loginText: {
color: colors.white,
fontWeight: 'bold',
},
blackbutton: {
marginTop: 40,
alignSelf: 'center',
alignItems: 'center',
marginBottom: 10,
width: 225,
height: 50,
backgroundColor: colors.darkGrey,
justifyContent: 'center',
},
input: {
height: 48,
},
forgotpass: {
alignSelf: 'center',
color: colors.darkGrey,
marginBottom: 10,
fontSize: 20,
height: 25,
fontWeight: 'bold',
},
loginstatus: {
marginTop: 10,
marginBottom: 10,
height: 25,
fontSize: 20,
alignSelf: 'center',
color: colors.white,
},
logo: {
marginTop: 137,
marginBottom: 54,
height: 108,
marginLeft: 34,
marginRight: 34,
resizeMode: 'contain',
alignSelf: 'center',
},
wrapper: {
paddingLeft: 16,
paddingRight: 16,
backgroundColor: colors.magenta,
flex: 1,
justifyContent: 'center',
},
});
export default styles;
......@@ -31,6 +31,10 @@ const styles = StyleSheet.create({
paddingRight: 32,
color: colors.white,
},
flex: {
flex: 1,
},
});
export default styles;
......@@ -25,6 +25,9 @@ export default function session(state = initialState, action = {}) {
return { ...state, loginState: 'progress' };
case types.LOGOUT:
return { ...initialState, loginState: 'logout' };
case types.RESETLOGINSTATE:
return { ...initialState, loginState: '' };
default:
return state;
}
......
......@@ -4263,6 +4263,10 @@ react-native-linear-gradient@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.0.0.tgz#7442c00e1fcd9fca329119dcbaf744d12bcd1b5a"
react-native-snackbar-component@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-native-snackbar-component/-/react-native-snackbar-component-1.0.3.tgz#092c3cd19c476fe391683857227f9d44fc4337bd"
react-native-vector-icons@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.0.1.tgz#39c05d2e775deeb98d5afdbda5dcf67965ff674f"
......
Supports Markdown
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