Social login UI polish (#9301)

e288499c · Richard van der Hoff · GitHub · ce669863 · e288499c · e288499c
Unverified Commit e288499c authored 4 years ago by Richard van der Hoff Committed by GitHub 4 years ago
--- a/changelog.d/9301.feature
+++ b/changelog.d/9301.feature
+Further improvements to the user experience of registration via single sign-on.
--- a/synapse/handlers/auth.py
+++ b/synapse/handlers/auth.py
@@ -1472,10 +1472,22 @@ class AuthHandler(BaseHandler):
        # Remove the query parameters from the redirect URL to get a shorter version of
        # it. This is only to display a human-readable URL in the template, but not the
        # URL we redirect users to.
-        redirect_url_no_params = client_redirect_url.split("?")[0]
+        url_parts = urllib.parse.urlsplit(client_redirect_url)
+        if url_parts.scheme == "https":
+            # for an https uri, just show the netloc (ie, the hostname. Specifically,
+            # the bit between "//" and "/"; this includes any potential
+            # "username:password@" prefix.)
+            display_url = url_parts.netloc
+        else:
+            # for other uris, strip the query-params (including the login token) and
+            # fragment.
+            display_url = urllib.parse.urlunsplit(
+                (url_parts.scheme, url_parts.netloc, url_parts.path, "", "")
+            )
        html = self._sso_redirect_confirm_template.render(
-            display_url=redirect_url_no_params,
+            display_url=display_url,
            redirect_url=redirect_url,
            server_name=self._server_name,
            new_user=new_user,

--- a/synapse/res/templates/sso.css
+++ b/synapse/res/templates/sso.css
-body {
+body, input, select, textarea {
  font-family: "Inter", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  color: #17191C;
 }
-header {
+header, footer {
  max-width: 480px;
  width: 100%;
  margin: 24px auto;
  text-align: center;
 }
+@media screen and (min-width: 800px) {
+  header {
+    margin-top: 90px;
+  }
+}
+header {
+  min-height: 60px;
+}
 header p {
  color: #737D8C;
  line-height: 24px;
@@ -20,6 +30,10 @@ h1 {
  font-size: 24px;
 }
+a {
+  color: #418DED;
+}
 .error_page h1 {
  color: #FE2928;
 }
@@ -47,6 +61,9 @@ main {
 .primary-button {
  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
  text-decoration: none;
  padding: 12px;
  color: white;
@@ -63,8 +80,17 @@ main {
 .profile {
  display: flex;
+  flex-direction: column;
+  align-items: center;
  justify-content: center;
-  margin: 24px 0;
+  margin: 24px;
+  padding: 13px;
+  border: 1px solid #E9ECF1;
+  border-radius: 4px;
+}
+.profile.with-avatar {
+  margin-top: 42px; /* (36px / 2) + 24px*/
 }
 .profile .avatar {
@@ -72,17 +98,32 @@ main {
  height: 36px;
  border-radius: 100%;
  display: block;
-  margin-right: 8px;
+  margin-top: -32px;
+  margin-bottom: 8px;
 }
 .profile .display-name {
  font-weight: bold;
  margin-bottom: 4px;
+  font-size: 15px;
+  line-height: 18px;
 }
 .profile .user-id {
  color: #737D8C;
+  font-size: 12px;
+  line-height: 12px;
 }
-.profile .display-name, .profile .user-id {
+footer {
-  line-height: 18px;
+  margin-top: 80px;
 }
+footer svg {
+  display: block;
+  width: 46px;
+  margin: 0px auto 12px auto;
+}
+footer p {
+  color: #737D8C;
+}
\ No newline at end of file
--- a/synapse/res/templates/sso_account_deactivated.html
+++ b/synapse/res/templates/sso_account_deactivated.html
@@ -20,5 +20,6 @@
                administrator.
            </p>
        </header>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_auth_account_details.html
+++ b/synapse/res/templates/sso_auth_account_details.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>Synapse Login</title>
+    <title>Create your account</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <script type="text/javascript">
+      let wasKeyboard = false;
+      document.addEventListener("mousedown", function() { wasKeyboard = false; });
+      document.addEventListener("keydown", function() { wasKeyboard = true; });
+      document.addEventListener("focusin", function() {
+        if (wasKeyboard) {
+          document.body.classList.add("keyboard-focus");
+        } else {
+          document.body.classList.remove("keyboard-focus");
+        }
+      });
+    </script>
    <style type="text/css">
      {% include "sso.css" without context %}
+      body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
+        outline: 3px solid #17191C;
+        outline-offset: 4px;
+      }
      .username_input {
        display: flex;
        border: 2px solid #418DED;
@@ -20,11 +37,12 @@
      .username_input label {
        position: absolute;
-        top: -8px;
+        top: -5px;
        left: 14px;
-        font-size: 80%;
+        font-size: 10px;
+        line-height: 10px;
        background: white;
-        padding: 2px;
+        padding: 0 2px;
      }
      .username_input input {
@@ -34,6 +52,13 @@
        border: none;
      }
+      /* only clear the outline if we know it will be shown on the parent div using :focus-within */
+      @supports selector(:focus-within) {
+        .username_input input {
+          outline: none !important;
+        }
+      }
      .username_input div {
        color: #8D99A5;
      }
@@ -52,6 +77,7 @@
      .idp-pick-details .idp-detail {
        border-top: 1px solid #E9ECF1;
        padding: 12px;
+        display: block;
      }
      .idp-pick-details .check-row {
        display: flex;
@@ -94,43 +120,44 @@
          <div class="postfix">:{{ server_name }}</div>
        </div>
        <input type="submit" value="Continue" class="primary-button">
-        {% if user_attributes %}
+        {% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
        <section class="idp-pick-details">
          <h2><img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>Information from {{ idp.idp_name }}</h2>
          {% if user_attributes.avatar_url %}
-          <div class="idp-detail idp-avatar">
+          <label class="idp-detail idp-avatar" for="idp-avatar">
            <div class="check-row">
-              <label for="idp-avatar" class="name">Avatar</label>
+              <span class="name">Avatar</span>
-              <label for="idp-avatar" class="use">Use</label>
+              <span class="use">Use</span>
              <input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
            </div>
            <img src="{{ user_attributes.avatar_url }}" class="avatar" />
-          </div>
+          </label>
          {% endif %}
          {% if user_attributes.display_name %}
-          <div class="idp-detail">
+          <label class="idp-detail" for="idp-displayname">
            <div class="check-row">
-              <label for="idp-displayname" class="name">Display name</label>
+              <span class="name">Display name</span>
-              <label for="idp-displayname" class="use">Use</label>
+              <span class="use">Use</span>
              <input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
            </div>
            <p class="idp-value">{{ user_attributes.display_name }}</p>
-          </div>
+          </label>
          {% endif %}
          {% for email in user_attributes.emails %}
-          <div class="idp-detail">
+          <label class="idp-detail" for="idp-email{{ loop.index }}">
            <div class="check-row">
-              <label for="idp-email{{ loop.index }}" class="name">E-mail</label>
+              <span class="name">E-mail</span>
-              <label for="idp-email{{ loop.index }}" class="use">Use</label>
+              <span class="use">Use</span>
              <input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
            </div>
            <p class="idp-value">{{ email }}</p>
-          </div>
+          </label>
          {% endfor %}
        </section>
        {% endif %}
      </form>
    </main>
+    {% include "sso_footer.html" without context %}
    <script type="text/javascript">
      {% include "sso_auth_account_details.js" without context %}
    </script>

--- a/synapse/res/templates/sso_auth_bad_user.html
+++ b/synapse/res/templates/sso_auth_bad_user.html
@@ -21,5 +21,6 @@
                the Identity Provider as when you log into your account.
            </p>
        </header>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_auth_confirm.html
+++ b/synapse/res/templates/sso_auth_confirm.html
@@ -2,7 +2,7 @@
 <html lang="en">
    <head>
        <meta charset="UTF-8">
-        <title>Authentication</title>
+        <title>Confirm it's you</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <style type="text/css">
            {% include "sso.css" without context %}
@@ -24,5 +24,6 @@
                Continue with {{ idp.idp_name }}
            </a>
        </main>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_auth_success.html
+++ b/synapse/res/templates/sso_auth_success.html
@@ -23,5 +23,6 @@
                application.
            </p>
        </header>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_error.html
+++ b/synapse/res/templates/sso_error.html
@@ -38,6 +38,7 @@
                <p>{{ error }}</p>
            </div>
        </header>
+        {% include "sso_footer.html" without context %}
        <script type="text/javascript">
            // Error handling to support Auth0 errors that we might get through a GET request

--- a/synapse/res/templates/sso_footer.html
+++ b/synapse/res/templates/sso_footer.html
+<footer>
+	<svg role="img" aria-label="[Matrix logo]" viewBox="0 0 200 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="parent" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g id="child" transform="translate(-122.000000, -6.000000)" fill="#000000" fill-rule="nonzero">
+                  <g id="matrix-logo" transform="translate(122.000000, 6.000000)">
+                      <polygon id="left-bracket" points="2.24708861 1.93811009 2.24708861 82.7268844 8.10278481 82.7268844 8.10278481 84.6652459 0 84.6652459 0 0 8.10278481 0 8.10278481 1.93811009"></polygon>
+                      <path d="M24.8073418,27.5493174 L24.8073418,31.6376991 L24.924557,31.6376991 C26.0227848,30.0814294 27.3455696,28.8730642 28.8951899,28.0163743 C30.4437975,27.1611927 32.2189873,26.7318422 34.218481,26.7318422 C36.1394937,26.7318422 37.8946835,27.102622 39.4825316,27.8416679 C41.0708861,28.5819706 42.276962,29.8856073 43.1005063,31.7548404 C44.0017722,30.431345 45.2270886,29.2629486 46.7767089,28.2506569 C48.3253165,27.2388679 50.158481,26.7318422 52.2764557,26.7318422 C53.8843038,26.7318422 55.3736709,26.9269101 56.7473418,27.3162917 C58.1189873,27.7056734 59.295443,28.3285835 60.2759494,29.185022 C61.255443,30.0422147 62.02,31.1615927 62.5701266,32.5426532 C63.1187342,33.9262275 63.3936709,35.5898349 63.3936709,37.5372459 L63.3936709,57.7443688 L55.0410127,57.7441174 L55.0410127,40.6319376 C55.0410127,39.6201486 55.0020253,38.6661761 54.9232911,37.7700202 C54.8440506,36.8751211 54.6293671,36.0968606 54.2764557,35.4339817 C53.9232911,34.772611 53.403038,34.2464807 52.7177215,33.8568477 C52.0313924,33.4689743 51.0997468,33.2731523 49.9235443,33.2731523 C48.7473418,33.2731523 47.7962025,33.4983853 47.0706329,33.944578 C46.344557,34.393033 45.7764557,34.9774826 45.3650633,35.6969211 C44.9534177,36.4181193 44.6787342,37.2353431 44.5417722,38.150855 C44.4037975,39.0653615 44.3356962,39.9904257 44.3356962,40.9247908 L44.3356962,57.7443688 L35.9835443,57.7443688 L35.9835443,40.8079009 C35.9835443,39.9124991 35.963038,39.0263982 35.9253165,38.150855 C35.8853165,37.2743064 35.7192405,36.4666349 35.424557,35.7263321 C35.1303797,34.9872862 34.64,34.393033 33.9539241,33.944578 C33.2675949,33.4983853 32.2579747,33.2731523 30.9248101,33.2731523 C30.5321519,33.2731523 30.0126582,33.3608826 29.3663291,33.5365945 C28.7192405,33.7118037 28.0913924,34.0433688 27.4840506,34.5292789 C26.875443,35.0164459 26.3564557,35.7172826 25.9250633,36.6315376 C25.4934177,37.5470495 25.2779747,38.7436 25.2779747,40.2229486 L25.2779747,57.7441174 L16.9260759,57.7443688 L16.9260759,27.5493174 L24.8073418,27.5493174 Z" id="m"></path>
+                      <path d="M68.7455696,31.9886202 C69.6075949,30.7033339 70.7060759,29.672189 72.0397468,28.8926716 C73.3724051,28.1141596 74.8716456,27.5596239 76.5387342,27.2283101 C78.2050633,26.8977505 79.8817722,26.7315908 81.5678481,26.7315908 C83.0974684,26.7315908 84.6458228,26.8391798 86.2144304,27.0525982 C87.7827848,27.2675248 89.2144304,27.6865688 90.5086076,28.3087248 C91.8025316,28.9313835 92.8610127,29.7983798 93.6848101,30.9074514 C94.5083544,32.0170257 94.92,33.4870734 94.92,35.3173431 L94.92,51.026844 C94.92,52.3913138 94.998481,53.6941963 95.1556962,54.9400165 C95.3113924,56.1865908 95.5863291,57.120956 95.9787342,57.7436147 L87.5091139,57.7436147 C87.3518987,57.276055 87.2240506,56.7996972 87.1265823,56.3125303 C87.0278481,55.8266202 86.9592405,55.3301523 86.9207595,54.8236294 C85.5873418,56.1865908 84.0182278,57.1405633 82.2156962,57.6857982 C80.4113924,58.2295248 78.5683544,58.503022 76.6860759,58.503022 C75.2346835,58.503022 73.8817722,58.3275615 72.6270886,57.9776459 C71.3718987,57.6269761 70.2744304,57.082244 69.3334177,56.3411872 C68.3921519,55.602644 67.656962,54.6680275 67.1275949,53.5390972 C66.5982278,52.410167 66.3331646,51.065556 66.3331646,49.5087835 C66.3331646,47.7961578 66.6367089,46.384178 67.2455696,45.2756092 C67.8529114,44.1652807 68.6367089,43.2799339 69.5987342,42.6173064 C70.5589873,41.9556844 71.6567089,41.4592165 72.8924051,41.1284055 C74.1273418,40.7978459 75.3721519,40.5356606 76.6270886,40.3398385 C77.8820253,40.1457761 79.116962,39.9896716 80.3329114,39.873033 C81.5483544,39.7558917 82.6270886,39.5804312 83.5681013,39.3469028 C84.5093671,39.1133743 85.2536709,38.7732624 85.8032911,38.3250587 C86.3513924,37.8773578 86.6063291,37.2252881 86.5678481,36.3680954 C86.5678481,35.4731963 86.4210127,34.7620532 86.1268354,34.2366771 C85.8329114,33.7113009 85.4405063,33.3018092 84.9506329,33.0099615 C84.4602532,32.7181138 83.8916456,32.5232972 83.2450633,32.4255119 C82.5977215,32.3294862 81.9010127,32.2797138 81.156962,32.2797138 C79.5098734,32.2797138 78.2159494,32.6303835 77.2746835,33.3312202 C76.3339241,34.0320569 75.7837975,35.2007046 75.6275949,36.8354037 L67.275443,36.8354037 C67.3924051,34.8892495 67.8817722,33.2726495 68.7455696,31.9886202 Z M85.2440506,43.6984752 C84.7149367,43.873433 84.1460759,44.0189798 83.5387342,44.1361211 C82.9306329,44.253011 82.2936709,44.350545 81.6270886,44.4279688 C80.96,44.5066495 80.2934177,44.6034294 79.6273418,44.7203193 C78.9994937,44.8362037 78.3820253,44.9933138 77.7749367,45.1871248 C77.1663291,45.3829468 76.636962,45.6451321 76.1865823,45.9759431 C75.7349367,46.3070055 75.3724051,46.7263009 75.0979747,47.2313156 C74.8232911,47.7375872 74.6863291,48.380356 74.6863291,49.1588679 C74.6863291,49.8979138 74.8232911,50.5218294 75.0979747,51.026844 C75.3724051,51.5338697 75.7455696,51.9328037 76.2159494,52.2246514 C76.6863291,52.5164991 77.2349367,52.7213706 77.8632911,52.8375064 C78.4898734,52.9546477 79.136962,53.012967 79.8037975,53.012967 C81.4506329,53.012967 82.724557,52.740978 83.6273418,52.1952404 C84.5288608,51.6507596 85.1949367,50.9981872 85.6270886,50.2382771 C86.0579747,49.4793725 86.323038,48.7119211 86.4212658,47.9321523 C86.518481,47.1536404 86.5681013,46.5304789 86.5681013,46.063422 L86.5681013,42.9677248 C86.2146835,43.2799339 85.7736709,43.5230147 85.2440506,43.6984752 Z" id="a"></path>
+                      <path d="M116.917975,27.5493174 L116.917975,33.0976917 L110.801266,33.0976917 L110.801266,48.0492936 C110.801266,49.4502128 111.036203,50.3850807 111.507089,50.8518862 C111.976962,51.3191945 112.918734,51.5527229 114.33038,51.5527229 C114.801013,51.5527229 115.251392,51.5336183 115.683038,51.4944037 C116.114177,51.4561945 116.526076,51.3968697 116.917975,51.3194459 L116.917975,57.7438661 C116.212152,57.860756 115.427595,57.9381798 114.565316,57.9778972 C113.702785,58.0153523 112.859747,58.0357138 112.036203,58.0357138 C110.742278,58.0357138 109.516456,57.9477321 108.36,57.7722716 C107.202785,57.5975651 106.183544,57.2577046 105.301519,56.7509303 C104.418987,56.2454128 103.722785,55.5242147 103.213418,54.5898495 C102.703038,53.6562385 102.448608,52.4292716 102.448608,50.9099541 L102.448608,33.0976917 L97.3903797,33.0976917 L97.3903797,27.5493174 L102.448608,27.5493174 L102.448608,18.4967596 L110.801013,18.4967596 L110.801013,27.5493174 L116.917975,27.5493174 Z" id="t"></path>
+                      <path d="M128.857975,27.5493174 L128.857975,33.1565138 L128.975696,33.1565138 C129.367089,32.2213945 129.896203,31.3559064 130.563544,30.557033 C131.23038,29.7596679 131.99443,29.0776844 132.857215,28.5130936 C133.719241,27.9495083 134.641266,27.5113596 135.622532,27.1988991 C136.601772,26.8879468 137.622025,26.7315908 138.681013,26.7315908 C139.229873,26.7315908 139.836962,26.8296275 140.504304,27.0239413 L140.504304,34.7336477 C140.111646,34.6552183 139.641013,34.586844 139.092658,34.5290275 C138.543291,34.4704569 138.014177,34.4410459 137.504304,34.4410459 C135.974937,34.4410459 134.681013,34.6949358 133.622785,35.2004532 C132.564051,35.7067248 131.711392,36.397255 131.064051,37.2735523 C130.417215,38.1501009 129.955443,39.1714422 129.681266,40.3398385 C129.407089,41.5074807 129.269873,42.7736624 129.269873,44.1361211 L129.269873,57.7438661 L120.917722,57.7438661 L120.917722,27.5493174 L128.857975,27.5493174 Z" id="r"></path>
+                      <path d="M144.033165,22.8767376 L144.033165,16.0435798 L152.386076,16.0435798 L152.386076,22.8767376 L144.033165,22.8767376 Z M152.386076,27.5493174 L152.386076,57.7438661 L144.033165,57.7438661 L144.033165,27.5493174 L152.386076,27.5493174 Z" id="i"></path>
+                      <polygon id="x" points="156.738228 27.5493174 166.266582 27.5493174 171.619494 35.4337303 176.913418 27.5493174 186.147848 27.5493174 176.148861 41.6831927 187.383544 57.7441174 177.85443 57.7441174 171.501772 48.2245028 165.148861 57.7441174 155.797468 57.7441174 166.737468 41.8589046"></polygon>
+                      <polygon id="right-bracket" points="197.580759 82.7268844 197.580759 1.93811009 191.725063 1.93811009 191.725063 0 199.828354 0 199.828354 84.6652459 191.725063 84.6652459 191.725063 82.7268844"></polygon>
+                  </g>
+              </g>
+          </g>
+      </svg>
+      <p>An open network for secure, decentralized communication.<br>© 2021 The Matrix.org Foundation C.I.C.</p>
+</footer>
\ No newline at end of file
--- a/synapse/res/templates/sso_login_idp_picker.html
+++ b/synapse/res/templates/sso_login_idp_picker.html
@@ -2,30 +2,60 @@
 <html lang="en">
    <head>
        <meta charset="UTF-8">
-        <link rel="stylesheet" href="/_matrix/static/client/login/style.css">
+        <title>Choose identity provider</title>
-        <title>{{ server_name }} Login</title>
+        <style type="text/css">
+          {% include "sso.css" without context %}
+          .providers {
+            list-style: none;
+            padding: 0;
+          }
+          .providers li {
+            margin: 12px;
+          }
+          .providers a {
+            display: block;
+            border-radius: 4px;
+            border: 1px solid #17191C;
+            padding: 8px;
+            text-align: center;
+            text-decoration: none;
+            color: #17191C;
+            display: flex;
+            align-items: center;
+            font-weight: bold;
+          }
+          .providers a img {
+            width: 24px;
+            height: 24px;
+          }
+          .providers a span {
+            flex: 1;
+          }
+        </style>
    </head>
    <body>
-        <div id="container">
+        <header>
-            <h1 id="title">{{ server_name }} Login</h1>
+            <h1>Log in to {{ server_name }} </h1>
-            <div class="login_flow">
+            <p>Choose an identity provider to log in</p>
-                <p>Choose one of the following identity providers:</p>
+        </header>
-            <form>
+        <main>
-                <input type="hidden" name="redirectUrl" value="{{ redirect_url }}">
+            <ul class="providers">
-                <ul class="radiobuttons">
+                {% for p in providers %}
-{% for p in providers %}
+                <li>
-                    <li>
+                    <a href="pick_idp?idp={{ p.idp_id }}&redirectUrl={{ redirect_url | urlencode }}">
-                        <input type="radio" name="idp" id="prov{{ loop.index }}" value="{{ p.idp_id }}">
+                        {% if p.idp_icon %}
-                        <label for="prov{{ loop.index }}">{{ p.idp_name }}</label>
-{% if p.idp_icon %}
                        <img src="{{ p.idp_icon | mxc_to_http(32, 32) }}"/>
-{% endif %}
+                        {% endif %}
-                    </li>
+                        <span>{{ p.idp_name }}</span>
-{% endfor %}
+                    </a>
-                </ul>
+                </li>
-                <input type="submit" class="button button--full-width" id="button-submit" value="Submit">
+                {% endfor %}
-            </form>
+            </ul>
-            </div>
+        </main>
-        </div>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_new_user_consent.html
+++ b/synapse/res/templates/sso_new_user_consent.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>SSO redirect confirmation</title>
+    <title>Agree to terms and conditions</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <style type="text/css">
      {% include "sso.css" without context %}
@@ -18,15 +18,7 @@
            <p>Agree to the terms to create your account.</p>
        </header>
        <main>
-            <!-- {% if user_profile.avatar_url and user_profile.display_name %} -->
+            {% include "sso_partial_profile.html" %}
-            <div class="profile">
-                <img src="{{ user_profile.avatar_url | mxc_to_http(64, 64) }}" class="avatar" />
-                <div class="profile-details">
-                    <div class="display-name">{{ user_profile.display_name }}</div>
-                    <div class="user-id">{{ user_id }}</div>
-                </div>
-            </div>
-            <!-- {% endif %} -->
            <form method="post" action="{{my_url}}" id="consent_form">
                <p>
                    <input id="accepted_version" type="checkbox" name="accepted_version" value="{{ consent_version }}" required>
@@ -35,5 +27,6 @@
                <input type="submit" class="primary-button" value="Continue"/>
            </form>
        </main>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/synapse/res/templates/sso_partial_profile.html
+++ b/synapse/res/templates/sso_partial_profile.html
+{# html fragment to be included in SSO pages, to show the user's profile #}
+<div class="profile{% if user_profile.avatar_url %} with-avatar{% endif %}">
+    {% if user_profile.avatar_url %}
+    <img src="{{ user_profile.avatar_url | mxc_to_http(64, 64) }}" class="avatar" />
+    {% endif %}
+    {# users that signed up with SSO will have a display_name of some sort;
+       however that is not the case for users who signed up via other
+       methods, so we need to handle that.
+    #}
+    {% if user_profile.display_name %}
+        <div class="display-name">{{ user_profile.display_name }}</div>
+    {% else %}
+        {# split the userid on ':', take the part before the first ':',
+           and then remove the leading '@'. #}
+        <div class="display-name">{{ user_id.split(":")[0][1:] }}</div>
+    {% endif %}
+    <div class="user-id">{{ user_id }}</div>
+</div>
--- a/synapse/res/templates/sso_redirect_confirm.html
+++ b/synapse/res/templates/sso_redirect_confirm.html
@@ -2,35 +2,39 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>SSO redirect confirmation</title>
+    <title>Continue to your account</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <style type="text/css">
      {% include "sso.css" without context %}
+      .confirm-trust {
+        margin: 34px 0;
+        color: #8D99A5;
+      }
+      .confirm-trust strong {
+        color: #17191C;
+      }
+      .confirm-trust::before {
+        content: "";
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNi41IDlDMTYuNSAxMy4xNDIxIDEzLjE0MjEgMTYuNSA5IDE2LjVDNC44NTc4NiAxNi41IDEuNSAxMy4xNDIxIDEuNSA5QzEuNSA0Ljg1Nzg2IDQuODU3ODYgMS41IDkgMS41QzEzLjE0MjEgMS41IDE2LjUgNC44NTc4NiAxNi41IDlaTTcuMjUgOUM3LjI1IDkuNDY1OTYgNy41Njg2OSA5Ljg1NzQ4IDggOS45Njg1VjEyLjM3NUM4IDEyLjkyNzMgOC40NDc3MiAxMy4zNzUgOSAxMy4zNzVIMTAuMTI1QzEwLjY3NzMgMTMuMzc1IDExLjEyNSAxMi45MjczIDExLjEyNSAxMi4zNzVDMTEuMTI1IDExLjgyMjcgMTAuNjc3MyAxMS4zNzUgMTAuMTI1IDExLjM3NUgxMFY5QzEwIDguOTY1NDggOS45OTgyNSA4LjkzMTM3IDkuOTk0ODQgOC44OTc3NkM5Ljk0MzYzIDguMzkzNSA5LjUxNzc3IDggOSA4SDguMjVDNy42OTc3MiA4IDcuMjUgOC40NDc3MiA3LjI1IDlaTTkgNy41QzkuNjIxMzIgNy41IDEwLjEyNSA2Ljk5NjMyIDEwLjEyNSA2LjM3NUMxMC4xMjUgNS43NTM2OCA5LjYyMTMyIDUuMjUgOSA1LjI1QzguMzc4NjggNS4yNSA3Ljg3NSA1Ljc1MzY4IDcuODc1IDYuMzc1QzcuODc1IDYuOTk2MzIgOC4zNzg2OCA3LjUgOSA3LjVaIiBmaWxsPSIjQzFDNkNEIi8+Cjwvc3ZnPgoK');
+        background-repeat: no-repeat;
+        width: 24px;
+        height: 24px;
+        display: block;
+        float: left;
+      }
    </style>
 </head>
    <body>
        <header>
-            {% if new_user %}
+            <h1>Continue to your account</h1>
-            <h1>Your account is now ready</h1>
-            <p>You've made your account on {{ server_name }}.</p>
-            {% else %}
-            <h1>Log in</h1>
-            {% endif %}
-            <p>Continue to confirm you trust <strong>{{ display_url }}</strong>.</p>
        </header>
        <main>
-            {% if user_profile.avatar_url %}
+            {% include "sso_partial_profile.html" %}
-            <div class="profile">
+            <p class="confirm-trust">Continuing will grant <strong>{{ display_url }}</strong> access to your account.</p>
-                <img src="{{ user_profile.avatar_url | mxc_to_http(64, 64) }}" class="avatar" />
-                <div class="profile-details">
-                    {% if user_profile.display_name %}
-                    <div class="display-name">{{ user_profile.display_name }}</div>
-                    {% endif %}
-                    <div class="user-id">{{ user_id }}</div>
-                </div>
-            </div>
-            {% endif %}
            <a href="{{ redirect_url }}" class="primary-button">Continue</a>
        </main>
+        {% include "sso_footer.html" without context %}
    </body>
 </html>
--- a/tests/rest/client/v1/test_login.py
+++ b/tests/rest/client/v1/test_login.py
@@ -15,7 +15,7 @@
 import time
 import urllib.parse
-from typing import Any, Dict, Union
+from typing import Any, Dict, List, Union
 from urllib.parse import urlencode
 from mock import Mock
@@ -493,13 +493,21 @@ class MultiSSOTestCase(unittest.HomeserverTestCase):
        self.assertEqual(channel.code, 200, channel.result)
        # parse the form to check it has fields assumed elsewhere in this class
+        html = channel.result["body"].decode("utf-8")
        p = TestHtmlParser()
-        p.feed(channel.result["body"].decode("utf-8"))
+        p.feed(html)
        p.close()
-        self.assertCountEqual(p.radios["idp"], ["cas", "oidc", "oidc-idp1", "saml"])
+        # there should be a link for each href
+        returned_idps = []  # type: List[str]
+        for link in p.links:
+            path, query = link.split("?", 1)
+            self.assertEqual(path, "pick_idp")
+            params = urllib.parse.parse_qs(query)
+            self.assertEqual(params["redirectUrl"], [TEST_CLIENT_REDIRECT_URL])
+            returned_idps.append(params["idp"][0])
-        self.assertEqual(p.hiddens["redirectUrl"], TEST_CLIENT_REDIRECT_URL)
+        self.assertCountEqual(returned_idps, ["cas", "oidc", "oidc-idp1", "saml"])
    def test_multi_sso_redirect_to_cas(self):
        """If CAS is chosen, should redirect to the CAS server"""