Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

Improve aesthetics and reusability of HTML templates #13652

Merged
merged 18 commits into from
Oct 21, 2022
Merged

Improve aesthetics and reusability of HTML templates #13652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c5d00f4
Template header and footer to fragments
germain-gg Aug 22, 2022
6fce9e9
Move existing fragments to correct folder
germain-gg Aug 22, 2022
3eb56fd
Move static assets to their own folder
germain-gg Aug 22, 2022
d405c4f
Set title variable and pass it to the context
germain-gg Aug 26, 2022
441d69f
move sso footer to fragments folder
germain-gg Aug 26, 2022
8e27b0c
Add basic styling for templates
germain-gg Aug 26, 2022
08899ec
Add changelog entry
germain-gg Aug 27, 2022
1a0232f
escape title variable
germain-gg Aug 27, 2022
1b02a93
lint fix changelog entry
germain-gg Aug 27, 2022
600ff84
Merge remote-tracking branch 'origin/develop' into gsouquet/template-…
clokep Oct 19, 2022
5b40a4e
Switch to a base template.
clokep Oct 19, 2022
17caf24
Move notif fragments back out.
clokep Oct 19, 2022
7288400
Move other fragments back.
clokep Oct 19, 2022
6cecd5a
Move static files back.
clokep Oct 19, 2022
8687721
Remove further unintentional changes.
clokep Oct 19, 2022
fd2e629
Merge remote-tracking branch 'origin/develop' into gsouquet/template-…
clokep Oct 21, 2022
e09affb
Inline styles instead of linking to them.
clokep Oct 21, 2022
cbc3003
Clarify changelog.
clokep Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog.d/13652.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Improve aesthetics of HTML templates. Note that these changes do not retroactively apply to templates which have been [customised](https://matrix-org.github.io/synapse/latest/templates.html#templates) by server admins.
29 changes: 29 additions & 0 deletions synapse/res/templates/_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<style type="text/css">
{%- include 'style.css' without context %}
</style>
{% block header %}{% endblock %}
</head>
<body>
<header class="mx_Header">
{% if app_name == "Riot" %}
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
{% elif app_name == "Vector" %}
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
{% elif app_name == "Element" %}
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
{% else %}
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
Comment on lines +16 to +22
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these all be https://?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was just leaving them how they are today... 🤷

clokep marked this conversation as resolved.
Show resolved Hide resolved
{% endif %}
</header>

{% block body %}{% endblock %}

</body>
</html>
18 changes: 6 additions & 12 deletions synapse/res/templates/account_previously_renewed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>
{% extends "_base.html" %}
{% block title %}Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}

{% block body %}
<p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
{% endblock %}
18 changes: 6 additions & 12 deletions synapse/res/templates/account_renewed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title>
</head>
<body>
Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.
</body>
</html>
{% extends "_base.html" %}
{% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}
clokep marked this conversation as resolved.
Show resolved Hide resolved

{% block body %}
<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
{% endblock %}
16 changes: 5 additions & 11 deletions synapse/res/templates/add_threepid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request to add an email address to your Matrix account</title>
</head>
<body>
{% extends "_base.html" %}
{% block title %}Request to add an email address to your Matrix account{% endblock %}

{% block body %}
<p>A request to add an email address to your Matrix account has been received. If this was you, please click the link below to confirm adding this email:</p>
<a href="{{ link }}">{{ link }}</a>
<p>If this was not you, you can safely ignore this email. Thank you.</p>
</body>
</html>
{% endblock %}
16 changes: 5 additions & 11 deletions synapse/res/templates/add_threepid_failure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Request failed</title>
</head>
<body>
{% extends "_base.html" %}
{% block title %}Request failed{% endblock %}

{% block body %}
<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>No changes have been made to your account.</p>
</body>
</html>
{% endblock %}
16 changes: 5 additions & 11 deletions synapse/res/templates/add_threepid_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your email has now been validated</title>
</head>
<body>
{% extends "_base.html" %}
{% block title %}Your email has now been validated{% endblock %}

{% block body %}
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
</body>
</html>
{% endblock %}
18 changes: 9 additions & 9 deletions synapse/res/templates/auth_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<html>
<head>
<title>Success!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "_base.html" %}
{% block title %}Success!{% endblock %}

{% block header %}
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
<script>
if (window.onAuthDone) {
Expand All @@ -11,11 +10,12 @@
window.opener.postMessage("authDone", "*");
}
</script>
</head>
<body>
{% endblock %}

{% block body %}
<div>
<p>Thank you</p>
<p>You may now close this window and return to the application</p>
</div>
</body>
</html>

