application/components/user-change-password.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import LinearProgress from 'material-ui/LinearProgress';
import IconButton from 'material-ui/IconButton';
import ReloadIcon from 'material-ui/svg-icons/action/autorenew';
import generatePassword from 'password-generator';

import Config from '../config';

import {Row, Col} from './flexbox';

class UserChangePassword extends Component {
    constructor(props) {
        super(props);

        this.state = {
            changedPassword: false,
            passwordStrength: 0,
            showError: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.open != this.props.open) {
            this.setState({changedPassword: '', showError: false});
        }
    }

    handlePasswordChange(e) {
        this.setState({
            'changedPassword': e.target.value,
            'passwordStrength': zxcvbn(e.target.value).score + 1
        });
    }

    handleGeneratePassword() {
        const p = generatePassword(12, false, /[\w\d\?\-]/);
        this.setState({
            'changedPassword': p,
            'passwordStrength': zxcvbn(p).score + 1
        });
    }


    getStrengthColor() {
        let strengthColor = 'red';
        switch (this.state.passwordStrength) {
            case 0:
            case 1:
                strengthColor = 'red';
                break;
            case 2:
                strengthColor = 'orange';
                break;
            case 3:
                strengthColor = 'yellow';
                break;
            case 4:
            case 5:
                strengthColor = 'green';
                break;

        }

        return strengthColor;
    }

    handleUpdate(e) {

        this.props.onUpdatePassword(this.refs.existing.getValue(), this.state.changedPassword);
    }

    render() {
        const actions = [
            <FlatButton
                label="Cancel"
                onClick={this.props.onRequestClose}
                />,
            <FlatButton
                label="Update Password"
                primary={true}
                keyboardFocused={true}
                onClick={this.handleUpdate.bind(this)}
                />
        ];
        return (
            <Dialog
                title="Change Password"
                actions={actions}
                modal={false}
                open={this.props.open}
                >
                <Row bottom={['xs']}>
                    <Col xs={10}>
                        <p className='small'>
                            Update your password or generate a random one. If you're having trouble with your account, please contact <a href="mailto:support@getsnworks.com">support</a>.
                        </p>
                        <TextField
                            floatingLabelText="Current Password"
                            fullWidth={true}
                            type='password'
                            ref='existing'
                            errorText={this.props.errorMessage}
                            />
                        <TextField
                            floatingLabelText="New Password"
                            value={this.state.changedPassword ? this.state.changedPassword : ''}
                            fullWidth={true}
                            onChange={this.handlePasswordChange.bind(this)}
                            />
                        <LinearProgress
                            mode="determinate"
                            value={this.state.passwordStrength}
                            color={this.getStrengthColor()}
                            max={5}
                            style={{backgroundColor: 'white'}}
                            />
                    </Col>
                    <Col xs={2}>
                        <IconButton
                            onClick={this.handleGeneratePassword.bind(this)}
                            tooltip="Generate password"
                            >
                            <ReloadIcon />
                        </IconButton>
                    </Col>
                </Row>
            </Dialog>
        );
    }
}

const mapStateToProps = (state) => ({
    application: state.application
});

export default connect(mapStateToProps)(UserChangePassword);