OpenCloud
/
MatrixSynapse
mirror of https://github.com/matrix-org/synapse
1
0
Fork 0
Code Issues Releases Wiki Activity
MatrixSynapse/synapse/res/templates/sso_auth_account_details.html

189 lines
5.5 KiB
HTML
Raw Normal View History

Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<title>Create your account</title>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<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>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<style type="text/css">
{% include "sso.css" without context %}
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
body.keyboard-focus :focus, body.keyboard-focus .username_input:focus-within {
outline: 3px solid #17191C;
outline-offset: 4px;
}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
.username_input {
display: flex;
border: 2px solid #418DED;
border-radius: 8px;
padding: 12px;
position: relative;
margin: 16px 0;
align-items: center;
font-size: 12px;
}
social login Fix username validation javascript (#9297) * fix validation and don't use built-in validation UI Co-authored-by: Bruno Windels <brunow@element.io>
2021-02-03 18:52:55 +01:00
.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;
}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
.username_input label {
position: absolute;
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
top: -5px;
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
left: 14px;
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
font-size: 10px;
line-height: 10px;
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
background: white;
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
padding: 0 2px;
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
}
.username_input input {
flex: 1;
display: block;
min-width: 0;
border: none;
}
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
/* 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;
}
}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
.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;
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
display: block;
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
}
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
.idp-pick-details .check-row {
display: flex;
align-items: center;
}
.idp-pick-details .check-row .name {
flex: 1;
}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
.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;
}
social login Fix username validation javascript (#9297) * fix validation and don't use built-in validation UI Co-authored-by: Bruno Windels <brunow@element.io>
2021-02-03 18:52:55 +01:00
output {
padding: 0 14px;
display: block;
}
output.error {
color: #FE2928;
}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
</style>
</head>
<body>
<header>
<h1>Your account is nearly ready</h1>
<p>Check your details before creating an account on {{ server_name }}</p>
</header>
<main>
<form method="post" class="form__input" id="form">
social login Fix username validation javascript (#9297) * fix validation and don't use built-in validation UI Co-authored-by: Bruno Windels <brunow@element.io>
2021-02-03 18:52:55 +01:00
<div class="username_input" id="username_input">
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<label for="field-username">Username</label>
<div class="prefix">@</div>
social login Fix username validation javascript (#9297) * fix validation and don't use built-in validation UI Co-authored-by: Bruno Windels <brunow@element.io>
2021-02-03 18:52:55 +01:00
<input type="text" name="username" id="field-username" autofocus>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<div class="postfix">:{{ server_name }}</div>
</div>
social login Fix username validation javascript (#9297) * fix validation and don't use built-in validation UI Co-authored-by: Bruno Windels <brunow@element.io>
2021-02-03 18:52:55 +01:00
<output for="username_input" id="field-username-output"></output>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<input type="submit" value="Continue" class="primary-button">
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
{% if user_attributes.avatar_url or user_attributes.display_name or user_attributes.emails %}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<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 %}
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<label class="idp-detail idp-avatar" for="idp-avatar">
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<div class="check-row">
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<span class="name">Avatar</span>
<span class="use">Use</span>
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<input type="checkbox" name="use_avatar" id="idp-avatar" value="true" checked>
</div>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<img src="{{ user_attributes.avatar_url }}" class="avatar" />
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
</label>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
{% endif %}
{% if user_attributes.display_name %}
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<label class="idp-detail" for="idp-displayname">
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<div class="check-row">
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<span class="name">Display name</span>
<span class="use">Use</span>
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<input type="checkbox" name="use_display_name" id="idp-displayname" value="true" checked>
</div>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<p class="idp-value">{{ user_attributes.display_name }}</p>
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
</label>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
{% endif %}
{% for email in user_attributes.emails %}
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<label class="idp-detail" for="idp-email{{ loop.index }}">
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<div class="check-row">
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
<span class="name">E-mail</span>
<span class="use">Use</span>
Make importing display name and email optional (#9277)
2021-02-01 18:30:42 +01:00
<input type="checkbox" name="use_email" id="idp-email{{ loop.index }}" value="{{ email }}" checked>
</div>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<p class="idp-value">{{ email }}</p>
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
</label>
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
{% endfor %}
</section>
{% endif %}
</form>
</main>
Social login UI polish (#9301)
2021-02-03 21:31:23 +01:00
{% include "sso_footer.html" without context %}
Replace username picker with a template (#9275) There's some prelimiary work here to pull out the construction of a jinja environment to a separate function. I wanted to load the template at display time rather than load time, so that it's easy to update on the fly. Honestly, I think we should do this with all our templates: the risk of ending up with malformed templates is far outweighed by the improved turnaround time for an admin trying to update them.
2021-02-01 16:52:50 +01:00
<script type="text/javascript">
{% include "sso_auth_account_details.js" without context %}
</script>
</body>
</html>