Matrix/synapse
Matrix/synapse
1
0
Fork 0
mirror of https://github.com/element-hq/synapse synced 2024-07-02 12:23:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling and wording of SSO error templates (#9287)

Browse source
This commit is contained in:
Richard van der Hoff 2021-02-01 18:01:15 +00:00 committed by GitHub
parent 85c56b5a67
commit 419313b06a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/9287.feature Normal file
View file

@ -0,0 +1 @@
Improve the user experience of setting up an account via single-sign on.

6
synapse/res/templates/sso.css
View file

@ -20,6 +20,10 @@ h1 {
font-size: 24px; font-size: 24px;
} }
.error_page h1 {
color: #FE2928;
}
h2 { h2 {
font-size: 14px; font-size: 14px;
} }
@ -80,4 +84,4 @@ main {
.profile .display-name, .profile .user-id { .profile .display-name, .profile .user-id {
line-height: 18px; line-height: 18px;
} }

26
synapse/res/templates/sso_account_deactivated.html
View file

@ -1,10 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>SSO account deactivated</title> <title>SSO account deactivated</title>
</head> <meta name="viewport" content="width=device-width, user-scalable=no">
<body> <style type="text/css">
<p>This account has been deactivated.</p> {% 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>
</body> </body>
</html> </html>

27
synapse/res/templates/sso_auth_bad_user.html
View file

@ -1,18 +1,25 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<title>Authentication Failed</title> <head>
</head> <meta charset="UTF-8">
<body> <title>Authentication failed</title>
<div> <meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
{% include "sso.css" without context %}
</style>
</head>
<body class="error_page">
<header>
<h1>That doesn't look right</h1>
<p> <p>
We were unable to validate your <tt>{{server_name | e}}</tt> account via <strong>We were unable to validate your {{ server_name | e }} account</strong>
single-sign-on (SSO), because the SSO Identity Provider returned via single&nbsp;sign&#8209;on&nbsp;(SSO), because the SSO Identity
different details than when you logged in. Provider returned different details than when you logged in.
</p> </p>
<p> <p>
Try the operation again, and ensure that you use the same details on Try the operation again, and ensure that you use the same details on
the Identity Provider as when you log into your account. the Identity Provider as when you log into your account.
</p> </p>
</div> </header>
</body> </body>
</html> </html>

101
synapse/res/templates/sso_error.html
View file

@ -1,53 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>SSO error</title> <title>Authentication failed</title>
</head> <meta name="viewport" content="width=device-width, user-scalable=no">
<body> <style type="text/css">
{% include "sso.css" without context %}
#error_code {
margin-top: 56px;
}
</style>
</head>
<body class="error_page">
{# If an error of unauthorised is returned it means we have actively rejected their login #} {# If an error of unauthorised is returned it means we have actively rejected their login #}
{% if error == "unauthorised" %} {% if error == "unauthorised" %}
<p>You are not allowed to log in here.</p> <header>
<p>You are not allowed to log in here.</p>
</header>
{% else %} {% else %}
<p> <header>
There was an error during authentication: <h1>There was an error</h1>
</p> <p>
<div id="errormsg" style="margin:20px 80px">{{ error_description | e }}</div> <strong id="errormsg">{{ error_description | e }}</strong>
<p> </p>
If you are seeing this page after clicking a link sent to you via email, make <p>
sure you only click the confirmation link once, and that you open the If you are seeing this page after clicking a link sent to you via email,
validation link in the same client you're logging in from. make sure you only click the confirmation link once, and that you open
</p> the validation link in the same client you're logging in from.
<p> </p>
Try logging in again from your Matrix client and if the problem persists <p>
please contact the server's administrator. Try logging in again from your Matrix client and if the problem persists
</p> please contact the server's administrator.
<p>Error: <code>{{ error }}</code></p> </p>
<div id="error_code">
<p><strong>Error code</strong></p>
<p>{{ error | e }}</p>
</div>
</header>
<script type="text/javascript"> <script type="text/javascript">
// Error handling to support Auth0 errors that we might get through a GET request // Error handling to support Auth0 errors that we might get through a GET request
// to the validation endpoint. If an error is provided, it's either going to be // to the validation endpoint. If an error is provided, it's either going to be
// located in the query string or in a query string-like URI fragment. // located in the query string or in a query string-like URI fragment.
// We try to locate the error from any of these two locations, but if we can't // We try to locate the error from any of these two locations, but if we can't
// we just don't print anything specific. // we just don't print anything specific.
let searchStr = ""; let searchStr = "";
if (window.location.search) { if (window.location.search) {
// window.location.searchParams isn't always defined when // window.location.searchParams isn't always defined when
// window.location.search is, so it's more reliable to parse the latter. // window.location.search is, so it's more reliable to parse the latter.
searchStr = window.location.search; searchStr = window.location.search;
} else if (window.location.hash) { } else if (window.location.hash) {
// Replace the # with a ? so that URLSearchParams does the right thing and // Replace the # with a ? so that URLSearchParams does the right thing and
// doesn't parse the first parameter incorrectly. // doesn't parse the first parameter incorrectly.
searchStr = window.location.hash.replace("#", "?"); searchStr = window.location.hash.replace("#", "?");
} }
// We might end up with no error in the URL, so we need to check if we have one // We might end up with no error in the URL, so we need to check if we have one
// to print one. // to print one.
let errorDesc = new URLSearchParams(searchStr).get("error_description") let errorDesc = new URLSearchParams(searchStr).get("error_description")
if (errorDesc) { if (errorDesc) {
document.getElementById("errormsg").innerText = errorDesc; document.getElementById("errormsg").innerText = errorDesc;
} }
</script> </script>
{% endif %} {% endif %}
</body> </body>
</html> </html>