diff options
| author | Germain <germain@souquet.com> | 2022-10-21 18:44:00 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-21 17:44:00 +0000 |
| commit | 1d45ad8b2ab1c41dd489ccd581d027077bc917e5 (patch) | |
| tree | 38056b37a1bfba7e7b086cf82cf9ed2caab48ca0 | |
| parent | Fix logging error on SIGHUP (#14258) (diff) | |
| download | synapse-1d45ad8b2ab1c41dd489ccd581d027077bc917e5.tar.xz | |
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.
31 files changed, 691 insertions, 740 deletions
diff --git a/changelog.d/13652.feature b/changelog.d/13652.feature new file mode 100644 index 0000000000..bc7f2926dc --- /dev/null +++ b/changelog.d/13652.feature @@ -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. \ No newline at end of file diff --git a/synapse/res/templates/_base.html b/synapse/res/templates/_base.html new file mode 100644 index 0000000000..46439fce6a --- /dev/null +++ b/synapse/res/templates/_base.html @@ -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> diff --git a/synapse/res/templates/account_previously_renewed.html b/synapse/res/templates/account_previously_renewed.html index bd4f7cea97..91582a8af0 100644 --- a/synapse/res/templates/account_previously_renewed.html +++ b/synapse/res/templates/account_previously_renewed.html @@ -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> \ No newline at end of file +{% 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 %} diff --git a/synapse/res/templates/account_renewed.html b/synapse/res/templates/account_renewed.html index 57b319f375..18a57833f1 100644 --- a/synapse/res/templates/account_renewed.html +++ b/synapse/res/templates/account_renewed.html @@ -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> \ No newline at end of file +{% extends "_base.html" %} +{% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %} + +{% block body %} +<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p> +{% endblock %} diff --git a/synapse/res/templates/add_threepid.html b/synapse/res/templates/add_threepid.html index 71f2215b7a..33c883936a 100644 --- a/synapse/res/templates/add_threepid.html +++ b/synapse/res/templates/add_threepid.html @@ -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> - <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> +{% 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> +{% endblock %} diff --git a/synapse/res/templates/add_threepid_failure.html b/synapse/res/templates/add_threepid_failure.html index bd627ee9ce..f6d7e33825 100644 --- a/synapse/res/templates/add_threepid_failure.html +++ b/synapse/res/templates/add_threepid_failure.html @@ -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> - <p>The request failed for the following reason: {{ failure_reason }}.</p> - <p>No changes have been made to your account.</p> -</body> -</html> +{% 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> +{% endblock %} diff --git a/synapse/res/templates/add_threepid_success.html b/synapse/res/templates/add_threepid_success.html index 49170c138e..6d45111796 100644 --- a/synapse/res/templates/add_threepid_success.html +++ b/synapse/res/templates/add_threepid_success.html @@ -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> - <p>Your email has now been validated, please return to your client. You may now close this window.</p> -</body> -</html> \ No newline at end of file +{% 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> +{% endblock %} diff --git a/synapse/res/templates/auth_success.html b/synapse/res/templates/auth_success.html index 2d6ac44a0e..9178332f59 100644 --- a/synapse/res/templates/auth_success.html +++ b/synapse/res/templates/auth_success.html @@ -1,21 +1,21 @@ -<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) { window.onAuthDone(); } else if (window.opener && window.opener.postMessage) { - window.opener.postMessage("authDone", "*"); + window.opener.postMessage("authDone", "*"); } </script> -</head> -<body> - <div> - <p>Thank you</p> - <p>You may now close this window and return to the application</p> - </div> -</body> -</html> +{% endblock %} + +{% block body %} +<div> + <p>Thank you</p> + <p>You may now close this window and return to the application</p> +</div> + +{% endblock %} diff --git a/synapse/res/templates/invalid_token.html b/synapse/res/templates/invalid_token.html index 2c7c384fe3..d0b1dae669 100644 --- a/synapse/res/templates/invalid_token.html +++ b/synapse/res/templates/invalid_token.html @@ -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 %} diff --git a/synapse/res/templates/notice_expiry.html b/synapse/res/templates/notice_expiry.html index 865f9f7ada..406397aaca 100644 --- a/synapse/res/templates/notice_expiry.html +++ b/synapse/res/templates/notice_expiry.html @@ -1,47 +1,46 @@ -<!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"> - <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> - <table id="page"> - <tr> - <td> </td> - <td id="inner"> - <table class="header"> - <tr> - <td> - <div class="salutation">Hi {{ display_name }},</div> - </td> - <td class="logo"> - {% 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 %} - </td> - </tr> - <tr> - <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">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> - </td> - </tr> - </table> - </td> - <td> </td> - </tr> - </table> - </body> -</html> +{% 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> +{% endblock %} + +{% block body %} +<table id="page"> + <tr> + <td> </td> + <td id="inner"> + <table class="header"> + <tr> + <td> + <div class="salutation">Hi {{ display_name }},</div> + </td> + <td class="logo"> + {% 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 %} + </td> + </tr> + <tr> + <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">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> + </td> + </tr> + </table> + </td> + <td> </td> + </tr> +</table> +{% endblock %} diff --git a/synapse/res/templates/notif_mail.html b/synapse/res/templates/notif_mail.html index 9dba0c0253..939d40315f 100644 --- a/synapse/res/templates/notif_mail.html +++ b/synapse/res/templates/notif_mail.html @@ -1,59 +1,57 @@ -<!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"> - <style type="text/css"> - {%- include 'mail.css' without context %} - {%- include "mail-%s.css" % app_name ignore missing without context %} - </style> - </head> - <body> - <table id="page"> - <tr> - <td> </td> - <td id="inner"> - <table class="header"> - <tr> - <td> - <div class="salutation">Hi {{ user_display_name }},</div> - <div class="summarytext">{{ summary_text }}</div> - </td> - <td class="logo"> - {%- 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 %} - </td> - </tr> - </table> - {%- for room in rooms %} - {%- include 'room.html' with context %} - {%- endfor %} - <div class="footer"> - <a href="{{ unsubscribe_link }}">Unsubscribe</a> - <br/> - <br/> - <div class="debug"> - 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") }} - 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 %} - 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. - {%- else %} - and we don't have a last time we sent a mail for this room. - {%- endif %} - </div> - </div> - </td> - <td> </td> - </tr> - </table> - </body> -</html> +{% 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> +{% endblock %} + +{% block body %} +<table id="page"> + <tr> + <td> </td> + <td id="inner"> + <table class="header"> + <tr> + <td> + <div class="salutation">Hi {{ user_display_name }},</div> + <div class="summarytext">{{ summary_text }}</div> + </td> + <td class="logo"> + {%- 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 %} + </td> + </tr> + </table> + {%- for room in rooms %} + {%- include 'room.html' with context %} + {%- endfor %} + <div class="footer"> + <a href="{{ unsubscribe_link }}">Unsubscribe</a> + <br/> + <br/> + <div class="debug"> + 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") }} + 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 %} + 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. + {%- else %} + and we don't have a last time we sent a mail for this room. + {%- endif %} + </div> + </div> + </td> + <td> </td> + </tr> +</table> +{% endblock %} diff --git a/synapse/res/templates/password_reset.html b/synapse/res/templates/password_reset.html index a8bdce357b..de5a9ec68f 100644 --- a/synapse/res/templates/password_reset.html +++ b/synapse/res/templates/password_reset.html @@ -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> - <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> +{% block title %}Password reset{% endblock %} - <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> -</body> -</html> +<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> +{% endblock %} diff --git a/synapse/res/templates/password_reset_confirmation.html b/synapse/res/templates/password_reset_confirmation.html index 2e3fd2ec1e..0eac64b6a8 100644 --- a/synapse/res/templates/password_reset_confirmation.html +++ b/synapse/res/templates/password_reset_confirmation.html @@ -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 }}"> @@ -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 %} diff --git a/synapse/res/templates/password_reset_failure.html b/synapse/res/templates/password_reset_failure.html index 2d59c463f0..977babdb40 100644 --- a/synapse/res/templates/password_reset_failure.html +++ b/synapse/res/templates/password_reset_failure.html @@ -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 %} diff --git a/synapse/res/templates/password_reset_success.html b/synapse/res/templates/password_reset_success.html index 5165bd1fa2..0e99fad7ff 100644 --- a/synapse/res/templates/password_reset_success.html +++ b/synapse/res/templates/password_reset_success.html @@ -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 %} diff --git a/synapse/res/templates/recaptcha.html b/synapse/res/templates/recaptcha.html index 615d3239c6..feaf3f6aed 100644 --- a/synapse/res/templates/recaptcha.html +++ b/synapse/res/templates/recaptcha.html @@ -1,10 +1,7 @@ -<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> @@ -12,8 +9,9 @@ function captchaDone() { $('#registrationForm').submit(); } </script> -</head> -<body> +{% endblock %} + +{% block body %} <form id="registrationForm" method="post" action="{{ myurl }}"> <div> {% if error is defined %} @@ -37,5 +35,4 @@ function captchaDone() { </div> </div> </form> -</body> -</html> +{% endblock %} \ No newline at end of file diff --git a/synapse/res/templates/registration.html b/synapse/res/templates/registration.html index 20e831ff4a..189960a832 100644 --- a/synapse/res/templates/registration.html +++ b/synapse/res/templates/registration.html @@ -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> - <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> +{% block title %}Registration{% endblock %} - <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> -</body> -</html> +<p>If this was not you, you can safely disregard this email.</p> + +<p>Thank you.</p> +{% endblock %} diff --git a/synapse/res/templates/registration_failure.html b/synapse/res/templates/registration_failure.html index a6ed22bc90..3debe9301d 100644 --- a/synapse/res/templates/registration_failure.html +++ b/synapse/res/templates/registration_failure.html @@ -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 %} diff --git a/synapse/res/templates/registration_success.html b/synapse/res/templates/registration_success.html index d51d5549d8..e2dd020a9e 100644 --- a/synapse/res/templates/registration_success.html +++ b/synapse/res/templates/registration_success.html @@ -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 %} diff --git a/synapse/res/templates/registration_token.html b/synapse/res/templates/registration_token.html index 59a98f564c..2ee5866ba5 100644 --- a/synapse/res/templates/registration_token.html +++ b/synapse/res/templates/registration_token.html @@ -1,11 +1,10 @@ -<html lang="en"> -<head> -<title>Authentication</title> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> +{% block title %}Authentication{% endblock %} + +{% block header %} <link rel="stylesheet" href="/_matrix/static/client/register/style.css"> -</head> -<body> +{% endblock %} + +{% block body %} <form id="registrationForm" method="post" action="{{ myurl }}"> <div> {% if error is defined %} @@ -19,5 +18,4 @@ <input type="submit" value="Authenticate" /> </div> </form> -</body> -</html> +{% endblock %} diff --git a/synapse/res/templates/sso_account_deactivated.html b/synapse/res/templates/sso_account_deactivated.html index 075f801cec..c634229840 100644 --- a/synapse/res/templates/sso_account_deactivated.html +++ b/synapse/res/templates/sso_account_deactivated.html @@ -1,25 +1,24 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>SSO account deactivated</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 %} - </style> - </head> - <body class="error_page"> - <header> - <h1>Your account has been deactivated</h1> - <p> - <strong>No account found</strong> - </p> - <p> - Your account might have been deactivated by the server administrator. - You can either try to create a new account or contact the server’s - administrator. - </p> - </header> - {% include "sso_footer.html" without context %} - </body> -</html> +{% block title %}SSO account deactivated{% endblock %} + +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} +</style> +{% endblock %} + +{% block body %} +<div class="error_page"> + <header> + <h1>Your account has been deactivated</h1> + <p> + <strong>No account found</strong> + </p> + <p> + Your account might have been deactivated by the server administrator. + You can either try to create a new account or contact the server’s + administrator. + </p> + </header> +</div> +{% include "sso_footer.html" without context %} +{% endblock %} diff --git a/synapse/res/templates/sso_auth_account_details.html b/synapse/res/templates/sso_auth_account_details.html index 2d1db386e1..b516333373 100644 --- a/synapse/res/templates/sso_auth_account_details.html +++ b/synapse/res/templates/sso_auth_account_details.html @@ -1,189 +1,185 @@ -<!DOCTYPE html> -<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 { - outline: 3px solid #17191C; - outline-offset: 4px; - } - - .username_input { - 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 { - border-color: #FE2928; - } - - .username_input.invalid input, .username_input.invalid label { - color: #FE2928; - } - - .username_input div, .username_input input { - line-height: 18px; - font-size: 14px; - } - - .username_input label { - position: absolute; - top: -5px; - left: 14px; - font-size: 10px; - line-height: 10px; - background: white; - padding: 0 2px; - } - - .username_input input { - flex: 1; - display: block; - min-width: 0; - border: none; - } - - /* only clear the outline if we know it will be shown on the parent div using :focus-within */ - @supports selector(:focus-within) { - .username_input input { - outline: none !important; - } - } - - .username_input div { - color: #8D99A5; - } - - .idp-pick-details { - border: 1px solid #E9ECF1; - border-radius: 8px; - margin: 24px 0; - } - - .idp-pick-details h2 { - margin: 0; - padding: 8px 12px; - } - - .idp-pick-details .idp-detail { - border-top: 1px solid #E9ECF1; - padding: 12px; - display: block; - } - .idp-pick-details .check-row { - display: flex; - align-items: center; - } - - .idp-pick-details .check-row .name { - flex: 1; - } - - .idp-pick-details .use, .idp-pick-details .idp-value { - color: #737D8C; - } - - .idp-pick-details .idp-value { - margin: 0; - margin-top: 8px; - } - - .idp-pick-details .avatar { - width: 53px; - height: 53px; - border-radius: 100%; - display: block; - margin-top: 8px; - } - - output { - padding: 0 14px; - display: block; - } - - output.error { - color: #FE2928; - } - </style> - </head> - <body> - <header> - <h1>Create your account</h1> - <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p> - </header> - <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> +{% block title %}Create your account{% endblock %} + +{% block header %} +<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 { + outline: 3px solid #17191C; + outline-offset: 4px; + } + + .username_input { + 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 { + border-color: #FE2928; + } + + .username_input.invalid input, .username_input.invalid label { + color: #FE2928; + } + + .username_input div, .username_input input { + line-height: 18px; + font-size: 14px; + } + + .username_input label { + position: absolute; + top: -5px; + left: 14px; + font-size: 10px; + line-height: 10px; + background: white; + padding: 0 2px; + } + + .username_input input { + flex: 1; + display: block; + min-width: 0; + border: none; + } + + /* only clear the outline if we know it will be shown on the parent div using :focus-within */ + @supports selector(:focus-within) { + .username_input input { + outline: none !important; + } + } + + .username_input div { + color: #8D99A5; + } + + .idp-pick-details { + border: 1px solid #E9ECF1; + border-radius: 8px; + margin: 24px 0; + } + + .idp-pick-details h2 { + margin: 0; + padding: 8px 12px; + } + + .idp-pick-details .idp-detail { + border-top: 1px solid #E9ECF1; + padding: 12px; + display: block; + } + .idp-pick-details .check-row { + display: flex; + align-items: center; + } + + .idp-pick-details .check-row .name { + flex: 1; + } + + .idp-pick-details .use, .idp-pick-details .idp-value { + color: #737D8C; + } + + .idp-pick-details .idp-value { + margin: 0; + margin-top: 8px; + } + + .idp-pick-details .avatar { + width: 53px; + height: 53px; + border-radius: 100%; + display: block; + margin-top: 8px; + } + + output { + padding: 0 14px; + display: block; + } + + output.error { + color: #FE2928; + } +</style> +{% endblock %} + +{% block body %} +<header> + <h1>Create your account</h1> + <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p> +</header> +<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> - <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> - <img src="{{ user_attributes.avatar_url }}" class="avatar" /> - </label> - {% endif %} - {% if user_attributes.display_name %} - <label class="idp-detail" for="idp-displayname"> - <div class="check-row"> - <span class="name">Display name</span> - <span class="use">Use</span> - <input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked> - </div> - <p class="idp-value">{{ user_attributes.display_name }}</p> - </label> - {% endif %} - {% for email in user_attributes.emails %} - <label class="idp-detail" for="idp-email{{ loop.index }}"> - <div class="check-row"> - <span class="name">E-mail</span> - <span class="use">Use</span> - <input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked> - </div> - <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> + <img src="{{ user_attributes.avatar_url }}" class="avatar" /> + </label> + {% endif %} + {% if user_attributes.display_name %} + <label class="idp-detail" for="idp-displayname"> + <div class="check-row"> + <span class="name">Display name</span> + <span class="use">Use</span> + <input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked> + </div> + <p class="idp-value">{{ user_attributes.display_name }}</p> + </label> + {% endif %} + {% for email in user_attributes.emails %} + <label class="idp-detail" for="idp-email{{ loop.index }}"> + <div class="check-row"> + <span class="name">E-mail</span> + <span class="use">Use</span> + <input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked> + </div> + <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> +{% endblock %} diff --git a/synapse/res/templates/sso_auth_bad_user.html b/synapse/res/templates/sso_auth_bad_user.html index 94403fc3ce..69fdcc9ef0 100644 --- a/synapse/res/templates/sso_auth_bad_user.html +++ b/synapse/res/templates/sso_auth_bad_user.html @@ -1,27 +1,25 @@ -<!DOCTYPE html> -<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 %} - </style> - </head> - <body class="error_page"> - <header> - <h1>That doesn't look right</h1> - <p> - <strong>We were unable to validate your {{ server_name }} account</strong> - via single sign‑on (SSO), because the SSO Identity - Provider returned different details than when you logged in. - </p> - <p> - Try the operation again, and ensure that you use the same details on - the Identity Provider as when you log into your account. - </p> - </header> - {% include "sso_footer.html" without context %} - </body> -</html> +{% block title %}Authentication failed{% endblock %} + +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} +</style> +{% endblock %} + +{% block body %} +<div class="error_page"> + <header> + <h1>That doesn't look right</h1> + <p> + <strong>We were unable to validate your {{ server_name }} account</strong> + via single sign‑on (SSO), because the SSO Identity + Provider returned different details than when you logged in. + </p> + <p> + Try the operation again, and ensure that you use the same details on + the Identity Provider as when you log into your account. + </p> + </header> +</div> +{% include "sso_footer.html" without context %} +{% endblock %} diff --git a/synapse/res/templates/sso_auth_confirm.html b/synapse/res/templates/sso_auth_confirm.html index aa1c974a6b..2d106e0ae4 100644 --- a/synapse/res/templates/sso_auth_confirm.html +++ b/synapse/res/templates/sso_auth_confirm.html @@ -1,30 +1,26 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Confirm it's you</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 %} - </style> - </head> - <body> - <header> - <h1>Confirm it's you to continue</h1> - <p> - A client is trying to {{ description }}. To confirm this action - re-authorize your account with single sign-on. - </p> - <p><strong> - If you did not expect this, your account may be compromised. - </strong></p> - </header> - <main> - <a href="{{ redirect_url }}" class="primary-button"> - Continue with {{ idp.idp_name }} - </a> - </main> - {% include "sso_footer.html" without context %} - </body> -</html> +{% block title %}Confirm it's you{% endblock %} + +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} +</style> +{% endblock %} + +{% block body %} +<header> + <h1>Confirm it's you to continue</h1> + <p> + A client is trying to {{ description }}. To confirm this action + re-authorize your account with single sign-on. + </p> + <p><strong> + If you did not expect this, your account may be compromised. + </strong></p> +</header> +<main> + <a href="{{ redirect_url }}" class="primary-button"> + Continue with {{ idp.idp_name }} + </a> +</main> +{% include "sso_footer.html" without context %} +{% endblock %} diff --git a/synapse/res/templates/sso_auth_success.html b/synapse/res/templates/sso_auth_success.html index 4898af6011..56150eaefe 100644 --- a/synapse/res/templates/sso_auth_success.html +++ b/synapse/res/templates/sso_auth_success.html @@ -1,29 +1,25 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="UTF-8"> - <title>Authentication successful</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 %} - </style> - <script> - if (window.onAuthDone) { - window.onAuthDone(); - } else if (window.opener && window.opener.postMessage) { - window.opener.postMessage("authDone", "*"); - } - </script> - </head> - <body> - <header> - <h1>Thank you</h1> - <p> - Now we know it’s you, you can close this window and return to the - application. - </p> - </header> - {% include "sso_footer.html" without context %} - </body> -</html> +{% block title %}Authentication successful{% endblock %} + +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} +</style> +<script> + if (window.onAuthDone) { + window.onAuthDone(); + } else if (window.opener && window.opener.postMessage) { + window.opener.postMessage("authDone", "*"); + } +</script> +{% endblock %} + +{% block body %} +<header> + <h1>Thank you</h1> + <p> + Now we know it’s you, you can close this window and return to the + application. + </p> +</header> +{% include "sso_footer.html" without context %} +{% endblock %} diff --git a/synapse/res/templates/sso_error.html b/synapse/res/templates/sso_error.html index 19992ff2ad..e394a92623 100644 --- a/synapse/res/templates/sso_error.html +++ b/synapse/res/templates/sso_error.html @@ -1,19 +1,19 @@ -<!DOCTYPE html> -<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 %} +{% block title %}Authentication failed{% endblock %} - #error_code { - margin-top: 56px; - } - </style> - </head> - <body class="error_page"> +{% block header %} +{% if error == "unauthorised" %} +<style type="text/css"> + {% include "sso.css" without context %} + + #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 error == "unauthorised" %} <header> @@ -66,5 +66,5 @@ } </script> {% endif %} -</body> -</html> +</div> +{% endblock %} diff --git a/synapse/res/templates/sso_login_idp_picker.html b/synapse/res/templates/sso_login_idp_picker.html index 56fabfa3d2..a2772ca9ef 100644 --- a/synapse/res/templates/sso_login_idp_picker.html +++ b/synapse/res/templates/sso_login_idp_picker.html @@ -1,63 +1,59 @@ -<!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"> - <meta charset="UTF-8"> - <title>Choose identity provider</title> - <style type="text/css"> - {% include "sso.css" without context %} +{% block title %}Choose identity provider{% endblock %} - .providers { - list-style: none; - padding: 0; - } +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} - .providers li { - margin: 12px; - } + .providers { + list-style: none; + padding: 0; + } - .providers a { - display: block; - 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 li { + margin: 12px; + } - .providers a img { - width: 24px; - height: 24px; - } - .providers a span { - flex: 1; - } - </style> - </head> - <body> - <header> - <h1>Log in to {{ server_name }} </h1> - <p>Choose an identity provider to log in</p> - </header> - <main> - <ul class="providers"> - {% 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 %} - </body> -</html> + .providers a { + display: block; + 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 { + width: 24px; + height: 24px; + } + .providers a span { + flex: 1; + } +</style> +{% endblock %} + +{% block body %} +<header> + <h1>Log in to {{ server_name }} </h1> + <p>Choose an identity provider to log in</p> +</header> +<main> + <ul class="providers"> + {% 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 %} diff --git a/synapse/res/templates/sso_new_user_consent.html b/synapse/res/templates/sso_new_user_consent.html index 523f64c4fc..126887d26c 100644 --- a/synapse/res/templates/sso_new_user_consent.html +++ b/synapse/res/templates/sso_new_user_consent.html @@ -1,33 +1,29 @@ -<!DOCTYPE html> -<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 %} +{% block title %}Agree to terms and conditions{% endblock %} - #consent_form { - margin-top: 56px; - } - </style> -</head> - <body> - <header> - <h1>Your account is nearly ready</h1> - <p>Agree to the terms to create your account.</p> - </header> - <main> - {% include "sso_partial_profile.html" %} - <form method="post" action="{{my_url}}" id="consent_form"> - <p> - <input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required> - <label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label> - </p> - <input type="submit" class="primary-button" value="Continue"/> - </form> - </main> - {% include "sso_footer.html" without context %} - </body> -</html> +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} + + #consent_form { + margin-top: 56px; + } +</style> +{% endblock %} + +{% block body %} +<header> + <h1>Your account is nearly ready</h1> + <p>Agree to the terms to create your account.</p> +</header> +<main> + {% include "sso_partial_profile.html" %} + <form method="post" action="{{my_url}}" id="consent_form"> + <p> + <input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required> + <label for="accepted_version">I have read and agree to the <a href="{{ terms_url }}" target="_blank" rel="noopener">terms and conditions</a>.</label> + </p> + <input type="submit" class="primary-button" value="Continue"/> + </form> +</main> +{% include "sso_footer.html" without context %} +{% endblock %} diff --git a/synapse/res/templates/sso_redirect_confirm.html b/synapse/res/templates/sso_redirect_confirm.html index 1049a9bd92..887ee0d294 100644 --- a/synapse/res/templates/sso_redirect_confirm.html +++ b/synapse/res/templates/sso_redirect_confirm.html @@ -1,41 +1,38 @@ -<!DOCTYPE html> -<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 %} +{% block title %}Continue to your account{% endblock %} - .confirm-trust { - margin: 34px 0; - color: #8D99A5; - } - .confirm-trust strong { - color: #17191C; - } +{% block header %} +<style type="text/css"> + {% include "sso.css" without context %} - .confirm-trust::before { - content: ""; - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK'); - background-repeat: no-repeat; - width: 24px; - height: 24px; - display: block; - float: left; - } - </style> -</head> - <body> - <header> - <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 %} - </body> -</html> + .confirm-trust { + margin: 34px 0; + color: #8D99A5; + } + .confirm-trust strong { + color: #17191C; + } + + .confirm-trust::before { + content: ""; + background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK'); + background-repeat: no-repeat; + width: 24px; + height: 24px; + display: block; + float: left; + } +</style> +{% endblock %} + +{% block body %} +<header> + <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 %} diff --git a/synapse/res/templates/style.css b/synapse/res/templates/style.css new file mode 100644 index 0000000000..097b235ae5 --- /dev/null +++ b/synapse/res/templates/style.css @@ -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; } +} diff --git a/synapse/res/templates/terms.html b/synapse/res/templates/terms.html index 2081d990ab..977c3d0bc7 100644 --- a/synapse/res/templates/terms.html +++ b/synapse/res/templates/terms.html @@ -1,11 +1,10 @@ -<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"> +{% block title %}Authentication{% endblock %} + +{% block header %} <link rel="stylesheet" href="/_matrix/static/client/register/style.css"> -</head> -<body> +{% endblock %} + +{% block body %} <form id="registrationForm" method="post" action="{{ myurl }}"> <div> {% if error is defined %} @@ -19,5 +18,4 @@ <input type="submit" value="Agree" /> </div> </form> -</body> -</html> +{% endblock %} |