Bootstrap Re-authentication Modal — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsreauth-card">
    <div class="card-body p-4">
      <h6 class="fw-bold mb-1">Account settings</h6>
      <p class="small text-muted mb-3">Sensitive actions ask you to confirm your password first.</p>
      <button type="button" class="btn btn-outline-danger w-100" data-bs-toggle="modal" data-bs-target="#bsreauthModal">
        Delete account
      </button>
      <p class="small mt-3 mb-0" id="bsreauthStatus">&nbsp;</p>
    </div>
  </div>
</div>

<div class="modal fade" id="bsreauthModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Confirm it's you</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="small text-muted mb-2">Re-enter your password to continue (try "demo1234" for this preview).</p>
        <input type="password" class="form-control" id="bsreauthPassword" autocomplete="current-password">
        <p class="small text-danger mt-2 mb-0 d-none" id="bsreauthError">Incorrect password. Try again.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger fw-bold" id="bsreauthConfirm">Confirm &amp; delete</button>
      </div>
    </div>
  </div>
</div>

.bsreauth-card { width: 360px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsreauthPassword.is-invalid { border-color: #dc3545; }

const REAL_PASSWORD = 'demo1234';
const modalEl = document.getElementById('bsreauthModal');
const modal = new bootstrap.Modal(modalEl);
const passwordInput = document.getElementById('bsreauthPassword');
const error = document.getElementById('bsreauthError');
const confirmBtn = document.getElementById('bsreauthConfirm');
const status = document.getElementById('bsreauthStatus');

let attempts = 0;

modalEl.addEventListener('shown.bs.modal', () => {
  passwordInput.value = '';
  passwordInput.classList.remove('is-invalid');
  error.classList.add('d-none');
  passwordInput.focus();
});

function attempt() {
  attempts++;
  if (passwordInput.value === REAL_PASSWORD) {
    modal.hide();
    status.textContent = 'Account deleted. (Attempts needed: ' + attempts + ')';
    status.className = 'small mt-3 mb-0 text-danger fw-semibold';
    attempts = 0;
  } else {
    passwordInput.classList.add('is-invalid');
    error.classList.remove('d-none');
    passwordInput.select();
  }
}

confirmBtn.addEventListener('click', attempt);
passwordInput.addEventListener('keydown', e => { if (e.key === 'Enter') attempt(); });
passwordInput.addEventListener('input', () => {
  passwordInput.classList.remove('is-invalid');
  error.classList.add('d-none');
});