diff options
author | Richard van der Hoff <1389908+richvdh@users.noreply.github.com> | 2021-02-01 18:01:15 +0000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-01 18:01:15 +0000 |
commit | 419313b06ab21d60773fd95782c655ff79742f06 (patch) | |
tree | a1e27ce456b3e3050c8e8bce2d0f142e36cf8aed /synapse/res | |
parent | Make importing display name and email optional (#9277) (diff) | |
download | synapse-419313b06ab21d60773fd95782c655ff79742f06.tar.xz |
Improve styling and wording of SSO error templates (#9287)
Diffstat (limited to 'synapse/res')
-rw-r--r-- | synapse/res/templates/sso.css | 6 | ||||
-rw-r--r-- | synapse/res/templates/sso_account_deactivated.html | 26 | ||||
-rw-r--r-- | synapse/res/templates/sso_auth_bad_user.html | 27 | ||||
-rw-r--r-- | synapse/res/templates/sso_error.html | 101 |
4 files changed, 100 insertions, 60 deletions
diff --git a/synapse/res/templates/sso.css b/synapse/res/templates/sso.css index ff9dc94032..428ee917b3 100644 --- a/synapse/res/templates/sso.css +++ b/synapse/res/templates/sso.css @@ -20,6 +20,10 @@ h1 { font-size: 24px; } +.error_page h1 { + color: #FE2928; +} + h2 { font-size: 14px; } @@ -80,4 +84,4 @@ main { .profile .display-name, .profile .user-id { line-height: 18px; -} \ No newline at end of file +} diff --git a/synapse/res/templates/sso_account_deactivated.html b/synapse/res/templates/sso_account_deactivated.html index 4eb8db9fb4..50a0979c2f 100644 --- a/synapse/res/templates/sso_account_deactivated.html +++ b/synapse/res/templates/sso_account_deactivated.html @@ -1,10 +1,24 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <title>SSO account deactivated</title> -</head> - <body> - <p>This account has been deactivated.</p> + <head> + <meta charset="UTF-8"> + <title>SSO account deactivated</title> + <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>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> </html> diff --git a/synapse/res/templates/sso_auth_bad_user.html b/synapse/res/templates/sso_auth_bad_user.html index 3611191bf9..a75c73a142 100644 --- a/synapse/res/templates/sso_auth_bad_user.html +++ b/synapse/res/templates/sso_auth_bad_user.html @@ -1,18 +1,25 @@ -<html> -<head> - <title>Authentication Failed</title> -</head> - <body> - <div> +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Authentication failed</title> + <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> - We were unable to validate your <tt>{{server_name | e}}</tt> account via - single-sign-on (SSO), because the SSO Identity Provider returned - different details than when you logged in. + <strong>We were unable to validate your {{ server_name | e }} account</strong> + via single sign‑on (SSO), because the SSO Identity + Provider returned different details than when you logged in. </p> <p> Try the operation again, and ensure that you use the same details on the Identity Provider as when you log into your account. </p> - </div> + </header> </body> </html> diff --git a/synapse/res/templates/sso_error.html b/synapse/res/templates/sso_error.html index 944bc9c9ca..69b93d65c1 100644 --- a/synapse/res/templates/sso_error.html +++ b/synapse/res/templates/sso_error.html @@ -1,53 +1,68 @@ <!DOCTYPE html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <title>SSO error</title> -</head> -<body> + <head> + <meta charset="UTF-8"> + <title>Authentication failed</title> + <meta name="viewport" content="width=device-width, user-scalable=no"> + <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 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 %} - <p> - There was an error during authentication: - </p> - <div id="errormsg" style="margin:20px 80px">{{ error_description | e }}</div> - <p> - If you are seeing this page after clicking a link sent to you via email, make - sure you only click the confirmation link once, and that you open 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 - please contact the server's administrator. - </p> - <p>Error: <code>{{ error }}</code></p> + <header> + <h1>There was an error</h1> + <p> + <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 sure you only click the confirmation link once, and that you open + 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 + please contact the server's administrator. + </p> + <div id="error_code"> + <p><strong>Error code</strong></p> + <p>{{ error | e }}</p> + </div> + </header> - <script type="text/javascript"> - // 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 - // 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 just don't print anything specific. - let searchStr = ""; - if (window.location.search) { - // window.location.searchParams isn't always defined when - // window.location.search is, so it's more reliable to parse the latter. - searchStr = window.location.search; - } else if (window.location.hash) { - // Replace the # with a ? so that URLSearchParams does the right thing and - // doesn't parse the first parameter incorrectly. - searchStr = window.location.hash.replace("#", "?"); - } + <script type="text/javascript"> + // 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 + // 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 just don't print anything specific. + let searchStr = ""; + if (window.location.search) { + // window.location.searchParams isn't always defined when + // window.location.search is, so it's more reliable to parse the latter. + searchStr = window.location.search; + } else if (window.location.hash) { + // Replace the # with a ? so that URLSearchParams does the right thing and + // doesn't parse the first parameter incorrectly. + searchStr = window.location.hash.replace("#", "?"); + } - // We might end up with no error in the URL, so we need to check if we have one - // to print one. - let errorDesc = new URLSearchParams(searchStr).get("error_description") - if (errorDesc) { - document.getElementById("errormsg").innerText = errorDesc; - } - </script> + // We might end up with no error in the URL, so we need to check if we have one + // to print one. + let errorDesc = new URLSearchParams(searchStr).get("error_description") + if (errorDesc) { + document.getElementById("errormsg").innerText = errorDesc; + } + </script> {% endif %} </body> </html> |