diff options
| author | Richard van der Hoff <1389908+richvdh@users.noreply.github.com> | 2021-02-01 15:50:56 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-02-01 15:50:56 +0000 |
| commit | 8aed29dc615bee75019fc526a5c91cdc2638b665 (patch) | |
| tree | a2a16f641a1b587c887820fc653822bfe0a5726f /synapse/res/templates | |
| parent | Fix SSO on workers (#9271) (diff) | |
| download | synapse-8aed29dc615bee75019fc526a5c91cdc2638b665.tar.xz | |
Improve styling and wording of SSO redirect confirm template (#9272)
Diffstat (limited to 'synapse/res/templates')
| -rw-r--r-- | synapse/res/templates/sso.css | 83 | ||||
| -rw-r--r-- | synapse/res/templates/sso_redirect_confirm.html | 34 |
2 files changed, 111 insertions, 6 deletions
diff --git a/synapse/res/templates/sso.css b/synapse/res/templates/sso.css new file mode 100644 index 0000000000..ff9dc94032 --- /dev/null +++ b/synapse/res/templates/sso.css @@ -0,0 +1,83 @@ +body { + font-family: "Inter", "Helvetica", "Arial", sans-serif; + font-size: 14px; + color: #17191C; +} + +header { + max-width: 480px; + width: 100%; + margin: 24px auto; + text-align: center; +} + +header p { + color: #737D8C; + line-height: 24px; +} + +h1 { + font-size: 24px; +} + +h2 { + font-size: 14px; +} + +h2 img { + vertical-align: middle; + margin-right: 8px; + width: 24px; + height: 24px; +} + +label { + cursor: pointer; +} + +main { + max-width: 360px; + width: 100%; + margin: 24px auto; +} + +.primary-button { + border: none; + text-decoration: none; + padding: 12px; + color: white; + background-color: #418DED; + font-weight: bold; + display: block; + border-radius: 12px; + width: 100%; + margin: 16px 0; + cursor: pointer; + text-align: center; +} + +.profile { + display: flex; + justify-content: center; + margin: 24px 0; +} + +.profile .avatar { + width: 36px; + height: 36px; + border-radius: 100%; + display: block; + margin-right: 8px; +} + +.profile .display-name { + font-weight: bold; + margin-bottom: 4px; +} +.profile .user-id { + color: #737D8C; +} + +.profile .display-name, .profile .user-id { + line-height: 18px; +} \ No newline at end of file diff --git a/synapse/res/templates/sso_redirect_confirm.html b/synapse/res/templates/sso_redirect_confirm.html index 20a15e1e74..ce4f573848 100644 --- a/synapse/res/templates/sso_redirect_confirm.html +++ b/synapse/res/templates/sso_redirect_confirm.html @@ -3,12 +3,34 @@ <head> <meta charset="UTF-8"> <title>SSO redirect confirmation</title> + <meta name="viewport" content="width=device-width, user-scalable=no"> + <style type="text/css"> + {% include "sso.css" without context %} + </style> </head> <body> - <p>The application at <span style="font-weight:bold">{{ display_url | e }}</span> is requesting full access to your <span style="font-weight:bold">{{ server_name }}</span> Matrix account.</p> - <p>If you don't recognise this address, you should ignore this and close this tab.</p> - <p> - <a href="{{ redirect_url | e }}">I trust this address</a> - </p> + <header> + {% if new_user %} + <h1>Your account is now ready</h1> + <p>You've made your account on {{ server_name | e }}.</p> + {% else %} + <h1>Log in</h1> + {% endif %} + <p>Continue to confirm you trust <strong>{{ display_url | e }}</strong>.</p> + </header> + <main> + {% if user_profile.avatar_url %} + <div class="profile"> + <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 | e }}</div> + {% endif %} + <div class="user-id">{{ user_id | e }}</div> + </div> + </div> + {% endif %} + <a href="{{ redirect_url | e }}" class="primary-button">Continue</a> + </main> </body> -</html> \ No newline at end of file +</html> |