123 lines
4.1 KiB
PHP
123 lines
4.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Reset Password</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="<?= base_url('css/app.css') ?>">
|
|
</head>
|
|
<body class="app-body app-page--auth">
|
|
|
|
<div class="card auth-card shadow">
|
|
<div class="card-body">
|
|
<h2 class="text-center mb-4 auth-title">Reset Password</h2>
|
|
|
|
<?php if (session()->getFlashdata('success')): ?>
|
|
<div class="alert alert-success app-alert"><?= esc(session()->getFlashdata('success')) ?></div>
|
|
<?php endif; ?>
|
|
<?php if (session()->getFlashdata('error')): ?>
|
|
<div class="alert alert-danger app-alert"><?= esc(session()->getFlashdata('error')) ?></div>
|
|
<?php endif; ?>
|
|
|
|
<form method="post" action="<?= base_url('reset-password') ?>" class="app-form" novalidate>
|
|
<?= csrf_field() ?>
|
|
|
|
<input type="hidden" name="token" value="<?= esc($token) ?>">
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">New Password</label>
|
|
|
|
<input type="password" name="password" id="password" class="form-control"
|
|
placeholder="Enter strong password" required>
|
|
|
|
<!-- Strength Text -->
|
|
<small id="strengthText" class="mt-2 d-block"></small>
|
|
|
|
<!-- Rules -->
|
|
<ul class="small mt-2" id="passwordRules">
|
|
<li id="length" class="text-danger">At least 8 characters</li>
|
|
<li id="uppercase" class="text-danger">One uppercase letter</li>
|
|
<li id="lowercase" class="text-danger">One lowercase letter</li>
|
|
<li id="number" class="text-danger">One number</li>
|
|
<li id="special" class="text-danger">One special character</li>
|
|
</ul>
|
|
|
|
<?php if (session()->has('errors.password')): ?>
|
|
<div class="text-danger small mt-1"><?= session('errors.password') ?></div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100">Reset Password</button>
|
|
</form>
|
|
|
|
<div class="text-center mt-3">
|
|
<p class="text-muted">
|
|
<a href="<?= base_url('/') ?>">Back to Login</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const password = document.getElementById("password");
|
|
|
|
password.addEventListener("input", function () {
|
|
const val = password.value;
|
|
|
|
const length = document.getElementById("length");
|
|
const upper = document.getElementById("uppercase");
|
|
const lower = document.getElementById("lowercase");
|
|
const number = document.getElementById("number");
|
|
const special = document.getElementById("special");
|
|
const strengthText = document.getElementById("strengthText");
|
|
|
|
let strength = 0;
|
|
|
|
if (val.length >= 8) {
|
|
length.classList.replace("text-danger", "text-success");
|
|
strength++;
|
|
} else {
|
|
length.classList.replace("text-success", "text-danger");
|
|
}
|
|
|
|
if (/[A-Z]/.test(val)) {
|
|
upper.classList.replace("text-danger", "text-success");
|
|
strength++;
|
|
} else {
|
|
upper.classList.replace("text-success", "text-danger");
|
|
}
|
|
|
|
if (/[a-z]/.test(val)) {
|
|
lower.classList.replace("text-danger", "text-success");
|
|
strength++;
|
|
} else {
|
|
lower.classList.replace("text-success", "text-danger");
|
|
}
|
|
|
|
if (/[0-9]/.test(val)) {
|
|
number.classList.replace("text-danger", "text-success");
|
|
strength++;
|
|
} else {
|
|
number.classList.replace("text-success", "text-danger");
|
|
}
|
|
|
|
if (/[^A-Za-z0-9]/.test(val)) {
|
|
special.classList.replace("text-danger", "text-success");
|
|
strength++;
|
|
} else {
|
|
special.classList.replace("text-success", "text-danger");
|
|
}
|
|
|
|
if (strength <= 2) {
|
|
strengthText.innerHTML = "Weak Password ❌";
|
|
strengthText.className = "text-danger";
|
|
} else if (strength <= 4) {
|
|
strengthText.innerHTML = "Medium Password ⚠️";
|
|
strengthText.className = "text-warning";
|
|
} else {
|
|
strengthText.innerHTML = "Strong Password ✅";
|
|
strengthText.className = "text-success";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|