The email sent for resetting password are being displayed as raw HTML content. This is not the case for every users but for significant number of users, this problem arrives.
This is my url for password reset:
from django.contrib.auth.views import password_reset
url(r'^accounts/password/reset/', password_reset, {'template_name':'users/login.html','html_email_template_name':'registration/password_reset_email.html', 'post_reset_redirect':'/users/accounts/login/?reset=1', 'extra_context':{'reset':'1'}}, name='password_reset'),
These are my password reset email templates:
registration/password_reset_email.html
{% extends 'users/email_base.html' %}
{% block content %}
{% load i18n %}
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f0f0f0" align="center">
<tbody>
<tr>
<td style="font-size:0;" align="center">
<div style="display:inline-block;width:100%;max-width:800px;vertical-align:top;" class="width800 mrt-30">
<!-- ID:BG SECTION-1 -->
<table class="display-width" style="max-width:800px;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td class="padding" align="center">
<div style="display:inline-block;width:100%;max-width:600px;vertical-align:top;font-family:Ubuntu, sans-serif;" class="main-width">
<table class="display-width-inner" style="max-width:600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="mso-line-height-rule:exactly;line-height:30px;font-size:0;" height="30">
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:10px;font-size:0;" height="10">
</td>
</tr>
<tr>
<td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">
{% blocktrans %}
You're receiving this email because you requested a password reset for your user account at {{ site_name }}.
{% endblocktrans %}
</td>
</tr>
<tr>
<td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">
Please go to the following page and choose a new password:
{% block reset_link %}
https://{{ domain }}{% url 'auth_password_reset_confirm' uidb64=uid token=token %}
{% endblock %}
Your username, in case you've forgotten: {{ user.get_username }}
</td>
</tr>
<tr>
<td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:400;font-size:14px;line-height:24px; text-align:justify;">
{% trans "Thanks for using our Application!" %}
The {{ site_name }} team
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
{% endblock %}
users/email_base.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fieldsight</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=display-width, initial-scale=1.0, maximum-scale=1.0,">
<!-- OUR PACKAGES-1 TITLE STARTS -->
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500');
html{
width:100%;
}
body{
margin:0;
padding:0;
width:100%;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
background-color:#f0f0f0;
font-family:'Ubuntu',sans-serif;
}
img{
display:block !important;
border:0;
-ms-interpolation-mode:bicubic;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
.images{
display:block !important;
width:100% !important;
}
p{
margin:0 !important;
padding:0 !important;
}
.display-button a:hover{
text-decoration:none !important;
}
@media only screen and (min-width:799px){
.saf-table{
display:table !important;
}
} @media only screen and (min-width:799px){
.main-width{
width:600px;
}
} @media only screen and (min-width:799px){
.width800{
width:800px !important;
max-width:800px !important;
}
} @media only screen and (min-width:799px){
.mrt-30{
margin-top:50px;
}
} @media only screen and (min-width:799px){
.mrb-30{
margin-bottom:50px;
}
} @media only screen and (max-width:799px){
body{
width:auto !important;
}
} @media only screen and (max-width:799px){
.display-width{
width:100% !important;
}
} @media only screen and (max-width:799px){
.display-width-inner{
width:600px !important;
}
} @media only screen and (max-width:799px){
.padding{
padding:0 20px !important;
}
} @media only screen and (max-width:799px){
.res-padding-full{
padding:0 !important;
}
} @media only screen and (max-width:799px){
.res-padding-left{
padding-left:0 !important;
}
} @media only screen and (max-width:799px){
.width800{
width:100% !important;
max-width:100% !important;
}
} @media only screen and (max-width:768px){
.width768{
max-width:684px !important;
}
} @media only screen and (max-width:768px){
.child1-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:768px){
.child2-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:768px){
.full-width-height{
padding-top:40px !important;
padding-bottom:25px !important;
}
} @media only screen and (max-width:680px){
.child1-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:680px){
.child2-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:680px){
.res-padding-left{
padding-left:40px !important;
}
} @media only screen and (max-width:680px){
.padding-hide{
padding-bottom:0 !important;
}
} @media only screen and (max-width:680px){
.res-attract-height{
padding:20px 10px 0 !important;
}
} @media only screen and (max-width:680px){
.full-width-height{
padding-top:50px !important;
padding-bottom:40px !important;
}
} @media only screen and (max-width:660px){
.child1-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:660px){
.child2-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:660px){
.res-padding-left{
padding-left:30px !important;
}
} @media only screen and (max-width:660px){
.res-attract-height{
padding:20px 10px 0 !important;
}
} @media only screen and (max-width:660px){
.full-width-height{
padding-top:45px !important;
padding-bottom:20px !important;
}
} @media only screen and (max-width:640px){
.res-attract-height{
padding:20px 10px 0 !important;
}
} @media only screen and (max-width:640px){
.child1-width,.child2-width{
width:50% !important;
max-width:50% !important;
}
} @media only screen and (max-width:640px){
.res-padding-left{
padding-left:20px !important;
}
} @media only screen and (max-width:640px){
.full-width-height{
padding-top:40px !important;
padding-bottom:30px !important;
}
} @media only screen and (max-width:639px){
body{
width:auto !important;
}
} @media only screen and (max-width:639px){
.display-width{
width:100% !important;
}
} @media only screen and (max-width:639px){
.display-width-inner,.display-width-child{
width:100% !important;
}
} @media only screen and (max-width:639px){
.display-width-child .button-width .display-button{
width:auto !important;
}
} @media only screen and (max-width:639px){
.res-padding-full{
padding:0 20px !important;
}
} @media only screen and (max-width:639px){
.padding-hide{
padding:0 !important;
}
} @media only screen and (max-width:639px){
.padding{
padding:0 20px !important;
}
} @media only screen and (max-width:639px){
.saf-table{
display:block !important;
}
} @media only screen and (max-width:639px){
.width282{
width:282px !important;
}
} @media only screen and (max-width:639px){
.div-width{
display:block !important;
width:100% !important;
max-width:100% !important;
}
} @media only screen and (max-width:639px){
.res-height20-bottom{
padding-bottom:20px !important;
}
} @media only screen and (max-width:639px){
.res-height-top{
padding-top:60px !important;
}
} @media only screen and (max-width:639px){
.full-width-height{
padding-bottom:60px !important;
}
} @media only screen and (max-width:639px){
.footer-width{
width:151px !important;
}
} @media only screen and (max-width:639px){
.height20{
height:20px !important;
}
} @media only screen and (max-width:639px){
.height30{
height:30px !important;
}
} @media only screen and (max-width:639px){
.hide-height,.hide-bar{
display:none !important;
}
} @media only screen and (max-width:639px){
.txt-center{
text-align:center !important;
}
} @media only screen and (max-width:639px){
span.unsub-width{
width:100% !important;
display:block !important;
padding-bottom:10px !important;
}
} @media only screen and (max-width:639px){
.res-center{
margin:0 auto !important;
display:table !important;
}
} @media only screen and (max-width:480px){
.display-width table,.display-width-child2 table{
width:100% !important;
}
.mrbm-30{
margin-bottom: 30px !important;
}
} @media only screen and (max-width:480px){
.display-width .button-width .display-button{
width:auto !important;
}
} @media only screen and (max-width:480px){
.display-width-child .footer-width{
width:151px !important;
}
} @media only screen and (max-width:480px){
.display-width .width282{
width:282px !important;
}
} @media only screen and (max-width:480px){
.div-width{
display:block !important;
width:100% !important;
max-width:100% !important;
}
} @media only screen and (max-width:380px){
.display-width table{
width:100% !important;
}
} @media only screen and (max-width:380px){
.display-width .button-width .display-button{
width:auto !important;
}
} @media only screen and (max-width:380px){
.display-width-child .width282{
width:100% !important;
}
} @media only screen and (max-width:330px){
.res-font{
font-size:33px !important;
}
}</style>
</head>
<body>
{% block content %}
{% endblock %}
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f0f0f0" align="center">
<tbody>
<tr>
<td style="font-size:0;" align="center">
<div style="display:inline-block;width:100%;max-width:800px;vertical-align:top;" class="width800 mrb-30">
<!-- ID:BG FOOTER -->
<table class="display-width" style="max-width:800px;" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
<tbody>
<tr>
<td class="padding" align="center">
<div style="display:inline-block;width:100%;max-width:600px;vertical-align:top;" class="main-width">
<table class="display-width-inner" style="max-width:600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="line-height:20px;mso-line-height-rule:exactly;font-size:0;" height="20">
</td>
</tr>
<tr>
<td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:600;font-size:14px;line-height:24px;" align="left">
<strong style="color:#0488d1;text-decoration:none;text-transform:capitalize;font-weight:500;margin:0 5px 0 0;">Happy FieldSighting!</strong>
</td>
</tr>
<tr>
<td style="line-height:15px;mso-line-height-rule:exactly;font-size:0;" height="15">
</td>
</tr>
<tr>
<!-- ID:BR FOOTER BORDER -->
<td style="line-height:15px;mso-line-height-rule:exactly;border-bottom:1px solid #e5e5e5;font-size:0;" height="15">
</td>
</tr>
<tr>
<td style="line-height:15px;mso-line-height-rule:exactly;font-size:0;" height="15">
</td>
</tr>
<!-- SOCIAL ICONS -->
<tr>
<td align="center">
<table style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="div-width mrbm-30" align="center">
<table>
<tbody>
<tr>
<td style="border-collapse:collapse;color:#333333;" align="center">
<a href="https://www.fieldsight.org/" target="_link" style="color:#333333;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/8087ebbb-7ee5-4377-9b52-209086142dcf.png" alt="150x50" style="margin:0; border:0; padding:0; display:block;" width="120"></a>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="div-width">
<table style="width:auto !important;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<!-- ID:TXT FOOTER ADDRESS -->
<td width="30" valign="middle" align="left">
<a href="https://www.facebook.com/FieldSight-761158147606014/" target="_link" style="color:#666666;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/e0ed2f36-4a6d-449b-a85d-be4ba2bfd1fc.png" alt="48x48x7" style="max-width:30px; width:100%; height:auto; margin:0; border:0; padding:0; display:block;" width="30" height="30"></a>
</td>
<td width="10">
</td>
<td width="30" valign="middle" align="left">
<a href="https://instagram.com/fieldsight_org?igshid=1rz8bkyodajdp" target="_link" style="color:#666666;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/fb3992ff-a590-4735-97cd-82e04f9584d3.png" style="max-width:30px; width:100%; height:auto; margin:0; border:0; padding:0; display:block;" width="30" height="30"></a>
</td>
<td width="10">
</td>
<td width="30" valign="middle" align="left">
<a href="https://www.linkedin.com/mwlite/company/14529782" target="_link" style="color:#666666;text-decoration:none;"> <img src="https://gallery.mailchimp.com/7548f1bce7a62e405ffe789fd/images/fc20ca4c-0e67-4ed0-9744-631c379ee59f.png" alt="48x48x10" style="max-width:30px; width:100%; height:auto; margin:0; border:0; padding:0; display:block;" width="30" height="30"></a>
</td>
</tr>
</tbody>
</table>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="line-height:5px;mso-line-height-rule:exactly;font-size:0;" height="5">
</td>
</tr>
<tr>
<td style="color:#666666;font-family:Ubuntu, sans-serif;font-weight:600;font-size:14px;line-height:24px;" align="center">
<a href="#" style="color:#0488d1;font-family:Ubuntu, sans-serif;font-weight:600;font-size:14px; text-decoration:none;">[email protected]</a><span style="margin:0 5px; color:#e5e5e5;" >|</span><a href="#" style="color:#0488d1;font-family:Ubuntu, sans-serif;font-weight:600;font-size:14px; text-decoration:none;">www.fieldsight.org</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<!-- ID:BR FOOTER BORDER -->
<td style="line-height:30px;mso-line-height-rule:exactly;font-size:0;" height="30">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!-- FOOTER ENDS -->
</body>
</html>
Some of the users are getting the email in raw html format.
Can anyone help me with this? I want to know if there is some way to manage all the users to view the email template rather than raw html.
By default, the plain text email template is called registration/password_reset_email.html (which I personally think is confusing as plaintext is not html).
In your case both the email_template_name (plaintext) and html_email_template (html email) are using the same template this means if a client cannot use html it will fall back to a plaintext email which contains html syntax.
From the docs:
email_template_name: The full name of a template to use for generating the email with the reset password link. Defaults to registration/password_reset_email.html if not supplied.
html_email_template_name: The full name of a template to use for generating a text/html multipart email with the password reset link. By default, HTML email is not sent.
To resolve this:
html_password_reset_email.htmlurls.py setting the html_email_template_name=registration/html_password_reset_email.html,This will now send the html email template for clients which can render html and fall back to the plaintext (django default) template for clients which can only render plain text.
Additional information: The source for sending password reset email can be found here: https://github.com/django/django/blob/7f612eda80db1c1c8e502aced54c2062080eae46/django/contrib/auth/forms.py#L247
In short, the variable email_template_name is used to send a plain text version of the email. If you include the html_email_template_name, then an additional payload is added to the email; which includes a html email attachment (html_email_template_name).