Lockable fields

[mrextreme]

Locking a field - toggling the readonly attribute to stop users changing the value by accident, forcing them to click on a lock icon first. A "lockable" attribute on flux:input.

<flux:input type="password" wire:model="some_password" viewable copyable lockable>

By the look of it a modified version of the viewable attribute would do the trick. Below is my implemetation for anyone interested, using Alpine.js and current Flux UI features.

<flux:field x-data="{ locked: true }">
    <flux:label>Admin Password</flux:label>
    <flux:input.group>
        <flux:input type="password" wire:model="admin_password" viewable copyable x-bind:readonly="locked">
            <x-slot name="iconTrailing">
                <flux:button x-on:click="locked = !locked" size="sm" variant="subtle" class="-mx-2 px-2!">
                    <flux:icon.lock-open variant="mini" x-cloak x-show="locked"/>
                    <flux:icon.lock-closed variant="mini" x-cloak x-show="!locked"/>
                </flux:button>
            </x-slot>
        </flux:input>
    </flux:input.group>
    <flux:error name="admin_password"/>
</flux:field>