Bootstrap 5 - Single Page Application Login Form

[dday9]

This uses the twitter-bootstrap v5.0.0-beta1, documentation here: https://getbootstrap.com/docs/5.0/ge.../introduction/

Dependencies

• Bootstrap 5 CSS (CDN here)
• jQuery (CDN here)
• Bootstrap 5 and Popper bundle (CDN here)

HTML

<div class="container">
  <form class="collapse" id="login">
    <fieldset>
      <legend>Login</legend>
      <div class="mb-3">
        <label for="login-email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="login-email" required>
      </div>
      <div class="mb-3">
        <label for="login-password" class="form-label">Password</label>
        <input type="password" class="form-control" id="login-password" required>
      </div>
      <div class="form-group text-center">
        <a data-bs-toggle="collapse" href="#forgot-password" role="button" aria-expanded="false" aria-controls="forgot-password">Forgot your password?</a>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </fieldset>
  </form>
  <form class="collapse" id="forgot-password">
    <fieldset>
      <legend>Password Reset</legend>
      <div class="mb-3">
        <label for="forgot-password-email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="forgot-password-email" required>
      </div>
      <div class="form-group text-center">
        <a data-bs-toggle="collapse" href="#login" role="button" aria-expanded="false" aria-controls="login">&larr; Go Back</a>
      </div>
      <button type="submit" class="btn btn-primary">Reset Password</button>
    </fieldset>
  </form>
</div>

Javascript

var loginForm = document.getElementById('login');
var loginFormCollapse = new bootstrap.Collapse(loginForm, {
  toggle: true
});
var forgotPasswordForm = document.getElementById('forgot-password');
var forgotPasswordFormCollapse = new bootstrap.Collapse(forgotPasswordForm, {
  toggle: false
});

loginForm.addEventListener('show.bs.collapse', function () {
  forgotPasswordFormCollapse.hide();
});
forgotPasswordForm.addEventListener('show.bs.collapse', function () {
  loginFormCollapse.hide();
});

Fiddle: Live Demo