PASSWORD COMPOSITION PROTOCOL / PARAMETER LEDGER

Read the generator as a character-composition protocol

Set the length and selected character pools in the editor. This record maps those parameters to the implemented output path, the score labels, and the visible React-state panels.

Open Password Generator

Parameter → output ledger

01 · LENGTH — One-unit range

The length slider has minimum 8, maximum 64, step 1, and begins at 16.

02 · POOLS — Four independent selections

Uppercase, lowercase, digits, and symbols can each be selected or cleared.

03 · COMPOSITION — Pool entries before fill

The generator places one character from every selected pool, fills remaining positions from their combined characters, then shuffles the character array.

04 · INVALID — No output from an invalid selection

With no selected pool, or a length below the number of selected pools, the generator returns null and the editor shows only its selection error.

The implemented composition sequence

This is a code-path record, not an acceptance test for an external service. It states the order used by generateSecurePassword for a valid selection.

  1. 1. Collect selected pools

    The function assembles only the selected pool strings. An empty list, or a requested length smaller than that list, ends with null.

  2. 2. Place and fill

    It chooses one character for each selected pool, then continues choosing from the concatenated pool string until the requested length is reached.

  3. 3. Shuffle the array

    The completed character array is shuffled before it is joined into the displayed output.

Character-pool register

The editor exposes exactly these four pool strings. Symbols are listed as implemented, including brackets and punctuation.

  • UPPERCASE ABC

    ABCDEFGHIJKLMNOPQRSTUVWXYZ

    Selected through the uppercase checkbox.

  • LOWERCASE abc

    abcdefghijklmnopqrstuvwxyz

    Selected through the lowercase checkbox.

  • DIGITS 0–9

    0123456789

    Selected through the numbers checkbox.

  • SYMBOLS

    !@#$%^&*()_+-=[]{}|;:,.<>?

    Selected through the symbols checkbox.

Web Crypto implementation note

Index selection is an implementation detail. The code uses crypto.getRandomValues with Uint32 values; it does not present a result label as a statement about an output’s suitability.

  • UINT32 BOUNDARY

    For a pool size, the code computes the largest multiple of that size below 2³².

  • REJECTION SAMPLING

    It requests a Uint32 value again while the value is outside that boundary, then takes value modulo the pool size.

  • ARRAY SHUFFLE

    The shuffle loop runs from the final array index down to 1 and exchanges the current character with an index obtained through the same selector.

Output-character score estimate

The label is an estimator based only on the displayed output. It is not an assessment of a destination’s rules or use case.

  • LENGTH

    +2 when length is at least 12; otherwise +1 when it is at least 8.

  • CATEGORIES

    +1 each when the output matches lowercase, uppercase, digit, and nonalphanumeric categories.

  • LABELS

    Weak at 0–2; Medium at 3–4; Strong at 5; Very Strong at 6.

Visible output-state panels

These cards describe the component state transitions used by the editor.

INITIAL + SINGLE — One initial result, then one result per action

On initial mount, useEffect triggers individual generation. The individual button triggers it again; a returned result becomes the displayed output.

BULK 1–20 — A separate batch result list

The bulk slider spans 1 to 20 and begins at 5. Each requested position calls the generator separately; returned entries are held in a separate bulk-results state.

HISTORY + COPY — Up to five recent individual results

An individual result is placed before the prior four history entries. The clear button empties this component’s history UI state. Copy controls call navigator.clipboard.writeText for the selected displayed entry.

Scope notes

  • The page records current editor behavior and does not test a result against requirements outside this editor.
  • The invalid-selection path returns null; the editor presents its selection error rather than an output.
  • Bulk results and individual history are separate React state values in this component.
  • The editor presents copy controls. It does not present a download or export control.

Continue with adjacent tools

Each linked tool has its own input and output behavior.

  • QR Code Generator

    Create a QR representation from supported entered data and inspect the returned image.

  • URL Shortener

    Read the bounded route record for an entered HTTP or HTTPS target.

  • Typing Speed Test

    Use a separate editor for a timed typing result.

Questions about the composition protocol

Which length values does the editor expose?

The length slider runs from 8 through 64 in steps of 1, with 16 as its initial value.

What happens when the selection is invalid?

When no pool is selected, or the requested length is smaller than the number of selected pools, generateSecurePassword returns null. The editor shows its selection error only.

How are score labels assigned?

The estimator totals length and detected lowercase, uppercase, digit, and nonalphanumeric categories for a score from 0 to 6. It maps 0–2 to Weak, 3–4 to Medium, 5 to Strong, and 6 to Very Strong.

What do bulk, history, and copy controls do?

Bulk uses a separate results state for 1–20 requested entries. History keeps the current individual result plus up to four earlier ones in component state, and a copy control calls navigator.clipboard.writeText for its entry.

Open the composition controls

Choose a length and pools in the editor, then inspect the displayed output and its character-based score label.

Open Password Generator