forked from MirrorHub/synapse
Improve styling and wording of SSO error templates (#9287)
This commit is contained in:
parent
85c56b5a67
commit
419313b06a
1
changelog.d/9287.feature
Normal file
1
changelog.d/9287.feature
Normal file
|
@ -0,0 +1 @@
|
||||||
|
Improve the user experience of setting up an account via single-sign on.
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 sign‑on (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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue