ModifyPassword.js 3.49 KB
'use strict';

import React from 'react-native';
import Button from 'apsl-react-native-button';

let {
    StyleSheet,
    Component,
    View,
    Image,
    Text,
    Dimensions,
    TextInput,
    Platform,
    TouchableWithoutFeedback
} = React;

export default class ModifyPassword extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        oldPwd: React.PropTypes.string,
        newPwd: React.PropTypes.string,
        repeatPwd: React.PropTypes.string,
        onModifyOldPwd:React.PropTypes.func,
        onModifyNewPwd:React.PropTypes.func,
        onModifyRepeatPwd:React.PropTypes.func,
        onModifySubmitPress:React.PropTypes.func,
    };

	render() {

        return (
          <View style={styles.container}>
              <View style={styles.accountContainer }>
                <Text style={styles.text}>
                   原密码 
                </Text>
                <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyOldPwd}
                  value={this.props.oldPwd}
                />
              </View>
              <View style={styles.line}/>
                <View style={styles.accountContainer }>
                    <Text style={styles.text}>
                    现密码 
                </Text>
                <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyNewPwd}
                  value={this.props.newPwd}
                />
              </View>
              <View style={styles.line}/>
                <View style={styles.accountContainer }>
                  <Text style={styles.text}>
                    再输一次
                  </Text>
                  <TextInput
                  style={styles.pwd}
                  secureTextEntry={true}
                  underlineColorAndroid='transparent'
                  onChangeText={this.props.onModifyRepeatPwd}
                  value={this.props.repeatPwd}
                />
              </View>
              <Button style={styles.button}
                textStyle={styles.buttonText}
                onPress={this.props.onModifySubmitPress}
              >
                确定
              </Button>
          </View>
        );
    }
}

let {height, width} = Dimensions.get('window');
let textPaddingTop = height * 7 / 10;
let buttonMargin = (width - 320) / 2;
var styles = StyleSheet.create({
    container:{
      flex: 1,
      flexDirection: 'column',
      alignItems: 'center',
      width: width,
      height: height,
      top:(Platform.OS === 'android') ? 50 : 64,
      backgroundColor: '#F5FCFF'
    },
    accountContainer:{
      flexDirection: 'row',
      width: width,
      height: 40,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white'
    },
    text:{
      flex:1,
      marginLeft: buttonMargin,
      marginRight: buttonMargin,
      color:'black',
    },
    pwd: {
      flex: 4,
      borderColor: 'gray',
      textAlignVertical:'center',
    },
    button: {
      marginLeft: buttonMargin,
      marginRight: buttonMargin,
      marginTop: 20,
      backgroundColor: '#d0021b',
      borderRadius:5,
    },
    buttonText: {
      color: '#ffffff',
      fontSize: 18,
    },
    line:{
      width: width,
      height: 1,
      
    }
});