My blog development (026)

Posted May 25, 20204 min read

image.png
Several methods to verify the mailbox:
image.png
Add button to send verification code in registration:register.html
image.png
Also add the verification function of sending verification code at the bottom of register.html(same as bind \ _email.html):
image.png
The effect is as follows:
image.png
Add the verification method of the verification code in the bind \ _email class in forms.py:

def clean(self):
## Determine if the user is logged in
If self.request.user.is_authenticated:
Self.cleaned_data ['user']= self.request.user
Else:
Raise forms.ValidationError('User has not logged in')


## Determine whether the user has bound the mailbox
If self.request.user.email! = '':
Raise forms.ValidationError('You have bound your mailbox')


## Determine the verification code
Code = self.request.session.get('bind_email_code', '')
Verification_code = self.cleaned_data.get('verification_code', '')
If not(code! = '' And code == verification_code):
Raise forms.ValidationError('Verification code is incorrect')


Return self.cleaned_data

Because the key of the session that sends the verification code is the verification code in the form is bind \ _email \ _code, and the key of the verification code saved in the send verification code function in views.py is also bind \ _email \ _code, and the latter one bind \ _email \ _code It is a verification code for registration. The previous one is a verification code for binding. The two should not be the same, so they need to be distinguished:
Change the name of the verification code returned from the front end:
Add send \ _for from the send \ _verification \ _code function in views.py to obtain the data sent by the front end, and then modify the following verification code variable name:
image.png
Modify the sending verification code in bind \ _email.html:
image.png
Also send verification code in register.html:
image.png
Add a clean method in forms.py to judge the verification code:
image.png
Then pass in the request:
image.png
Now you can try using the new mailbox:

But now when the registration is successful, the session is not deleted, so add the clear session to the register in views.py:
image.png
Also delete the session in the bind \ _email method:
image.png
New feature:users and mailboxes can log in
image.png
Modify the relevant content in the LoginForm class in forms.py:
image.png
Whether the attempt to log in with the registered mailbox is successful, here is successful;

Realization of changing password function:

Add ChangePassWordForm form in forms.py:
image.png
Then modify the change \ _password method in views.py:
image.png
Call the change \ _password method in user \ _info.html:
image.png
Also call the change \ _password method in base.html:
image.png
Add change \ _password routing in urls.py:
image.png
Change the password to see whether it is successful:here is also successful

New function added:reset password when you forget it

The verification method is to verify by email

Add ForgotPasswordForm form(class) to forms.py,
image.png
Add routing in urls.py:
image.png
Add processing method forgot \ _password in views.py:
image.png
Add forgot \ _password.html file in user/templates/user and write the code:

{%extends 'form.html'%}


{%block other_buttons%}
<Button id = "send_code" class = "btn btn-primary"> Send verification code </button>
{%endblock%}


{%block script_extends%}
<Script type = "text/javascript">
$("# Send_code"). Click(function() {
Var email = $("# id_email"). Val();
If(email == "") {
$("# Tip"). Text('* Email cannot be empty');
False return false;
}}}


            //Send the verification code
$.Ajax({
Url:"{%url 'send_verification_code'%}",
Type:"GET",
Data:data:{
'Email':email,
'Send_for':'forgot_password_code'
},},},
Cache:false,
Success:function(data) {
IF(data ['status']== 'ERROR') {
  Alert(data ['status']);
}
}

)));

////Turn the button gray
$(This) .addClass('disabled');
$(This) .attr('disabled', true);
Var time = 30;
$(This) .text(time + 's');
Var interval = setInterval(() => {
If(time <= 0) {
   ¢ clearInterval(interval);
$(This) .removeClass('disabled');
$(This) .attr('disabled', false);
?? $(this) .text('Send Verification Code');
False return false;
}


TIME TIME-;
$(This) .text(time + 's');
, 1000);
});
</Script>
{%endblock%}

Add a button to forget \ _password in login.html:

<a href="{%url'forgot_password'%}" class="pull-left"> Forgot your password? </a>

The effect is as follows:
image.png