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

Commit 419313b

Browse files
richvdhrichvdh
authored
Improve styling and wording of SSO error templates (#9287)
1 parent 85c56b5 commit 419313b

File tree

5 files changed

+101
-60
lines changed

5 files changed

+101
-60
lines changed

‎changelog.d/9287.feature

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

‎synapse/res/templates/sso.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ h1 {
2020
font-size: 24px;
2121
}
2222

23+
.error_page h1 {
24+
color: #FE2928;
25+
}
26+
2327
h2 {
2428
font-size: 14px;
2529
}
@@ -80,4 +84,4 @@ main {
8084

8185
.profile .display-name, .profile .user-id {
8286
line-height: 18px;
83-
}
87+
}

‎synapse/res/templates/sso_account_deactivated.html

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>SSO account deactivated</title>
6-
</head>
7-
<body>
8-
<p>This account has been deactivated.</p>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>SSO account deactivated</title>
6+
<meta name="viewport" content="width=device-width, user-scalable=no">
7+
<style type="text/css">
8+
{% include "sso.css" without context %}
9+
</style>
10+
</head>
11+
<body class="error_page">
12+
<header>
13+
<h1>Your account has been deactivated</h1>
14+
<p>
15+
<strong>No account found</strong>
16+
</p>
17+
<p>
18+
Your account might have been deactivated by the server administrator.
19+
You can either try to create a new account or contact the server’s
20+
administrator.
21+
</p>
22+
</header>
923
</body>
1024
</html>

‎synapse/res/templates/sso_auth_bad_user.html

+17-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
<html>
2-
<head>
3-
<title>Authentication Failed</title>
4-
</head>
5-
<body>
6-
<div>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Authentication failed</title>
6+
<meta name="viewport" content="width=device-width, user-scalable=no">
7+
<style type="text/css">
8+
{% include "sso.css" without context %}
9+
</style>
10+
</head>
11+
<body class="error_page">
12+
<header>
13+
<h1>That doesn't look right</h1>
714
<p>
8-
We were unable to validate your <tt>{{server_name | e}}</tt> account via
9-
single-sign-on (SSO), because the SSO Identity Provider returned
10-
different details than when you logged in.
15+
<strong>We were unable to validate your {{ server_name | e }} account</strong>
16+
via single&nbsp;sign&#8209;on&nbsp;(SSO), because the SSO Identity
17+
Provider returned different details than when you logged in.
1118
</p>
1219
<p>
1320
Try the operation again, and ensure that you use the same details on
1421
the Identity Provider as when you log into your account.
1522
</p>
16-
</div>
23+
</header>
1724
</body>
1825
</html>

‎synapse/res/templates/sso_error.html

+58-43
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,68 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>SSO error</title>
6-
</head>
7-
<body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Authentication failed</title>
6+
<meta name="viewport" content="width=device-width, user-scalable=no">
7+
<style type="text/css">
8+
{% include "sso.css" without context %}
9+
10+
#error_code {
11+
margin-top: 56px;
12+
}
13+
</style>
14+
</head>
15+
<body class="error_page">
816
{# If an error of unauthorised is returned it means we have actively rejected their login #}
917
{% if error == "unauthorised" %}
10-
<p>You are not allowed to log in here.</p>
18+
<header>
19+
<p>You are not allowed to log in here.</p>
20+
</header>
1121
{% else %}
12-
<p>
13-
There was an error during authentication:
14-
</p>
15-
<div id="errormsg" style="margin:20px 80px">{{ error_description | e }}</div>
16-
<p>
17-
If you are seeing this page after clicking a link sent to you via email, make
18-
sure you only click the confirmation link once, and that you open the
19-
validation link in the same client you're logging in from.
20-
</p>
21-
<p>
22-
Try logging in again from your Matrix client and if the problem persists
23-
please contact the server's administrator.
24-
</p>
25-
<p>Error: <code>{{ error }}</code></p>
22+
<header>
23+
<h1>There was an error</h1>
24+
<p>
25+
<strong id="errormsg">{{ error_description | e }}</strong>
26+
</p>
27+
<p>
28+
If you are seeing this page after clicking a link sent to you via email,
29+
make sure you only click the confirmation link once, and that you open
30+
the validation link in the same client you're logging in from.
31+
</p>
32+
<p>
33+
Try logging in again from your Matrix client and if the problem persists
34+
please contact the server's administrator.
35+
</p>
36+
<div id="error_code">
37+
<p><strong>Error code</strong></p>
38+
<p>{{ error | e }}</p>
39+
</div>
40+
</header>
2641

27-
<script type="text/javascript">
28-
// Error handling to support Auth0 errors that we might get through a GET request
29-
// to the validation endpoint. If an error is provided, it's either going to be
30-
// located in the query string or in a query string-like URI fragment.
31-
// We try to locate the error from any of these two locations, but if we can't
32-
// we just don't print anything specific.
33-
let searchStr = "";
34-
if (window.location.search) {
35-
// window.location.searchParams isn't always defined when
36-
// window.location.search is, so it's more reliable to parse the latter.
37-
searchStr = window.location.search;
38-
} else if (window.location.hash) {
39-
// Replace the # with a ? so that URLSearchParams does the right thing and
40-
// doesn't parse the first parameter incorrectly.
41-
searchStr = window.location.hash.replace("#", "?");
42-
}
42+
<script type="text/javascript">
43+
// Error handling to support Auth0 errors that we might get through a GET request
44+
// to the validation endpoint. If an error is provided, it's either going to be
45+
// located in the query string or in a query string-like URI fragment.
46+
// We try to locate the error from any of these two locations, but if we can't
47+
// we just don't print anything specific.
48+
let searchStr = "";
49+
if (window.location.search) {
50+
// window.location.searchParams isn't always defined when
51+
// window.location.search is, so it's more reliable to parse the latter.
52+
searchStr = window.location.search;
53+
} else if (window.location.hash) {
54+
// Replace the # with a ? so that URLSearchParams does the right thing and
55+
// doesn't parse the first parameter incorrectly.
56+
searchStr = window.location.hash.replace("#", "?");
57+
}
4358

44-
// We might end up with no error in the URL, so we need to check if we have one
45-
// to print one.
46-
let errorDesc = new URLSearchParams(searchStr).get("error_description")
47-
if (errorDesc) {
48-
document.getElementById("errormsg").innerText = errorDesc;
49-
}
50-
</script>
59+
// We might end up with no error in the URL, so we need to check if we have one
60+
// to print one.
61+
let errorDesc = new URLSearchParams(searchStr).get("error_description")
62+
if (errorDesc) {
63+
document.getElementById("errormsg").innerText = errorDesc;
64+
}
65+
</script>
5166
{% endif %}
5267
</body>
5368
</html>

0 commit comments

Comments
 (0)