{% endblock %}
17 changes: 5 additions & 12 deletions synapse/res/templates/invalid_token.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invalid renewal token.</title>
</head>
<body>
Invalid renewal token.
</body>
</html>
{% block title %}Invalid renewal token.{% endblock %}

{% block body %}
<p>Invalid renewal token.</p>
{% endblock %}
17 changes: 8 additions & 9 deletions synapse/res/templates/notice_expiry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "_base.html" %}
{% block title %}Notice of expiry{% endblock %}

{% block header %}
<style type="text/css">
{% include 'mail.css' without context %}
{% include "mail-%s.css" % app_name ignore missing without context %}
{% include 'mail-expiry.css' without context %}
</style>
</head>
<body>
{% endblock %}

{% block body %}
<table id="page">
<tr>
<td> </td>
Expand Down Expand Up @@ -43,5 +43,4 @@
<td> </td>
</tr>
</table>
</body>
</html>
{% endblock %}
16 changes: 7 additions & 9 deletions synapse/res/templates/notif_mail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block title %}New activity in room{% endblock %}

{% block header %}
<style type="text/css">
{%- include 'mail.css' without context %}
{%- include "mail-%s.css" % app_name ignore missing without context %}
</style>
</head>
<body>
{% endblock %}

{% block body %}
<table id="page">
<tr>
<td> </td>
Expand Down Expand Up @@ -55,5 +54,4 @@
<td> </td>
</tr>
</table>
</body>
</html>
{% endblock %}
13 changes: 4 additions & 9 deletions synapse/res/templates/password_reset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
<html lang="en">
<head>
<title>Password reset</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Password reset{% endblock %}

{% block body %}
<p>A password reset request has been received for your Matrix account. If this was you, please click the link below to confirm resetting your password:</p>

<a href="{{ link }}">{{ link }}</a>

<p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p>
</body>
</html>
{% endblock %}
14 changes: 4 additions & 10 deletions synapse/res/templates/password_reset_confirmation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<html lang="en">
<head>
<title>Password reset confirmation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Password reset confirmation{% endblock %}

{% block body %}
<!--Use a hidden form to resubmit the information necessary to reset the password-->
<form method="post">
<input type="hidden" name="sid" value="{{ sid }}">
Expand All @@ -15,6 +11,4 @@
If you did not mean to do this, please close this page and your password will not be changed.</p>
<p><button type="submit">Confirm changing my password</button></p>
</form>
</body>
</html>

{% endblock %}
14 changes: 4 additions & 10 deletions synapse/res/templates/password_reset_failure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<html lang="en">
<head>
<title>Password reset failure</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>The request failed for the following reason: {{ failure_reason }}.</p>
{% block title %}Password reset failure{% endblock %}

{% block body %}
<p>The request failed for the following reason: {{ failure_reason }}.</p>
<p>Your password has not been reset.</p>
</body>
</html>
{% endblock %}
12 changes: 4 additions & 8 deletions synapse/res/templates/password_reset_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Password reset success{% endblock %}

{% block body %}
<p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p>
</body>
</html>
{% endblock %}
19 changes: 8 additions & 11 deletions synapse/res/templates/recaptcha.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
<html>
<head>
<title>Authentication</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.recaptcha.net/recaptcha/api.js"
async defer></script>
{% block title %}Authentication{% endblock %}

{% block header %}
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
<script>
function captchaDone() {
$('#registrationForm').submit();
}
clokep marked this conversation as resolved.
Show resolved Hide resolved
</script>
</head>
<body>
{% endblock %}

{% block body %}
<form id="registrationForm" method="post" action="{{ myurl }}">
<div>
{% if error is defined %}
Expand All @@ -37,5 +35,4 @@
</div>
</div>
</form>
</body>
</html>
{% endblock %}
13 changes: 4 additions & 9 deletions synapse/res/templates/registration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
<html lang="en">
<head>
<title>Registration</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Registration{% endblock %}

{% block body %}
<p>You have asked us to register this email with a new Matrix account. If this was you, please click the link below to confirm your email address:</p>

<a href="{{ link }}">Verify Your Email Address</a>

<p>If this was not you, you can safely disregard this email.</p>

<p>Thank you.</p>
</body>
</html>
{% endblock %}
12 changes: 4 additions & 8 deletions synapse/res/templates/registration_failure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Registration failure{% endblock %}

{% block body %}
<p>Validation failed for the following reason: {{ failure_reason }}.</p>
</body>
</html>
{% endblock %}
13 changes: 4 additions & 9 deletions synapse/res/templates/registration_success.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<html lang="en">
<head>
<title>Your email has now been validated</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
{% block title %}Your email has now been validated{% endblock %}

{% block body %}
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
</body>
</html>
{% endblock %}
Loading