diff options
Diffstat (limited to 'synapse/res/templates/sso_auth_account_details.html')
| -rw-r--r-- | synapse/res/templates/sso_auth_account_details.html | 373 |
1 files changed, 185 insertions, 188 deletions
diff --git a/synapse/res/templates/sso_auth_account_details.html b/synapse/res/templates/sso_auth_account_details.html index 2d1db386e1..11636d7f5d 100644 --- a/synapse/res/templates/sso_auth_account_details.html +++ b/synapse/res/templates/sso_auth_account_details.html @@ -1,189 +1,186 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <title>Create your account</title> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <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; - border-radius: 8px; - padding: 12px; - position: relative; - margin: 16px 0; - align-items: center; - font-size: 12px; - } - - .username_input.invalid { - border-color: #FE2928; - } - - .username_input.invalid input, .username_input.invalid label { - color: #FE2928; - } - - .username_input div, .username_input input { - line-height: 18px; - font-size: 14px; - } - - .username_input label { - position: absolute; - top: -5px; - left: 14px; - font-size: 10px; - line-height: 10px; - background: white; - padding: 0 2px; - } - - .username_input input { - flex: 1; - display: block; - min-width: 0; - 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; - } - - .idp-pick-details { - border: 1px solid #E9ECF1; - border-radius: 8px; - margin: 24px 0; - } - - .idp-pick-details h2 { - margin: 0; - padding: 8px 12px; - } - - .idp-pick-details .idp-detail { - border-top: 1px solid #E9ECF1; - padding: 12px; - display: block; - } - .idp-pick-details .check-row { - display: flex; - align-items: center; - } - - .idp-pick-details .check-row .name { - flex: 1; - } - - .idp-pick-details .use, .idp-pick-details .idp-value { - color: #737D8C; - } - - .idp-pick-details .idp-value { - margin: 0; - margin-top: 8px; - } - - .idp-pick-details .avatar { - width: 53px; - height: 53px; - border-radius: 100%; - display: block; - margin-top: 8px; - } - - output { - padding: 0 14px; - display: block; - } - - output.error { - color: #FE2928; - } - </style> - </head> - <body> - <header> - <h1>Create your account</h1> - <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p> - </header> - <main> - <form method="post" class="form__input" id="form"> - <div class="username_input" id="username_input"> - <label for="field-username">Username (required)</label> - <div class="prefix">@</div> - <input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none"> - <div class="postfix">:{{ server_name }}</div> +{% extends "_base.html" %} +{% block title %}Create your account{% endblock %} + +{% block header %} +<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; + border-radius: 8px; + padding: 12px; + position: relative; + margin: 16px 0; + align-items: center; + font-size: 12px; + } + + .username_input.invalid { + border-color: #FE2928; + } + + .username_input.invalid input, .username_input.invalid label { + color: #FE2928; + } + + .username_input div, .username_input input { + line-height: 18px; + font-size: 14px; + } + + .username_input label { + position: absolute; + top: -5px; + left: 14px; + font-size: 10px; + line-height: 10px; + background: white; + padding: 0 2px; + } + + .username_input input { + flex: 1; + display: block; + min-width: 0; + 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; + } + + .idp-pick-details { + border: 1px solid #E9ECF1; + border-radius: 8px; + margin: 24px 0; + } + + .idp-pick-details h2 { + margin: 0; + padding: 8px 12px; + } + + .idp-pick-details .idp-detail { + border-top: 1px solid #E9ECF1; + padding: 12px; + display: block; + } + .idp-pick-details .check-row { + display: flex; + align-items: center; + } + + .idp-pick-details .check-row .name { + flex: 1; + } + + .idp-pick-details .use, .idp-pick-details .idp-value { + color: #737D8C; + } + + .idp-pick-details .idp-value { + margin: 0; + margin-top: 8px; + } + + .idp-pick-details .avatar { + width: 53px; + height: 53px; + border-radius: 100%; + display: block; + margin-top: 8px; + } + + output { + padding: 0 14px; + display: block; + } + + output.error { + color: #FE2928; + } +</style> +{% endblock %} + +{% block body %} +<header> + <h1>Create your account</h1> + <p>This is required. Continue to create your account on {{ server_name }}. You can't change this later.</p> +</header> +<main> + <form method="post" class="form__input" id="form"> + <div class="username_input" id="username_input"> + <label for="field-username">Username (required)</label> + <div class="prefix">@</div> + <input type="text" name="username" id="field-username" value="{{ user_attributes.localpart }}" autofocus autocorrect="off" autocapitalize="none"> + <div class="postfix">:{{ server_name }}</div> + </div> + <output for="username_input" id="field-username-output"></output> + <input type="submit" value="Continue" class="primary-button"> + {% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %} + <section class="idp-pick-details"> + <h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2> + {% if user_attributes.avatar_url %} + <label class="idp-detail idp-avatar" for="idp-avatar"> + <div class="check-row"> + <span class="name">Avatar</span> + <span class="use">Use</span> + <input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked> </div> - <output for="username_input" id="field-username-output"></output> - <input type="submit" value="Continue" class="primary-button"> - {% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %} - <section class="idp-pick-details"> - <h2>{% if idp.idp_icon %}<img src="{{ idp.idp_icon | mxc_to_http(24, 24) }}"/>{% endif %}Optional data from {{ idp.idp_name }}</h2> - {% if user_attributes.avatar_url %} - <label class="idp-detail idp-avatar" for="idp-avatar"> - <div class="check-row"> - <span class="name">Avatar</span> - <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" /> - </label> - {% endif %} - {% if user_attributes.display_name %} - <label class="idp-detail" for="idp-displayname"> - <div class="check-row"> - <span class="name">Display name</span> - <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> - </label> - {% endif %} - {% for email in user_attributes.emails %} - <label class="idp-detail" for="idp-email{{ loop.index }}"> - <div class="check-row"> - <span class="name">E-mail</span> - <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> - </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> - </body> -</html> + <img src="{{ user_attributes.avatar_url }}" class="avatar" /> + </label> + {% endif %} + {% if user_attributes.display_name %} + <label class="idp-detail" for="idp-displayname"> + <div class="check-row"> + <span class="name">Display name</span> + <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> + </label> + {% endif %} + {% for email in user_attributes.emails %} + <label class="idp-detail" for="idp-email{{ loop.index }}"> + <div class="check-row"> + <span class="name">E-mail</span> + <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> + </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> +{% endblock %} |