Commit c61357d2 authored by AuckeBos's avatar AuckeBos Committed by Wietse Kuipers
Browse files

finishing touches on styling login, done

parent c9c6c177
...@@ -9,3 +9,4 @@ export const CALENDARRETREIVED = 'CALENDARRETREIVED'; ...@@ -9,3 +9,4 @@ export const CALENDARRETREIVED = 'CALENDARRETREIVED';
export const CALENDARERROR = 'CALENDARERROR'; export const CALENDARERROR = 'CALENDARERROR';
export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS'; export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
export const LOADEVENTFAILURE = 'LOADEVENTFAILURE'; export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
export const RESETLOGINSTATE = 'RESETLOGINSTATE';
...@@ -27,8 +27,15 @@ export function loginProgress() { ...@@ -27,8 +27,15 @@ export function loginProgress() {
} }
export function loginFailure() { export function loginFailure() {
return { return (dispatch) => {
type: types.LOGINFAILURE, setTimeout(() => {
dispatch({
type: types.RESETLOGINSTATE,
});
}, 2000);
return dispatch({
type: types.LOGINFAILURE,
});
}; };
} }
...@@ -38,6 +45,7 @@ export function logoutSuccess() { ...@@ -38,6 +45,7 @@ export function logoutSuccess() {
}; };
} }
function getUserInfo(token) { function getUserInfo(token) {
const data = { const data = {
method: 'GET', method: 'GET',
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import { View, TextInput, Text, StyleSheet, Linking, Image, TouchableOpacity } from 'react-native'; import { View, TextInput, Text, Linking, Image, TouchableOpacity, KeyboardAvoidingView } from 'react-native';
import { connect } from 'react-redux'; 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'; import * as actions from '../actions/login';
...@@ -17,59 +20,6 @@ const loginResult = (status) => { ...@@ -17,59 +20,6 @@ const loginResult = (status) => {
} }
}; };
const colors = {
magenta: '#E62272',
buttonColor: '#362b2b',
white: '#FFFFFF',
};
const styles = StyleSheet.create({
loginText: {
color: colors.white,
fontWeight: 'bold',
},
blackbutton: {
marginTop: 50,
alignSelf: 'center',
alignItems: 'center',
width: 275,
height: 65,
backgroundColor: colors.buttonColor,
justifyContent: 'center',
},
input: {
},
forgotpass: {
alignSelf: 'center',
color: colors.buttonColor,
marginBottom: 10,
marginTop: 10,
},
loginstatus: {
marginTop: 10,
height: 20,
alignSelf: 'center',
color: colors.white,
},
logo: {
marginTop: 80,
marginBottom: 50,
height: 150,
resizeMode: 'contain',
alignSelf: 'center',
},
wrapper: {
backgroundColor: colors.magenta,
flex: 1,
},
});
const image = require('./logo.png'); const image = require('./logo.png');
class Login extends Component { class Login extends Component {
...@@ -84,8 +34,10 @@ class Login extends Component { ...@@ -84,8 +34,10 @@ class Login extends Component {
render() { render() {
const { loginState, login } = this.props; const { loginState, login } = this.props;
return ( return (
<View <KeyboardAvoidingView
style={styles.wrapper} style={styles.wrapper}
behavior="padding"
modalOpen="false"
> >
<Image style={styles.logo} source={image} /> <Image style={styles.logo} source={image} />
<View> <View>
...@@ -108,11 +60,11 @@ class Login extends Component { ...@@ -108,11 +60,11 @@ class Login extends Component {
> >
<Text style={styles.loginText}>INLOGGEN</Text> <Text style={styles.loginText}>INLOGGEN</Text>
</TouchableOpacity> </TouchableOpacity>
<Text style={styles.loginstatus}>{loginResult(loginState)}</Text> <Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
<Text style={styles.forgotpass} onPress={() => Linking.openURL('https://thalia.nu/password_reset/')}>
Wachtwoord vergeten? Wachtwoord vergeten?
</Text> </Text>
</View> <SnackBar visible={loginState !== ''} textMessage={loginResult(loginState)} actionText="let's go" />
</KeyboardAvoidingView>
); );
} }
} }
......
...@@ -82,7 +82,9 @@ const ReduxNavigator = (props) => { ...@@ -82,7 +82,9 @@ const ReduxNavigator = (props) => {
</Drawer>); </Drawer>);
} }
return ( return (
<View> <View
style={styles.flex}
>
<View style={styles.statusBar}> <View style={styles.statusBar}>
<StatusBar backgroundColor={colors.darkMagenta} barStyle="light-content" /> <StatusBar backgroundColor={colors.darkMagenta} barStyle="light-content" />
</View> </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({ ...@@ -31,6 +31,10 @@ const styles = StyleSheet.create({
paddingRight: 32, paddingRight: 32,
color: colors.white, color: colors.white,
}, },
flex: {
flex: 1,
},
}); });
export default styles; export default styles;
...@@ -25,6 +25,9 @@ export default function session(state = initialState, action = {}) { ...@@ -25,6 +25,9 @@ export default function session(state = initialState, action = {}) {
return { ...state, loginState: 'progress' }; return { ...state, loginState: 'progress' };
case types.LOGOUT: case types.LOGOUT:
return { ...initialState, loginState: 'logout' }; return { ...initialState, loginState: 'logout' };
case types.RESETLOGINSTATE:
return { ...initialState, loginState: '' };
default: default:
return state; return state;
} }
......
...@@ -4263,6 +4263,10 @@ react-native-linear-gradient@^2.0.0: ...@@ -4263,6 +4263,10 @@ react-native-linear-gradient@^2.0.0:
version "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" 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: react-native-vector-icons@^4.0.1:
version "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" resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-4.0.1.tgz#39c05d2e775deeb98d5afdbda5dcf67965ff674f"
......
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