Merge branch 'styling-login' into 'master'

Styling login

See merge request !30

app/actions/actionTypes.js

@@ -9,3 +9,4 @@ export const CALENDARRETREIVED = 'CALENDARRETREIVED';
 export const CALENDARERROR = 'CALENDARERROR';
 export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
 export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
+export const RESETLOGINSTATE = 'RESETLOGINSTATE';

app/actions/login.js

@@ -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',

app/components/Login.js

 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>
     );
   }
 }

app/components/navigator.js

@@ -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>

app/components/style/login.js

+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;

app/components/style/navigator.js

@@ -31,6 +31,10 @@ const styles = StyleSheet.create({
     paddingRight: 32,
     color: colors.white,
   },
+
+  flex: {
+    flex: 1,
+  },
 });
 
 export default styles;

app/reducers/session.js

@@ -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;
   }

package.json

@@ -24,6 +24,7 @@
     "react-native": "0.44.2",
     "react-native-drawer": "^2.3.0",
     "react-native-linear-gradient": "^2.0.0",
+    "react-native-snackbar-component": "^1.0.3",
     "react-native-vector-icons": "^4.0.1",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0",

yarn.lock

@@ -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"