Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { connect } from 'react-redux';
- import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native';
- import { login } from '../redux/actions/auth';
- import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';
- import About from '../pages/About';
- const awsCognitoSettings = {
- UserPoolId: 'something',
- ClientId: 'something'
- };
- class Login extends Component {
- constructor(props) {
- super(props);
- this.state = {
- page: 'Login',
- username: '',
- password: ''
- };
- }
- get alt() {
- if(this.state.page == 'Login') {
- return 'SignUp';
- } else {
- return 'Login';
- }
- }
- handleClick (e) {
- e.preventDefault();
- const userPool = new CognitoUserPool(awsCognitoSettings);
- // Sign up
- if (this.state.page === 'SignUp') {
- const attributeList = [
- new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
- ];
- userPool.signUp(
- this.state.username,
- this.state.password,
- attributeList,
- null,
- (err, result) => {
- if (err) {
- alert(err);
- this.setState({ username: '', password: '' });
- return;
- }
- console.log(`result = ${JSON.stringify(result)}`);
- this.props.onLogin(this.state.username, this.state.password);
- }
- );
- } else {
- const authDetails = new AuthenticationDetails({
- Username: this.state.username,
- Password: this.state.password
- });
- const cognitoUser = new CognitoUser({
- Username: this.state.username,
- Pool: userPool
- });
- cognitoUser.authenticateUser(authDetails, {
- onSuccess: (result) => {
- console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
- this.props.onLogin(this.state.username, this.state.password);
- },
- onFailure: (err) => {
- alert(err);
- this.setState({ username: '', password: '' });
- return;
- }
- });
- }
- }
- togglePage (e) {
- this.setState({ page: this.alt });
- e.preventDefault();
- }
- about = () => {
- this.props.navigate.navigation('About');
- }
- render() {
- return(
- <ScrollView style={{padding: 20}}>
- <Text onPress={() => this.about()}>About</Text>
- <Text style={{fontSize: 27}}>{this.state.page}</Text>
- <TextInput
- placeholder='Email Address'
- autoCapitalize='none'
- autoCorrect={false}
- autoFocus={true}
- keyboardType='email-address'
- value={this.state.username}
- onChangeText={(text) => this.setState({ username: text })} />
- <TextInput
- placeholder='Password'
- autoCapitalize='none'
- autoCorrect={false}
- secureTextEntry={true}
- value={this.state.password}
- onChangeText={(text) => this.setState({ password: text })} />
- <View style={{margin: 7}}/>
- <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
- <View style={styles.firstView}>
- <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
- {this.alt}
- </Text>
- </View>
- </ScrollView>
- );
- }
- }
- const styles = StyleSheet.create({
- buttons: {
- fontSize: 12,
- color: 'blue',
- flex: 1
- },
- firstView: {
- margin: 7,
- flexDirection: 'row',
- justifyContent: 'center'
- }
- });
- const mapStateToProps = (state, ownProps) => {
- return {
- isLoggedIn: state.auth.isLoggedIn
- };
- }
- const mapDispatchToProps = (dispatch) => {
- return {
- onLogin: (username, password) => { dispatch(login(username, password)); }
- }
- }
- export default connect(mapStateToProps, mapDispatchToProps)(Login);
- import React from 'react';
- import {AboutStack} from '../navigation/router';
- const App = () => {
- return (<AboutStack/>);
- }
- export default App;
- import {StackNavigator} from 'react-navigation';
- import Login from '../pages/Login';
- import About from '../pages/About';
- export const AboutStack = StackNavigator({
- Login: {
- screen: Login,
- navigationOptions: {
- title: 'Login',
- },
- },
- About: {
- screen: About,
- navigationOptions: {
- title: 'About',
- },
- },
- });
- this.props.navigation.navigate('About');
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement