Django Rest Framework + Serializers + Vue.js, Reset Password Functionality

Question

I am trying to create a reset password functionality, but I can't find a good tutorial that explains how to do that with DRF and Vue.js. I am using serializers to pass the data, so there are no html views involved. What is the most efficient way of creating that Reset Password Functionality?

I am creating new users via /api/v1/users/.

The idea is to send a link via email that leads to ResetPassword.vue (Don't really understand how to do that, can't find good tutorial on that neither) where the user inputs the new password and after pressing submit is redirected to Login.vue.

Any ideas are very appretiated. Thank you!

Hi! Yes, so I am trying to do the following: stackoverflow.com/questions/69091973/…. BTW, this is not a duplicate question. — Ivan Stepanchuk
– Ivan Stepanchuk, Commented Sep 7, 2021 at 17:26

Ivan Stepanchuk · Accepted Answer · 2021-09-13 17:22:00Z

After trying out and inventing different options, I managed to find one that works the best. Basically, if you are using Django Rest Framework Auth token, in your database you will have a table that will hold Key: (here is user's token) and Name: (here is user's name). So, you create a view that will only have a form with email input and send button. You get the email, post it with Axios to backend and here is the View you will be managing:

@api_view(['POST', 'GET'])
def your_method_name_that_will_be_in_urls_py(request):
    if request.method == "POST":
        serializer = ResetPasswordEmail(data=request.data)
        if serializer.is_valid():

            //Here you get the email from Front-End
            email = serializer.validated_data['email']

            //Here you fin the user that has that email
            user = User.objects.get(email=email)

            //Here you get the token of that user
            token = Token.objects.get(user=user)

            if user:

                //Here you pass the context of things above to send them in an email
                context = {
                    'email': email,
                    'username': user,
                    'token': token
                }

                send_mail(
                    'SUBJECT',
                    render_to_string('emails/reset_password.txt', context),
                    'COMPANY NAME and No Reply',
                    [email],
                    fail_silently=False,
                    auth_user=None, auth_password=None, connection=None, html_message=None
                )
                serializer.save(token=token, slug=token)

            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

And the Serializer like this one:

class ResetPasswordEmail(serializers.ModelSerializer):
    class Meta:
        model = ResetPassword
        fields = (
            'email',
        )

Also, I created a model for that Password Reset:

class ResetPassword(models.Model):
    email = models.CharField(max_length=200, null=True)
    token = models.CharField(max_length=255, null=True)
    slug = models.SlugField(max_length=255)

    def __str__(self):
        return self.token
    //This thing creates users personalized link, that they visit and have a enter new password view in Front-End.
    def get_absolute_url(self):
        return f'/{self.token}/'

Collectives™ on Stack Overflow

Django Rest Framework + Serializers + Vue.js, Reset Password Functionality

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related