{"size": 3075, "ext": "js", "max_stars_repo_path": "src/components/forms/ChangePasswordForm.js", "max_stars_repo_name": "TKOaly/rv-app-frontend", "max_stars_repo_stars_event_min_datetime": "2020-03-27T16:35:14.000Z", "max_stars_repo_stars_event_max_datetime": "2020-03-27T16:35:14.000Z", "max_issues_repo_path": "src/components/forms/ChangePasswordForm.js", "max_issues_repo_name": "TKOaly/rv-app-frontend", "max_issues_repo_issues_event_min_datetime": "2018-05-11T14:15:23.000Z", "max_issues_repo_issues_event_max_datetime": "2020-04-30T18:41:26.000Z", "max_forks_repo_path": "src/components/forms/ChangePasswordForm.js", "max_forks_repo_name": "TKOaly/rv-app-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 56, "max_forks_count": null, "avg_line_length": 32.3684210526, "max_line_length": 99, "alphanum_fraction": 0.5330081301}
import { connect } from 'react-redux';
import { errorMessage, successMessage } from '../../reducers/notificationReducer';
import { setPassword, setPasswordAgain } from '../../reducers/userInfoFormReducer';
import React from 'react';
import SuccessBtn from '../buttons/SuccessBtn';
import userService from '../../services/userService';

class ChangePasswordForm extends React.Component {
    componentDidMount = () => {
        this.props.setFormPassword('');
        this.props.setFormPasswordAgain('');
    };

    handleSubmit = async (event) => {
        event.preventDefault();

        if (this.props.formPassword !== this.props.formPasswordAgain) {
            this.props.errorMessage('Passwords do not match');
            return;
        }

        const newPassword = this.props.formPassword;

        try {
            await userService.changePassword(this.props.token, newPassword);
            this.props.successMessage('Password changed successfully');
        } catch (err) {
            this.props.errorMessage('Error while changing password: ' + err.response.data.message);
        }

        this.props.setFormPassword('');
        this.props.setFormPasswordAgain('');
    };

    handlePasswordChange = (event) => {
        this.props.setFormPassword(event.target.value);
    };
    handlePasswordAgainChange = (event) => {
        this.props.setFormPasswordAgain(event.target.value);
    };

    render = () => {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <legend>Change password</legend>
                    <div>
                        <label>New password</label>
                        <input
                            type="password"
                            placeholder="New password"
                            value={this.props.formPassword}
                            onChange={this.handlePasswordChange}
                        />
                    </div>
                    <div>
                        <label>New password again</label>
                        <input
                            type="password"
                            placeholder="New password again"
                            value={this.props.formPasswordAgain}
                            onChange={this.handlePasswordAgainChange}
                        />
                    </div>
                    <div>
                        <SuccessBtn type="submit" fill>
                            Submit
                        </SuccessBtn>
                    </div>
                </form>
            </div>
        );
    };
}

const mapStateToProps = (state) => {
    return {
        token: state.authentication.access_token,
        formPassword: state.userInfoForm.password,
        formPasswordAgain: state.userInfoForm.passwordAgain
    };
};

const mapDispatchToProps = {
    setFormPassword: setPassword,
    setFormPasswordAgain: setPasswordAgain,
    errorMessage,
    successMessage
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ChangePasswordForm);
