Improve styling and wording of SSO UIA templates (#9286)

fixes #9171
This commit is contained in:
Richard van der Hoff 2021-02-01 18:36:04 +00:00 committed by GitHub
parent 419313b06a
commit e5d70c8a82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 25 deletions

1
changelog.d/9286.feature Normal file
View File

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

View File

@ -1958,8 +1958,13 @@ sso:
# #
# * providers: a list of available Identity Providers. Each element is # * providers: a list of available Identity Providers. Each element is
# an object with the following attributes: # an object with the following attributes:
#
# * idp_id: unique identifier for the IdP # * idp_id: unique identifier for the IdP
# * idp_name: user-facing name for the IdP # * idp_name: user-facing name for the IdP
# * idp_icon: if specified in the IdP config, an MXC URI for an icon
# for the IdP
# * idp_brand: if specified in the IdP config, a textual identifier
# for the brand of the IdP
# #
# The rendered HTML page should contain a form which submits its results # The rendered HTML page should contain a form which submits its results
# back as a GET request, with the following query parameters: # back as a GET request, with the following query parameters:
@ -2037,6 +2042,16 @@ sso:
# #
# * description: the operation which the user is being asked to confirm # * description: the operation which the user is being asked to confirm
# #
# * idp: details of the Identity Provider that we will use to confirm
# the user's identity: an object with the following attributes:
#
# * idp_id: unique identifier for the IdP
# * idp_name: user-facing name for the IdP
# * idp_icon: if specified in the IdP config, an MXC URI for an icon
# for the IdP
# * idp_brand: if specified in the IdP config, a textual identifier
# for the brand of the IdP
#
# * HTML page shown after a successful user interactive authentication session: # * HTML page shown after a successful user interactive authentication session:
# 'sso_auth_success.html'. # 'sso_auth_success.html'.
# #

View File

@ -113,8 +113,13 @@ class SSOConfig(Config):
# #
# * providers: a list of available Identity Providers. Each element is # * providers: a list of available Identity Providers. Each element is
# an object with the following attributes: # an object with the following attributes:
#
# * idp_id: unique identifier for the IdP # * idp_id: unique identifier for the IdP
# * idp_name: user-facing name for the IdP # * idp_name: user-facing name for the IdP
# * idp_icon: if specified in the IdP config, an MXC URI for an icon
# for the IdP
# * idp_brand: if specified in the IdP config, a textual identifier
# for the brand of the IdP
# #
# The rendered HTML page should contain a form which submits its results # The rendered HTML page should contain a form which submits its results
# back as a GET request, with the following query parameters: # back as a GET request, with the following query parameters:
@ -192,6 +197,16 @@ class SSOConfig(Config):
# #
# * description: the operation which the user is being asked to confirm # * description: the operation which the user is being asked to confirm
# #
# * idp: details of the Identity Provider that we will use to confirm
# the user's identity: an object with the following attributes:
#
# * idp_id: unique identifier for the IdP
# * idp_name: user-facing name for the IdP
# * idp_icon: if specified in the IdP config, an MXC URI for an icon
# for the IdP
# * idp_brand: if specified in the IdP config, a textual identifier
# for the brand of the IdP
#
# * HTML page shown after a successful user interactive authentication session: # * HTML page shown after a successful user interactive authentication session:
# 'sso_auth_success.html'. # 'sso_auth_success.html'.
# #

View File

@ -1388,7 +1388,9 @@ class AuthHandler(BaseHandler):
) )
return self._sso_auth_confirm_template.render( return self._sso_auth_confirm_template.render(
description=session.description, redirect_url=redirect_url, description=session.description,
redirect_url=redirect_url,
idp=sso_auth_provider,
) )
async def complete_sso_login( async def complete_sso_login(

View File

@ -1,14 +1,28 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<title>Authentication</title> <head>
</head> <meta charset="UTF-8">
<title>Authentication</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style type="text/css">
{% include "sso.css" without context %}
</style>
</head>
<body> <body>
<div> <header>
<h1>Confirm it's you to continue</h1>
<p> <p>
A client is trying to {{ description | e }}. To confirm this action, A client is trying to {{ description | e }}. To confirm this action
<a href="{{ redirect_url | e }}">re-authenticate with single sign-on</a>. re-authorize your account with single sign-on.
If you did not expect this, your account may be compromised!
</p> </p>
</div> <p><strong>
If you did not expect this, your account may be compromised.
</strong></p>
</header>
<main>
<a href="{{ redirect_url | e }}" class="primary-button"/>
Continue with {{ idp.idp_name | e }}
</a>
</main>
</body> </body>
</html> </html>

View File

@ -1,18 +1,27 @@
<html> <!DOCTYPE html>
<head> <html lang="en">
<title>Authentication Successful</title> <head>
<script> <meta charset="UTF-8">
if (window.onAuthDone) { <title>Authentication successful</title>
window.onAuthDone(); <meta name="viewport" content="width=device-width, user-scalable=no">
} else if (window.opener && window.opener.postMessage) { <style type="text/css">
window.opener.postMessage("authDone", "*"); {% include "sso.css" without context %}
} </style>
</script> <script>
</head> if (window.onAuthDone) {
window.onAuthDone();
} else if (window.opener && window.opener.postMessage) {
window.opener.postMessage("authDone", "*");
}
</script>
</head>
<body> <body>
<div> <header>
<p>Thank you</p> <h1>Thank you</h1>
<p>You may now close this window and return to the application</p> <p>
</div> Now we know its you, you can close this window and return to the
application.
</p>
</header>
</body> </body>
</html> </html>