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 {
- - - { - this.setState({firstName: text}); - }} - onSubmitEditing={() => { - this.refs.lastNameInput._root.focus() - }} - /> - - - - { - this.setState({lastName: text}); - }} - onSubmitEditing={() => { - this.refs.emailInput._root.focus() - }} - /> - + {this.firstNameInput()} + {this.lastNameInput()} {this.emailInput()} - - - { - this.setState({phoneNumber: text}); - }} - onSubmitEditing={() => { - this.refs.passwordInput._root.focus() - }} - /> - + {this.phoneNumberInput()} {this.passwordInput()} {this.showError()} {this.registerbutton()} @@ -137,6 +172,16 @@ export default class UserRegister extends Component { } onRegisterPress = () => { + if( !this.validateForm() ) { + Toast.show({ + text: 'Noen av feltene er ikke fylt ut riktig', + position: 'bottom', + buttonText: 'OK', + duration: 1500, + }); + return; + } + this.props.onRegisterPress( this.state.firstName, this.state.lastName, @@ -147,19 +192,11 @@ export default class UserRegister extends Component { }; registerbutton() { - if( this.props.isRegisteringUser || !this.canSubmitForm() ) { - return ( - ); - } + const isDisabled = this.props.isRegisteringUser || !this.canSubmitForm(); return (