543 lines
12 KiB
JavaScript
Executable File
543 lines
12 KiB
JavaScript
Executable File
import React, {Component} from 'react';
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
StatusBar,
|
|
Dimensions,
|
|
Image,
|
|
ActivityIndicator,
|
|
Button,
|
|
TouchableHighlight,
|
|
Keyboard,
|
|
ImageBackground,
|
|
LinearGradient,
|
|
TouchableOpacity,
|
|
TextInput,
|
|
NetInfo,
|
|
Animated
|
|
|
|
} from 'react-native';
|
|
|
|
import {bindActionCreators} from 'redux';
|
|
import {connect} from 'react-redux';
|
|
|
|
import QRCodeScanner from 'react-native-qrcode-scanner';
|
|
import {UtilStyles} from './assets/styles'
|
|
|
|
import * as Actions from './store/actions';
|
|
|
|
import {RkButton, RkTheme, RkText, RkTextInput} from 'react-native-ui-kitten';
|
|
|
|
import Modal from "react-native-modal";
|
|
|
|
import Router from './Router'
|
|
|
|
import Icon from "react-native-vector-icons/Ionicons"
|
|
|
|
const SCREEN_HEIGHT = Dimensions.get("window").height;
|
|
const SCREEN_WIDTH = Dimensions.get("window").width;
|
|
|
|
import Swiper from 'react-native-swiper';
|
|
|
|
function handleConnectivityChange() {
|
|
console.log("asdasd");
|
|
}
|
|
class App extends Component {
|
|
|
|
_activate=()=>{
|
|
|
|
this.setState({ isModalVisible: !this.state.isModalVisible});
|
|
this.scanner.reactivate();
|
|
|
|
}
|
|
_scanQr=()=>{
|
|
this.props.openScannerLogin()
|
|
console.log(this.props.UI_loginScannerActive)
|
|
}
|
|
_tryLogin=()=>{
|
|
|
|
//console.log(this.state.text)
|
|
//this.scanner.reactivate();
|
|
this.props.login(this.state.username, this.state.text);
|
|
|
|
|
|
|
|
}
|
|
|
|
_toggleModal = () =>
|
|
this.setState({ isModalVisible: !this.state.isModalVisible });
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
token: {valid: false},
|
|
tokenData: '',
|
|
onHold: true,
|
|
logged: false,
|
|
isModalVisible: false,
|
|
state : {text: ''},
|
|
username:'QR code',
|
|
failedAttempt: false,
|
|
push:4,
|
|
UI_loginScannerActive:false
|
|
|
|
};
|
|
|
|
}
|
|
_print=()=>{
|
|
console.log("hello")
|
|
this.setState({push:0})
|
|
}
|
|
checkValue=(e)=>{
|
|
console.log("check"+e)
|
|
}
|
|
_handleConnectionChange = (isConnected) => {
|
|
this.props.connectionState(true);
|
|
};
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
|
|
|
|
this.setState({isModalVisible: false})
|
|
//verifica se o utilizador tem token guardado
|
|
this.props.checkUser();
|
|
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
|
|
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
|
|
|
|
|
|
}
|
|
componentWillUnmount() {
|
|
NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
|
|
}
|
|
|
|
_keyboardDidShow () {
|
|
//alert('Keyboard Shown');
|
|
// this.setState({push:0})
|
|
|
|
}
|
|
|
|
_keyboardDidHide () {
|
|
|
|
//this.setState({push:4})
|
|
|
|
}
|
|
onSuccess = (e) => {
|
|
|
|
// this.setState({ isModalVisible: !this.state.isModalVisible });
|
|
// this.props.login(e.data, 'f8908cc0');
|
|
this.props.closeLoginQRScan();
|
|
this.setState({username:e.data})
|
|
|
|
console.log("QR code lido");
|
|
|
|
|
|
|
|
};
|
|
|
|
render() {
|
|
|
|
if (!this.props.logged) {
|
|
|
|
|
|
return (
|
|
<View style={UtilStyles.containerLoading}>
|
|
|
|
<ActivityIndicator size="large" color="red"/>
|
|
</View>
|
|
)
|
|
|
|
}
|
|
else
|
|
{
|
|
|
|
// console.log('token... '+ this.props.logged)
|
|
|
|
//se existir token
|
|
|
|
if (this.props.logged ) {
|
|
|
|
return (
|
|
|
|
<Router></Router>
|
|
)
|
|
}
|
|
return (
|
|
|
|
|
|
|
|
<View style={styles.slide2}>
|
|
<Modal isVisible={this.props.UI_loginScannerActive}>
|
|
<View style={{ flex: 1 , backgroundColor:'white'}}>
|
|
<Button onPress={this.props.closeLoginQRScan} title={"Fechar scanner"}> </Button>
|
|
|
|
<QRCodeScanner
|
|
onRead={this.onSuccess}
|
|
cameraStyle={ styles.cameraContainer}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/>
|
|
</View>
|
|
|
|
</Modal>
|
|
<View style={{ width:'100%',
|
|
|
|
justifyContent: 'center',
|
|
alignItems: 'center',}}>
|
|
<Image style={styles.logo2} source={require('./assets/img/logo2.png')}/>
|
|
|
|
</View>
|
|
<View styles={styles.loginContainer}>
|
|
|
|
|
|
|
|
|
|
<View style={styles.inputSection}>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder={this.state.username}
|
|
onChangeText={(searchString) => {this.setState({searchString})}}
|
|
maxLength={15}
|
|
underlineColorAndroid="transparent"
|
|
/>
|
|
<TouchableOpacity onPress={this._scanQr}>
|
|
|
|
<View style={styles.scanQR}>
|
|
|
|
<Icon style={styles.searchIcon} name="ios-qr-scanner" size={30} color="#000"/>
|
|
<Text>Scan QR</Text>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
<TextInput style={styles.passwordInput}
|
|
onFocus={this._print}
|
|
maxLength={10}
|
|
blurOnSubmit ={true}
|
|
secureTextEntry={true}
|
|
|
|
onChangeText={(text) => this.setState({text})}
|
|
clearButtonMode='always'
|
|
value={this.state.text}
|
|
clearTextOnFocus={true}
|
|
onSubmitEditing={Keyboard.dismiss}
|
|
placeholder='Password' />
|
|
|
|
<RkButton rkType='dark' style={styles.loginBtn} onPress={this._tryLogin}>Entrar</RkButton>
|
|
|
|
</View>
|
|
|
|
<View style={ styles.buttons }>
|
|
<TouchableOpacity
|
|
style={styles.button}>
|
|
|
|
<Icon name="logo-facebook" size={40}/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.button}>
|
|
|
|
<Icon name="logo-instagram" size={40}/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.button}>
|
|
|
|
<Icon name="md-heart" size={40}/>
|
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<View style={styles.textRow}>
|
|
|
|
<RkText rkType='primary3'>Não sabes a password?</RkText>
|
|
<RkButton rkType='clear' onPress={this.onSignUpButtonPressed}>
|
|
|
|
<TouchableOpacity>
|
|
<RkText style={{color:'red'}} kType='header6'>Recuperar Password</RkText>
|
|
</TouchableOpacity>
|
|
|
|
</RkButton>
|
|
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
|
|
);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
RkTheme.setType('RkButton', 'dark', {
|
|
container: {
|
|
paddingTop: 10,
|
|
backgroundColor: 'gray',
|
|
|
|
borderRadius: 90,
|
|
}
|
|
});
|
|
|
|
|
|
const rectDimensions = SCREEN_WIDTH * 0.85; // this is equivalent to 255 from a 393 device width
|
|
|
|
const overlayColor = 'rgba(0,0,0,0.30)';
|
|
|
|
const styles = {
|
|
cameraContainer:{
|
|
// height: Dimensions.get('window').height ,
|
|
},
|
|
passwordInput:{
|
|
borderRadius: 90,
|
|
|
|
borderColor:'#bfbdbd',
|
|
borderWidth: 1,
|
|
marginTop:20,
|
|
marginBottom:20,
|
|
width:SCREEN_WIDTH*0.8,
|
|
|
|
backgroundColor: 'white',
|
|
|
|
borderRadius: 90,
|
|
height: SCREEN_HEIGHT*0.08,
|
|
borderColor:'#bfbdbd',
|
|
borderWidth: 1,
|
|
paddingLeft:SCREEN_WIDTH*0.05,
|
|
|
|
},
|
|
scanQRText:{
|
|
|
|
paddingTop:50
|
|
// paddingTop:20,
|
|
|
|
|
|
},
|
|
scanQR:{
|
|
|
|
//flexDirection: 'row',
|
|
paddingTop:5,
|
|
backgroundColor:10,
|
|
|
|
width:80,
|
|
paddingLeft:10,
|
|
backgroundColor:'#f24b4b',
|
|
borderBottomRightRadius:90,
|
|
borderTopRightRadius:90,
|
|
height:'100%',
|
|
|
|
},
|
|
inputSection: {
|
|
|
|
flexDirection: 'row',
|
|
backgroundColor: '#fff',
|
|
|
|
backgroundColor: 'white',
|
|
|
|
borderRadius: 90,
|
|
height: SCREEN_HEIGHT*0.08,
|
|
borderColor:'#bfbdbd',
|
|
borderWidth: 1,
|
|
|
|
|
|
},
|
|
searchIcon: {
|
|
paddingLeft:10
|
|
},
|
|
|
|
input: {
|
|
|
|
|
|
|
|
flex: 1,
|
|
paddingRight: 10,
|
|
|
|
|
|
paddingLeft: 0,
|
|
paddingLeft:SCREEN_WIDTH*0.05,
|
|
color: '#424242',
|
|
|
|
},
|
|
textRow:{
|
|
marginBottom:40
|
|
},
|
|
loginContainer:{
|
|
width: '100%',
|
|
height: '30%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
},
|
|
loginBtn:{
|
|
marginTop:10,
|
|
marginBottom:20,
|
|
marginLeft: '25%',
|
|
|
|
},
|
|
|
|
button: {
|
|
borderWidth:1,
|
|
borderColor:'rgba(0,0,0,0.2)',
|
|
alignItems:'center',
|
|
justifyContent:'center',
|
|
width:60,
|
|
height:60,
|
|
backgroundColor:'#fff',
|
|
borderRadius:100,
|
|
marginRight: 10,
|
|
marginLeft:10
|
|
},
|
|
footer: {},
|
|
|
|
buttons: {
|
|
flexDirection: 'row',
|
|
marginBottom: 24,
|
|
marginHorizontal: 24,
|
|
marginTop:24,
|
|
justifyContent: 'space-around',
|
|
|
|
|
|
},
|
|
|
|
logoContainer:{
|
|
|
|
width:'100%',
|
|
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginTop:200
|
|
|
|
},
|
|
|
|
logo2:{
|
|
|
|
// flex: 1,
|
|
// resizeMode: 'contain',
|
|
width: 200, height: 200,
|
|
|
|
},
|
|
wrapper: {
|
|
},
|
|
slide1: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'white',
|
|
},
|
|
slide2: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'white',
|
|
},
|
|
slide3: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
color:'black',
|
|
backgroundColor: 'white',
|
|
},
|
|
text: {
|
|
color: '#fff',
|
|
fontSize: 30,
|
|
fontWeight: 'bold',
|
|
},
|
|
recover: {
|
|
paddingTop: 10,
|
|
color: "red",
|
|
paddingBottom: 10
|
|
},
|
|
manual: {},
|
|
|
|
logo: {
|
|
|
|
height: SCREEN_HEIGHT * 0.35,
|
|
width: SCREEN_WIDTH,
|
|
backgroundColor: overlayColor,
|
|
},
|
|
rectangleContainer: {
|
|
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "transparent",
|
|
|
|
},
|
|
|
|
rectangle: {
|
|
|
|
height: rectDimensions,
|
|
width: rectDimensions,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "transparent"
|
|
},
|
|
|
|
topOverlay: {
|
|
flex: 1,
|
|
backgroundColor: overlayColor,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
|
|
bottomOverlay: {
|
|
flex: 1,
|
|
height: SCREEN_HEIGHT,
|
|
width: SCREEN_WIDTH,
|
|
backgroundColor: overlayColor,
|
|
paddingBottom: SCREEN_WIDTH * 0.2
|
|
},
|
|
|
|
leftAndRightOverlay: {
|
|
height: rectDimensions,
|
|
width: SCREEN_WIDTH,
|
|
backgroundColor: overlayColor
|
|
},
|
|
};
|
|
RkTheme.setType('RkTextInput', 'frame', {
|
|
input: {
|
|
backgroundColor: 'white',
|
|
marginLeft: 0,
|
|
marginHorizontal: 0,
|
|
borderRadius: 5
|
|
},
|
|
color: 'gray',
|
|
backgroundColor: 'gray',
|
|
borderRadius: 10,
|
|
container: {
|
|
paddingHorizontal: 20
|
|
}
|
|
});
|
|
|
|
mapStateToProps = (state, props) => {
|
|
|
|
return {
|
|
token: state.apiReducer.token,
|
|
loggedIn: state.apiReducer.loggedIn,
|
|
onHold: state.apiReducer.onHold,
|
|
logged: state.apiReducer.logged,
|
|
failedAttempt:state.apiReducer.failedAttempt,
|
|
UI_loginScannerActive: state.uiReducer.UI_loginScannerActive
|
|
}
|
|
};
|
|
|
|
mapDispatchToProps = (dispatch) => {
|
|
|
|
return bindActionCreators(Actions, dispatch);
|
|
};
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(App); |