From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Wed, 27 Dec 2023 20:01:03 +0000 (+0000)
Subject: redesigned change passwd pages
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e0b25f03c63eff24e9089d0f9d20399a7a5c2fbf;p=ipfire.org.git

redesigned change passwd pages
---

diff --git a/src/templates/auth/modules/password.html b/src/templates/auth/modules/password.html
index 53978e30..f96869ad 100644
--- 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 43cadf79..562c83ef 100644
--- 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 aadc69f7..1171196f 100644
--- 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 %}