diff options
author | Richard van der Hoff <1389908+richvdh@users.noreply.github.com> | 2021-02-01 18:36:04 +0000 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-01 18:36:04 +0000 |
commit | e5d70c8a82f5d615dbdc7f7aa69288681ba2e9f5 (patch) | |
tree | 4b95eb05a269630448ee2904867234aba4faa8b6 | |
parent | Improve styling and wording of SSO error templates (#9287) (diff) | |
download | synapse-e5d70c8a82f5d615dbdc7f7aa69288681ba2e9f5.tar.xz |
Improve styling and wording of SSO UIA templates (#9286)
fixes #9171
Diffstat (limited to '')
-rw-r--r-- | changelog.d/9286.feature | 1 | ||||
-rw-r--r-- | docs/sample_config.yaml | 15 | ||||
-rw-r--r-- | synapse/config/sso.py | 15 | ||||
-rw-r--r-- | synapse/handlers/auth.py | 4 | ||||
-rw-r--r-- | synapse/res/templates/sso_auth_confirm.html | 32 | ||||
-rw-r--r-- | synapse/res/templates/sso_auth_success.html | 39 |
6 files changed, 81 insertions, 25 deletions
diff --git a/changelog.d/9286.feature b/changelog.d/9286.feature new file mode 100644 index 0000000000..c21b197ca1 --- /dev/null +++ b/changelog.d/9286.feature @@ -0,0 +1 @@ +Improve the user experience of setting up an account via single-sign on. diff --git a/docs/sample_config.yaml b/docs/sample_config.yaml index a6fbcc6080..eec082ca8c 100644 --- a/docs/sample_config.yaml +++ b/docs/sample_config.yaml @@ -1958,8 +1958,13 @@ sso: # # * providers: a list of available Identity Providers. Each element is # 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 # # The rendered HTML page should contain a form which submits its results # 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 # + # * 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: # 'sso_auth_success.html'. # diff --git a/synapse/config/sso.py b/synapse/config/sso.py index e308fc9333..bf82183cdc 100644 --- a/synapse/config/sso.py +++ b/synapse/config/sso.py @@ -113,8 +113,13 @@ class SSOConfig(Config): # # * providers: a list of available Identity Providers. Each element is # 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 # # The rendered HTML page should contain a form which submits its results # 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 # + # * 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: # 'sso_auth_success.html'. # diff --git a/synapse/handlers/auth.py b/synapse/handlers/auth.py index c722a4afa8..6f746711ca 100644 --- a/synapse/handlers/auth.py +++ b/synapse/handlers/auth.py @@ -1388,7 +1388,9 @@ class AuthHandler(BaseHandler): ) 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( diff --git a/synapse/res/templates/sso_auth_confirm.html b/synapse/res/templates/sso_auth_confirm.html index 0d9de9d465..d572ab87f7 100644 --- a/synapse/res/templates/sso_auth_confirm.html +++ b/synapse/res/templates/sso_auth_confirm.html @@ -1,14 +1,28 @@ -<html> -<head> - <title>Authentication</title> -</head> +<!DOCTYPE html> +<html lang="en"> + <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> - <div> + <header> + <h1>Confirm it's you to continue</h1> <p> - A client is trying to {{ description | e }}. To confirm this action, - <a href="{{ redirect_url | e }}">re-authenticate with single sign-on</a>. - If you did not expect this, your account may be compromised! + A client is trying to {{ description | e }}. To confirm this action + re-authorize your account with single sign-on. </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> </html> diff --git a/synapse/res/templates/sso_auth_success.html b/synapse/res/templates/sso_auth_success.html index 03f1419467..3b975d7219 100644 --- a/synapse/res/templates/sso_auth_success.html +++ b/synapse/res/templates/sso_auth_success.html @@ -1,18 +1,27 @@ -<html> -<head> - <title>Authentication Successful</title> - <script> - if (window.onAuthDone) { - window.onAuthDone(); - } else if (window.opener && window.opener.postMessage) { - window.opener.postMessage("authDone", "*"); - } - </script> -</head> +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <title>Authentication successful</title> + <meta name="viewport" content="width=device-width, user-scalable=no"> + <style type="text/css"> + {% include "sso.css" without context %} + </style> + <script> + if (window.onAuthDone) { + window.onAuthDone(); + } else if (window.opener && window.opener.postMessage) { + window.opener.postMessage("authDone", "*"); + } + </script> + </head> <body> - <div> - <p>Thank you</p> - <p>You may now close this window and return to the application</p> - </div> + <header> + <h1>Thank you</h1> + <p> + Now we know it’s you, you can close this window and return to the + application. + </p> + </header> </body> </html> |