decorate_touch/jscore/pages/Mine/ChangePassword.js

import React, {Component} from 'react';
import {
    View,
    Text, StyleSheet, StatusBar,
} from 'react-native';

import {connect} from 'react-redux'
import {Button, InputItem,} from "@ant-design/react-native";
import ComponentsStyles from "../../components/ComponentsStyles";
import SyncStorage from "sync-storage";
import {createAction} from "../../utils";

@connect(auth => ({...auth}))
class ChangePassword extends Component {
    constructor(props) {
        super(props);
        const credential = SyncStorage.get('credential');
        this.state = {
            old_password: "",
            new_password: "",
            new_password_repeat: "",
            newPropsText: '',
            confirmPropsText: "",
            oldPropsText: "",
            user_id:credential.user_id
        }
    }

    componentDidMount() {
    }

    // 原始密码聚焦的时候触发
    oldFocus = () => {
        if (this.state.newPropsText === "请先输入原始密码") {
            this.setState({
                newPropsText: ""
            })
        }
        if (this.state.oldPropsText) {
            this.setState({
                oldPropsText: ""
            })
        }
    }
    // 新密码聚焦的时候触发
    newFocus = () => {
        if (this.state.old_password == "") {
            this.setState({
                newPropsText: "请先输入原始密码"
            })
        }
        if (this.state.confirmPropsText == '请先输入新密码') {
            this.setState({
                confirmPropsText: ""
            })
        }
        if (this.state.newPropsText == '请输入新密码') {
            this.setState({
                newPropsText: ""
            })
        }
    }
    // 新密码输入框失去焦点的时候触发
    newBlur = () => {
        if (this.state.old_password == "") {
            this.setState({
                newPropsText: "请先输入原始密码"
            })
        } else if (this.state.old_password == this.state.new_password) {
            this.setState({
                newPropsText: "新密码与原始密码一致，请重新输入"
            })
            return false
        } else {
            this.setState({
                newPropsText: ""
            })
        }
    }
    // 确认密码聚焦的时候触发
    confirmFocus = () => {
        if (!this.state.new_password) {
            this.setState({
                confirmPropsText: '请先输入新密码'
            })
        }
        if (this.state.confirmPropsText == '请输入新密码') {
            this.setState({
                confirmPropsText: ""
            })
        }
    }
    // 确认密码失去焦点的时候触发
    confirmBlur = () => {
        if (this.state.new_password_repeat && this.state.new_password !== this.state.new_password_repeat) {
            this.setState({
                confirmPropsText: '两次输入的新密码不一致，请重新输入'
            })
            return false
        } else if (this.state.new_password == this.state.new_password_repeat) {
            this.setState({
                confirmPropsText: ''
            })
            return true
        }
    }
    // 确定修改密码的时候执行
    confirmHandle = () => {
        const {old_password, oldPropsText, new_password, newPropsText, new_password_repeat, confirmPropsText} = this.state;
        if (!old_password) {
            this.setState({
                oldPropsText: "请输入原始密码"
            })
        }
        if (!new_password) {
            this.setState({
                newPropsText: '请输入新密码'
            })
        }
        if (!new_password_repeat) {
            this.setState({
                confirmPropsText: '请输入确认密码'
            })
        }
        if (old_password && oldPropsText) {
            this.setState({
                oldPropsText: ""
            })
        }
        if (new_password && newPropsText) {
            this.setState({
                newPropsText: ""
            })
        }
        if (new_password_repeat && confirmPropsText === "请输入确认密码") {
            this.setState({
                confirmPropsText: ""
            })
        }
        if (old_password && new_password && old_password === new_password) {
            this.setState({
                newPropsText: "新密码与原始密码一致，请重新输入"
            })
        }
        if (new_password && new_password_repeat && new_password !== new_password_repeat) {
            this.setState({
                confirmPropsText: '两次输入的新密码不一致，请重新输入'
            })
        }
        if (old_password && new_password && new_password_repeat && old_password !== new_password && new_password === new_password_repeat) {
            if (confirmPropsText) {
                this.setState({
                    confirmPropsText: ''
                })
            }
            // 执行修改操作
            this.props.dispatch({
                type: 'auth/changePassword',
                payload: this.state,
                callback: () => {
                    this.setState({
                        replyContent: ''
                    })
                    this.props.dispatch(createAction('auth/logout')());
                }
            });
        }
    }

    render() {
        const {loading} = this.props.auth;
        const {newPropsText, confirmPropsText, oldPropsText} = this.state;
        return (
            <View style={{flex: 1,}}>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <View style={{margin: 10, borderRadius: 10, backgroundColor: "#ffffff"}}>
                    {/* 原密码 */}
                    <InputItem
                        clear
                        type="password"
                        value={this.state.old_password}
                        onFocus={this.oldFocus}
                        onChange={value => {
                            this.setState({
                                old_password: value
                            });
                        }}
                        placeholder="请输入原始密码"
                    >
                        原始密码
                    </InputItem>
                    {
                        oldPropsText ? <Text
                                style={{color: "red", marginHorizontal: 15, marginVertical: 10}}>{oldPropsText}</Text> :
                            <Text style={{display: 'none'}}/>
                    }
                    {/* 新密码 */}
                    <InputItem
                        clear
                        type="password"
                        value={this.state.new_password}
                        onChange={value => {
                            this.setState({
                                new_password: value
                            });
                        }}
                        onFocus={this.newFocus}
                        onBlur={this.newBlur}
                        placeholder="请输入新密码"
                    >
                        新密码
                    </InputItem>
                    {
                        newPropsText ? <Text
                                style={{color: "red", marginHorizontal: 15, marginVertical: 10}}>{newPropsText}</Text> :
                            <Text style={{display: 'none'}}/>
                    }
                    {/* 确认新密码 */}
                    <InputItem
                        clear
                        type="password"
                        value={this.state.new_password_repeat}
                        onFocus={this.confirmFocus}
                        onBlur={this.confirmBlur}
                        onChange={value => {
                            this.setState({
                                new_password_repeat: value
                            });
                        }}
                        placeholder="请确认新密码"
                    >
                        确认密码
                    </InputItem>
                    {
                        confirmPropsText ? <Text
                                style={{color: "red", marginHorizontal: 15, marginVertical: 10}}>{confirmPropsText}</Text> :
                            <Text style={{display: 'none'}}/>
                    }
                </View>
                <Button
                    loading={loading}
                    disabled={loading}
                    style={ComponentsStyles.button}
                    onPress={this.confirmHandle}>
                    <Text style={{color: '#ffffff'}}>确定</Text>
                </Button>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    btn: {
        marginHorizontal: 10,
        backgroundColor: '#2b90ea'
    }
})
export default ChangePassword