django 54 react rest-auth change password

after login, click change password

#django/settings

INSTALLED_APPS = (
    ...,
    'rest_framework',
    'rest_framework.authtoken',
    ...,
    'rest_auth'
)

OLD_PASSWORD_FIELD_ENABLED = True

----------------------------
#urls

path('rest-auth/', include('rest_auth.urls')),

---------------------------------------

//pages/changePassword

import React, { Component } from 'react';
import '../App.css';
import { changePassword } from '../redux/actions/changePassword';
import { connect } from 'react-redux';
import { Input } from 'antd';
import { Button } from 'reactstrap';
import { Fa500Px } from "react-icons/fa";
import { Redirect } from 'react-router-dom';

class ChangePassword extends Component {

    constructor(props) {
        super(props);

        this.state = {
            old: '',
            new1: '',
            new2: '',
        };
    }

    inputChange = (e, p) => {
        this.setState({ [p]: e.target.value });
    }

    formSubmit = (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.set('old_password', this.state.old);
        formData.set('new_password1', this.state.new1);
        formData.set('new_password2', this.state.new2);

        this.props.dispatch(changePassword(this.props.token, formData));
    }

    render() {
        if (!this.props.loggedin) {
            return <Redirect to='/login' />
        }

        return (
            <form style={{ marginLeft: '10px', width: '300px' }}
                onSubmit={(e) => this.formSubmit(e)}>
                <legend>Reset Password</legend>
                <hr />
                <p style={{ color: 'red' }}>{this.props.error}</p>
                {this.props.changed ? <p style={{ color: 'green' }}>Password has been changed.</p> : null}
                <Input.Password placeholder="Old Password" required='required'
                    prefix={<Fa500Px style={{ color: 'rgba(0,0,0,.25)' }} />}
                    onChange={(e) => this.inputChange(e, 'old')}
                    style={{ marginTop: '5px' }}
                />
                <Input.Password placeholder="New Password" required='required'
                    prefix={<Fa500Px style={{ color: 'rgba(0,0,0,.25)' }} />}
                    onChange={(e) => this.inputChange(e, 'new1')}
                    style={{ marginTop: '15px' }}
                />
                <Input.Password placeholder="Confirm Password" required='required'
                    prefix={<Fa500Px style={{ color: 'rgba(0,0,0,.25)' }} />}
                    onChange={(e) => this.inputChange(e, 'new2')}
                    style={{ marginTop: '15px' }}
                />
                <Button color="success" type='submit' size='sm'
                    style={{ marginTop: '15px' }}
                >Submit</Button>
            </form>
        );
    }
}

export default connect(
    (store) => {
        return {
            token: store.login.token,
            loggedin: store.login.fetched,
            changed: store.login.changed,
            error: store.login.error
        };
    }
)(ChangePassword);

------------------------
//redux/actions/changePassword

import axios from 'axios';

export function changePassword(token, data) {
    return {
        type: "change_password",
        payload: axios({
            method: 'post',
            url: 'http://127.0.0.1:8000/rest-auth/password/change/',
            headers: {
                Authorization: 'Token ' + token,
            },
            data: data,
        })
    }
}

------------------------------------
//redux/reducers/loginReducer

export default function reducer(
    state = {
        username: '',
        token: '',
        fetching: false,
        fetched: false,
        sending: false,
        sent: false,
        changing: false,
        changed: false,
        error: ''
    },
    action
) {
    switch (action.type) {
        case "fetch_token_PENDING": {
            return { ...state, fetching: true, fetched: false, error: '' }
        }

        case "fetch_token_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                token: action.payload.data.token,
                username: JSON.parse(action.payload.config.data).username,
                error: ''
            }
        }

        case "fetch_token_REJECTED": {
            return {
                ...state,
                fetching: false,
                error: JSON.stringify(action.payload.response.data),
            }
        }

        case "reset": {
            return {
                ...state,
                username: '',
                token: '',
                fetching: false,
                fetched: false,
                error: ''
            }
        }

        case "reset_password_PENDING": {
            return { ...state, sending: true, sent: false, error: '' }
        }

        case "reset_password_FULFILLED": {
            return {
                ...state,
                sending: false,
                sent: true,
                error: ''
            }
        }

        case "reset_password_REJECTED": {
            return {
                ...state,
                sending: false,
                error: JSON.stringify(action.payload.response.data),
            }
        }

        case "change_password_PENDING": {
            return { ...state, changing: true, changed: false, error: '' }
        }

        case "change_password_FULFILLED": {
            return {
                ...state,
                changing: false,
                changed: true,
                error: ''
            }
        }

        case "change_password_REJECTED": {
            return {
                ...state,
                changing: false,
                error: JSON.stringify(action.payload.response.data),
            }
        }

        default:
            break;
    }
    return state;
}

reference:
https://stackoverflow.com/questions/54036155/django-rest-auth-custom-registration-logic-for-social-views
https://django-rest-auth.readthedocs.io/en/latest/api_endpoints.html