Improve aesthetics and reusability of HTML templates. (#13652)
Use a base template to create a cohesive feel across the HTML templates provided by Synapse. Adds basic styling to the base template for a more user-friendly look and feel.
This commit is contained in:
Germain
GitHub
parent
d24346f530
commit
1d45ad8b2a
|
|
@ -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.
|
||||||
|
|
@ -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]"/>
|
||||||
|
{% endif %}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
<!DOCTYPE html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% endblock %}
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
<!DOCTYPE html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% endblock %}
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,8 @@
|
||||||
<!DOCTYPE html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Request to add an email address to your Matrix account{% endblock %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<a href="{{ link }}">{{ link }}</a>
|
||||||
<title>Request to add an email address to your Matrix account</title>
|
<p>If this was not you, you can safely ignore this email. Thank you.</p>
|
||||||
</head>
|
{% endblock %}
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,7 @@
|
||||||
<!DOCTYPE html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Request failed{% endblock %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<p>The request failed for the following reason: {{ failure_reason }}.</p>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<p>No changes have been made to your account.</p>
|
||||||
<title>Request failed</title>
|
{% endblock %}
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>The request failed for the following reason: {{ failure_reason }}.</p>
|
|
||||||
<p>No changes have been made to your account.</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
<!DOCTYPE html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Your email has now been validated{% endblock %}
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% endblock %}
|
||||||
<title>Your email has now been validated</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<html>
|
{% extends "_base.html" %}
|
||||||
<head>
|
{% block title %}Success!{% endblock %}
|
||||||
<title>Success!</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
{% block header %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
||||||
<script>
|
<script>
|
||||||
if (window.onAuthDone) {
|
if (window.onAuthDone) {
|
||||||
window.onAuthDone();
|
window.onAuthDone();
|
||||||
} else if (window.opener && window.opener.postMessage) {
|
} else if (window.opener && window.opener.postMessage) {
|
||||||
window.opener.postMessage("authDone", "*");
|
window.opener.postMessage("authDone", "*");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
{% endblock %}
|
||||||
<body>
|
|
||||||
<div>
|
{% block body %}
|
||||||
<p>Thank you</p>
|
<div>
|
||||||
<p>You may now close this window and return to the application</p>
|
<p>Thank you</p>
|
||||||
</div>
|
<p>You may now close this window and return to the application</p>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,5 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Invalid renewal token.{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block body %}
|
||||||
<meta charset="UTF-8">
|
<p>Invalid renewal token.</p>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
{% endblock %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Invalid renewal token.</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
Invalid renewal token.
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,46 @@
|
||||||
<!doctype html>
|
{% extends "_base.html" %}
|
||||||
<html lang="en">
|
{% block title %}Notice of expiry{% endblock %}
|
||||||
<head>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
{% block header %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<style type="text/css">
|
||||||
<style type="text/css">
|
{% include 'mail.css' without context %}
|
||||||
{% include 'mail.css' without context %}
|
{% include "mail-%s.css" % app_name ignore missing without context %}
|
||||||
{% include "mail-%s.css" % app_name ignore missing without context %}
|
{% include 'mail-expiry.css' without context %}
|
||||||
{% include 'mail-expiry.css' without context %}
|
</style>
|
||||||
</style>
|
{% endblock %}
|
||||||
</head>
|
|
||||||
<body>
|
{% block body %}
|
||||||
<table id="page">
|
<table id="page">
|
||||||
<tr>
|
<tr>
|
||||||
<td> </td>
|
<td> </td>
|
||||||
<td id="inner">
|
<td id="inner">
|
||||||
<table class="header">
|
<table class="header">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div class="salutation">Hi {{ display_name }},</div>
|
<div class="salutation">Hi {{ display_name }},</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="logo">
|
<td class="logo">
|
||||||
{% if app_name == "Riot" %}
|
{% if app_name == "Riot" %}
|
||||||
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
|
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
|
||||||
{% elif app_name == "Vector" %}
|
{% elif app_name == "Vector" %}
|
||||||
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
|
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
|
||||||
{% elif app_name == "Element" %}
|
{% elif app_name == "Element" %}
|
||||||
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
|
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
|
||||||
{% else %}
|
{% else %}
|
||||||
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
|
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="2">
|
<td colspan="2">
|
||||||
<div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div>
|
<div class="noticetext">Your account will expire on {{ expiration_ts|format_ts("%d-%m-%Y") }}. This means that you will lose access to your account after this date.</div>
|
||||||
<div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div>
|
<div class="noticetext">To extend the validity of your account, please click on the link below (or copy and paste it into a new browser tab):</div>
|
||||||
<div class="noticetext"><a href="{{ url }}">{{ url }}</a></div>
|
<div class="noticetext"><a href="{{ url }}">{{ url }}</a></div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</td>
|
</td>
|
||||||
<td> </td>
|
<td> </td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,57 @@
|
||||||
<!doctype html>
|
{% block title %}New activity in room{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block header %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<style type="text/css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{%- include 'mail.css' without context %}
|
||||||
<style type="text/css">
|
{%- include "mail-%s.css" % app_name ignore missing without context %}
|
||||||
{%- include 'mail.css' without context %}
|
</style>
|
||||||
{%- include "mail-%s.css" % app_name ignore missing without context %}
|
{% endblock %}
|
||||||
</style>
|
|
||||||
</head>
|
{% block body %}
|
||||||
<body>
|
<table id="page">
|
||||||
<table id="page">
|
<tr>
|
||||||
<tr>
|
<td> </td>
|
||||||
<td> </td>
|
<td id="inner">
|
||||||
<td id="inner">
|
<table class="header">
|
||||||
<table class="header">
|
<tr>
|
||||||
<tr>
|
<td>
|
||||||
<td>
|
<div class="salutation">Hi {{ user_display_name }},</div>
|
||||||
<div class="salutation">Hi {{ user_display_name }},</div>
|
<div class="summarytext">{{ summary_text }}</div>
|
||||||
<div class="summarytext">{{ summary_text }}</div>
|
</td>
|
||||||
</td>
|
<td class="logo">
|
||||||
<td class="logo">
|
{%- if app_name == "Riot" %}
|
||||||
{%- if app_name == "Riot" %}
|
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
|
||||||
<img src="http://riot.im/img/external/riot-logo-email.png" width="83" height="83" alt="[Riot]"/>
|
{%- elif app_name == "Vector" %}
|
||||||
{%- elif app_name == "Vector" %}
|
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
|
||||||
<img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
|
{%- elif app_name == "Element" %}
|
||||||
{%- elif app_name == "Element" %}
|
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
|
||||||
<img src="https://static.element.io/images/email-logo.png" width="83" height="83" alt="[Element]"/>
|
{%- else %}
|
||||||
{%- else %}
|
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
|
||||||
<img src="http://matrix.org/img/matrix-120x51.png" width="120" height="51" alt="[matrix]"/>
|
{%- endif %}
|
||||||
{%- endif %}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
</table>
|
||||||
</table>
|
{%- for room in rooms %}
|
||||||
{%- for room in rooms %}
|
{%- include 'room.html' with context %}
|
||||||
{%- include 'room.html' with context %}
|
{%- endfor %}
|
||||||
{%- endfor %}
|
<div class="footer">
|
||||||
<div class="footer">
|
<a href="{{ unsubscribe_link }}">Unsubscribe</a>
|
||||||
<a href="{{ unsubscribe_link }}">Unsubscribe</a>
|
<br/>
|
||||||
<br/>
|
<br/>
|
||||||
<br/>
|
<div class="debug">
|
||||||
<div class="debug">
|
Sending email at {{ reason.now|format_ts("%c") }} due to activity in room {{ reason.room_name }} because
|
||||||
Sending email at {{ reason.now|format_ts("%c") }} due to activity in room {{ reason.room_name }} because
|
an event was received at {{ reason.received_at|format_ts("%c") }}
|
||||||
an event was received at {{ reason.received_at|format_ts("%c") }}
|
which is more than {{ "%.1f"|format(reason.delay_before_mail_ms / (60*1000)) }} ({{ reason.delay_before_mail_ms }}) mins ago,
|
||||||
which is more than {{ "%.1f"|format(reason.delay_before_mail_ms / (60*1000)) }} ({{ reason.delay_before_mail_ms }}) mins ago,
|
{%- if reason.last_sent_ts %}
|
||||||
{%- if reason.last_sent_ts %}
|
and the last time we sent a mail for this room was {{ reason.last_sent_ts|format_ts("%c") }},
|
||||||
and the last time we sent a mail for this room was {{ reason.last_sent_ts|format_ts("%c") }},
|
which is more than {{ "%.1f"|format(reason.throttle_ms / (60*1000)) }} (current throttle_ms) mins ago.
|
||||||
which is more than {{ "%.1f"|format(reason.throttle_ms / (60*1000)) }} (current throttle_ms) mins ago.
|
{%- else %}
|
||||||
{%- else %}
|
and we don't have a last time we sent a mail for this room.
|
||||||
and we don't have a last time we sent a mail for this room.
|
{%- endif %}
|
||||||
{%- endif %}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</td>
|
<td> </td>
|
||||||
<td> </td>
|
</tr>
|
||||||
</tr>
|
</table>
|
||||||
</table>
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,9 @@
|
||||||
<html lang="en">
|
{% block title %}Password reset{% endblock %}
|
||||||
<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>
|
|
||||||
<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>
|
{% 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>
|
||||||
|
|
||||||
<p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p>
|
<a href="{{ link }}">{{ link }}</a>
|
||||||
</body>
|
|
||||||
</html>
|
<p>If this was not you, <strong>do not</strong> click the link above and instead contact your server administrator. Thank you.</p>
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
<html lang="en">
|
{% block title %}Password reset confirmation{% endblock %}
|
||||||
<head>
|
|
||||||
<title>Password reset confirmation</title>
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!--Use a hidden form to resubmit the information necessary to reset the password-->
|
<!--Use a hidden form to resubmit the information necessary to reset the password-->
|
||||||
<form method="post">
|
<form method="post">
|
||||||
<input type="hidden" name="sid" value="{{ sid }}">
|
<input type="hidden" name="sid" value="{{ sid }}">
|
||||||
|
|
@ -15,6 +11,4 @@
|
||||||
If you did not mean to do this, please close this page and your password will not be changed.</p>
|
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>
|
<p><button type="submit">Confirm changing my password</button></p>
|
||||||
</form>
|
</form>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,6 @@
|
||||||
<html lang="en">
|
{% block title %}Password reset failure{% endblock %}
|
||||||
<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 body %}
|
||||||
|
<p>The request failed for the following reason: {{ failure_reason }}.</p>
|
||||||
<p>Your password has not been reset.</p>
|
<p>Your password has not been reset.</p>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
<html lang="en">
|
{% block title %}Password reset success{% endblock %}
|
||||||
<head>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
{% block body %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p>
|
<p>Your email has now been validated, please return to your client to reset your password. You may now close this window.</p>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
<html>
|
{% block title %}Authentication{% endblock %}
|
||||||
<head>
|
|
||||||
<title>Authentication</title>
|
{% block header %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<script src="https://www.recaptcha.net/recaptcha/api.js"
|
|
||||||
async defer></script>
|
|
||||||
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
|
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
|
||||||
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -12,8 +9,9 @@ function captchaDone() {
|
||||||
$('#registrationForm').submit();
|
$('#registrationForm').submit();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
{% endblock %}
|
||||||
<body>
|
|
||||||
|
{% block body %}
|
||||||
<form id="registrationForm" method="post" action="{{ myurl }}">
|
<form id="registrationForm" method="post" action="{{ myurl }}">
|
||||||
<div>
|
<div>
|
||||||
{% if error is defined %}
|
{% if error is defined %}
|
||||||
|
|
@ -37,5 +35,4 @@ function captchaDone() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +1,11 @@
|
||||||
<html lang="en">
|
{% block title %}Registration{% endblock %}
|
||||||
<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>
|
|
||||||
<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>
|
{% 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>
|
||||||
|
|
||||||
<p>If this was not you, you can safely disregard this email.</p>
|
<a href="{{ link }}">Verify Your Email Address</a>
|
||||||
|
|
||||||
<p>Thank you.</p>
|
<p>If this was not you, you can safely disregard this email.</p>
|
||||||
</body>
|
|
||||||
</html>
|
<p>Thank you.</p>
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
<html lang="en">
|
{% block title %}Registration failure{% endblock %}
|
||||||
<head>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
{% block body %}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>Validation failed for the following reason: {{ failure_reason }}.</p>
|
<p>Validation failed for the following reason: {{ failure_reason }}.</p>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
<html lang="en">
|
{% block title %}Your email has now been validated{% endblock %}
|
||||||
<head>
|
|
||||||
<title>Your email has now been validated</title>
|
{% block body %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
|
<p>Your email has now been validated, please return to your client. You may now close this window.</p>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
<html lang="en">
|
{% block title %}Authentication{% endblock %}
|
||||||
<head>
|
|
||||||
<title>Authentication</title>
|
{% block header %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
||||||
</head>
|
{% endblock %}
|
||||||
<body>
|
|
||||||
|
{% block body %}
|
||||||
<form id="registrationForm" method="post" action="{{ myurl }}">
|
<form id="registrationForm" method="post" action="{{ myurl }}">
|
||||||
<div>
|
<div>
|
||||||
{% if error is defined %}
|
{% if error is defined %}
|
||||||
|
|
@ -19,5 +18,4 @@
|
||||||
<input type="submit" value="Authenticate" />
|
<input type="submit" value="Authenticate" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,24 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}SSO account deactivated{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block header %}
|
||||||
<meta charset="UTF-8">
|
<style type="text/css">
|
||||||
<title>SSO account deactivated</title>
|
{% include "sso.css" without context %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
</style>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css">
|
{% endblock %}
|
||||||
{% include "sso.css" without context %}
|
|
||||||
</style>
|
{% block body %}
|
||||||
</head>
|
<div class="error_page">
|
||||||
<body class="error_page">
|
<header>
|
||||||
<header>
|
<h1>Your account has been deactivated</h1>
|
||||||
<h1>Your account has been deactivated</h1>
|
<p>
|
||||||
<p>
|
<strong>No account found</strong>
|
||||||
<strong>No account found</strong>
|
</p>
|
||||||
</p>
|
<p>
|
||||||
<p>
|
Your account might have been deactivated by the server administrator.
|
||||||
Your account might have been deactivated by the server administrator.
|
You can either try to create a new account or contact the server’s
|
||||||
You can either try to create a new account or contact the server’s
|
administrator.
|
||||||
administrator.
|
</p>
|
||||||
</p>
|
</header>
|
||||||
</header>
|
</div>
|
||||||
{% include "sso_footer.html" without context %}
|
{% include "sso_footer.html" without context %}
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,189 +1,185 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Create your account{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>Create your account</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<script type="text/javascript">
|
|
||||||
let wasKeyboard = false;
|
|
||||||
document.addEventListener("mousedown", function() { wasKeyboard = false; });
|
|
||||||
document.addEventListener("keydown", function() { wasKeyboard = true; });
|
|
||||||
document.addEventListener("focusin", function() {
|
|
||||||
if (wasKeyboard) {
|
|
||||||
document.body.classList.add("keyboard-focus");
|
|
||||||
} else {
|
|
||||||
document.body.classList.remove("keyboard-focus");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
|
||||||
|
|
||||||
body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
|
{% block header %}
|
||||||
outline: 3px solid #17191C;
|
<script type="text/javascript">
|
||||||
outline-offset: 4px;
|
let wasKeyboard = false;
|
||||||
}
|
document.addEventListener("mousedown", function() { wasKeyboard = false; });
|
||||||
|
document.addEventListener("keydown", function() { wasKeyboard = true; });
|
||||||
|
document.addEventListener("focusin", function() {
|
||||||
|
if (wasKeyboard) {
|
||||||
|
document.body.classList.add("keyboard-focus");
|
||||||
|
} else {
|
||||||
|
document.body.classList.remove("keyboard-focus");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style type="text/css">
|
||||||
|
{% include "sso.css" without context %}
|
||||||
|
|
||||||
.username_input {
|
body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
|
||||||
display: flex;
|
outline: 3px solid #17191C;
|
||||||
border: 2px solid #418DED;
|
outline-offset: 4px;
|
||||||
border-radius: 8px;
|
}
|
||||||
padding: 12px;
|
|
||||||
position: relative;
|
|
||||||
margin: 16px 0;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username_input.invalid {
|
.username_input {
|
||||||
border-color: #FE2928;
|
display: flex;
|
||||||
}
|
border: 2px solid #418DED;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
position: relative;
|
||||||
|
margin: 16px 0;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.username_input.invalid input, .username_input.invalid label {
|
.username_input.invalid {
|
||||||
color: #FE2928;
|
border-color: #FE2928;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username_input div, .username_input input {
|
.username_input.invalid input, .username_input.invalid label {
|
||||||
line-height: 18px;
|
color: #FE2928;
|
||||||
font-size: 14px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.username_input label {
|
.username_input div, .username_input input {
|
||||||
position: absolute;
|
line-height: 18px;
|
||||||
top: -5px;
|
font-size: 14px;
|
||||||
left: 14px;
|
}
|
||||||
font-size: 10px;
|
|
||||||
line-height: 10px;
|
|
||||||
background: white;
|
|
||||||
padding: 0 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.username_input input {
|
.username_input label {
|
||||||
flex: 1;
|
position: absolute;
|
||||||
display: block;
|
top: -5px;
|
||||||
min-width: 0;
|
left: 14px;
|
||||||
border: none;
|
font-size: 10px;
|
||||||
}
|
line-height: 10px;
|
||||||
|
background: white;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
/* only clear the outline if we know it will be shown on the parent div using :focus-within */
|
.username_input input {
|
||||||
@supports selector(:focus-within) {
|
flex: 1;
|
||||||
.username_input input {
|
display: block;
|
||||||
outline: none !important;
|
min-width: 0;
|
||||||
}
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username_input div {
|
/* only clear the outline if we know it will be shown on the parent div using :focus-within */
|
||||||
color: #8D99A5;
|
@supports selector(:focus-within) {
|
||||||
}
|
.username_input input {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.idp-pick-details {
|
.username_input div {
|
||||||
border: 1px solid #E9ECF1;
|
color: #8D99A5;
|
||||||
border-radius: 8px;
|
}
|
||||||
margin: 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.idp-pick-details h2 {
|
.idp-pick-details {
|
||||||
margin: 0;
|
border: 1px solid #E9ECF1;
|
||||||
padding: 8px 12px;
|
border-radius: 8px;
|
||||||
}
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.idp-pick-details .idp-detail {
|
.idp-pick-details h2 {
|
||||||
border-top: 1px solid #E9ECF1;
|
margin: 0;
|
||||||
padding: 12px;
|
padding: 8px 12px;
|
||||||
display: block;
|
}
|
||||||
}
|
|
||||||
.idp-pick-details .check-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.idp-pick-details .check-row .name {
|
.idp-pick-details .idp-detail {
|
||||||
flex: 1;
|
border-top: 1px solid #E9ECF1;
|
||||||
}
|
padding: 12px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.idp-pick-details .check-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.idp-pick-details .use, .idp-pick-details .idp-value {
|
.idp-pick-details .check-row .name {
|
||||||
color: #737D8C;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.idp-pick-details .idp-value {
|
.idp-pick-details .use, .idp-pick-details .idp-value {
|
||||||
margin: 0;
|
color: #737D8C;
|
||||||
margin-top: 8px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.idp-pick-details .avatar {
|
.idp-pick-details .idp-value {
|
||||||
width: 53px;
|
margin: 0;
|
||||||
height: 53px;
|
margin-top: 8px;
|
||||||
border-radius: 100%;
|
}
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
output {
|
.idp-pick-details .avatar {
|
||||||
padding: 0 14px;
|
width: 53px;
|
||||||
display: block;
|
height: 53px;
|
||||||
}
|
border-radius: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
output.error {
|
output {
|
||||||
color: #FE2928;
|
padding: 0 14px;
|
||||||
}
|
display: block;
|
||||||
</style>
|
}
|
||||||
</head>
|
|
||||||
<body>
|
output.error {
|
||||||
<header>
|
color: #FE2928;
|
||||||
<h1>Create your account</h1>
|
}
|
||||||
<p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p>
|
</style>
|
||||||
</header>
|
{% endblock %}
|
||||||
<main>
|
|
||||||
<form method="post" class="form__input" id="form">
|
{% block body %}
|
||||||
<div class="username_input" id="username_input">
|
<header>
|
||||||
<label for="field-username">Username (required)</label>
|
<h1>Create your account</h1>
|
||||||
<div class="prefix">@</div>
|
<p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p>
|
||||||
<input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none">
|
</header>
|
||||||
<div class="postfix">:{{ server_name }}</div>
|
<main>
|
||||||
|
<form method="post" class="form__input" id="form">
|
||||||
|
<div class="username_input" id="username_input">
|
||||||
|
<label for="field-username">Username (required)</label>
|
||||||
|
<div class="prefix">@</div>
|
||||||
|
<input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none">
|
||||||
|
<div class="postfix">:{{ server_name }}</div>
|
||||||
|
</div>
|
||||||
|
<output for="username_input" id="field-username-output"></output>
|
||||||
|
<input type="submit" value="Continue" class="primary-button">
|
||||||
|
{% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
|
||||||
|
<section class="idp-pick-details">
|
||||||
|
<h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2>
|
||||||
|
{% if user_attributes.avatar_url %}
|
||||||
|
<label class="idp-detail idp-avatar" for="idp-avatar">
|
||||||
|
<div class="check-row">
|
||||||
|
<span class="name">Avatar</span>
|
||||||
|
<span class="use">Use</span>
|
||||||
|
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
|
||||||
</div>
|
</div>
|
||||||
<output for="username_input" id="field-username-output"></output>
|
<img src="{{ user_attributes.avatar_url }}" class="avatar" />
|
||||||
<input type="submit" value="Continue" class="primary-button">
|
</label>
|
||||||
{% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
|
{% endif %}
|
||||||
<section class="idp-pick-details">
|
{% if user_attributes.display_name %}
|
||||||
<h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2>
|
<label class="idp-detail" for="idp-displayname">
|
||||||
{% if user_attributes.avatar_url %}
|
<div class="check-row">
|
||||||
<label class="idp-detail idp-avatar" for="idp-avatar">
|
<span class="name">Display name</span>
|
||||||
<div class="check-row">
|
<span class="use">Use</span>
|
||||||
<span class="name">Avatar</span>
|
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
|
||||||
<span class="use">Use</span>
|
</div>
|
||||||
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
|
<p class="idp-value">{{ user_attributes.display_name }}</p>
|
||||||
</div>
|
</label>
|
||||||
<img src="{{ user_attributes.avatar_url }}" class="avatar" />
|
{% endif %}
|
||||||
</label>
|
{% for email in user_attributes.emails %}
|
||||||
{% endif %}
|
<label class="idp-detail" for="idp-email{{ loop.index }}">
|
||||||
{% if user_attributes.display_name %}
|
<div class="check-row">
|
||||||
<label class="idp-detail" for="idp-displayname">
|
<span class="name">E-mail</span>
|
||||||
<div class="check-row">
|
<span class="use">Use</span>
|
||||||
<span class="name">Display name</span>
|
<input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
|
||||||
<span class="use">Use</span>
|
</div>
|
||||||
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
|
<p class="idp-value">{{ email }}</p>
|
||||||
</div>
|
</label>
|
||||||
<p class="idp-value">{{ user_attributes.display_name }}</p>
|
{% endfor %}
|
||||||
</label>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% for email in user_attributes.emails %}
|
</form>
|
||||||
<label class="idp-detail" for="idp-email{{ loop.index }}">
|
</main>
|
||||||
<div class="check-row">
|
{% include "sso_footer.html" without context %}
|
||||||
<span class="name">E-mail</span>
|
<script type="text/javascript">
|
||||||
<span class="use">Use</span>
|
{% include "sso_auth_account_details.js" without context %}
|
||||||
<input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
|
</script>
|
||||||
</div>
|
{% endblock %}
|
||||||
<p class="idp-value">{{ email }}</p>
|
|
||||||
</label>
|
|
||||||
{% endfor %}
|
|
||||||
</section>
|
|
||||||
{% endif %}
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
{% include "sso_footer.html" without context %}
|
|
||||||
<script type="text/javascript">
|
|
||||||
{% include "sso_auth_account_details.js" without context %}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,25 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Authentication failed{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block header %}
|
||||||
<meta charset="UTF-8">
|
<style type="text/css">
|
||||||
<title>Authentication failed</title>
|
{% include "sso.css" without context %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
</style>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% endblock %}
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
{% block body %}
|
||||||
</style>
|
<div class="error_page">
|
||||||
</head>
|
<header>
|
||||||
<body class="error_page">
|
<h1>That doesn't look right</h1>
|
||||||
<header>
|
<p>
|
||||||
<h1>That doesn't look right</h1>
|
<strong>We were unable to validate your {{ server_name }} account</strong>
|
||||||
<p>
|
via single sign‑on (SSO), because the SSO Identity
|
||||||
<strong>We were unable to validate your {{ server_name }} account</strong>
|
Provider returned different details than when you logged in.
|
||||||
via single sign‑on (SSO), because the SSO Identity
|
</p>
|
||||||
Provider returned different details than when you logged in.
|
<p>
|
||||||
</p>
|
Try the operation again, and ensure that you use the same details on
|
||||||
<p>
|
the Identity Provider as when you log into your account.
|
||||||
Try the operation again, and ensure that you use the same details on
|
</p>
|
||||||
the Identity Provider as when you log into your account.
|
</header>
|
||||||
</p>
|
</div>
|
||||||
</header>
|
{% include "sso_footer.html" without context %}
|
||||||
{% include "sso_footer.html" without context %}
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,26 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Confirm it's you{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block header %}
|
||||||
<meta charset="UTF-8">
|
<style type="text/css">
|
||||||
<title>Confirm it's you</title>
|
{% include "sso.css" without context %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
</style>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
{% endblock %}
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
{% block body %}
|
||||||
</style>
|
<header>
|
||||||
</head>
|
<h1>Confirm it's you to continue</h1>
|
||||||
<body>
|
<p>
|
||||||
<header>
|
A client is trying to {{ description }}. To confirm this action
|
||||||
<h1>Confirm it's you to continue</h1>
|
re-authorize your account with single sign-on.
|
||||||
<p>
|
</p>
|
||||||
A client is trying to {{ description }}. To confirm this action
|
<p><strong>
|
||||||
re-authorize your account with single sign-on.
|
If you did not expect this, your account may be compromised.
|
||||||
</p>
|
</strong></p>
|
||||||
<p><strong>
|
</header>
|
||||||
If you did not expect this, your account may be compromised.
|
<main>
|
||||||
</strong></p>
|
<a href="{{ redirect_url }}" class="primary-button">
|
||||||
</header>
|
Continue with {{ idp.idp_name }}
|
||||||
<main>
|
</a>
|
||||||
<a href="{{ redirect_url }}" class="primary-button">
|
</main>
|
||||||
Continue with {{ idp.idp_name }}
|
{% include "sso_footer.html" without context %}
|
||||||
</a>
|
{% endblock %}
|
||||||
</main>
|
|
||||||
{% include "sso_footer.html" without context %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,25 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Authentication successful{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
{% block header %}
|
||||||
<meta charset="UTF-8">
|
<style type="text/css">
|
||||||
<title>Authentication successful</title>
|
{% include "sso.css" without context %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
</style>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<script>
|
||||||
<style type="text/css">
|
if (window.onAuthDone) {
|
||||||
{% include "sso.css" without context %}
|
window.onAuthDone();
|
||||||
</style>
|
} else if (window.opener && window.opener.postMessage) {
|
||||||
<script>
|
window.opener.postMessage("authDone", "*");
|
||||||
if (window.onAuthDone) {
|
}
|
||||||
window.onAuthDone();
|
</script>
|
||||||
} else if (window.opener && window.opener.postMessage) {
|
{% endblock %}
|
||||||
window.opener.postMessage("authDone", "*");
|
|
||||||
}
|
{% block body %}
|
||||||
</script>
|
<header>
|
||||||
</head>
|
<h1>Thank you</h1>
|
||||||
<body>
|
<p>
|
||||||
<header>
|
Now we know it’s you, you can close this window and return to the
|
||||||
<h1>Thank you</h1>
|
application.
|
||||||
<p>
|
</p>
|
||||||
Now we know it’s you, you can close this window and return to the
|
</header>
|
||||||
application.
|
{% include "sso_footer.html" without context %}
|
||||||
</p>
|
{% endblock %}
|
||||||
</header>
|
|
||||||
{% include "sso_footer.html" without context %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Authentication failed{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Authentication failed</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
|
||||||
|
|
||||||
#error_code {
|
{% block header %}
|
||||||
margin-top: 56px;
|
{% if error == "unauthorised" %}
|
||||||
}
|
<style type="text/css">
|
||||||
</style>
|
{% include "sso.css" without context %}
|
||||||
</head>
|
|
||||||
<body class="error_page">
|
#error_code {
|
||||||
|
margin-top: 56px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="error_page">
|
||||||
{# If an error of unauthorised is returned it means we have actively rejected their login #}
|
{# If an error of unauthorised is returned it means we have actively rejected their login #}
|
||||||
{% if error == "unauthorised" %}
|
{% if error == "unauthorised" %}
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -66,5 +66,5 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</body>
|
</div>
|
||||||
</html>
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,59 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Choose identity provider{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Choose identity provider</title>
|
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
|
||||||
|
|
||||||
.providers {
|
{% block header %}
|
||||||
list-style: none;
|
<style type="text/css">
|
||||||
padding: 0;
|
{% include "sso.css" without context %}
|
||||||
}
|
|
||||||
|
|
||||||
.providers li {
|
.providers {
|
||||||
margin: 12px;
|
list-style: none;
|
||||||
}
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.providers a {
|
.providers li {
|
||||||
display: block;
|
margin: 12px;
|
||||||
border-radius: 4px;
|
}
|
||||||
border: 1px solid #17191C;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #17191C;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.providers a img {
|
.providers a {
|
||||||
width: 24px;
|
display: block;
|
||||||
height: 24px;
|
border-radius: 4px;
|
||||||
}
|
border: 1px solid #17191C;
|
||||||
.providers a span {
|
padding: 8px;
|
||||||
flex: 1;
|
text-align: center;
|
||||||
}
|
text-decoration: none;
|
||||||
</style>
|
color: #17191C;
|
||||||
</head>
|
display: flex;
|
||||||
<body>
|
align-items: center;
|
||||||
<header>
|
font-weight: bold;
|
||||||
<h1>Log in to {{ server_name }} </h1>
|
}
|
||||||
<p>Choose an identity provider to log in</p>
|
|
||||||
</header>
|
.providers a img {
|
||||||
<main>
|
width: 24px;
|
||||||
<ul class="providers">
|
height: 24px;
|
||||||
{% for p in providers %}
|
}
|
||||||
<li>
|
.providers a span {
|
||||||
<a href="pick_idp?idp={{ p.idp_id }}&redirectUrl={{ redirect_url | urlencode }}">
|
flex: 1;
|
||||||
{% if p.idp_icon %}
|
}
|
||||||
<img src="{{ p.idp_icon | mxc_to_http(32, 32) }}"/>
|
</style>
|
||||||
{% endif %}
|
{% endblock %}
|
||||||
<span>{{ p.idp_name }}</span>
|
|
||||||
</a>
|
{% block body %}
|
||||||
</li>
|
<header>
|
||||||
{% endfor %}
|
<h1>Log in to {{ server_name }} </h1>
|
||||||
</ul>
|
<p>Choose an identity provider to log in</p>
|
||||||
</main>
|
</header>
|
||||||
{% include "sso_footer.html" without context %}
|
<main>
|
||||||
</body>
|
<ul class="providers">
|
||||||
</html>
|
{% for p in providers %}
|
||||||
|
<li>
|
||||||
|
<a href="pick_idp?idp={{ p.idp_id }}&redirectUrl={{ redirect_url | urlencode }}">
|
||||||
|
{% if p.idp_icon %}
|
||||||
|
<img src="{{ p.idp_icon | mxc_to_http(32, 32) }}"/>
|
||||||
|
{% endif %}
|
||||||
|
<span>{{ p.idp_name }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
{% include "sso_footer.html" without context %}
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,29 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Agree to terms and conditions{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Agree to terms and conditions</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
|
||||||
|
|
||||||
#consent_form {
|
{% block header %}
|
||||||
margin-top: 56px;
|
<style type="text/css">
|
||||||
}
|
{% include "sso.css" without context %}
|
||||||
</style>
|
|
||||||
</head>
|
#consent_form {
|
||||||
<body>
|
margin-top: 56px;
|
||||||
<header>
|
}
|
||||||
<h1>Your account is nearly ready</h1>
|
</style>
|
||||||
<p>Agree to the terms to create your account.</p>
|
{% endblock %}
|
||||||
</header>
|
|
||||||
<main>
|
{% block body %}
|
||||||
{% include "sso_partial_profile.html" %}
|
<header>
|
||||||
<form method="post" action="{{my_url}}" id="consent_form">
|
<h1>Your account is nearly ready</h1>
|
||||||
<p>
|
<p>Agree to the terms to create your account.</p>
|
||||||
<input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required>
|
</header>
|
||||||
<label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label>
|
<main>
|
||||||
</p>
|
{% include "sso_partial_profile.html" %}
|
||||||
<input type="submit" class="primary-button" value="Continue"/>
|
<form method="post" action="{{my_url}}" id="consent_form">
|
||||||
</form>
|
<p>
|
||||||
</main>
|
<input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required>
|
||||||
{% include "sso_footer.html" without context %}
|
<label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label>
|
||||||
</body>
|
</p>
|
||||||
</html>
|
<input type="submit" class="primary-button" value="Continue"/>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
{% include "sso_footer.html" without context %}
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,38 @@
|
||||||
<!DOCTYPE html>
|
{% block title %}Continue to your account{% endblock %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Continue to your account</title>
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<style type="text/css">
|
|
||||||
{% include "sso.css" without context %}
|
|
||||||
|
|
||||||
.confirm-trust {
|
{% block header %}
|
||||||
margin: 34px 0;
|
<style type="text/css">
|
||||||
color: #8D99A5;
|
{% include "sso.css" without context %}
|
||||||
}
|
|
||||||
.confirm-trust strong {
|
|
||||||
color: #17191C;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirm-trust::before {
|
.confirm-trust {
|
||||||
content: "";
|
margin: 34px 0;
|
||||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK');
|
color: #8D99A5;
|
||||||
background-repeat: no-repeat;
|
}
|
||||||
width: 24px;
|
.confirm-trust strong {
|
||||||
height: 24px;
|
color: #17191C;
|
||||||
display: block;
|
}
|
||||||
float: left;
|
|
||||||
}
|
.confirm-trust::before {
|
||||||
</style>
|
content: "";
|
||||||
</head>
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK');
|
||||||
<body>
|
background-repeat: no-repeat;
|
||||||
<header>
|
width: 24px;
|
||||||
<h1>Continue to your account</h1>
|
height: 24px;
|
||||||
</header>
|
display: block;
|
||||||
<main>
|
float: left;
|
||||||
{% include "sso_partial_profile.html" %}
|
}
|
||||||
<p class="confirm-trust">Continuing will grant <strong>{{ display_url }}</strong> access to your account.</p>
|
</style>
|
||||||
<a href="{{ redirect_url }}" class="primary-button">Continue</a>
|
{% endblock %}
|
||||||
</main>
|
|
||||||
{% include "sso_footer.html" without context %}
|
{% block body %}
|
||||||
</body>
|
<header>
|
||||||
</html>
|
<h1>Continue to your account</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
{% include "sso_partial_profile.html" %}
|
||||||
|
<p class="confirm-trust">Continuing will grant <strong>{{ display_url }}</strong> access to your account.</p>
|
||||||
|
<a href="{{ redirect_url }}" class="primary-button">Continue</a>
|
||||||
|
</main>
|
||||||
|
{% include "sso_footer.html" without context %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f9fafb;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: auto;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_Header {
|
||||||
|
border-bottom: 3px solid #ddd;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1120px) {
|
||||||
|
body {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 1rem; }
|
||||||
|
h2 { font-size: .9rem; }
|
||||||
|
h3 { font-size: .85rem; }
|
||||||
|
h4 { font-size: .8rem; }
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
<html>
|
{% block title %}Authentication{% endblock %}
|
||||||
<head>
|
|
||||||
<title>Authentication</title>
|
{% block header %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
<link rel="stylesheet" href="/_matrix/static/client/register/style.css">
|
||||||
</head>
|
{% endblock %}
|
||||||
<body>
|
|
||||||
|
{% block body %}
|
||||||
<form id="registrationForm" method="post" action="{{ myurl }}">
|
<form id="registrationForm" method="post" action="{{ myurl }}">
|
||||||
<div>
|
<div>
|
||||||
{% if error is defined %}
|
{% if error is defined %}
|
||||||
|
|
@ -19,5 +18,4 @@
|
||||||
<input type="submit" value="Agree" />
|
<input type="submit" value="Agree" />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</body>
|
{% endblock %}
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue