mirror of https://github.com/watcha-fr/synapse
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.1.103.0-whithout-watcha
Germain
2 years ago
committed by
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> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title> |
||||
</head> |
||||
<body> |
||||
Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}. |
||||
</body> |
||||
</html> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your account is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p> |
||||
{% endblock %} |
||||
|
||||
@ -1,12 +1,6 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</title> |
||||
</head> |
||||
<body> |
||||
Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}. |
||||
</body> |
||||
</html> |
||||
{% extends "_base.html" %} |
||||
{% block title %}Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.{% endblock %} |
||||
|
||||
{% block body %} |
||||
<p>Your account has been successfully renewed and is valid until {{ expiration_ts|format_ts("%d-%m-%Y") }}.</p> |
||||
{% endblock %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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> |
||||
{% 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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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 %} |
||||
|
||||
@ -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; } |
||||
} |
||||
Loading…
Reference in new issue