modules/password: styled the pages

diff --git a/src/templates/auth/modules/password.html b/src/templates/auth/modules/password.html
index ca921b23f1249e65ffa8fa2c71f0418376de2812..53978e308dd9e666b00829d9368b4e0ca1d98004 100644 (file)
--- a/src/templates/auth/modules/password.html
+++ b/src/templates/auth/modules/password.html
@@ -1,32 +1,38 @@
-<fieldset>
-       <div class="mb-3">
-               <label class="form-label">{{ _("New Password") }}</label>
+<div class="field">
+       <div class="block">
+               <label class="label">{{ _("New Password") }}</label>
 
-               <input type="password" class="form-control" name="password1"
-                       id="password1" placeholder="{{ _("New Password") }}" required
-                       data-user-input="{% if account %}{{ " ".join((account.first_name, account.last_name)) }}{% end %}">
+               <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>
 
-       <div class="mb-3">
-               <input type="password" class="form-control" name="password2"
-                       id="password2" placeholder="{{ _("Repeat Password") }}" required>
+<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>
+</div>
 
-       <div class="mb-3">
-               <div class="progress">
-                       <div class="progress-bar" id="password-strength" role="progressbar"></div>
-               </div>
+<div class="block">
+       <div class="progress">
+               <div class="progress" id="password-strength" role="progressbar"></div>
        </div>
+</div>
 
-       <div class="mb-3 text-muted">
-               <p class="mb-0" id="password-warning"></p>
+<div class="block">
+       <p class="help" id="password-warning"></p>
 
-               <small class="form-text">
-                       <ul id="password-feedback"></ul>
-               </small>
-       </div>
-</fieldset>
+       <small>
+               <ul id="password-feedback"></ul>
+       </small>
+</div>

diff --git a/src/templates/auth/modules/password.js b/src/templates/auth/modules/password.js
index 8235fc733ebbfdd4b0d1e66decfb11ed3523a903..43cadf79b464fe1d1311cf287c0f5ab285610234 100644 (file)
--- a/src/templates/auth/modules/password.js
+++ b/src/templates/auth/modules/password.js
@@ -29,7 +29,7 @@ $(function() {
 
                        // Clear all previous backgrounds
                        progress.removeClass([
-                               "bg-success", "bg-warning", "bg-danger"
+                               "is-success", "is-warning", "is-danger"
                        ]);
 
                        // Make progress bar show in the right colour
@@ -37,15 +37,15 @@ $(function() {
                                case 0:
                                case 1:
                                case 2:
-                                       progress.addClass("bg-danger");
+                                       progress.addClass("is-danger");
                                        break;
 
                                case 3:
-                                       progress.addClass("bg-warning");
+                                       progress.addClass("is-warning");
                                        break;
 
                                case 4:
-                                       progress.addClass("bg-success");
+                                       progress.addClass("is-success");
                                        break;
                        }