Skip to content

Commit 3e09031

Browse files
AlecRustAlecRust
authored
Improve password meter CSS (hestiacp#3221)
1 parent bce434f commit 3e09031

File tree

15 files changed

+83
-19
lines changed

15 files changed

+83
-19
lines changed

‎web/css/src/themes/default.css‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1602,31 +1602,83 @@
16021602
}
16031603

16041604
.password-meter {
1605-
appearance: none;
1606-
display: block;
1607-
width: auto;
16081605
height: 3px;
1609-
background-color: #e7e7e7;
1606+
overflow: hidden;
16101607
margin-left: 3px;
16111608
margin-right: 3px;
16121609
border-bottom-left-radius: 3px;
16131610
border-bottom-right-radius: 3px;
16141611
box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
1612+
}
1613+
1614+
.password-meter-input {
1615+
appearance: none;
1616+
display: block;
1617+
size: 100%;
1618+
background: #e7e7e7;
16151619

16161620
&[value="1"] {
16171621
background: red;
1622+
1623+
&::-moz-meter-bar {
1624+
background: red;
1625+
}
1626+
1627+
&::-webkit-meter-bar {
1628+
background: red;
1629+
}
1630+
1631+
&::-webkit-meter-optimum-value {
1632+
background: red;
1633+
}
16181634
}
16191635

16201636
&[value="2"] {
16211637
background: orange;
1638+
1639+
&::-moz-meter-bar {
1640+
background: orange;
1641+
}
1642+
1643+
&::-webkit-meter-bar {
1644+
background: orange;
1645+
}
1646+
1647+
&::-webkit-meter-optimum-value {
1648+
background: orange;
1649+
}
16221650
}
16231651

16241652
&[value="3"] {
16251653
background: yellow;
1654+
1655+
&::-moz-meter-bar {
1656+
background: yellow;
1657+
}
1658+
1659+
&::-webkit-meter-bar {
1660+
background: yellow;
1661+
}
1662+
1663+
&::-webkit-meter-optimum-value {
1664+
background: yellow;
1665+
}
16261666
}
16271667

16281668
&[value="4"] {
16291669
background: green;
1670+
1671+
&::-moz-meter-bar {
1672+
background: green;
1673+
}
1674+
1675+
&::-webkit-meter-bar {
1676+
background: green;
1677+
}
1678+
1679+
&::-webkit-meter-optimum-value {
1680+
background: green;
1681+
}
16301682
}
16311683
}
16321684

‎web/css/src/themes/vestia.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -365,10 +365,10 @@ strong {
365365
}
366366

367367
.password-meter {
368-
border-radius: 0;
369-
box-shadow: none;
370368
margin-left: 0;
371369
margin-right: 0;
370+
border-radius: 0;
371+
box-shadow: none;
372372
}
373373

374374
/* Badge component

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/pages/add_db.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ App.Actions.DB.update_password_meter = function () {
8080
if (min_num.test(password)) {
8181
score = score + 1;
8282
}
83-
$('.password-meter').val(score);
83+
$('.js-password-meter').val(score);
8484
};
8585

8686
App.Listeners.DB.keypress_v_password = function () {

‎web/js/pages/add_mail_acc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ App.Actions.MAIL_ACC.update_password_meter = function () {
9393
if (min_num.test(password)) {
9494
score = score + 1;
9595
}
96-
$('.password-meter').val(score);
96+
$('.js-password-meter').val(score);
9797
};
9898

9999
App.Listeners.MAIL_ACC.keypress_v_password = function () {

‎web/js/pages/add_user.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ App.Actions.WEB.update_password_meter = function () {
3838
if (min_num.test(password)) {
3939
score = score + 1;
4040
}
41-
$('.password-meter').val(score);
41+
$('.js-password-meter').val(score);
4242
};
4343

4444
App.Listeners.WEB.keypress_v_password = function () {

‎web/js/pages/edit_db.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ App.Actions.DB.update_password_meter = function () {
8787
if (min_num.test(password)) {
8888
score = score + 1;
8989
}
90-
$('.password-meter').val(score);
90+
$('.js-password-meter').val(score);
9191
};
9292

9393
App.Listeners.DB.keypress_v_password = function () {

‎web/js/pages/edit_mail_acc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ App.Actions.MAIL_ACC.update_password_meter = function () {
7373
if (min_num.test(password)) {
7474
score = score + 1;
7575
}
76-
$('.password-meter').val(score);
76+
$('.js-password-meter').val(score);
7777
};
7878

7979
App.Listeners.MAIL_ACC.keypress_v_password = function () {

‎web/js/pages/edit_user.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ App.Actions.WEB.update_password_meter = () => {
1717
];
1818
const strength = validations.reduce((acc, cur) => acc + cur, 0);
1919

20-
document.querySelector('.password-meter').value = strength;
20+
document.querySelector('.js-password-meter').value = strength;
2121
};
2222

2323
App.Listeners.WEB.keypress_v_password = () => {

‎web/templates/pages/add_db.php‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@
7979
</label>
8080
<div class="u-pos-relative u-mb10">
8181
<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
82-
<meter max="4" class="password-meter"></meter>
82+
<div class="password-meter">
83+
<meter max="4" class="password-meter-input js-password-meter"></meter>
84+
</div>
8385
</div>
8486
</div>
8587
<p class="u-mb10"><?= _("Your password must have at least") ?>:</p>

0 commit comments

Comments
 (0)