use roles guards

This commit is contained in:
Thanakorn S
2026-05-22 08:45:35 +07:00
parent b76dc679af
commit e36d304521
19 changed files with 133 additions and 66 deletions
+46 -1
View File
@@ -113,11 +113,23 @@
<div class="col-12">
<label class="form-label">Password <span class="text-danger">*</span></label>
<div class="input-group">
<input type="password" class="form-control" id="password" placeholder="Choose a strong password">
<input type="password" class="form-control" id="password" placeholder="Choose a strong password"
oninput="on_password_input(this.value)">
<button class="btn btn-outline-secondary toggle-pw" type="button" data-target="password">
<i class="ti ti-eye"></i>
</button>
</div>
<div class="mt-2">
<div class="progress" style="height:5px;">
<div id="pw_strength_bar" class="progress-bar"
style="width:0%;transition:width .25s,background-color .25s;border-radius:4px;"></div>
</div>
<div class="d-flex justify-content-between align-items-start mt-1 gap-2">
<small id="pw_strength_label" class="fw-semibold" style="white-space:nowrap;">—</small>
<small id="pw_feedback" class="text-muted text-end"></small>
</div>
</div>
<div class="form-text">Minimum required strength: <strong>Strong (3/4)</strong></div>
</div>
<div class="col-12">
<label class="form-label">Confirm Password <span class="text-danger">*</span></label>
@@ -141,8 +153,36 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/zxcvbn@4.4.2/dist/zxcvbn.js"></script>
<script>
const STRENGTH_LEVELS = [
{ label: 'Very weak', color: '#dc3545', pct: 20 },
{ label: 'Weak', color: '#fd7e14', pct: 40 },
{ label: 'Fair', color: '#ffc107', pct: 60 },
{ label: 'Strong', color: '#198754', pct: 80 },
{ label: 'Very strong', color: '#0d6efd', pct: 100 },
];
var pw_score = -1;
function on_password_input(pw) {
if (!pw) {
pw_score = -1;
$('#pw_strength_bar').css({ width: '0%', backgroundColor: '' });
$('#pw_strength_label').text('—').css('color', '');
$('#pw_feedback').text('');
return;
}
const user_inputs = [$('#name').val(), $('#surname').val(), $('#username').val()].filter(Boolean);
const result = zxcvbn(pw, user_inputs);
pw_score = result.score;
const lvl = STRENGTH_LEVELS[pw_score];
$('#pw_strength_bar').css({ width: lvl.pct + '%', backgroundColor: lvl.color });
$('#pw_strength_label').text(lvl.label).css('color', lvl.color);
$('#pw_feedback').text(result.feedback.warning || result.feedback.suggestions[0] || '');
}
$(function () {
$(document).on('click', '.toggle-pw', function () {
const $input = $('#' + $(this).data('target'));
@@ -164,6 +204,11 @@
return;
}
if (pw_score < 3) {
bootbox.alert('Password is too weak. Please choose a stronger password (Strong or above).');
return;
}
if (password !== confirm) {
bootbox.alert('Passwords do not match.');
return;