I am implementing a website as my final project and I want to display a message for users that failed to log in more than 3 times prompting them to reset their passwords.

I have already tried different solutions I found online, but nothing is helping.

I am writing the backend in Django, but Django-axes also didn't work for me, so I am trying JS now.

<script type="text/javascript">
    var login_attempts = 3;
    function checkAttempts()
    {
        var failed_alert = document.querySelectorAll("a")[0].textContent;

        if (failed_alert === " Invalid username or password ") {
            login_attempts--;
            console.log(login_attempts);
            alert('failed login')

            if (login_attempts==0)
            {
                alert("Do you want to reset your password?");
            }
        } else {
            console.log(login_attempts);
            return false;
        }
    }
</script> 

This is the example I found on Stack Overflow. I think I am close to solving this problem, I am getting messages, but when printing "login_attemps" in a console at first I get 3 and then continuously 2, no matter how many times I write incorrect password.

The function is called in form. I also tried to do it in body onl oad=""

<form id="login-form" class="form" action="login" method="post" onsubmit="checkAttempts();">

The whole authentication is implemented in views.py django:

def login(request):
    if request.user.is_authenticated:
        return redirect('/')
    else:
        if request.method == 'POST':
            username = request.POST['username']
            password = request.POST['password']

            user = auth.authenticate(username=username, password=password)

            if user is not None:
                auth.login(request, user)
                return HttpResponseRedirect(request.GET.get('next', LOGIN_REDIRECT_URL))
            else:
                messages.info(request, 'Invalid username or password')
                return redirect('login.html')
        else:
            return render(request, 'login.html')

I feel like I am losing my ideas. I was trying to solve this for 2 weeks with no effects. If anyone has any idea, I would be thankful. It can be both in js or django.

CodePudding user response：

I would expect something like

document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();
  fetch('login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'username': this.username.value,
        'password': this.password.value
      })
    })
    .then((response) => response.json())
    .then((data) => {
      console.log('Success:', data); // here we are logged in
    })
    .catch((error) => {
      console.error('Error:', error);
    });
});