Skip to content

Disable form and show warning on mismatch when updating password #3219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 19, 2018
Merged

Disable form and show warning on mismatch when updating password #3219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c18eb36
Disable form and show warning on mismatch when updating password (#3197)
Mar 10, 2018
30e7727
Add password match feature to register and reset password forms
Mar 17, 2018
7fefe6c
Merge branch 'master' into update-password-match
di Mar 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions warehouse/static/js/warehouse/controllers/password_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { Controller } from "stimulus";

export default class extends Controller {
Expand Down
41 changes: 41 additions & 0 deletions warehouse/static/js/warehouse/controllers/password_match_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { Controller } from "stimulus";

export default class extends Controller {
static targets = ["passwordMatch", "matchMessage", "submit"];

connect() {
this.checkPasswordsMatch();
}

checkPasswordsMatch() {
if (this.passwordMatchTargets.every(field => field.value === "")) {
this.matchMessageTarget.classList.add("hidden");
this.submitTarget.setAttribute("disabled", "");
} else {
this.matchMessageTarget.classList.remove("hidden");
if (this.passwordMatchTargets.every((field, i, arr) => field.value === arr[0].value)) {
this.matchMessageTarget.innerHTML = "Passwords match";
this.matchMessageTarget.classList.add("form-error--valid");
this.submitTarget.removeAttribute("disabled");
} else {
this.matchMessageTarget.innerHTML = "Passwords do not match";
this.matchMessageTarget.classList.remove("form-error--valid");
this.submitTarget.setAttribute("disabled", "");
}
}
}
}
13 changes: 13 additions & 0 deletions warehouse/static/sass/blocks/_form-errors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,17 @@
max-width: 100%;
}
}

.form-error {
&--valid {
color: $success-color;

&:before {
font-family: "FontAwesome";
content: "\f00c"; // Check / Tick
margin-right: 5px;
color: $success-color;
}
}
}
}
14 changes: 9 additions & 5 deletions warehouse/templates/accounts/register.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<div class="site-container">
<h1 class="page-title">Create an account on PyPI</h1>

<form method="POST" action="{{ request.current_route_path() }}">
<form method="POST" action="{{ request.current_route_path() }}" data-controller="password password-match">
<input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">

{% if form.errors.__all__ %}
Expand Down Expand Up @@ -70,7 +70,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
{% endif %}
</div>

<div data-controller="password">
<div>
<div class="form-group">
<div class="split-layout">
<label for="password" class="form-group__label">Password</label>
Expand All @@ -81,7 +81,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
</div>
{# the password field needs to be wrapped in a div to properly place tooltips #}
<div>
{{ form.new_password(placeholder="Select a password", required="required", class_="form-group__input", autocomplete="new-password", data_target="password.password") }}
{{ form.new_password(placeholder="Select a password", required="required", class_="form-group__input", autocomplete="new-password", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
</div>
{% if form.new_password.errors %}
<ul class="form-errors">
Expand All @@ -95,7 +95,7 @@ <h1 class="page-title">Create an account on PyPI</h1>

<div class="form-group">
<label for="password_confirm" class="form-group__label">Confirm Password</label>
{{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password") }}
{{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
{% if form.password_confirm.errors %}
<ul class="form-errors">
{% for error in form.password_confirm.errors %}
Expand All @@ -106,11 +106,15 @@ <h1 class="page-title">Create an account on PyPI</h1>
</div>
</div>

<ul class="form-errors">
<li data-target="password-match.matchMessage" class="hidden"></li>
</ul>

<div class="form-group">
{{ recaptcha_html(request, form) }}
</div>

<input type="submit" value="Create Account" class="button button--primary">
<input type="submit" value="Create Account" class="button button--primary" data-target="password-match.submit">
</form>
</div>
</section>
Expand Down
12 changes: 8 additions & 4 deletions warehouse/templates/accounts/reset-password.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<section class="horizontal-section">
<div class="site-container">
<h1 class="page-title">Reset Your Password</h1>
<form data-controller="password" method="POST" action="{{ request.current_route_path() }}">
<form data-controller="password password-match" method="POST" action="{{ request.current_route_path() }}">
<input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
{% if form.errors.__all__ %}
<ul class="errors">
Expand All @@ -39,7 +39,7 @@ <h1 class="page-title">Reset Your Password</h1>
</div>
{# the password field needs to be wrapped in a div to properly place tooltips #}
<div>
{{ form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password") }}
{{ form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
</div>
{% if form.new_password.errors %}
<ul class="form-errors">
Expand All @@ -53,7 +53,7 @@ <h1 class="page-title">Reset Your Password</h1>

<div class="form-group">
<label for="password_confirm" class="form-group__label">Confirm Password</label>
{{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password") }}
{{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
{% if form.password_confirm.errors %}
<ul class="form-errors">
{% for error in form.password_confirm.errors %}
Expand All @@ -63,7 +63,11 @@ <h1 class="page-title">Reset Your Password</h1>
{% endif %}
</div>

<input type="submit" value="Reset Password" class="button button--primary">
<ul class="form-errors">
<li data-target="password-match.matchMessage" class="hidden"></li>
</ul>

<input type="submit" value="Reset Password" class="button button--primary" data-target="password-match.submit">
</form>
</div>
</section>
Expand Down
14 changes: 8 additions & 6 deletions warehouse/templates/manage/account.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,37 +203,39 @@ <h2 class="sub-title">Account Emails</h2>

<h2 class="sub-title">Change Password</h2>
{{ form_error_anchor(change_password_form) }}
<form data-controller="password" method="POST" action="#errors">
<form data-controller="password password-match" method="POST" action="#errors">
<input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
{{ form_errors(change_password_form) }}
<div class="form-group">

<div class="split-layout">
<label class="form-group__label" for="name">Old Password</label>
<label for="show-password">
<input data-action="change->password#togglePasswords" data-target="password.showPassword"
id="show-password" type="checkbox" tabindex="4">&nbsp;Show passwords
</label>
</div>
{{ change_password_form.password(placeholder="Your current password", required="required", class_="form-group__input", data_target="password.password") }}
{{ change_password_form.password(placeholder="Your current password", required="required", class_="form-group__input", data_target="password.password")}}
{{ field_errors(change_password_form.password) }}
</div>
<div class="form-group">
<label class="form-group__label" for="name">New Password</label>
{# the password field needs to be wrapped in a div to properly place tooltips #}
<div>
{{ change_password_form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password") }}
{{ change_password_form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
</div>
{{ field_errors(change_password_form.new_password) }}
{{ password_strength_gauge() }}
</div>
<div class="form-group">
<label class="form-group__label" for="name">Confirm New Password</label>
{{ change_password_form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password") }}
{{ change_password_form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
{{ field_errors(change_password_form.password_confirm) }}
</div>
<ul class="form-errors">
<li data-target="password-match.matchMessage" class="hidden"></li>
</ul>
<div>
<input value="Update Password" class="button button--primary" type="submit">
<input value="Update Password" class="button button--primary" type="submit" data-target="password-match.submit">
</div>
</form>

Expand Down