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

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

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.

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;
} }

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 servers
administrator.
</p>
</header>
</body> </body>
</html> </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>

View file

@ -1,28 +1,43 @@
<!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" %}
<header>
<p>You are not allowed to log in here.</p> <p>You are not allowed to log in here.</p>
</header>
{% else %} {% else %}
<header>
<h1>There was an error</h1>
<p> <p>
There was an error during authentication: <strong id="errormsg">{{ error_description | e }}</strong>
</p> </p>
<div id="errormsg" style="margin:20px 80px">{{ error_description | e }}</div>
<p> <p>
If you are seeing this page after clicking a link sent to you via email, make If you are seeing this page after clicking a link sent to you via email,
sure you only click the confirmation link once, and that you open the make sure you only click the confirmation link once, and that you open
validation link in the same client you're logging in from. the validation link in the same client you're logging in from.
</p> </p>
<p> <p>
Try logging in again from your Matrix client and if the problem persists Try logging in again from your Matrix client and if the problem persists
please contact the server's administrator. please contact the server's administrator.
</p> </p>
<p>Error: <code>{{ error }}</code></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