96 lines
7.1 KiB
PHP
96 lines
7.1 KiB
PHP
<div class="p-5 sm:p-6">
|
|
@if ($tempPassword === null)
|
|
<div class="flex items-start gap-3.5">
|
|
<span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent-text">
|
|
<x-icon name="user-plus" class="h-5 w-5" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="font-display text-base font-semibold text-ink">{{ __('accounts.create_title') }}</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-ink-2">{{ __('accounts.create_subtitle') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 space-y-3">
|
|
<div>
|
|
<label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('accounts.name_label') }}</label>
|
|
<input wire:model="name" type="text" placeholder="{{ __('accounts.name_placeholder') }}" maxlength="120"
|
|
class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
|
|
@error('name')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('accounts.email_label') }}</label>
|
|
<input wire:model="email" type="text" placeholder="{{ __('accounts.email_placeholder') }}" maxlength="255"
|
|
class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
|
|
@error('email')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('accounts.role_label') }}</label>
|
|
<select wire:model="role"
|
|
class="h-9 w-full rounded-md border border-line bg-inset px-3 font-mono text-sm text-ink focus:border-accent/40 focus:outline-none">
|
|
<option value="{{ \App\Enums\Role::Admin->value }}">{{ __('roles.role_admin') }}</option>
|
|
<option value="{{ \App\Enums\Role::Operator->value }}">{{ __('roles.role_operator') }}</option>
|
|
<option value="{{ \App\Enums\Role::Viewer->value }}">{{ __('roles.role_viewer') }}</option>
|
|
</select>
|
|
@error('role')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
|
|
<p class="mt-1 font-mono text-[11px] leading-relaxed text-ink-4">{{ __('accounts.role_hint') }}</p>
|
|
</div>
|
|
|
|
<div x-data="{ show: false }">
|
|
<label class="mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('accounts.password_label') }}</label>
|
|
<div class="relative">
|
|
<input wire:model="password" :type="show ? 'text' : 'password'" autocomplete="new-password" placeholder="{{ __('accounts.password_placeholder') }}"
|
|
class="h-9 w-full rounded-md border border-line bg-inset px-3 pr-11 font-mono text-sm text-ink placeholder:text-ink-4 focus:border-accent/40 focus:outline-none" />
|
|
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
|
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
|
<span x-show="!show"><x-icon name="eye" class="h-4 w-4" /></span>
|
|
<span x-show="show" x-cloak><x-icon name="eye-off" class="h-4 w-4" /></span>
|
|
</button>
|
|
</div>
|
|
@error('password')<p class="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-offline"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p>@enderror
|
|
<p class="mt-1 font-mono text-[11px] leading-relaxed text-ink-4">{{ __('accounts.password_hint') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center justify-end gap-2">
|
|
<x-btn variant="secondary" wire:click="$dispatch('closeModal')">{{ __('common.cancel') }}</x-btn>
|
|
<x-btn variant="primary" wire:click="save" wire:target="save" wire:loading.attr="disabled">
|
|
<x-icon name="user-plus" class="h-3.5 w-3.5" wire:loading.remove wire:target="save" />
|
|
<svg wire:loading wire:target="save" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
|
|
{{ __('accounts.create_submit') }}
|
|
</x-btn>
|
|
</div>
|
|
@else
|
|
<div class="flex items-start gap-3.5">
|
|
<span class="grid h-10 w-10 shrink-0 place-items-center rounded-md border border-accent/30 bg-accent/10 text-accent-text">
|
|
<x-icon name="user-plus" class="h-5 w-5" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="font-display text-base font-semibold text-ink">{{ __('accounts.temp_heading') }}</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-ink-2">{{ __('accounts.temp_intro', ['name' => $createdName]) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 rounded-md border border-warning/30 bg-warning/10 p-3" x-data="{ copied: false }">
|
|
<p class="flex items-center gap-1.5 font-mono text-[11px] text-warning">
|
|
<x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ __('accounts.temp_warning') }}
|
|
</p>
|
|
<label class="mt-3 mb-1 block font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ __('accounts.temp_label') }}</label>
|
|
<div class="flex items-center gap-2">
|
|
<input x-ref="pw" type="text" readonly value="{{ $tempPassword }}" x-on:click="$el.select()"
|
|
class="h-9 w-full rounded-md border border-line bg-void px-3 font-mono text-sm tracking-wide text-ink focus:outline-none" />
|
|
<x-btn variant="secondary" class="shrink-0"
|
|
x-on:click="navigator.clipboard.writeText($refs.pw.value); copied = true; setTimeout(() => copied = false, 1500)">
|
|
<x-icon name="save" class="h-3.5 w-3.5" />
|
|
<span x-text="copied ? @js(__('accounts.temp_copied')) : @js(__('accounts.temp_copy'))"></span>
|
|
</x-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center justify-end">
|
|
<x-btn variant="primary" wire:click="finish">{{ __('accounts.done') }}</x-btn>
|
|
</div>
|
|
@endif
|
|
</div>
|