From 1277780d4525b233ddc39684c268794b378be8de Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Fri, 1 Jul 2022 14:34:10 +0200 Subject: implement client-side validation of password field --- development.ini | 3 +++ fietsboek/static/fietsboek.js | 35 +++++++++++++++++++++++++++++++ fietsboek/templates/password_reset.jinja2 | 12 ++++++++--- fietsboek/templates/profile.jinja2 | 12 ++++++++--- fietsboek/util.py | 25 ++++++++++++++++++++++ fietsboek/views/default.py | 9 +++++--- fietsboek/views/profile.py | 11 ++++++---- 7 files changed, 94 insertions(+), 13 deletions(-) diff --git a/development.ini b/development.ini index 3820779..fb46605 100644 --- a/development.ini +++ b/development.ini @@ -7,6 +7,9 @@ use = egg:fietsboek pyramid.reload_templates = true +pyramid.reload_assets = true +pyramid.reload_resources = true +pyramid.reload_all = true pyramid.debug_authorization = false pyramid.debug_notfound = false pyramid.debug_routematch = false diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js index 6fc5209..26a0902 100644 --- a/fietsboek/static/fietsboek.js +++ b/fietsboek/static/fietsboek.js @@ -19,6 +19,27 @@ function updateTagList() { } } +function checkPasswordValidity(main, repeat) { + let main_pw = document.querySelector(main); + let repeat_pw = document.querySelector(repeat); + + let form = main_pw.closest('form'); + form.classList.remove('was-validated'); + + /* Check password requirements */ + if (main_pw.value.length != 0 && main_pw.value.length < 8) { + main_pw.setCustomValidity('Too short'); + } else { + main_pw.setCustomValidity(''); + } + + if (main_pw.value != repeat_pw.value) { + repeat_pw.setCustomValidity('Needs to match'); + } else { + repeat_pw.setCustomValidity(''); + } +} + document.addEventListener('DOMContentLoaded', function(event) { /* Enable the "Add tag" button */ let $ = (selector) => document.querySelector(selector); @@ -57,4 +78,18 @@ document.addEventListener('DOMContentLoaded', function(event) { var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl, {sanitize: false}) }); + + /* Enable Bootstrap form validation */ + const forms = document.querySelectorAll('.needs-validation') + Array.from(forms).forEach(form => { + form.addEventListener('submit', event => { + if (!form.checkValidity()) { + event.preventDefault() + event.stopPropagation() + } + + form.classList.add('was-validated') + }, false) + }) + }); diff --git a/fietsboek/templates/password_reset.jinja2 b/fietsboek/templates/password_reset.jinja2 index 892837f..8ecec84 100644 --- a/fietsboek/templates/password_reset.jinja2 +++ b/fietsboek/templates/password_reset.jinja2 @@ -2,17 +2,23 @@ {% block content %}

{{ _("page.password_reset.title") }}

-
+
- + +
+ {{ _("page.password_reset.password_invalid") }} +
- + +
+ {{ _("page.password_reset.password_mismatch") }} +
diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2 index 5487b92..65978ac 100644 --- a/fietsboek/templates/profile.jinja2 +++ b/fietsboek/templates/profile.jinja2 @@ -8,7 +8,7 @@

{{ _("page.my_profile.personal_data") }}

- +
@@ -18,13 +18,19 @@
- + +
+ {{ _("page.my_profile.personal_data.password_invalid") }} +
- + +
+ {{ _("page.my_profile.personal_data.password_must_match") }} +
diff --git a/fietsboek/util.py b/fietsboek/util.py index bdc128d..b56584f 100644 --- a/fietsboek/util.py +++ b/fietsboek/util.py @@ -130,3 +130,28 @@ def parse_badges(badges, params, prefix='badge-'): badge for badge in badges if params.get(f'{prefix}{badge.id}') ] + + +def check_password_constraints(password, repeat_password=None): + """Verifies that the password constraints match for the given password. + + This is usually also verified client-side, but for people that bypass the + client side verification and the API, this is re-implemented here. + + If ``repeat_password`` is given, this also verifies that the two passwords + match. + + :raises ValueError: If the verification of the constraints failed. The + first arg of the error will be a + :class:`~pyramid.i18n.TranslationString` with the message of why the + verification failed. + :param password: The password which to verify. + :type password: str + :param repeat_password: The password repeat. + :type repeat_password: str + """ + if repeat_password is not None: + if repeat_password != password: + raise ValueError(_("password_constraint.mismatch")) + if len(password) < 8: + raise ValueError(_("password_constraint.length")) diff --git a/fietsboek/views/default.py b/fietsboek/views/default.py index 9c417d2..8424b97 100644 --- a/fietsboek/views/default.py +++ b/fietsboek/views/default.py @@ -159,11 +159,14 @@ def use_token(request): if request.method == 'GET' and token.token_type == TokenType.RESET_PASSWORD: return render_to_response('fietsboek:templates/password_reset.jinja2', {}, request) if request.method == 'POST' and token.token_type == TokenType.RESET_PASSWORD: - if request.params["password"] != request.params["repeat-password"]: - request.session.flash(request.localizer.translate(_("flash.password_mismatch"))) + password = request.params["password"] + try: + util.check_password_constraints(password, request.params["repeat-password"]) + except ValueError as exc: + request.session.flash(request.localizer.translate(exc.args[0])) return HTTPFound(request.route_url('use-token', uuid=token.uuid)) - token.user.set_password(request.params["password"]) + token.user.set_password(password) request.dbsession.delete(token) request.session.flash(request.localizer.translate(_("flash.password_updated"))) return HTTPFound(request.route_url("login")) diff --git a/fietsboek/views/profile.py b/fietsboek/views/profile.py index b138bd0..c14b138 100644 --- a/fietsboek/views/profile.py +++ b/fietsboek/views/profile.py @@ -7,7 +7,7 @@ from pyramid.httpexceptions import HTTPFound, HTTPNotFound, HTTPForbidden from sqlalchemy import select -from .. import models +from .. import models, util @view_config(route_name='profile', renderer='fietsboek:templates/profile.jinja2', @@ -43,9 +43,12 @@ def do_change_profile(request): :return: The HTTP response. :rtype: pyramid.response.Response """ - if request.params["password"]: - if request.params["password"] != request.params["repeat-password"]: - request.session.flash(request.localizer.translate(_("flash.password_mismatch"))) + password = request.params["password"] + if password: + try: + util.check_password_constraints(password, request.params["repeat-password"]) + except ValueError as exc: + request.session.flash(request.localizer.translate(exc.args[0])) return HTTPFound(request.route_url('profile')) request.identity.set_password(request.params["password"]) name = request.params["name"] -- cgit v1.2.3