<div class="container py-5 d-flex justify-content-center">
  <div class="card bsrp-card">
    <div class="card-body p-4">
      <h5 class="fw-bold mb-1 text-center">Reset your password</h5>
      <p class="text-muted small mb-3 text-center">Choose a new password for your account.</p>

      <label class="form-label small fw-semibold" for="bsrpNew">New password</label>
      <input type="password" class="form-control mb-1" id="bsrpNew" placeholder="Enter new password">
      <div class="progress mb-1 bsrp-progress">
        <div class="progress-bar" id="bsrpBar" role="progressbar" style="width: 0%"></div>
      </div>
      <div class="small mb-3" id="bsrpStrengthLabel">&nbsp;</div>

      <label class="form-label small fw-semibold" for="bsrpConfirm">Confirm password</label>
      <input type="password" class="form-control mb-1" id="bsrpConfirm" placeholder="Re-enter new password">
      <div class="small mb-3" id="bsrpMatchLabel">&nbsp;</div>

      <button class="btn btn-dark w-100 fw-bold" id="bsrpSubmit" disabled>Reset password</button>
      <p class="small text-center mt-3 mb-0" id="bsrpStatus">&nbsp;</p>
    </div>
  </div>
</div>

.bsrp-card { width: 380px; border: 1px solid #eceef1; border-radius: 14px; }
.bsrp-progress { height: 6px; }

const newInput = document.getElementById('bsrpNew');
const confirmInput = document.getElementById('bsrpConfirm');
const bar = document.getElementById('bsrpBar');
const strengthLabel = document.getElementById('bsrpStrengthLabel');
const matchLabel = document.getElementById('bsrpMatchLabel');
const submitBtn = document.getElementById('bsrpSubmit');
const status = document.getElementById('bsrpStatus');

const LEVELS = [
  { pct: 20,  cls: 'bg-danger',  text: 'Very weak' },
  { pct: 40,  cls: 'bg-danger',  text: 'Weak' },
  { pct: 60,  cls: 'bg-warning', text: 'Fair' },
  { pct: 80,  cls: 'bg-info',    text: 'Good' },
  { pct: 100, cls: 'bg-success', text: 'Strong' },
];

// Scores 0-4 by checking four independent character-class rules plus a
// length bonus, then maps the score onto one of five LEVELS entries.
function scorePassword(value) {
  let score = 0;
  if (value.length >= 8) score++;
  if (value.length >= 12) score++;
  if (/[A-Z]/.test(value) && /[a-z]/.test(value)) score++;
  if (/[0-9]/.test(value)) score++;
  if (/[^A-Za-z0-9]/.test(value)) score++;
  return Math.min(score, 4);
}

function updateStrength() {
  const value = newInput.value;
  if (!value) {
    bar.style.width = '0%';
    bar.className = 'progress-bar';
    strengthLabel.textContent = '\u00a0';
    checkFormValid();
    return;
  }
  const score = scorePassword(value);
  const level = LEVELS[score];
  bar.style.width = level.pct + '%';
  bar.className = 'progress-bar ' + level.cls;
  strengthLabel.textContent = level.text;
  strengthLabel.className = 'small mb-3 ' + level.cls.replace('bg-', 'text-');
  checkFormValid();
}

function updateMatch() {
  const value = confirmInput.value;
  if (!value) {
    matchLabel.textContent = '\u00a0';
    checkFormValid();
    return;
  }
  const match = value === newInput.value;
  matchLabel.textContent = match ? 'Passwords match.' : 'Passwords do not match.';
  matchLabel.className = 'small mb-3 ' + (match ? 'text-success' : 'text-danger');
  confirmInput.classList.toggle('is-invalid', !match);
  confirmInput.classList.toggle('is-valid', match);
  checkFormValid();
}

function checkFormValid() {
  const strongEnough = scorePassword(newInput.value) >= 2 && newInput.value.length > 0;
  const matches = confirmInput.value.length > 0 && confirmInput.value === newInput.value;
  submitBtn.disabled = !(strongEnough && matches);
}

newInput.addEventListener('input', () => {
  updateStrength();
  if (confirmInput.value) updateMatch();
});
confirmInput.addEventListener('input', updateMatch);

submitBtn.addEventListener('click', () => {
  status.textContent = 'Password reset successfully.';
  status.className = 'small text-center mt-3 mb-0 text-success';
});