redesigned change passwd pages

diff --git a/src/templates/auth/modules/password.html b/src/templates/auth/modules/password.html
index 53978e308dd9e666b00829d9368b4e0ca1d98004..f96869ad007290bbe8e29e0e6f10e913ce7d5b79 100644 (file)
--- a/src/templates/auth/modules/password.html
+++ b/src/templates/auth/modules/password.html
@@ -1,38 +1,22 @@
 <div class="field">
-       <div class="block">
-               <label class="label">{{ _("New Password") }}</label>
+       <label class="label">{{ _("New Password") }}</label>
 
-               <div class="control">
-                       <input type="password" class="input" name="password1"
-                               id="password1" placeholder="{{ _("New Password") }}" required
-                               data-user-input="{% if account %}{{ " ".join((account.first_name, account.last_name)) }}{% end %}">
-               </div>
+       <div class="control">
+               <input type="password" class="input" name="password1"
+                       id="password1" placeholder="{{ _("New Password") }}" required
+                       data-user-input="{% if account %}{{ " ".join((account.first_name, account.last_name)) }}{% end %}">
        </div>
 </div>
 
 <div class="field">
-       <div class="block">
-               <div class="control">
-                       <input type="password" class="input" name="password2"
-                               id="password2" placeholder="{{ _("Repeat Password") }}" required>
-               </div>
-
-               <div id="password-mismatch" class="invalid-feedback">
-                       {{ _("Passwords do not match") }}
-               </div>
+       <div class="control">
+               <input type="password" class="input" name="password2"
+                       id="password2" placeholder="{{ _("Repeat Password") }}" required>
        </div>
-</div>
 
-<div class="block">
-       <div class="progress">
-               <div class="progress" id="password-strength" role="progressbar"></div>
-       </div>
+       <ul class="help" id="password-feedback"></ul>
 </div>
 
 <div class="block">
-       <p class="help" id="password-warning"></p>
-
-       <small>
-               <ul id="password-feedback"></ul>
-       </small>
+       <progress class="progress is-small" value="0" max="100" id="password-strength"></progress>
 </div>

diff --git a/src/templates/auth/modules/password.js b/src/templates/auth/modules/password.js
index 43cadf79b464fe1d1311cf287c0f5ab285610234..562c83ef16af6c821fb74999de77ba87a456fe30 100644 (file)
--- a/src/templates/auth/modules/password.js
+++ b/src/templates/auth/modules/password.js
@@ -15,7 +15,18 @@ $(function() {
        var quality;
 
        password1.keyup(function(event) {
+               form.trigger("change");
+       });
+
+       password2.keyup(function(event) {
+               form.trigger("change");
+       });
+
+       form.on("change", function() {
+               submit.prop("disabled", true);
+
                var val1 = password1.val();
+               var val2 = password2.val();
 
                if (val1) {
                        // Estimate password quality
@@ -25,7 +36,7 @@ $(function() {
                        var percentage = (quality.score + 1) * 20;
 
                        // Set progress bar width
-                       progress.css("width", percentage + "%");
+                       progress.val(percentage);
 
                        // Clear all previous backgrounds
                        progress.removeClass([
@@ -50,12 +61,15 @@ $(function() {
                        }
 
                        // Show any feedback
-                       warning.empty();
                        feedback.empty();
 
                        if (quality.feedback) {
+                               if (val2 && (val1 !== val2)) {
+                                       feedback.append("<li>{{ _("Passwords do not match") }}</li>");
+                               }
+
                                if (quality.feedback.warning) {
-                                       warning.html(quality.feedback.warning);
+                                       feedback.append("<li>" + quality.feedback.warning + "</li>");
                                }
 
                                $.each(quality.feedback.suggestions, function (i, suggestion) {
@@ -63,37 +77,16 @@ $(function() {
                                });
                        }
                } else {
-                       progress.css("width", "0%");
+                       progress.val(0);
 
                        // Clear all feedback
-                       warning.empty();
                        feedback.empty();
                }
 
-               form.trigger("change");
-       });
-
-       password2.keyup(function(event) {
-               form.trigger("change");
-       });
-
-       form.on("change", function() {
-               $("#password-mismatch").hide();
-               submit.prop("disabled", true);
-
-               var val1 = password1.val();
-               var val2 = password2.val();
-
                // We cannot submit the form when password2 is empty
                if (!val2)
                        return;
 
-               // If the passwords match, we allow to submit the form
-               if (val1 !== val2) {
-                       $("#password-mismatch").show();
-                       return;
-               }
-
                if (!quality || quality.score < 3)
                        return;
 

diff --git a/src/templates/users/passwd.html b/src/templates/users/passwd.html
index aadc69f75896c3e9a867e36f9072ca11a516ecf9..1171196f002742f7829b419543e6f65b2a9da87f 100644 (file)
--- a/src/templates/users/passwd.html
+++ b/src/templates/users/passwd.html
@@ -3,26 +3,38 @@
 {% block title %}{{ account }} - {{ _("Change Password") }}{% end block %}
 
 {% block content %}
-       <div class="row justify-content-center">
-               <div class="col col-md-8">
-                       <h4 class="mb-4">{{ _("Change Password") }}</h4>
+       <section class="hero is-fullheight-with-navbar">
+               <div class="hero-body">
+                       <div class="container">
+                               <div class="columns is-centered">
+                                       <div class="column is-one-third">
+                                               <h1 class="title">{{ _("Change Password") }}</h1>
 
-                       <form method="POST" action="">
-                               {% raw xsrf_form_html() %}
+                                               <div class="block">
+                                                       <form method="POST" action="">
+                                                               {% raw xsrf_form_html() %}
 
-                               <div class="mb-3">
-                                       <label class="form-label">{{ _("Current Password") }}</label>
+                                                               <div class="field">
+                                                                       <div class="control">
+                                                                               <label class="label">{{ _("Current Password") }}</label>
 
-                                       <input type="password" class="form-control" name="password"
-                                               placeholder="{{ _("Current Password") }}">
-                               </div>
+                                                                               <input type="password" class="input" name="password"
+                                                                                       placeholder="{{ _("Current Password") }}">
+                                                                       </div>
+                                                               </div>
 
-                               {% module Password(account) %}
+                                                               {% module Password(account) %}
 
-                               <div class="d-grid">
-                                       <input class="btn btn-primary" type="submit" value="{{ _("Change Password") }}">
+                                                               <div class="field">
+                                                                       <div class="control">
+                                                                               <input class="button is-primary is-fullwidth" type="submit" value="{{ _("Change Password") }}">
+                                                                       </div>
+                                                               </div>
+                                                       </form>
+                                               </div>
+                                       </div>
                                </div>
-                       </form>
+                       </div>
                </div>
-       </div>
+       </section>
 {% end block %}