use roles guards
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user