427 lines
14 KiB
JavaScript
427 lines
14 KiB
JavaScript
import React, {Component} from 'react'
|
|
import {Card, Divider,} from 'react-native-elements'
|
|
import {
|
|
Image,
|
|
ImageBackground,
|
|
Linking,
|
|
ListView,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Dimensions,
|
|
TextInput,
|
|
Button,
|
|
} from 'react-native'
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {connect, Provider} from "react-redux";
|
|
import {bindActionCreators} from "redux";
|
|
import * as Actions from "../store/actions";
|
|
|
|
import {Validate} from '../Helpers/Validation'
|
|
import {RkTextInput} from 'react-native-ui-kitten';
|
|
|
|
import {createStore} from 'redux';
|
|
|
|
|
|
import Email from '../components/Email';
|
|
|
|
import Separator from '../components/Separator';
|
|
import Tel from '../components/Telephone';
|
|
|
|
|
|
const SCREEN_HEIGHT = Dimensions.get("window").height;
|
|
const SCREEN_WIDTH = Dimensions.get("window").width;
|
|
import Icon from "react-native-vector-icons/Ionicons"
|
|
|
|
class Profile extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
name: this.props.user.Name,
|
|
userDetails: {},
|
|
token: false,
|
|
tokenData: '',
|
|
loggedIn: false,
|
|
onHold: true,
|
|
user: {},
|
|
cenas: {Name: 'as'},
|
|
text: '',
|
|
|
|
|
|
formValid: true,
|
|
|
|
jobs: this.props.user.Company,
|
|
jobsError: false,
|
|
jobsErrorMessage: '',
|
|
|
|
email: this.props.user.Email,
|
|
emailError: false,
|
|
emailErrorMessage: '',
|
|
|
|
phone: this.props.user.Mobile,
|
|
phoneError: false,
|
|
phoneErrorMessage: '',
|
|
|
|
address: this.props.user.Address,
|
|
addressError: false,
|
|
addressErrorMessage: '',
|
|
|
|
city: this.props.user.City,
|
|
cityError: false,
|
|
cityErrorMessage: '',
|
|
|
|
oldPass:'',
|
|
new1:'',
|
|
new2:'',
|
|
|
|
url:this.props.user.Url,
|
|
curso:this.props.user.LastName,
|
|
|
|
|
|
};
|
|
}
|
|
|
|
_press=()=>{
|
|
this.props.changePassword(
|
|
this.props.token,
|
|
this.state.oldPass,
|
|
this.state.new1,
|
|
this.state.new2
|
|
)
|
|
}
|
|
_logout = () => {
|
|
|
|
this.props.logoutUser();
|
|
};
|
|
|
|
|
|
_validateData = (name, jobs, email, phone, address, city) => {
|
|
let valid = null;
|
|
|
|
v = Validate('name', name);
|
|
|
|
|
|
let v = Validate('email', email);
|
|
this.setState({emailError: v[0], emailErrorMessage: v[1]});
|
|
|
|
v = Validate('jobs', jobs);
|
|
|
|
// 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({jobsError: v[0], jobsErrorMessage: v[1]}, () => {
|
|
|
|
console.log('email error: ' + this.state.emailError + ' job Error: ' + this.state.jobsError);
|
|
});
|
|
|
|
|
|
v = Validate('city', city);
|
|
|
|
// 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({cityError: v[0], cityErrorMessage: v[1]})
|
|
|
|
|
|
v = Validate('address', address);
|
|
|
|
// 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({addressError: v[0], addressErrorMessage: v[1]});
|
|
|
|
|
|
v = Validate('city', city);
|
|
|
|
// 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({cityError: v[0], cityErrorMessage: v[1]}, () => {
|
|
console.log(this.state.cityError + ' Error: ' + this.state.addressError);
|
|
|
|
if (this.state.emailError || this.state.jobsError || this.state.phoneError || this.state.addressError || this.state.cityError)
|
|
this.setState({formValid: false});
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
saveData() {
|
|
|
|
const {name, jobs, email, phone, address, city, formValid, url,curso} = this.state;
|
|
|
|
// this._validateData(name, jobs, email, phone, address, city,curso);
|
|
|
|
console.log(formValid);
|
|
|
|
if (formValid) {
|
|
console.log("data valid");
|
|
|
|
this.props.updateUser(this.props.token, {
|
|
Name: this.state.name,
|
|
Company: jobs,
|
|
LastName: curso,
|
|
Address: address,
|
|
City: city,
|
|
Mobile: phone,
|
|
Avatar: "base64",
|
|
Url:url,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
else
|
|
console.log("data not valid");
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<View style={{flex: 1}}>
|
|
<ScrollView style={{backgroundColor: '#eee'}}>
|
|
<View style={styles.container}>
|
|
<View style={styles.userBioRowHeader}>
|
|
<View style={styles.userBioRowTitle}>
|
|
<Text style={{color: '#CC1A17', fontWeight: 'bold', fontSize: 20}}>Informações Pessoais</Text>
|
|
</View>
|
|
|
|
</View>
|
|
<View style={styles.userBio}>
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >Nome</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(n) => {
|
|
this.setState({name: n})
|
|
}}
|
|
value={this.state.name}/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >Curso</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(cu) => {
|
|
this.setState({curso: cu})
|
|
}}
|
|
value={this.state.curso}/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >Faculdade</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(job) => {
|
|
this.setState({jobs: job})
|
|
}}
|
|
value={this.state.jobs}/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >Telemóvel</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(phone) => {
|
|
this.setState({phone: phone})
|
|
}}
|
|
value={this.state.phone}/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >Morada</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(add) => {
|
|
this.setState({address: add})
|
|
}}
|
|
value={this.state.address}/>
|
|
</View>
|
|
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
<View style={styles.userBioRow}>
|
|
<Text style={styles.userBioLogo} >LinkedIn</Text>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
onChangeText={(u) => {
|
|
this.setState({url: u})
|
|
}}
|
|
value={this.state.url}/>
|
|
</View>
|
|
|
|
|
|
<Button onPress={() => this.saveData() } title="Guardar Alterações" color="#CC1A17"
|
|
/>
|
|
|
|
</View>
|
|
</View>
|
|
|
|
{/*PassWord Edit*/}
|
|
<View style={styles.container}>
|
|
<View style={styles.userBioRowHeader}>
|
|
<View style={styles.userBioRowTitle}>
|
|
<Text style={{color: '#CC1A17', fontWeight: 'bold', fontSize: 20}}>Alterar Password</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.userBio}>
|
|
|
|
|
|
<View style={styles.userBioRow}>
|
|
|
|
<TextInput style={styles.userBioText}
|
|
placeholder='Antiga Password'
|
|
onChangeText={(old => {
|
|
this.setState({oldPass: old})
|
|
})}
|
|
value={this.state.oldPass}
|
|
maxLength = {20}
|
|
|
|
secureTextEntry={true}
|
|
/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
<View style={styles.userBioRow}>
|
|
|
|
|
|
<TextInput style={styles.userBioText}
|
|
placeholder='Nova Password'
|
|
secureTextEntry={true}
|
|
onChangeText={(newz => {
|
|
this.setState({new1: newz})
|
|
})}
|
|
value={this.state.new1}
|
|
maxLength = {20}
|
|
/>
|
|
</View>
|
|
<Divider style={{backgroundColor: 'black'}}/>
|
|
|
|
<View style={styles.userBioRow}>
|
|
|
|
|
|
<TextInput style={styles.userBioText}
|
|
placeholder='Repetir Password'
|
|
secureTextEntry={true}
|
|
onChangeText={(newzz => {
|
|
this.setState({new2: newzz})
|
|
})}
|
|
value={this.state.new2}
|
|
maxLength = {20}
|
|
/>
|
|
</View>
|
|
|
|
<Button onPress={this._press} title="Alterar Password" color="#CC1A17"
|
|
/>
|
|
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity onPress={this._logout} style={{
|
|
height: 50,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'black',
|
|
marginTop:30
|
|
}}>
|
|
<Text style={{color: "#fff", fontWeight: 'bold'}}>Logout</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
|
flex: 1,
|
|
padding: 10,
|
|
margin: 20,
|
|
backgroundColor: 'white',
|
|
borderRadius: 5,
|
|
},
|
|
|
|
userBioRowHeader: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
userBioRowTitle: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
padding: 10,
|
|
},
|
|
|
|
userBioRow: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-start',
|
|
padding: 10,
|
|
// borderWidth: 2,
|
|
alignItems: 'center',
|
|
|
|
},
|
|
userBioText: {
|
|
width: SCREEN_WIDTH * 0.40,
|
|
flex: 2,
|
|
// borderWidth: 2,
|
|
},
|
|
|
|
userPassText: {
|
|
flex: 1,
|
|
//alignSelf: 'flex-start',
|
|
justifyContent: 'flex-end',
|
|
borderWidth: 2,
|
|
},
|
|
|
|
userBioLogo: {
|
|
marginLeft: 10,
|
|
width:80,
|
|
},
|
|
|
|
bottomLogOut: {
|
|
height: 20,
|
|
},
|
|
|
|
|
|
});
|
|
|
|
mapStateToProps = (state, props) => {
|
|
|
|
return {
|
|
|
|
token: state.apiReducer.token,
|
|
user: state.apiReducer.user,
|
|
userDetails: state.apiReducer.userDetails,
|
|
}
|
|
};
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
|
|
return bindActionCreators(Actions, dispatch);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Profile); |