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, View, Button } from 'react-native';
- import { logout } from '../redux/actions/auth';
- import DropdownMenu from 'react-native-dropdown-menu';
- import Icon from './Icon';
- class Secured extends Component {
- render() {
- var data = [["Literacy Leaders"], ["Wrestling Camp"], ["Screenplay Writing"], ["Panetarium Workshop"]];
- return(
- <ScrollView style={{padding: 20}}>
- <Icon/>
- <Text style={{fontSize: 27}}>
- {`Welcome ${this.props.username}`}
- </Text>
- <View style={{flex: 1}}>
- <DropdownMenu style={{flex: 1}}
- bgColor={"purple"} //the background color of the head, default is grey
- tintColor={"white"} //the text color of the head, default is white
- selectItemColor={"orange"} //the text color of the selected item, default is red
- data={data}
- maxHeight={410} // the max height of the menu
- handler={(selection, row) => alert(data[selection][row])} >
- <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} >
- </View>
- </DropdownMenu>
- </View>
- <View style={{margin: 20}}/>
- <Button onPress={(e) => this.userLogout(e)} title="Logout"/>
- </ScrollView>
- );
- }
- }
- const mapStateToProps = (state, ownProps) => {
- return {
- username: state.auth.username
- };
- }
- const mapDispatchToProps = (dispatch) => {
- return {
- onLogout: () => { dispatch(logout()); }
- }
- }
- export default connect(mapStateToProps, mapDispatchToProps)(Secured);
- 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';
- const awsCognitoSettings = {
- UserPoolId: 'something',
- ClientId: 'something'
- };
- class Login extends Component {
- constructor (props) {
- super(props);
- this.state = {
- page: 'Login',
- username: '',
- password: ''
- };
- }
- get alt () { return (this.state.page === 'Login') ? 'SignUp' : '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();
- }
- render() {
- return (
- <ScrollView style={{padding: 20}}>
- {/*<Text style={styles.title}>Welcome!</Text>*/}
- <TextInput
- style={styles.pw}
- placeholder=' Email Address'
- autoCapitalize='none'
- autoCorrect={false}
- autoFocus={true}
- keyboardType='email-address'
- value={this.state.username}
- onChangeText={(text) => this.setState({ username: text })} />
- <TextInput
- style={styles.pw}
- 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={{margin: 7, flexDirection: 'row', justifyContent: 'center'}}>
- <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
- {this.alt}
- </Text>
- </View>
- </ScrollView>
- );
- }
- }
- const styles = StyleSheet.create({
- title: {
- fontSize: 27,
- textAlign: 'center'
- },
- icon: {
- position: 'absolute'
- },
- pw: {
- paddingRight: 90,
- justifyContent: 'flex-end',
- marginBottom: 20,
- backgroundColor: '#9b42f4',
- height: 40,
- borderWidth: 1,
- borderRadius: 5
- },
- buttons: {
- fontFamily: 'AvenirNext-Heavy'
- }
- });
- 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);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement