zmiguel
/
ENEI2019-Public
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #18 from henrydays/Borges 

Login by qr code scanner
This commit is contained in:
Henrique Dias 2019-01-26 15:09:18 +00:00 committed by GitHub
parent b5e4a9bad4 e6f6544df0
commit 2f9c4cd671
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 155 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
App/android/app/build.gradle
View File

@ -138,6 +138,7 @@ android {
}
dependencies {
compile project(':react-native-camera')
compile project(':react-native-vector-icons')
compile project(':react-native-gesture-handler')
implementation fileTree(dir: "libs", include: ["*.jar"])

1
App/android/app/src/main/AndroidManifest.xml
View File

@ -3,6 +3,7 @@
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<application
android:name=".MainApplication"

2
App/android/app/src/main/java/com/app/MainApplication.java
View File

@ -3,6 +3,7 @@ package com.app;
import android.app.Application;
import com.facebook.react.ReactApplication;
import org.reactnative.camera.RNCameraPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.facebook.react.ReactNativeHost;
@ -25,6 +26,7 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage(),
new VectorIconsPackage(),
new RNGestureHandlerPackage()
);

2
App/android/settings.gradle
View File

@ -1,4 +1,6 @@
rootProject.name = 'app'
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-gesture-handler'

5
App/app/assets/styles.js
View File

@ -5,7 +5,6 @@ export const UtilStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
containerLoading: {
flex: 1,
@ -101,8 +100,8 @@ export const UtilStyles = StyleSheet.create({
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width: 160,
height: 149.2,
width: 80, //160/2
height: 74.6 // 149.2/2
},
//------------------//

186
App/app/screens/Login.js
View File

@ -1,13 +1,16 @@
import React, {Component, Fragment} from 'react'
import {View, Text, TextInput, Image, ScrollView} from 'react-native'
import {RkTheme, RkButton, RkTextInput, RkText} from 'react-native-ui-kitten'
import {View, Image, Vibration, Dimensions} from 'react-native'
import Icon from "react-native-vector-icons/Ionicons";
import {UtilStyles} from '../assets/styles'
import {Validate} from '../Helpers/Validation'
import axios from 'axios';
import deviceStorage from '../services/deviceStorage';
import QRCodeScanner from 'react-native-qrcode-scanner';
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
export default class Login extends Component {
@ -17,119 +20,100 @@ export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
formValid: false,
email: '',
emailError: false,
emailErrorMessage: '',
password: '',
passwordError: false,
passwordErrorMessage: '',
loading: false
};
}
_validatelogin = (email, password) => {
let valid = null;
onSuccess = (e) => {
console.log(e.data)
let v = Validate('email', email);
this.setState({emailError: v[0], emailErrorMessage: v[1]});
v = Validate('password', password);
// setState is asynchronous and so trying to work with state directly after a setState
// call won't work as the update won't necessarily have run. Instead you can use the second argument to setState which is a callback
this.setState({passwordError: v[0], passwordErrorMessage: v[1]}, function () {
console.log('Email error: ' + this.state.emailError + ' Pass Error: ' + this.state.passwordError);
});
if (this.state.emailError && this.state.passwordError)
this.setState({formValid: false});
else
this.setState({formValid: true});
};
login() {
const {email, password, formValid} = this.state;
this.setState({loading: true});
this._validatelogin(email, password);
console.log(formValid);
if (formValid) {
axios.post("https://reqres.in/api/login", {
email: email,
password: password
}) //https://reqres.in/api/login email: email, password: password,
.then(response => {
console.log(response)
// Save Token
deviceStorage.saveItem('userToken', response.data.token);
})
.catch((error) => {
console.log(error)
});
}
}
render() {
//const { email, password, error, loading } = this.state;
return (
<ScrollView>
<View style={[UtilStyles.section, {backgroundColor: RkTheme.current.colors.input}]}>
<Image style={UtilStyles.loginImage}
source={require('../assets/img/logo.png')}
/>
<QRCodeScanner
showMarker
onRead={this.onSuccess.bind(this)}
cameraStyle={{ height: SCREEN_HEIGHT }}
customMarker={
<View style={styles.rectangleContainer}>
<View style={styles.topOverlay}>
<Image style={UtilStyles.loginImage}
source={require('../assets/img/logo.png')}
/>
</View>
<View style={UtilStyles.rowContainer}>
<View style={{flex: 1}}>
<RkTextInput rkType='rounded' style={this.state.emailError ? UtilStyles.errorInput : ''}
placeholder='Login' keyboardType='email-address'
onChangeText={(email) => {
this.setState({email: email});
}}
value={this.state.email}
/>
{this.state.emailError &&
<RkText style={UtilStyles.errorMsg}>{this.state.emailErrorMessage}</RkText>}
<RkTextInput
secureTextEntry={true} style={this.state.passwordError ? UtilStyles.errorInput : ''}
rkType='rounded' placeholder='Password'
onChangeText={(pass) => {
this.setState({password: pass});
}}
value={this.state.password}
<View style={{ flexDirection: "row" }}>
<View style={styles.leftAndRightOverlay}>
</View>
/>
{this.state.passwordError &&
<RkText style={UtilStyles.errorMsg}>{this.state.passwordErrorMessage}</RkText>}
<View style={styles.rectangle}>
<Icon
name="ios-qr-scanner"
size={SCREEN_WIDTH}
color={"#fff"}
/>
</View>
<View style={styles.leftAndRightOverlay}>
</View>
</View>
<View style={styles.bottomOverlay}>
</View>
</View>
<RkButton style={{marginTop: 30}} rkType='rounded xlarge' onPress={() => this.login()}>
Login
</RkButton>
</View>
</ScrollView>
}
/>
);
}
}
const rectDimensions = SCREEN_WIDTH * 0.85; // this is equivalent to 255 from a 393 device width
const overlayColor = 'rgba(0,0,0,0.85)';
const styles = {
rectangleContainer: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "transparent"
},
rectangle: {
height: rectDimensions,
width: rectDimensions,
alignItems: "center",
justifyContent: "center",
backgroundColor: "transparent"
},
topOverlay: {
flex: 1,
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH,
backgroundColor: overlayColor,
justifyContent: "center",
alignItems: "center"
},
bottomOverlay: {
flex: 1,
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH,
backgroundColor: overlayColor,
paddingBottom: SCREEN_WIDTH * 0.25
},
leftAndRightOverlay: {
height: rectDimensions,
width: SCREEN_WIDTH,
backgroundColor: overlayColor
},
};

