d63489ea33
- Replaced deprecated `flux` components with `maryUI` counterparts (`flux:input` → `x-mary-input`, `flux:button` → `x-mary-button`, etc.). - Removed unused partials (`settings-heading.blade.php`) and outdated structures from Blade files. - Adjusted Livewire modal, form, and button implementations for consistency with `maryUI`. - Streamlined layout and theme styling for improved maintainability and readability.
229 lines
11 KiB
PHP
229 lines
11 KiB
PHP
<section class="w-full">
|
|
<x-shared.card title="{{ __('Change your password') }}">
|
|
<x-mary-form method="POST" wire:submit="updatePassword" class="p-4">
|
|
<x-mary-input
|
|
wire:model="current_password"
|
|
:label="__('Current password')"
|
|
type="password"
|
|
required
|
|
autocomplete="current-password"
|
|
viewable
|
|
/>
|
|
<x-mary-input
|
|
wire:model="password"
|
|
:label="__('New password')"
|
|
type="password"
|
|
required
|
|
autocomplete="new-password"
|
|
viewable
|
|
/>
|
|
<x-mary-input
|
|
wire:model="password_confirmation"
|
|
:label="__('Confirm password')"
|
|
type="password"
|
|
required
|
|
autocomplete="new-password"
|
|
viewable
|
|
/>
|
|
|
|
<x-slot:actions>
|
|
<x-mary-button type="submit" class="btn-primary"
|
|
data-test="update-password-button">{{ __('Save') }}</x-mary-button>
|
|
</x-slot:actions>
|
|
</x-mary-form>
|
|
</x-shared.card>
|
|
|
|
@if ($canManageTwoFactor)
|
|
<section class="mt-12">
|
|
<p class="text-xl text-gray-700 mb-2 font-medium">{{ __('Manage your two-factor authentication settings') }}</p>
|
|
<p class="text-sm text-gray-500">{{ __('Manage your two-factor authentication settings') }}</p>
|
|
|
|
|
|
<div class="flex flex-col w-full mx-auto space-y-6 text-sm" wire:cloak>
|
|
@if ($twoFactorEnabled)
|
|
<div class="space-y-4">
|
|
<p class="text-gray-500 mt-4">
|
|
{{ __('You will be prompted for a secure, random pin during login, which you can retrieve from the TOTP-supported application on your phone.') }}
|
|
</p>
|
|
|
|
<div class="flex justify-start">
|
|
<x-mary-button
|
|
class="btn-error"
|
|
wire:click="disable"
|
|
>
|
|
{{ __('Disable 2FA') }}
|
|
</x-mary-button>
|
|
</div>
|
|
|
|
<livewire:settings.two-factor.recovery-codes :$requiresConfirmation/>
|
|
</div>
|
|
@else
|
|
<div class="space-y-4">
|
|
<p class="text-gray-400 mt-4">
|
|
{{ __('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.') }}
|
|
</p>
|
|
|
|
<x-mary-button
|
|
class="btn-secondary"
|
|
wire:click="enable"
|
|
>
|
|
{{ __('Enable 2FA') }}
|
|
</x-mary-button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
<x-mary-modal wire:model="showModal" class="backdrop-blur" @close="closeModal">
|
|
<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-base-200 dark:border-base-content/20 bg-base-100 shadow-sm">
|
|
<div
|
|
class="p-2.5 rounded-full border border-base-200 dark:border-base-content/20 overflow-hidden bg-base-200 relative">
|
|
<div
|
|
class="flex items-stretch absolute inset-0 w-full h-full divide-x [&>div]:flex-1 divide-base-300 dark:divide-base-content/20 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-base-300 dark:divide-base-content/20 justify-around opacity-50">
|
|
@for ($i = 1; $i <= 5; $i++)
|
|
<div></div>
|
|
@endfor
|
|
</div>
|
|
|
|
<x-mary-icon name="o-qr-code" class="relative z-20 w-8 h-8 text-base-content"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-center">
|
|
<div class="text-xl font-bold text-base-content">{{ $this->modalConfig['title'] }}</div>
|
|
<div class="text-sm text-base-content/70">{{ $this->modalConfig['description'] }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($showVerificationStep)
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col items-center justify-center space-y-3" x-data
|
|
x-init="$nextTick(() => $el.querySelector('input')?.focus())">
|
|
<x-mary-input
|
|
wire:model="code"
|
|
maxlength="6"
|
|
placeholder="------"
|
|
class="mx-auto text-2xl tracking-widest text-center"
|
|
aria-label="OTP Code"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-3">
|
|
<x-mary-button
|
|
class="flex-1 btn-outline"
|
|
wire:click="resetVerification"
|
|
>
|
|
{{ __('Back') }}
|
|
</x-mary-button>
|
|
|
|
<x-mary-button
|
|
class="flex-1 btn-primary"
|
|
wire:click="confirmTwoFactor"
|
|
x-bind:disabled="$wire.code.length < 6"
|
|
>
|
|
{{ __('Confirm') }}
|
|
</x-mary-button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
@error('setupData')
|
|
<x-mary-alert icon="o-x-circle" class="alert-error">
|
|
{{ $message }}
|
|
</x-mary-alert>
|
|
@enderror
|
|
|
|
<div class="flex justify-center">
|
|
<div
|
|
class="relative w-64 overflow-hidden border rounded-lg border-base-200 dark:border-base-content/20 aspect-square">
|
|
@empty($qrCodeSvg)
|
|
<div
|
|
class="absolute inset-0 flex items-center justify-center bg-base-100 animate-pulse">
|
|
<x-mary-loading class="text-primary loading-lg"/>
|
|
</div>
|
|
@else
|
|
<div x-data class="flex items-center justify-center h-full p-4">
|
|
<div
|
|
class="p-3 bg-white rounded"
|
|
:style="(localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) ? 'filter: invert(1) brightness(1.5)' : ''"
|
|
>
|
|
{!! $qrCodeSvg !!}
|
|
</div>
|
|
</div>
|
|
@endempty
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<x-mary-button
|
|
:disabled="$errors->has('setupData')"
|
|
class="w-full btn-primary"
|
|
wire:click="showVerificationIfNecessary"
|
|
>
|
|
{{ $this->modalConfig['buttonText'] }}
|
|
</x-mary-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-base-200 dark:bg-base-content/20"></div>
|
|
<span class="relative px-2 text-sm bg-base-100 text-base-content/60">
|
|
{{ __('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 border-base-300 dark:border-base-content/20">
|
|
@empty($manualSetupKey)
|
|
<div class="flex items-center justify-center w-full p-3 bg-base-200">
|
|
<x-mary-loading class="loading-sm"/>
|
|
</div>
|
|
@else
|
|
<input
|
|
type="text"
|
|
readonly
|
|
value="{{ $manualSetupKey }}"
|
|
class="w-full p-3 bg-transparent outline-none text-base-content"
|
|
/>
|
|
|
|
<button
|
|
@click="copy()"
|
|
class="px-3 transition-colors border-l cursor-pointer border-base-300 dark:border-base-content/20 hover:bg-base-200 dark:hover:bg-base-content/10"
|
|
>
|
|
<x-mary-icon name="o-document-duplicate" x-show="!copied"
|
|
class="w-5 h-5 text-base-content/70"/>
|
|
<x-mary-icon name="o-check" x-show="copied" class="w-5 h-5 text-success"/>
|
|
</button>
|
|
@endempty
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</x-mary-modal>
|
|
@endif
|
|
</section>
|