Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Recovery codes

One time recovery codes in a two column grid with copy all, download as a .txt file and print. Used codes are struck through, and Continue stays disabled until "I saved these codes" is checked. Needs monsoon.js for the actions.

Two factor and sign in9 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-auth-codes

Options

OptionDescription
data-m-auth-codes-filename="example-recovery-codes.txt"
data-m-auth-codes-title="Example recovery codes"
data-codes-action="copy | download | print | confirm | continue" on the parts

Methods

MethodDescription
Monsoon.authCodes(el).codes
Monsoon.authCodes(el).copy()
Monsoon.authCodes(el).download()
Monsoon.authCodes(el).print()

Events

EventDescription
monsoon:auth-codes { action, codes }

Classes

9 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the recovery codes. On a <div> in the example. Sets grid display and gap, and --tone.
CSS
.backup-codes {
  --tone: var(--primary);
  display: grid;
  gap: 1rem;
}
Part Part of the recovery codes. On a <div> in the example. Sets flex display, alignment and gap.
CSS
.backup-codes-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
Part Part of the recovery codes. On a <p> in the example. Sets margin, text size and font weight.
CSS
.backup-codes-title {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
}
Part Part of the recovery codes. On a <span> in the example. Sets text size, font weight and text color.
CSS
.backup-codes-count {
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
Part Part of the recovery codes. On an <ol> in the example. Sets grid display, grid tracks, gap, margin, padding and background.
CSS
.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
  counter-reset: backup-code;
  background-color: var(--surface-2);
  background-image: radial-gradient(color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
  border: var(--m-border-width) dashed color-mix(in oklab, var(--border), var(--foreground) 18%);
  border-radius: var(--m-radius-xl);
}
Modifier Modifier, combined with the backup-codes class. On a <li> in the example. Sets flex display, alignment, gap, text size, font weight and text style.
CSS
.backup-code::before {
  content: counter(backup-code, decimal-leading-zero);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-foreground);
}

.backup-code {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  counter-increment: backup-code;
}
Modifier Modifier, combined with the backup-codes class. On a <li> in the example. Sets text color, text style and opacity.
CSS
.backup-code-used {
  color: var(--muted-foreground);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--danger) 70%, transparent);
  opacity: .7;
}
Part Part of the recovery codes. On a <div> in the example. Sets flex display, alignment, gap, text color, border and background.
CSS
.backup-codes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.backup-codes-actions > [data-done] {
  color: var(--success);
  border-color: color-mix(in oklab, var(--success) 45%, var(--border));
  background-color: color-mix(in oklab, var(--success) 8%, var(--surface));
}
Part Part of the recovery codes. On a <label> in the example. Sets flex display, alignment, gap, padding, text size and text style.
CSS
.backup-codes-confirm:has(:checked) {
  background-color: color-mix(in oklab, var(--success) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--success) 35%, var(--border));
}

.backup-codes-confirm {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  font-size: .875rem;
  line-height: 1.4;
  background-color: color-mix(in oklab, var(--warning) 9%, var(--surface));
  border: var(--m-border-width) solid color-mix(in oklab, var(--warning) 30%, var(--border));
  border-radius: var(--m-radius-lg);
  cursor: pointer;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Recovery codes: start from the base class, then add modifiers -->
<div class="auth-card auth-card-wide">
  <header class="auth-header auth-header-start">
    <span class="auth-icon auth-icon-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.5v2"/></svg></span>
    <h2 class="auth-title">Save your recovery codes</h2>
    <p class="auth-description">If you lose your phone, each code lets you sign in once. Store them in a password manager or print them.</p>
  </header>
  <div class="backup-codes" data-m-auth-codes data-m-auth-codes-filename="example-recovery-codes.txt" data-m-auth-codes-title="Example recovery codes">
    <div class="backup-codes-header">
      <p class="backup-codes-title">Recovery codes</p>
      <span class="backup-codes-count">8 of 10 unused</span>
    </div>
    <ol class="backup-codes-grid">
      <li class="backup-code"><code>7KQ2-M9XA</code></li>
      <li class="backup-code"><code>P4WD-38NZ</code></li>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Two factor and sign inAuthenticator app setupTwo step setup for a time based authenticator: a QR code drawn in the browser from an otpauth:// URI (no image, no dependency), the setup key in groups of four with a copy button behind a "Can't scan the code?" disclosure, then the first code to confirm. Needs monsoon.js for the QR code and the code cells.Two factor and sign inQR codeA QR code generated in the browser (byte mode, error correction level M, versions 1 to 10, up to 213 bytes) as a crisp SVG. Dark modules stay on a light tile in dark mode too, so every camera can read it. Three sizes. Needs monsoon.js.Two factor and sign inMethod pickerSecond factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.Two factor and sign inVerify screenThe second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.