38
App/ios/app.xcodeproj/project.pbxproj
View File

@ -55,6 +55,8 @@
E0EBA1E2E13F4334A592B601 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ECCE518B417341FEAE18531B /* Octicons.ttf */; };
C8D04720A2D1470CAB9B7220 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 03500D5C3CEB40069E65C5F5 /* SimpleLineIcons.ttf */; };
F0077E0362CD4B6885EF7B0B /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C368D781572D4675982B0DF3 /* Zocial.ttf */; };
9D2AA5F8DBA2405C81CC59BA /* libRNCamera.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0A3A145881DD42A487693766 /* libRNCamera.a */; };
06E7FF60D1524094B342DB35 /* libReactNativePermissions.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3555D25E18F04E3EBE04F921 /* libReactNativePermissions.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -380,6 +382,10 @@
ECCE518B417341FEAE18531B /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
03500D5C3CEB40069E65C5F5 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
C368D781572D4675982B0DF3 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
BBE7E4A88E084E59BDB7FB27 /* RNCamera.xcodeproj */ = {isa = PBXFileReference; name = "RNCamera.xcodeproj"; path = "../node_modules/react-native-camera/ios/RNCamera.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
0A3A145881DD42A487693766 /* libRNCamera.a */ = {isa = PBXFileReference; name = "libRNCamera.a"; path = "libRNCamera.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
B07262C912594CAE95756602 /* ReactNativePermissions.xcodeproj */ = {isa = PBXFileReference; name = "ReactNativePermissions.xcodeproj"; path = "../node_modules/react-native-permissions/ios/ReactNativePermissions.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
3555D25E18F04E3EBE04F921 /* libReactNativePermissions.a */ = {isa = PBXFileReference; name = "libReactNativePermissions.a"; path = "libReactNativePermissions.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -409,6 +415,8 @@
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
F325F03AB843442BAF40F951 /* libRNGestureHandler.a in Frameworks */,
7BC549BBA24F4EB7B232B565 /* libRNVectorIcons.a in Frameworks */,
9D2AA5F8DBA2405C81CC59BA /* libRNCamera.a in Frameworks */,
06E7FF60D1524094B342DB35 /* libReactNativePermissions.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -598,6 +606,8 @@
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
C8A09E19B2BD4219B1EE72AE /* RNGestureHandler.xcodeproj */,
3B95FB533C1840349498FA7B /* RNVectorIcons.xcodeproj */,
BBE7E4A88E084E59BDB7FB27 /* RNCamera.xcodeproj */,
B07262C912594CAE95756602 /* ReactNativePermissions.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -1267,11 +1277,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Debug;
@ -1296,11 +1310,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Release;
@ -1325,6 +1343,8 @@
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Debug;
@ -1348,6 +1368,8 @@
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Release;
@ -1380,11 +1402,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Debug;
@ -1417,11 +1443,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Release;
@ -1453,11 +1483,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Debug;
@ -1489,11 +1523,15 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)\..\node_modules\react-native-gesture-handler\ios/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-camera\ios/**",
"$(SRCROOT)\..\node_modules\react-native-permissions\ios/**",
);
};
name = Release;

22
App/package-lock.json generated
View File

@ -6794,6 +6794,14 @@
"resolved": "https://registry.npmjs.org/react-native-app-intro-slider/-/react-native-app-intro-slider-1.0.1.tgz",
"integrity": "sha512-5Gzg5FG2uP/RHkSDFB5+2df4vQ2FpyUJ5PGYd23lLEISsEOJe0Zredh1hHMJj+fB5D9B7ZoL0IlR+SNn8iFxHg=="
},
"react-native-camera": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-1.9.1.tgz",
"integrity": "sha512-U6CCeQN9fkVhePVGUpFgex70Q8ci1KbXRN3i7I8SZQEn2+auiOGU11Unw+UkicHghmL9f+VYH5TpHK0SdNj0Mw==",
"requires": {
"prop-types": "^15.6.2"
}
},
"react-native-gesture-handler": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.12.tgz",
@ -6811,6 +6819,20 @@
}
}
},
"react-native-permissions": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/react-native-permissions/-/react-native-permissions-1.1.1.tgz",
"integrity": "sha512-t0Ujm177bagjUOSzhpmkSz+LqFW04HnY9TeZFavDCmV521fQvFz82aD+POXqWsAdsJVOK3umJYBNNqCjC3g0hQ=="
},
"react-native-qrcode-scanner": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/react-native-qrcode-scanner/-/react-native-qrcode-scanner-1.1.2.tgz",
"integrity": "sha512-ID/s6za6N1m+V5dgzGZYr+rf9txuTYEnqqkowR8hujm9ddPRJEkXXGkoR6Y18WnpDGS7eDEt2BNPLXFkLLYhvQ==",
"requires": {
"prop-types": "^15.5.10",
"react-native-permissions": "^1.1.1"
}
},
"react-native-safe-area-view": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz",

2
App/package.json
View File

@ -11,7 +11,9 @@
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-app-intro-slider": "^1.0.1",
"react-native-camera": "^1.9.1",
"react-native-gesture-handler": "^1.0.12",
"react-native-qrcode-scanner": "^1.1.2",
"react-native-ui-kitten": "^3.1.2",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^3.0.9"