Permalink
Browse files

Added login and signup views.

  • Loading branch information...
dblock committed Jul 8, 2018
1 parent bedae44 commit 9f252cba4a92a89d006b14cf3fb7630e19b62636
Showing with 252 additions and 4 deletions.
  1. +9 −2 App.js
  2. +35 −2 app/Main.js
  3. +100 −0 app/screens/SignIn.js
  4. +108 −0 app/screens/SignUp.js
11 App.js
@@ -1,13 +1,20 @@
import React, { Component } from 'react';
import { Main } from './app/Main'
import { createRootNavigator } from './app/Main'
import { Provider } from 'react-redux';
import store from './app/Store'

export default class App extends Component {
state = {
signedIn: false
}

render() {
const { signedIn } = this.state;
const Layout = createRootNavigator(signedIn);

return (
<Provider store={store}>
<Main />
<Layout />
</Provider>
);
}
@@ -1,9 +1,26 @@
import React, { Component } from 'react';
import Home from './screens/Home';
import Record from './screens/Record';
import { createStackNavigator } from 'react-navigation';
import SignIn from './screens/SignIn';
import SignUp from './screens/SignUp';
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

export const Main = createStackNavigator({
const SignedOut = createStackNavigator({
SignIn: {
screen: SignIn,
navigationOptions: {
title: 'Sign In'
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
title: 'Sign Up'
}
}
});

const SignedIn = createStackNavigator({
Main: {
screen: Home,
navigationOptions: {
@@ -18,3 +35,19 @@ export const Main = createStackNavigator({
}
}
});

export const createRootNavigator = (signedIn = false) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: signedIn ? 'SignedIn' : 'SignedOut'
}
)
}
@@ -0,0 +1,100 @@
import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, SafeAreaView, TouchableOpacity, KeyboardAvoidingView, StatusBar } from 'react-native';

export default class SignIn extends Component {
onSignIn() {
return Promise.resolve();
}

render() {
return (
<KeyboardAvoidingView behavior='padding' style={styles.container}>
<SafeAreaView style={styles.safeContainer}>
<View style={styles.logoContainer}>
<StatusBar barStyle='light-content' />
<Text style={styles.title}>33 Minutes</Text>
</View>
<View style={styles.formContainer}>
<TextInput style={styles.input}
placeholder='e-mail address'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='next'
autoCapitalize='none'
autoCorrect={false}
onSubmitEditing={() => this.passwordInput.focus()}
keyboardType='email-address'
/>
<TextInput style={styles.input}
placeholder='password'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='go'
secureTextEntry
ref={(input) => this.passwordInput = input}
/>
<TouchableOpacity style={styles.button}
onPress={() => this.onSignIn().then(() => this.props.navigation.navigate('SignedIn')) }>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
<Text
style={styles.link}
onPress={() => this.props.navigation.navigate('SignUp')}>
Don't have an account?
</Text>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
safeContainer: {
flexGrow: 1,
alignSelf: 'stretch',
justifyContent: 'center'
},
logoContainer: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center'
},
title: {
color: 'black',
opacity: 0.9
},
formContainer: {
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
padding: 20
},
input: {
alignSelf: 'stretch',
borderColor: 'black',
borderWidth: 1,
height: 40,
marginBottom: 10,
padding: 5
},
button: {
alignSelf: 'stretch',
backgroundColor: 'black',
alignItems: 'center',
height: 40
},
buttonText: {
paddingVertical: 10,
color: 'white',
fontWeight: '700'
},
link: {
padding: 10,
fontWeight: '500',
textDecorationLine: 'underline'
}
});
@@ -0,0 +1,108 @@
import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput, SafeAreaView, TouchableOpacity, KeyboardAvoidingView, StatusBar } from 'react-native';

export default class SignUp extends Component {
onSignUp() {

}

render() {
return (
<KeyboardAvoidingView behavior='padding' style={styles.container}>
<SafeAreaView style={styles.safeContainer}>
<View style={styles.logoContainer}>
<StatusBar barStyle='light-content' />
<Text style={styles.title}>33 Minutes</Text>
</View>
<View style={styles.formContainer}>
<TextInput style={styles.input}
placeholder='your name'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='next'
autoCorrect={false}
onSubmitEditing={() => this.emailInput.focus()}
/>
<TextInput style={styles.input}
placeholder='e-mail address'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='next'
autoCapitalize='none'
autoCorrect={false}
onSubmitEditing={() => this.passwordInput.focus()}
keyboardType='email-address'
ref={(input) => this.emailInput = input}
/>
<TextInput style={styles.input}
placeholder='password'
placeholderTextColor='rgba(0, 0, 0, 0.2)'
returnKeyType='go'
secureTextEntry
ref={(input) => this.passwordInput = input}
/>
<TouchableOpacity style={styles.button}
onPress={() => onSignUp().then(() => this.props.navigation.navigate('SignedIn')) }>
<Text style={styles.buttonText}>SIGN-UP</Text>
</TouchableOpacity>
<Text
style={styles.link}
onPress={() => this.props.navigation.navigate('SignIn')}>
Already have an account?
</Text>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
)
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
safeContainer: {
flexGrow: 1,
alignSelf: 'stretch',
justifyContent: 'center'
},
logoContainer: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center'
},
title: {
color: 'black',
opacity: 0.9
},
formContainer: {
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
padding: 20
},
input: {
alignSelf: 'stretch',
borderColor: 'black',
borderWidth: 1,
height: 40,
marginBottom: 10,
padding: 5
},
button: {
alignSelf: 'stretch',
backgroundColor: 'black',
alignItems: 'center',
height: 40
},
buttonText: {
paddingVertical: 10,
color: 'white',
fontWeight: '700'
},
link: {
padding: 10,
fontWeight: '500',
textDecorationLine: 'underline'
}
});

0 comments on commit 9f252cb

Please sign in to comment.