django 53 react redux reset password by email

click reset password

redirect to reset page, enter email

if email is on file, reset email is sent

inbox received email, click link

redirected to reset page

login with new password

#power shell

pip install django-rest-auth

-----------------------------
#settings

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

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

from django.contrib import admin
from django.urls import path, include
from django.conf import  settings
from django.conf.urls.static import static
from .router import router

urlpatterns = [
    path('admin/', admin.site.urls),
    path('music/', include('music.urls')),
    path('', include('django.contrib.auth.urls')),
    path('api/', include(router.urls)),
    path('api/', include('music.api.urls')),
    path('rest-auth/', include('rest_auth.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

-------------------------------
#templates/registration/password_reset_email

{% autoescape off %}
To initiate the password reset process for your {{ user.get_username }} TestSite Account,
click the link below:

{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}

If clicking the link above doesn't work, please copy and paste the URL in a new browser
window instead.

Sincerely,
The TestSite Team
{% endautoescape %}

//pages/resetPassword

import React, { Component } from 'react';
import '../App.css';
import { resetPassword } from '../redux/actions/resetPassword';
import { connect } from 'react-redux';
import { Input } from 'antd';
import { Button } from 'reactstrap';
import { MdEmail } from "react-icons/md";

class ResetPassword extends Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
        };
    }

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

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

        const formData = new FormData();
        formData.set('email', this.state.email);

        this.props.dispatch(resetPassword(formData));
    }

    render() {
        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.sent ? <p style={{ color: 'green' }}>Password reset email has been sent to {this.state.email}</p> : null}
                <Input placeholder="email" required='required' type='email'
                    prefix={<MdEmail style={{ color: 'rgba(0,0,0,.25)' }} />}
                    onChange={(e) => this.inputChange(e, 'email')}
                    style={{ marginTop: '5px' }}
                />
                <Button color="success" type='submit' size='sm'
                    style={{ marginTop: '15px' }}
                >Submit</Button>
            </form>
        );
    }
}

export default connect(
    (store) => {
        return {
            sent: store.login.sent,
            error: store.login.error
        };
    }
)(ResetPassword);

-------------------------------
//redux/actions/resetPassword

import axios from 'axios';

export function resetPassword(data) {
    return {
        type: "reset_password",
        payload: axios({
            method: 'post',
            url: 'http://127.0.0.1:8000/rest-auth/password/reset/',
            data: data,
        })
    }
}

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

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

        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: action.payload.toString()
            }
        }

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

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

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

        case "reset_password_REJECTED": {
            return {
                ...state,
                sending: false,
                error: action.payload.toString()
            }
        }

        default:
            break;
    }
    return state;
}

reference:
http://chuanshuoge2.blogspot.com/2019/06/django-53-access-tokens-for-sending.html