diff --git a/src/Dusken.js b/src/Dusken.js
index 2109436..c88f052 100644
--- a/src/Dusken.js
+++ b/src/Dusken.js
@@ -1,60 +1,15 @@
-import React from 'react';
+import React, {Component} from 'react';
import {connect} from "react-redux";
-import {Platform, StyleSheet} from 'react-native';
-import {TabNavigator, StackNavigator} from "react-navigation";
-
-import AboutScreen from "./screens/AboutScreen";
-import EventDetailScreen from "./screens/EventDetailScreen";
-import EventListScreen from "./screens/EventListScreen";
-import LoginScreen from "./screens/LoginScreen";
-import MembershipScreen from "./screens/MembershipScreen";
-import UserRegisterScreen from "./screens/UserRegisterScreen";
+import {Root} from 'native-base';
+import DuskenNavigation from "./navigation";
-/* Navigation */
-const tabBarRoutes = {
- Membership: { screen: MembershipScreen },
- EventList: { screen: EventListScreen },
- About: { screen: AboutScreen },
-};
-
-const tabBarOptions = {
- tabBarPosition: 'bottom',
- tabBarOptions: {
- style: {
- ...Platform.select({
- android: {
- backgroundColor: "#fff",
- borderTopWidth: StyleSheet.hairlineWidth,
- borderTopColor: 'rgba(0, 0, 0, 0.1)'
- }
- })
- },
- indicatorStyle: {
- backgroundColor: "#f58220"
- },
- activeTintColor: '#f58220',
- inactiveTintColor: '#333333',
- showIcon: true,
- labelStyle: {
- fontSize: 10,
- marginBottom: 0,
- ...Platform.select({
- android: {
- fontWeight: 'bold',
- }
- }),
- },
+class DuskenContainer extends Component {
+ render() {
+ return (
+
+ )
}
-};
-
-const tabNav = TabNavigator(tabBarRoutes, tabBarOptions);
-
-const DuskenContainer = StackNavigator({
- Root: { screen: tabNav },
- Login: { screen: LoginScreen },
- UserRegister: { screen: UserRegisterScreen },
- EventDetail: { screen: EventDetailScreen },
-});
+}
export default connect()(DuskenContainer);
\ No newline at end of file
diff --git a/src/modules/register/UserRegister.js b/src/modules/register/UserRegister.js
index 0d89db8..f73c8a9 100644
--- a/src/modules/register/UserRegister.js
+++ b/src/modules/register/UserRegister.js
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
-import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text, Icon} from 'native-base';
+import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text, Icon, Toast} from 'native-base';
import {Platform, StyleSheet, View} from "react-native";
export default class UserRegister extends Component {
@@ -11,23 +11,75 @@ export default class UserRegister extends Component {
lastName: '',
email: '',
phoneNumber: '',
- password: ''
+ password: '',
+ errors: {},
+ touched: new Set()
}
- }
+ };
+
+ validateForm(triggeredBy) {
+ const fieldNames = ['firstName', 'lastName', 'email', 'phoneNumber', 'password'];
+
+ let errors = Object.assign({}, this.state.errors);
+ let touched = new Set(this.state.touched).add(triggeredBy);
- canSubmitForm() {
/* No empty fields */
- for([key, value] of Object.entries(this.state)) {
+ for(let key of fieldNames) {
+ const value = this.state[key];
if(value === '') {
- return false;
+ errors[key] = 'Feltet kan ikke være tomt';
+ } else {
+ delete errors[key];
}
}
- return true;
+ this.setState({errors: errors, touched});
};
+ fieldHasError(field) {
+ return this.state.touched.has(field) && field in this.state.errors;
+ }
+
+ canSubmitForm() {
+ return Object.keys(this.state.errors).length === 0;
+ }
+
+ firstNameInput() {
+ return -
+
+ {
+ this.setState({firstName: text}, () => { this.validateForm('firstName'); });
+ }}
+ onSubmitEditing={() => {
+ this.refs.lastNameInput._root.focus()
+ }}
+ />
+ {this.fieldHasError('firstName') && }
+
;
+ }
+
+ lastNameInput() {
+ return -
+
+ {
+ this.setState({lastName: text}, () => { this.validateForm('lastName'); });
+ }}
+ onSubmitEditing={() => {
+ this.refs.emailInput._root.focus()
+ }}
+ />
+ {this.fieldHasError('lastName') && }
+
;
+ }
+
emailInput() {
- return -
+ return
-
{
- this.setState({email: text});
+ this.setState({email: text}, () => { this.validateForm('email'); });
}}
onSubmitEditing={() => {
this.refs.phoneInput._root.focus()
}}
/>
+ {this.fieldHasError('email') && }
+
;
+ }
+
+ phoneNumberInput() {
+ return -
+
+ {
+ this.setState({phoneNumber: text}, () => { this.validateForm('phoneNumber'); });
+ }}
+ onSubmitEditing={() => {
+ this.refs.passwordInput._root.focus()
+ }}
+ />
+ {this.fieldHasError('phoneNumber') && }
;
}
passwordInput() {
- // FIXME: How to dynamicly set error attribute? replace component, what?
- return -
+ return
-
{
- this.setState({password: text});
+ this.setState({password: text}, () => { this.validateForm('password'); });
}}
onSubmitEditing={this.onRegisterPress}
/>
+ {this.fieldHasError('password') && }
}
showError = () => {
+ // TODO: Move these from prop to state in componentWillRecieveProps
// TODO: Format these and highlight error fields
if (this.props.registerError && Object.keys(this.props.registerError).length !== 0) {
const err = this.props.registerError.non_field_errors;
@@ -85,47 +157,10 @@ export default class UserRegister extends Component {