paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Unify styling on password reset flow pages.

Browse Source
This commit is contained in:
Brock Whittaker
2017-05-03 22:48:53 -07:00
committed by Tim Abbott
parent 55b1d480ec
commit d21e1ccc1c
4 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/styles/portico.css
View File

@@ -272,6 +272,7 @@ img.screenshot {
#pw_strength {
/* Same width as a Bootstrap default text <input> with padding */
width: 220px;
height: 8px;
}
#registration #pw_strength {
@@ -1115,20 +1116,28 @@ input.new-organization-button {
}
/* -- password reset container -- */
.password-container {
text-align: center;
margin-top: calc(50vh - 290px);
}
.password-reset {
display: inline-block;
text-align: left;
}
.password-reset form {
margin: 0px;
}
.password-reset #pw_strength {
width: 328px;
margin-top: 20px;
}
.password-reset .control-group .control-label {
display: block;
}
.password-reset {
width: 328px;
}
.password-reset .pitch {
width: auto;
}

82
templates/zerver/reset_confirm.html
View File

@@ -6,73 +6,75 @@
{% block portico_content %}
<div class="password-container">
<div class="password-reset">
<!-- TODO: Ask about meta viewport 1:1 scaling -->
<div class="pitch">
<h3>{{ _('Reset your password.') }}</h3>
<div class="password-container flex full-page new-style">
<div class="bg-image"></div>
<!-- wrapper for flex content -->
<div>
<div class="get-started">
<h1>{{ _('Reset your password.') }}</h1>
</div>
<div class="password-reset white-box">
<!-- TODO: Ask about meta viewport 1:1 scaling -->
{% if validlink %}
<form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
{{ csrf_input }}
<div class="input-group" id="email-section">
<label for="id_email">{{ _("Email") }}</label>
<div>
<input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
{% if validlink %}
<form method="post" id="password_reset" class="form-horizontal" autocomplete="off">
{{ csrf_input }}
<div class="input-box" id="email-section">
<label for="id_email">{{ _("Email") }}</label>
<div>
<input type="text" name="name" placeholder='{{ form.user.email }}' disabled />
</div>
</div>
</div>
<div class="input-group">
<label for="id_new_password1" class="">{{ _('Password') }}</label>
<div class="">
<div class="input-box">
<label for="id_new_password1" class="">{{ _('Password') }}</label>
<input id="id_new_password1" class="required" type="password" name="new_password1"
value="{% if form.new_password1.value() %}{{ form.new_password1.value() }}{% endif %}"
maxlength="100"
data-min-length="{{password_min_length}}"
data-min-quality="{{password_min_quality}}" />
data-min-quality="{{password_min_quality}}" required />
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if form.new_password1.errors %}
{% for error in form.new_password1.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="input-group">
<label class="">{{ _('Password strength') }}</label>
<div class="">
<div class="progress" id="pw_strength">
<div class="bar bar-danger" style="width: 10%;"></div>
<div class="input-box">
<div class="">
<div class="progress" id="pw_strength">
<div class="bar bar-danger" style="width: 10%;"></div>
</div>
</div>
</div>
</div>
<div class="input-group">
<label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
<div class="">
<div class="input-box">
<label for="id_new_password2" class="">{{ _('Confirm password') }}</label>
<input id="id_new_password2" class="required" type="password" name="new_password2"
value="{% if form.new_password2.value() %}{{ form.new_password2.value() }}{% endif %}"
maxlength="100" />
maxlength="100" required />
<img class="valid" src="/static/images/checkbox-valid.svg" />
{% if form.new_password2.errors %}
{% for error in form.new_password2.errors %}
<div class="alert alert-error">{{ error }}</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="input-group m-t-30">
<div class="centered-button">
<input type="submit" class="btn btn-primary" value="Submit" />
<div class="input-box m-t-30">
<div class="centered-button">
<button type="submit" class="" value="Submit">Submit</button>
</div>
</div>
</div>
</form>
</form>
<script type="text/javascript">
autofocus('#id_new_password1');
</script>
{% else %}
<p>{{ _('Sorry, the link you provided is invalid or has already been used.') }}</p>
{% endif %}
<script type="text/javascript">
autofocus('#id_new_password1');
</script>
{% else %}
<p>{{ _('Sorry, the link you provided is invalid or has already been used.') }}</p>
{% endif %}
</div>
</div>
</div>

8
templates/zerver/reset_done.html
View File

@@ -1,6 +1,10 @@
{% extends "zerver/portico_signup.html" %}
{% block portico_content %}
<h1 style="margin-top: 20px">{{ _("We've reset your password!") }}</h1>
<p>{% trans login_url=url('django.contrib.auth.views.login') %}Please <a href="{{ login_url }}">log in</a>.{% endtrans %}</p>
<div class="flex full-page new-style">
<div class="inline-block">
<h1 style="margin-top: 20px">{{ _("We've reset your password!") }}</h1>
<p>{% trans login_url=url('django.contrib.auth.views.login') %}Please <a href="{{ login_url }}">log in</a>.{% endtrans %}</p>
</div>
</div>
{% endblock %}

14
templates/zerver/reset_emailed.html
View File

@@ -1,8 +1,12 @@
{% extends "zerver/portico_signup.html" %}
{% block portico_content %}
{% trans %}
<h1 style="margin-top: 20px">We just sent you a password reset!</h1>
<h1>Check your email to finish the process.</h1>
<p>(Or don't, but then why did you fill out this form?)</p>
{% endtrans %}
<div class="flex full-page new-style">
<div class="inline-block">
{% trans %}
<h1 style="margin-top: 20px">We just sent you a password reset!</h1>
<h1>Check your email to finish the process.</h1>
<p>(Or don't, but then why did you fill out this form?)</p>
{% endtrans %}
</div>
</div>
{% endblock %}