268 lines
14 KiB
PHP
Executable File
268 lines
14 KiB
PHP
Executable File
<section class="w-full">
|
|
@include('partials.settings-heading')
|
|
|
|
<flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading>
|
|
|
|
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
|
|
<form method="POST" wire:submit="updatePassword" class="mt-6 space-y-6">
|
|
<flux:input wire:model="current_password" :label="__('Current password')" type="password" required
|
|
autocomplete="current-password" viewable />
|
|
<flux:input wire:model="password" :label="__('New password')" type="password" required
|
|
autocomplete="new-password"
|
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
|
viewable />
|
|
<flux:input wire:model="password_confirmation" :label="__('Confirm password')" type="password" required
|
|
autocomplete="new-password"
|
|
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
|
viewable />
|
|
|
|
<div class="flex items-center gap-4">
|
|
<flux:button variant="primary" type="submit" data-test="update-password-button">{{ __('Save') }}
|
|
</flux:button>
|
|
</div>
|
|
</form>
|
|
|
|
@if ($canManageTwoFactor)
|
|
<section class="mt-12">
|
|
<flux:heading>{{ __('Two-factor authentication') }}</flux:heading>
|
|
<flux:subheading>{{ __('Manage your two-factor authentication settings') }}</flux:subheading>
|
|
|
|
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
|
@if ($twoFactorEnabled)
|
|
<div class="space-y-4">
|
|
<flux:text>
|
|
{{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
|
|
</flux:text>
|
|
|
|
<div class="flex justify-start">
|
|
<flux:button variant="danger" wire:click="disable">
|
|
{{ __('Disable 2FA') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation />
|
|
</div>
|
|
@else
|
|
<div class="space-y-4">
|
|
<flux:text variant="subtle">
|
|
{{ __('When you enable two-factor authentication, you will be prompted for a secure pin during login. This pin can be retrieved from a TOTP-supported application on your phone.') }}
|
|
</flux:text>
|
|
|
|
<flux:button variant="primary" wire:click="enable">
|
|
{{ __('Enable 2FA') }}
|
|
</flux:button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
@endif
|
|
|
|
@if ($canManageTwoFactor)
|
|
<flux:modal name="two-factor-setup-modal" class="max-w-md md:min-w-md" @close="closeModal"
|
|
wire:model="showModal">
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div
|
|
class="p-0.5 w-auto rounded-full border border-stone-100 dark:border-stone-600 bg-white dark:bg-stone-800 shadow-sm">
|
|
<div
|
|
class="p-2.5 rounded-full border border-stone-200 dark:border-stone-600 overflow-hidden bg-stone-100 dark:bg-stone-200 relative">
|
|
<div
|
|
class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
|
|
@for ($i = 1; $i <= 5; $i++)
|
|
<div></div>
|
|
@endfor
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-col items-stretch absolute w-full h-full divide-y [&>div]:flex-1 inset-0 divide-stone-200 dark:divide-stone-300 justify-around opacity-50">
|
|
@for ($i = 1; $i <= 5; $i++)
|
|
<div></div>
|
|
@endfor
|
|
</div>
|
|
|
|
<flux:icon.qr-code class="relative z-20 dark:text-accent-foreground" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-center">
|
|
<flux:heading size="lg">{{ $this->modalConfig['title'] }}</flux:heading>
|
|
<flux:text>{{ $this->modalConfig['description'] }}</flux:text>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($showVerificationStep)
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col items-center space-y-3 justify-center" x-data
|
|
x-init="$nextTick(() => $el.querySelector('input')?.focus())">
|
|
<flux:otp name="code" wire:model="code" length="6" label="OTP Code" label:sr-only
|
|
class="mx-auto" />
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<flux:button variant="outline" class="flex-1" wire:click="resetVerification">
|
|
{{ __('Back') }}
|
|
</flux:button>
|
|
|
|
<flux:button variant="primary" class="flex-1" wire:click="confirmTwoFactor"
|
|
x-bind:disabled="$wire.code.length < 6">
|
|
{{ __('Confirm') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
@error('setupData')
|
|
<flux:callout variant="danger" icon="x-circle" heading="{{ $message }}" />
|
|
@enderror
|
|
|
|
<div class="flex justify-center">
|
|
<div
|
|
class="relative w-64 overflow-hidden border rounded-lg border-stone-200 dark:border-stone-700 aspect-square">
|
|
@empty($qrCodeSvg)
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center bg-white dark:bg-stone-700 animate-pulse">
|
|
<flux:icon.loading />
|
|
</div>
|
|
@else
|
|
<div x-data class="flex items-center justify-center h-full p-4">
|
|
<div class="bg-white p-3 rounded"
|
|
:style="($flux.appearance === 'dark' || ($flux.appearance === 'system' && $flux
|
|
.dark)) ? 'filter: invert(1) brightness(1.5)' : ''">
|
|
{!! $qrCodeSvg !!}
|
|
</div>
|
|
</div>
|
|
@endempty
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:button :disabled="$errors->has('setupData')" variant="primary" class="w-full"
|
|
wire:click="showVerificationIfNecessary">
|
|
{{ $this->modalConfig['buttonText'] }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="relative flex items-center justify-center w-full">
|
|
<div class="absolute inset-0 w-full h-px top-1/2 bg-stone-200 dark:bg-stone-600"></div>
|
|
<span
|
|
class="relative px-2 text-sm bg-white dark:bg-stone-800 text-stone-600 dark:text-stone-400">
|
|
{{ __('or, enter the code manually') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2" x-data="{
|
|
copied: false,
|
|
async copy() {
|
|
try {
|
|
await navigator.clipboard.writeText('{{ $manualSetupKey }}');
|
|
this.copied = true;
|
|
setTimeout(() => this.copied = false, 1500);
|
|
} catch (e) {
|
|
console.warn('Could not copy to clipboard');
|
|
}
|
|
}
|
|
}">
|
|
<div class="flex items-stretch w-full border rounded-xl dark:border-stone-700">
|
|
@empty($manualSetupKey)
|
|
<div
|
|
class="flex items-center justify-center w-full p-3 bg-stone-100 dark:bg-stone-700">
|
|
<flux:icon.loading variant="mini" />
|
|
</div>
|
|
@else
|
|
<label for="sonar-input-b757771a44" class="visually-hidden">sonar input b757771a44</label>
|
|
<input type="text" readonly value="{{ $manualSetupKey }}"
|
|
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100" id="sonar-input-b757771a44">
|
|
|
|
<button @click="copy()"
|
|
class="px-3 transition-colors border-l cursor-pointer border-stone-200 dark:border-stone-600">
|
|
<flux:icon.document-duplicate x-show="!copied" variant="outline"></flux:icon>
|
|
<flux:icon.check x-show="copied" variant="solid" class="text-green-500">
|
|
</flux:icon>
|
|
</button>
|
|
@endempty
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</flux:modal>
|
|
@endif
|
|
|
|
@if ($canManagePasskeys)
|
|
<section class="mt-12">
|
|
<flux:heading>{{ __('Passkeys') }}</flux:heading>
|
|
<flux:subheading>{{ __('Manage your passkeys for passwordless sign-in') }}</flux:subheading>
|
|
|
|
<div class="mt-6 flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
|
<div class="border rounded-lg border-zinc-200 dark:border-zinc-700 overflow-hidden">
|
|
@forelse ($passkeys as $passkey)
|
|
<div
|
|
class="flex items-center justify-between p-4 {{ !$loop->last ? 'border-b border-zinc-200 dark:border-zinc-700' : '' }}">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800">
|
|
<flux:icon.key class="size-5 text-zinc-500 dark:text-zinc-400" />
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-2.5">
|
|
<p class="font-medium tracking-tight">{{ $passkey['name'] }}</p>
|
|
@if ($passkey['authenticator'])
|
|
<flux:badge size="sm">{{ $passkey['authenticator'] }}
|
|
</flux:badge>
|
|
@endif
|
|
</div>
|
|
<p class="text-zinc-500 dark:text-zinc-400 text-xs">
|
|
{{ __('Added :time', ['time' => $passkey['created_at_diff']]) }}
|
|
@if ($passkey['last_used_at_diff'])
|
|
<span class="opacity-50 mx-1">/</span>
|
|
{{ __('Last used :time', ['time' => $passkey['last_used_at_diff']]) }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:button variant="ghost" size="sm" icon="trash" icon:variant="outline"
|
|
wire:click="confirmDelete({{ $passkey['id'] }})"
|
|
class="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/50" />
|
|
</div>
|
|
@empty
|
|
<div class="p-8 text-center">
|
|
<div
|
|
class="mx-auto mb-4 flex size-14 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
|
|
<flux:icon.key class="size-7 text-zinc-400 dark:text-zinc-500" />
|
|
</div>
|
|
<p class="font-medium">{{ __('No passkeys yet') }}</p>
|
|
<flux:text class="mt-1">{{ __('Add a passkey to sign in without a password') }}
|
|
</flux:text>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<x-passkey-registration />
|
|
</div>
|
|
</section>
|
|
@endif
|
|
</x-settings.layout>
|
|
|
|
<flux:modal name="delete-passkey-modal" class="max-w-md md:min-w-md" @close="closeDeleteModal"
|
|
wire:model="showDeleteModal">
|
|
<div class="space-y-6">
|
|
<div class="space-y-2">
|
|
<flux:heading size="lg">{{ __('Remove passkey') }}</flux:heading>
|
|
<flux:text>
|
|
{{ __('Are you sure you want to remove the passkey ":name"? You will no longer be able to use it to sign in.', ['name' => $deletingPasskeyName]) }}
|
|
</flux:text>
|
|
</div>
|
|
|
|
<div class="flex gap-3 justify-end">
|
|
<flux:button variant="outline" wire:click="closeDeleteModal">
|
|
{{ __('Cancel') }}
|
|
</flux:button>
|
|
<flux:button variant="danger" wire:click="deletePasskey">
|
|
{{ __('Remove passkey') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:modal>
|
|
</section>
|