Skip to content
Snippets Groups Projects
Unverified Commit 419313b0 authored by Richard van der Hoff's avatar Richard van der Hoff Committed by GitHub
Browse files

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

parent 85c56b5a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
changelog.d/9287.feature 0 → 100644
+ 1
− 0
View file @ 419313b0
Improve the user experience of setting up an account via single-sign on.
synapse/res/templates/sso.css
+ 5
− 1
View file @ 419313b0
...@@ -20,6 +20,10 @@ h1 { ...@@ -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 { ...@@ -80,4 +84,4 @@ main {
.profile .display-name, .profile .user-id { .profile .display-name, .profile .user-id {
line-height: 18px; line-height: 18px;
} }
\ No newline at end of file
synapse/res/templates/sso_account_deactivated.html
+ 20
− 6
View file @ 419313b0
<!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>
synapse/res/templates/sso_auth_bad_user.html
+ 17
− 10
View file @ 419313b0
<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>
synapse/res/templates/sso_error.html
+ 58
− 43
View file @ 419313b0
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment