From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 22 Oct 2023 11:22:52 +0000 (+0000)
Subject: modules/password: styled the pages
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2dc5eeff8cab72165052f1fecf9046fde0339a80;p=ipfire.org.git

modules/password: styled the pages
---

diff --git a/src/templates/auth/modules/password.html b/src/templates/auth/modules/password.html
index ca921b23..53978e30 100644
--- 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 8235fc73..43cadf79 100644
--- 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;
 			}