129 lines
3.8 KiB
PHP
129 lines
3.8 KiB
PHP
<?php
|
|
$id = $id ?? 'password';
|
|
$name = $name ?? 'password';
|
|
$placeholder = $placeholder ?? 'Enter strong password';
|
|
?>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">
|
|
Password <span class="text-danger">*</span>
|
|
</label>
|
|
|
|
<div class="position-relative">
|
|
<input type="password" id="<?= $id ?>" name="<?= $name ?>"
|
|
class="form-control pe-5 pe-10"
|
|
placeholder="<?= $placeholder ?>"
|
|
required>
|
|
|
|
<!-- Info Icon (NEW) -->
|
|
<span class="position-absolute top-50 end-0 translate-middle-y me-5"
|
|
style="cursor:pointer;"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-html="true"
|
|
title="
|
|
<b>Password must contain:</b><br>
|
|
• One uppercase letter<br>
|
|
• One lowercase letter<br>
|
|
• One number<br>
|
|
• One special character<br>
|
|
• Minimum 8 characters
|
|
">
|
|
<i class="fa fa-circle-info text-primary"></i>
|
|
</span>
|
|
|
|
<!-- Eye Icon -->
|
|
<span class="position-absolute top-50 end-0 translate-middle-y me-2"
|
|
style="cursor:pointer;"
|
|
onclick="togglePassword_<?= $id ?>()">
|
|
<i id="<?= $id ?>_icon" class="fa fa-eye"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Strength -->
|
|
<small id="<?= $id ?>_strength" class="d-block mt-2"></small>
|
|
|
|
<!-- Error Message -->
|
|
<small id="<?= $id ?>_error" class="text-danger d-none"></small>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const password = document.getElementById("<?= $id ?>");
|
|
|
|
if (!password) return;
|
|
|
|
password.addEventListener("input", function () {
|
|
const val = password.value;
|
|
|
|
const strengthText = document.getElementById("<?= $id ?>_strength");
|
|
const errorText = document.getElementById("<?= $id ?>_error");
|
|
|
|
if (val.length === 0) {
|
|
strengthText.innerHTML = "";
|
|
errorText.classList.add("d-none");
|
|
return;
|
|
}
|
|
|
|
let strength = 0;
|
|
let missing = [];
|
|
|
|
if (/[A-Z]/.test(val)) strength++;
|
|
else missing.push("uppercase letter");
|
|
|
|
if (/[a-z]/.test(val)) strength++;
|
|
else missing.push("lowercase letter");
|
|
|
|
if (/[0-9]/.test(val)) strength++;
|
|
else missing.push("number");
|
|
|
|
if (/[^A-Za-z0-9]/.test(val)) strength++;
|
|
else missing.push("special character");
|
|
|
|
if (val.length >= 8) strength++;
|
|
else missing.push("minimum 8 characters");
|
|
|
|
// Strength UI
|
|
if (strength <= 2) {
|
|
strengthText.innerHTML = `Weak Password`;
|
|
strengthText.className = "d-block mt-2 text-danger";
|
|
} else if (strength <= 4) {
|
|
strengthText.innerHTML = `Medium Password`;
|
|
strengthText.className = "d-block mt-2 text-warning";
|
|
} else {
|
|
strengthText.innerHTML = `Strong Password`;
|
|
strengthText.className = "d-block mt-2 text-success";
|
|
}
|
|
|
|
// Dynamic Error Message
|
|
if (val.length > 0 && missing.length > 0) {
|
|
errorText.innerHTML = `Missing: ${missing.join(", ")}`;
|
|
errorText.classList.remove("d-none");
|
|
} else {
|
|
errorText.classList.add("d-none");
|
|
}
|
|
});
|
|
|
|
})();
|
|
// Toggle Password
|
|
function togglePassword_<?= $id ?>() {
|
|
const password = document.getElementById("<?= $id ?>");
|
|
const icon = document.getElementById("<?= $id ?>_icon");
|
|
|
|
if (password.type === "password") {
|
|
password.type = "text";
|
|
icon.classList.replace("fa-eye", "fa-eye-slash");
|
|
} else {
|
|
password.type = "password";
|
|
icon.classList.replace("fa-eye-slash", "fa-eye");
|
|
}
|
|
}
|
|
|
|
// Enable Bootstrap tooltip
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
tooltipTriggerList.map(function (el) {
|
|
return new bootstrap.Tooltip(el);
|
|
});
|
|
});
|
|
</script>
|