<div class="bslogin-wrap">
  <div class="card bslogin-card">
    <div class="card-body p-4 p-sm-5">
      <h1 class="bslogin-title">Welcome back</h1>
      <p class="bslogin-sub">Sign in to your account to continue.</p>

      <form id="bsloginForm" novalidate>
        <div class="mb-3">
          <label for="bsloginEmail" class="form-label small fw-semibold">Email address</label>
          <input type="email" class="form-control" id="bsloginEmail" placeholder="you@company.com" required>
          <div class="invalid-feedback">Enter a valid email address.</div>
        </div>
        <div class="mb-2">
          <label for="bsloginPassword" class="form-label small fw-semibold">Password</label>
          <div class="input-group">
            <input type="password" class="form-control" id="bsloginPassword" placeholder="At least 8 characters" minlength="8" required>
            <button class="btn btn-outline-secondary" type="button" id="bsloginToggle" aria-label="Show password">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
            <div class="invalid-feedback">Password must be at least 8 characters.</div>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="bsloginRemember">
            <label class="form-check-label small" for="bsloginRemember">Remember me</label>
          </div>
          <a href="javascript:void(0)" class="small">Forgot password?</a>
        </div>

        <button type="submit" class="btn btn-primary w-100 fw-bold" id="bsloginSubmit">Sign in</button>
        <div class="bslogin-status mt-3" id="bsloginStatus"></div>
      </form>
    </div>
  </div>
</div>

body {
  background: #f6f7f9;
  min-height: 100vh;
  display: flex;
}
.bslogin-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.bslogin-card {
  width: 100%;
  max-width: 400px;
  border: 1px solid #eceef1;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(15,23,42,.06);
}
.bslogin-title { font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.bslogin-sub { color: #6b7280; font-size: 13.5px; margin-bottom: 24px; }

.bslogin-status {
  min-height: 20px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.bslogin-status.text-danger::before { content: '⚠ '; }
.bslogin-status.text-success::before { content: '✓ '; }

#bsloginSubmit.bslogin-loading { pointer-events: none; opacity: .75; }

const form = document.getElementById('bsloginForm');
const email = document.getElementById('bsloginEmail');
const password = document.getElementById('bsloginPassword');
const toggleBtn = document.getElementById('bsloginToggle');
const submitBtn = document.getElementById('bsloginSubmit');
const status = document.getElementById('bsloginStatus');

// Validate a single field on blur, so an error appears the moment someone
// leaves a bad field rather than only after a failed full-form submit.
function validateField(input) {
  input.classList.toggle('is-invalid', !input.checkValidity());
  input.classList.toggle('is-valid', input.checkValidity() && input.value !== '');
}
email.addEventListener('blur', () => validateField(email));
password.addEventListener('blur', () => validateField(password));
email.addEventListener('input', () => { if (email.classList.contains('is-invalid')) validateField(email); });
password.addEventListener('input', () => { if (password.classList.contains('is-invalid')) validateField(password); });

toggleBtn.addEventListener('click', () => {
  const showing = password.type === 'text';
  password.type = showing ? 'password' : 'text';
  toggleBtn.setAttribute('aria-label', showing ? 'Show password' : 'Hide password');
});

form.addEventListener('submit', e => {
  e.preventDefault();
  validateField(email);
  validateField(password);

  if (!form.checkValidity()) {
    status.textContent = 'Please fix the highlighted fields.';
    status.className = 'bslogin-status mt-3 text-danger';
    return;
  }

  // Simulated network delay so the loading state is actually visible —
  // a real app would await a fetch()/axios call here instead.
  submitBtn.classList.add('bslogin-loading');
  submitBtn.textContent = 'Signing in…';
  status.textContent = '';
  status.className = 'bslogin-status mt-3';

  setTimeout(() => {
    submitBtn.classList.remove('bslogin-loading');
    submitBtn.textContent = 'Sign in';
    status.textContent = 'Signed in as ' + email.value;
    status.className = 'bslogin-status mt-3 text-success';
  }, 900);
});