Improve password meter CSS (#3221)

web/css/src/themes/default.css

@@ -1602,31 +1602,83 @@
 }
 
 .password-meter {
-	appearance: none;
-	display: block;
-	width: auto;
 	height: 3px;
-	background-color: #e7e7e7;
+	overflow: hidden;
 	margin-left: 3px;
 	margin-right: 3px;
 	border-bottom-left-radius: 3px;
 	border-bottom-right-radius: 3px;
 	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+}
+
+.password-meter-input {
+	appearance: none;
+	display: block;
+	size: 100%;
+	background: #e7e7e7;
 
 	&[value="1"] {
 		background: red;
+
+		&::-moz-meter-bar {
+			background: red;
+		}
+
+		&::-webkit-meter-bar {
+			background: red;
+		}
+
+		&::-webkit-meter-optimum-value {
+			background: red;
+		}
 	}
 
 	&[value="2"] {
 		background: orange;
+
+		&::-moz-meter-bar {
+			background: orange;
+		}
+
+		&::-webkit-meter-bar {
+			background: orange;
+		}
+
+		&::-webkit-meter-optimum-value {
+			background: orange;
+		}
 	}
 
 	&[value="3"] {
 		background: yellow;
+
+		&::-moz-meter-bar {
+			background: yellow;
+		}
+
+		&::-webkit-meter-bar {
+			background: yellow;
+		}
+
+		&::-webkit-meter-optimum-value {
+			background: yellow;
+		}
 	}
 
 	&[value="4"] {
 		background: green;
+
+		&::-moz-meter-bar {
+			background: green;
+		}
+
+		&::-webkit-meter-bar {
+			background: green;
+		}
+
+		&::-webkit-meter-optimum-value {
+			background: green;
+		}
 	}
 }
 

web/css/src/themes/vestia.css

@@ -365,10 +365,10 @@ strong {
 }
 
 .password-meter {
-	border-radius: 0;
-	box-shadow: none;
 	margin-left: 0;
 	margin-right: 0;
+	border-radius: 0;
+	box-shadow: none;
 }
 
 /* Badge component

web/js/pages/add_db.js

@@ -80,7 +80,7 @@ App.Actions.DB.update_password_meter = function () {
 	if (min_num.test(password)) {
 		score = score + 1;
 	}
-	$('.password-meter').val(score);
+	$('.js-password-meter').val(score);
 };
 
 App.Listeners.DB.keypress_v_password = function () {

web/js/pages/add_mail_acc.js

@@ -93,7 +93,7 @@ App.Actions.MAIL_ACC.update_password_meter = function () {
 	if (min_num.test(password)) {
 		score = score + 1;
 	}
-	$('.password-meter').val(score);
+	$('.js-password-meter').val(score);
 };
 
 App.Listeners.MAIL_ACC.keypress_v_password = function () {

web/js/pages/add_user.js

@@ -38,7 +38,7 @@ App.Actions.WEB.update_password_meter = function () {
 	if (min_num.test(password)) {
 		score = score + 1;
 	}
-	$('.password-meter').val(score);
+	$('.js-password-meter').val(score);
 };
 
 App.Listeners.WEB.keypress_v_password = function () {

web/js/pages/edit_db.js

@@ -87,7 +87,7 @@ App.Actions.DB.update_password_meter = function () {
 	if (min_num.test(password)) {
 		score = score + 1;
 	}
-	$('.password-meter').val(score);
+	$('.js-password-meter').val(score);
 };
 
 App.Listeners.DB.keypress_v_password = function () {

web/js/pages/edit_mail_acc.js

@@ -73,7 +73,7 @@ App.Actions.MAIL_ACC.update_password_meter = function () {
 	if (min_num.test(password)) {
 		score = score + 1;
 	}
-	$('.password-meter').val(score);
+	$('.js-password-meter').val(score);
 };
 
 App.Listeners.MAIL_ACC.keypress_v_password = function () {

web/js/pages/edit_user.js

@@ -17,7 +17,7 @@ App.Actions.WEB.update_password_meter = () => {
 	];
 	const strength = validations.reduce((acc, cur) => acc + cur, 0);
 
-	document.querySelector('.password-meter').value = strength;
+	document.querySelector('.js-password-meter').value = strength;
 };
 
 App.Listeners.WEB.keypress_v_password = () => {

web/templates/pages/add_db.php

@@ -79,7 +79,9 @@
 					</label>
 					<div class="u-pos-relative u-mb10">
 						<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
-						<meter max="4" class="password-meter"></meter>
+						<div class="password-meter">
+							<meter max="4" class="password-meter-input js-password-meter"></meter>
+						</div>
 					</div>
 				</div>
 				<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

web/templates/pages/add_mail_acc.php

@@ -49,7 +49,9 @@
 						</label>
 						<div class="u-pos-relative u-mb10">
 							<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
-							<meter max="4" class="password-meter"></meter>
+							<div class="password-meter">
+								<meter max="4" class="password-meter-input js-password-meter"></meter>
+							</div>
 						</div>
 					</div>
 					<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

web/templates/pages/add_user.php

@@ -50,7 +50,9 @@
 				</label>
 				<div class="u-pos-relative u-mb10">
 					<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?= htmlentities(trim($v_password, "'")) ?>" tabindex="4">
-					<meter max="4" class="password-meter"></meter>
+					<div class="password-meter">
+						<meter max="4" class="password-meter-input js-password-meter"></meter>
+					</div>
 				</div>
 			</div>
 			<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

web/templates/pages/edit_db.php

@@ -44,7 +44,9 @@
 				</label>
 				<div class="u-pos-relative u-mb10">
 					<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?= htmlentities(trim($v_password, "'")) ?>">
-					<meter max="4" class="password-meter"></meter>
+					<div class="password-meter">
+						<meter max="4" class="password-meter-input js-password-meter"></meter>
+					</div>
 				</div>
 			</div>
 			<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

web/templates/pages/edit_mail_acc.php

@@ -47,7 +47,9 @@
 						</label>
 						<div class="u-pos-relative u-mb10">
 							<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?= htmlentities(trim($v_password, "'")) ?>">
-							<meter max="4" class="password-meter"></meter>
+							<div class="password-meter">
+								<meter max="4" class="password-meter-input js-password-meter"></meter>
+							</div>
 						</div>
 					</div>
 					<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

web/templates/pages/edit_user.php

@@ -101,7 +101,9 @@
 				</label>
 				<div class="u-pos-relative u-mb10">
 					<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?= htmlentities(trim($v_password, "'")) ?>">
-					<meter max="4" class="password-meter"></meter>
+					<div class="password-meter">
+						<meter max="4" class="password-meter-input js-password-meter"></meter>
+					</div>
 				</div>
 			</div>
 			<div id="password-details" class="u-mb20">