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

finishing touches on styling login, done

parent c9c6c177
......@@ -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, 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 SnackBar from 'react-native-snackbar-component';
import styles from './style/login';
import { url } from '../url';
import * as actions from '../actions/login';
......@@ -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');
class Login extends Component {
......@@ -84,8 +34,10 @@ class Login extends Component {
render() {
const { loginState, login } = this.props;
return (
<View
<KeyboardAvoidingView
style={styles.wrapper}
behavior="padding"
modalOpen="false"
>
<Image style={styles.logo} source={image} />
<View>
......@@ -108,11 +60,11 @@ class Login extends Component {
>
<Text style={styles.loginText}>INLOGGEN</Text>
</TouchableOpacity>
<Text style={styles.loginstatus}>{loginResult(loginState)}</Text>
<Text style={styles.forgotpass} onPress={() => Linking.openURL('https://thalia.nu/password_reset/')}>
<Text style={styles.forgotpass} onPress={() => Linking.openURL(`${url}/password_reset/`)}>
Wachtwoord vergeten?
</Text>
</View>
<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"
......
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