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

fixes #9171
matrix-org · Feb 1, 2021 · e5d70c8 · e5d70c8
1 parent 419313b
commit e5d70c8
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 25 deletions.
diff --git a/changelog.d/9286.feature 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
@@ -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
@@ -113,8 +113,13 @@ def generate_config_section(self, **kwargs):
  #
  # * 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 @@ def generate_config_section(self, **kwargs):
  #
  # * 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
@@ -1388,7 +1388,9 @@ async def start_sso_ui_auth(self, request: SynapseRequest, session_id: str) -> s
  )
 
  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
@@ -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
@@ -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>