Masked Input

# Brok UI: Masked Input (`masked-input`)

Masked credential field with reveal and copy actions, built on the input-group primitive.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add masked-input
```

## Usage

```blade
<x-ui.masked-input value="sk-live-9f2c4ade71b0demo" label="API key" class="mx-auto w-full max-w-md" />
```

## Props

- `value` (string, default `tok_a1b2c3d4e5f6g7h8`) — The secret value shown once revealed and written to the clipboard when copied.
- `label` (string, default `Secret`) — Visible label shown above the field.

## Use when

- Use when formatting, validation, or constrained entry meaningfully reduces errors, such as OTP, phone, currency, password, or numeric entry.
- Displaying a sensitive read-only value, such as an API key or token, hidden by default with an explicit reveal action.
- Pairing that value with a one-click copy action without ever showing it in plain text unintentionally.

## Avoid when

- Do not add specialized behavior if a plain field would be simpler and more forgiving.
- The value must be editable; compose input-group directly instead.
- The value is not sensitive and can be shown by default; use input-copy instead.

## Anti-patterns

- Adding formatting behavior that makes correction harder

## Rules

- Use the `<brok:masked-input>` tag (or `<x-ui.masked-input>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/masked-input
- Registry JSON (files, props, contract): https://brokui.dev/r/open/masked-input.json

@props([
    'value' => 'tok_a1b2c3d4e5f6g7h8',
    'label' => 'Secret',
])

@php
    $config = ['value' => (string) $value];
@endphp

{{--
    Masked input — a masked credential field over <x-ui.input-group>. The input
    type toggles between password and text via `revealed`; the eye button
    reflects state with aria-pressed; the copy button writes the value to the
    clipboard and flips a transient `copied` flag that swaps the icon and label.
    The value lives in Alpine state so the read-only field and clipboard copy
    share one source of truth.
--}}
<div
    data-slot="masked-input"
    x-data="uiMaskedInput(@js($config))"
    {{ $attributes->merge(['class' => 'flex flex-col gap-2 text-foreground']) }}
>
    <x-ui.label :for="false" x-bind:for="$id('masked-input-field')">{{ __($label) }}</x-ui.label>

    <x-ui.input-group>
        <x-ui.input-group.input
            x-bind:id="$id('masked-input-field')"
            x-bind:type="revealed ? 'text' : 'password'"
            x-model="value"
            readonly
            autocomplete="off"
            spellcheck="false"
            :aria-label="__($label)"
        />

        <x-ui.input-group.button
            x-on:click="toggle()"
            x-bind:aria-pressed="revealed.toString()"
            x-bind:aria-label="revealed ? '{{ __('Hide value') }}' : '{{ __('Show value') }}'"
        >
            {{-- Eye (hidden state). --}}
            <svg x-show="!revealed" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
                <circle cx="12" cy="12" r="3" />
            </svg>
            {{-- Eye-off (revealed state). --}}
            <svg x-show="revealed" x-cloak aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9.9 4.2A10.6 10.6 0 0 1 12 4c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.3 4.2M6.6 6.6A17.6 17.6 0 0 0 2 11s3.5 7 10 7a10.6 10.6 0 0 0 4.1-.8" />
                <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
                <path d="m2 2 20 20" />
            </svg>
        </x-ui.input-group.button>

        <x-ui.input-group.button
            x-on:click="copy()"
            x-bind:aria-label="copied ? '{{ __('Copied') }}' : '{{ __('Copy value') }}'"
        >
            {{-- Clipboard (idle). --}}
            <svg x-show="!copied" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="9" y="9" width="11" height="11" rx="2" />
                <path d="M5 15V5a2 2 0 0 1 2-2h10" />
            </svg>
            {{-- Check (copied). --}}
            <svg x-show="copied" x-cloak aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-success">
                <path d="M20 6 9 17l-5-5" />
            </svg>
            <span class="sr-only" x-text="copied ? '{{ __('Copied') }}' : '{{ __('Copy value') }}'"></span>
        </x-ui.input-group.button>
    </x-ui.input-group>
</div>

/**
 * Masked input behavior.
 *
 * Holds the credential `value`, the `revealed` masking flag, and a transient
 * `copied` flag. `toggle()` flips masking; `copy()` writes the value to the
 * clipboard via navigator.clipboard and resets `copied` after a short delay so
 * the check icon and "Copied" label are momentary. Guards the clipboard call so
 * insecure/unsupported contexts fail quietly. Self-registers on `alpine:init`.
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiMaskedInput', (config = {}) => ({
        value: config.value ?? '',
        revealed: false,
        copied: false,
        _timer: null,

        toggle() {
            this.revealed = !this.revealed;
        },

        async copy() {
            try {
                if (navigator.clipboard?.writeText) {
                    await navigator.clipboard.writeText(this.value);
                }
                this.copied = true;
                clearTimeout(this._timer);
                this._timer = setTimeout(() => {
                    this.copied = false;
                }, 1500);
            } catch (error) {
                // Clipboard unavailable (insecure context / denied permission).
                console.warn('masked-input copy failed:', error);
            }
        },

        destroy() {
            clearTimeout(this._timer);
        },
    }));
});