globuzma/canaille-globuzma
1
0
Fork 0
forked from Github-Mirrors/canaille
Code Pull requests Activity

Fixed email display

Browse source
This commit is contained in:
Éloi Rivard 2020-12-10 16:34:46 +01:00
parent 61f895276d
commit fdb3b3ff7e
3 changed files with 66 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
canaille/admin/mail.py
View file

@ -1,6 +1,7 @@
import base64
import urllib.request
from flask import Blueprint, render_template, current_app, url_for, request
from flask_babel import gettext as _
from canaille.flaskutils import admin_needed
from canaille.account import profile_hash
@ -39,6 +40,9 @@ def reset_html(user):
reset_url=reset_url,
logo=logo,
logo_extension=logo_extension,
title=_("Password reset on {website_name}").format(
website_name=current_app.config.get("NAME", reset_url)
),
)

65
canaille/templates/mail/firstlogin.html
View file

@ -3,42 +3,41 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css" style="font-weight: 300">
@import url({{ url_for('static', filename='fonts/lato.css', _external=True) }});
</style>
<!-- <link href="/static/fomanticui/semantic.min.css" rel="stylesheet">
<style>
body {
background: #F8F8F8;
padding: 1em;
margin: auto;
max-width: 800px;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
</style>-->
<style type="text/css" style="font-weight: 300">@import url({{ url_for('static', filename='fonts/lato.css', _external=True) }});</style>
<title>{{ title }}</title>
</head>
<body style="box-sizing: inherit; height: 100%; overflow-x: hidden; min-width: 320px; font-size: 14px; line-height: 1.4285em; color: rgba(0,0,0,.87); background: #F8F8F8; padding: 1em; margin: auto; max-width: 800px; font-family: 'Lato', sans-serif; font-weight: 400;">
<div class="ui segment" style="line-height: 1.4285em; color: rgba(0,0,0,.87); font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; position: relative; background: #fff; box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); margin: 1rem 0; padding: 1em 1em; border-radius: .28571429rem; border: 1px solid rgba(34,36,38,.15); font-size: 1rem; margin-top: 0; margin-bottom: 0;">
<h3 class="ui top attached header" style="box-sizing: inherit; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; background: #fff; padding: .78571429rem 1rem; margin: 0 -1px 0 -1px; box-shadow: none; border: 1px solid #d4d4d5; border-radius: .28571429rem .28571429rem 0 0;">
{% if logo %}
<img class="ui image" src="data:image/{{ logo_extension }};base64, {{ logo }}" alt="{{ site_name }}" style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; box-sizing: inherit; border-style: none; position: relative; max-width: 50px; max-height:50px; background-color: transparent; display: inline-block; margin-top: .14285714em; width: 2.5em; height: auto; vertical-align: middle;">
{% endif %}
<div class="content" style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; box-sizing: inherit; display: inline-block; padding-left: .75rem; vertical-align: middle;">
{% trans %}Password initialization{% endtrans %}
</div>
</h3>
<body style="color: rgba(0,0,0,.87); background: #F8F8F8; padding: 1em; margin: auto; width: 700px; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 400; font-size: 14px;">
<div class="ui attached message" style="font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; position: relative; min-height: 1em; background: #f8f8f9; padding: 1em 1.5em; line-height: 1.4285em; color: rgba(0,0,0,.87); transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease; font-size: 1em; margin-bottom: -1px; box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset; margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0;">
{% trans -%}
<table cellspacing="0" cellpadding="0" border="0" style="font-weight: 400; background: #fff; box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); margin: 1rem 0; padding: 1em 1em; border-radius: .3rem; border: 1px solid rgba(34,36,38,.15); font-size: 1rem; margin-top: 0; margin-bottom: 0;">
<tr>
<td colspan="2">
<h3 style="font-weight: 700; line-height: 1.3em; font-size: 1.3rem; padding: .8rem 1rem; margin: 0; box-shadow: none; border: 1px solid #d4d4d5; border-radius: .3rem .3rem 0 0;">
{% if logo %}
<img src="data:image/{{ logo_extension }};base64, {{ logo }}" alt="{{ site_name }}" style="font-size: 1.3rem; border-style: none; width: 50px; display: inline-block; margin-top: .14em; vertical-align: middle;">
{% endif %}
<div style="font-size: 1.3rem; display: inline-block; padding-left: .75rem; vertical-align: middle;">
{% trans %}Password initialization{% endtrans %}
</div>
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="background: #f8f8f9; padding: 1em 1.5em; line-height: 1.4em; font-size: 1em; margin: 0; border-radius: 0; text-align: justify; border-left: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5;">
{% trans %}
In order to finalize your account configuration at {{ site_name }}, we need to setup your password. Please click on the blue button below and follow the instructions.
{%- endtrans %}
</div>
{% endtrans %}
</td>
</tr>
<div class="ui attached stackable buttons" style="line-height: 1.4285em; color: rgba(0,0,0,.87); font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; font-size: 0; vertical-align: baseline; margin: 0 .25em 0 0; position: relative; display: flex; border-radius: 0; width: auto!important; z-index: auto; margin-left: -1px; margin-right: -1px; box-shadow: none;">
<a class="ui button" href="{{ site_url }}" style="-webkit-box-direction: normal; box-sizing: inherit; cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2 none; color: rgba(0,0,0,.6); font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; padding: .78571429em 1.5em .78571429em; text-transform: none; text-shadow: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; user-select: none; transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; font-size: 1rem; -webkit-box-flex: 1; flex: 1 0 auto; margin: 0; border-left: none; margin-left: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{{ site_name }}</a>
<a class="ui primary button" href="{{ reset_url }}" style="-webkit-box-direction: normal; box-sizing: inherit; cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2 none; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; padding: .78571429em 1.5em .78571429em; text-transform: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; user-select: none; transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; font-size: 1rem; background-color: #2185d0; color: #fff; text-shadow: none; background-image: none; -webkit-box-flex: 1; flex: 1 0 auto; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{% trans %}Initialize password{% endtrans %}</a>
</div>
</div>
<tr style="margin: 0; border-radius: 0; text-align:center; border-left: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5; border-bottom: 1px solid #d4d4d5;">
<td style="background: #e0e1e2; width:50%;">
<a href="{{ site_url }}" style="width: 100%; display: inline-block; vertical-align: middle; color: rgba(0,0,0,.6); padding: .8em 0; font-weight: 700; line-height: 1em; text-align: center; text-decoration: none; font-size: 1rem;margin: 0; border-left: none; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{{ site_name }}</a>
</td>
<td style="background: #2185d0; width:50%;">
<a href="{{ reset_url }}" style="width: 100%; display: inline-block; vertical-align: middle; padding: .8em 0; font-weight: 700; line-height: 1em; text-align: center; text-decoration: none; font-size: 1rem; color: #fff; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{% trans %}Initialize password{% endtrans %}</a>
</td>
</tr>
</table>
</body>
</html>

61
canaille/templates/mail/reset.html
View file

@ -3,42 +3,41 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css" style="font-weight: 300">
@import url({{ url_for('static', filename='fonts/lato.css', _external=True) }});
</style>
<!-- <link href="/static/fomanticui/semantic.min.css" rel="stylesheet">
<style>
body {
background: #F8F8F8;
padding: 1em;
margin: auto;
max-width: 800px;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
</style>-->
<style type="text/css" style="font-weight: 300">@import url({{ url_for('static', filename='fonts/lato.css', _external=True) }});</style>
<title>{{ title }}</title>
</head>
<body style="box-sizing: inherit; height: 100%; overflow-x: hidden; min-width: 320px; font-size: 14px; line-height: 1.4285em; color: rgba(0,0,0,.87); background: #F8F8F8; padding: 1em; margin: auto; max-width: 800px; font-family: 'Lato', sans-serif; font-weight: 400;">
<div class="ui segment" style="line-height: 1.4285em; color: rgba(0,0,0,.87); font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; position: relative; background: #fff; box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); margin: 1rem 0; padding: 1em 1em; border-radius: .28571429rem; border: 1px solid rgba(34,36,38,.15); font-size: 1rem; margin-top: 0; margin-bottom: 0;">
<h3 class="ui top attached header" style="box-sizing: inherit; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; background: #fff; padding: .78571429rem 1rem; margin: 0 -1px 0 -1px; box-shadow: none; border: 1px solid #d4d4d5; border-radius: .28571429rem .28571429rem 0 0;">
{% if logo %}
<img class="ui image" src="data:image/{{ logo_extension }};base64, {{ logo }}" alt="{{ site_name }}" style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; box-sizing: inherit; border-style: none; position: relative; max-width: 50px; max-height:50px; background-color: transparent; display: inline-block; margin-top: .14285714em; width: 2.5em; height: auto; vertical-align: middle;">
{% endif %}
<div class="content" style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 700; line-height: 1.28571429em; text-transform: none; color: rgba(0,0,0,.87); font-size: 1.28571429rem; box-sizing: inherit; display: inline-block; padding-left: .75rem; vertical-align: middle;">
{% trans %}Password reinitialisation{% endtrans %}
</div>
</h3>
<body style="color: rgba(0,0,0,.87); background: #F8F8F8; padding: 1em; margin: auto; width: 700px; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 400; font-size: 14px;">
<div class="ui attached message" style="font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; position: relative; min-height: 1em; background: #f8f8f9; padding: 1em 1.5em; line-height: 1.4285em; color: rgba(0,0,0,.87); transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease,-webkit-box-shadow .1s ease; font-size: 1em; margin-bottom: -1px; box-shadow: 0 0 0 1px rgba(34,36,38,.15) inset; margin-left: -1px; margin-right: -1px; margin-top: -1px; border-radius: 0;">
<table cellspacing="0" cellpadding="0" border="0" style="font-weight: 400; background: #fff; box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); margin: 1rem 0; padding: 1em 1em; border-radius: .3rem; border: 1px solid rgba(34,36,38,.15); font-size: 1rem; margin-top: 0; margin-bottom: 0;">
<tr>
<td colspan="2">
<h3 style="font-weight: 700; line-height: 1.3em; font-size: 1.3rem; padding: .8rem 1rem; margin: 0; box-shadow: none; border: 1px solid #d4d4d5; border-radius: .3rem .3rem 0 0;">
{% if logo %}
<img src="data:image/{{ logo_extension }};base64, {{ logo }}" alt="{{ site_name }}" style="font-size: 1.3rem; border-style: none; width: 50px; display: inline-block; margin-top: .14em; vertical-align: middle;">
{% endif %}
<div style="font-size: 1.3rem; display: inline-block; padding-left: .75rem; vertical-align: middle;">
{% trans %}Password reinitialisation{% endtrans %}
</div>
</h3>
</td>
</tr>
<tr>
<td colspan="2" style="background: #f8f8f9; padding: 1em 1.5em; line-height: 1.4em; font-size: 1em; margin: 0; border-radius: 0; text-align: justify; border-left: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5;">
{% trans %}
Someone, probably you, asked for a password reinitialization link at {{ site_name }}. If you did not asked for this email, please ignore it. I you need to reset your password, please click on the blue button below and follow the instructions.
{% endtrans %}
</div>
</td>
</tr>
<div class="ui attached stackable buttons" style="line-height: 1.4285em; color: rgba(0,0,0,.87); font-family: 'Lato', sans-serif; font-weight: 400; box-sizing: inherit; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; font-size: 0; vertical-align: baseline; margin: 0 .25em 0 0; position: relative; display: flex; border-radius: 0; width: auto!important; z-index: auto; margin-left: -1px; margin-right: -1px; box-shadow: none;">
<a class="ui button" href="{{ site_url }}" style="-webkit-box-direction: normal; box-sizing: inherit; cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2 none; color: rgba(0,0,0,.6); font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; padding: .78571429em 1.5em .78571429em; text-transform: none; text-shadow: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; user-select: none; transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; font-size: 1rem; -webkit-box-flex: 1; flex: 1 0 auto; margin: 0; border-left: none; margin-left: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{{ site_name }}</a>
<a class="ui primary button" href="{{ reset_url }}" style="-webkit-box-direction: normal; box-sizing: inherit; cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2 none; font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; padding: .78571429em 1.5em .78571429em; text-transform: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; user-select: none; transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease,-webkit-box-shadow .1s ease; will-change: auto; -webkit-tap-highlight-color: transparent; font-size: 1rem; background-color: #2185d0; color: #fff; text-shadow: none; background-image: none; -webkit-box-flex: 1; flex: 1 0 auto; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{% trans %}Reset password{% endtrans %}</a>
</div>
</div>
<tr style="margin: 0; border-radius: 0; text-align:center; border-left: 1px solid #d4d4d5; border-right: 1px solid #d4d4d5; border-bottom: 1px solid #d4d4d5;">
<td style="background: #e0e1e2; width:50%;">
<a href="{{ site_url }}" style="width: 100%; display: inline-block; vertical-align: middle; color: rgba(0,0,0,.6); padding: .8em 0; font-weight: 700; line-height: 1em; text-align: center; text-decoration: none; font-size: 1rem;margin: 0; border-left: none; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{{ site_name }}</a>
</td>
<td style="background: #2185d0; width:50%;">
<a href="{{ reset_url }}" style="width: 100%; display: inline-block; vertical-align: middle; padding: .8em 0; font-weight: 700; line-height: 1em; text-align: center; text-decoration: none; font-size: 1rem; color: #fff; margin: 0; border-radius: 0; box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;">{% trans %}Reset password{% endtrans %}</a>
</td>
</tr>
</table>
</body>
</html>