Initial project
This commit is contained in:
28
resources/views/livewire/auth/confirm-password.blade.php
Normal file
28
resources/views/livewire/auth/confirm-password.blade.php
Normal file
@@ -0,0 +1,28 @@
|
||||
<x-layouts::auth :title="__('Confirm password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header
|
||||
:title="__('Confirm password')"
|
||||
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
|
||||
/>
|
||||
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.confirm.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="confirm-password-button">
|
||||
{{ __('Confirm') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
31
resources/views/livewire/auth/forgot-password.blade.php
Normal file
31
resources/views/livewire/auth/forgot-password.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
<x-layouts::auth :title="__('Forgot password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.email') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="email-password-reset-link-button">
|
||||
{{ __('Email password reset link') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-400">
|
||||
<span>{{ __('Or, return to') }}</span>
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
59
resources/views/livewire/auth/login.blade.php
Normal file
59
resources/views/livewire/auth/login.blade.php
Normal file
@@ -0,0 +1,59 @@
|
||||
<x-layouts::auth :title="__('Log in')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
:value="old('email')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="relative">
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
@if (Route::has('password.request'))
|
||||
<flux:link class="absolute top-0 text-sm end-0" :href="route('password.request')" wire:navigate>
|
||||
{{ __('Forgot your password?') }}
|
||||
</flux:link>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Remember Me -->
|
||||
<flux:checkbox name="remember" :label="__('Remember me')" :checked="old('remember')" />
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button variant="primary" type="submit" class="w-full" data-test="login-button">
|
||||
{{ __('Log in') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if (Route::has('register'))
|
||||
<div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
|
||||
<span>{{ __('Don\'t have an account?') }}</span>
|
||||
<flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
67
resources/views/livewire/auth/register.blade.php
Normal file
67
resources/views/livewire/auth/register.blade.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<x-layouts::auth :title="__('Register')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
<!-- Name -->
|
||||
<flux:input
|
||||
name="name"
|
||||
:label="__('Name')"
|
||||
:value="old('name')"
|
||||
type="text"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
:placeholder="__('Full name')"
|
||||
/>
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
:label="__('Email address')"
|
||||
:value="old('email')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full" data-test="register-user-button">
|
||||
{{ __('Create account') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<span>{{ __('Already have an account?') }}</span>
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
52
resources/views/livewire/auth/reset-password.blade.php
Normal file
52
resources/views/livewire/auth/reset-password.blade.php
Normal file
@@ -0,0 +1,52 @@
|
||||
<x-layouts::auth :title="__('Reset password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form method="POST" action="{{ route('password.update') }}" class="flex flex-col gap-6">
|
||||
@csrf
|
||||
<!-- Token -->
|
||||
<input type="hidden" name="token" value="{{ request()->route('token') }}">
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
name="email"
|
||||
value="{{ request('email') }}"
|
||||
:label="__('Email')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
name="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full" data-test="reset-password-button">
|
||||
{{ __('Reset password') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
101
resources/views/livewire/auth/two-factor-challenge.blade.php
Normal file
101
resources/views/livewire/auth/two-factor-challenge.blade.php
Normal file
@@ -0,0 +1,101 @@
|
||||
<x-layouts::auth :title="__('Two-factor authentication')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<div
|
||||
class="relative w-full h-auto"
|
||||
x-cloak
|
||||
x-data="{
|
||||
showRecoveryInput: @js($errors->has('recovery_code')),
|
||||
code: '',
|
||||
recovery_code: '',
|
||||
focusOtp() {
|
||||
this.$nextTick(() => this.$refs.otp?.querySelector('input')?.focus());
|
||||
},
|
||||
init() {
|
||||
if (! this.showRecoveryInput) {
|
||||
this.focusOtp();
|
||||
}
|
||||
},
|
||||
toggleInput() {
|
||||
this.showRecoveryInput = !this.showRecoveryInput;
|
||||
|
||||
this.code = '';
|
||||
this.recovery_code = '';
|
||||
|
||||
$nextTick(() => {
|
||||
this.showRecoveryInput
|
||||
? this.$refs.recovery_code?.focus()
|
||||
: this.focusOtp();
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<div x-show="!showRecoveryInput">
|
||||
<x-auth-header
|
||||
:title="__('Authentication code')"
|
||||
:description="__('Enter the authentication code provided by your authenticator application.')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div x-show="showRecoveryInput">
|
||||
<x-auth-header
|
||||
:title="__('Recovery code')"
|
||||
:description="__('Please confirm access to your account by entering one of your emergency recovery codes.')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('two-factor.login.store') }}">
|
||||
@csrf
|
||||
|
||||
<div class="space-y-5 text-center">
|
||||
<div x-show="!showRecoveryInput">
|
||||
<div class="flex items-center justify-center my-5" x-ref="otp">
|
||||
<flux:otp
|
||||
x-model="code"
|
||||
length="6"
|
||||
name="code"
|
||||
label="OTP Code"
|
||||
label:sr-only
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="showRecoveryInput">
|
||||
<div class="my-5">
|
||||
<flux:input
|
||||
type="text"
|
||||
name="recovery_code"
|
||||
x-ref="recovery_code"
|
||||
x-bind:required="showRecoveryInput"
|
||||
autocomplete="one-time-code"
|
||||
x-model="recovery_code"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@error('recovery_code')
|
||||
<flux:text color="red">
|
||||
{{ $message }}
|
||||
</flux:text>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<flux:button
|
||||
variant="primary"
|
||||
type="submit"
|
||||
class="w-full"
|
||||
>
|
||||
{{ __('Continue') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 space-x-0.5 text-sm leading-5 text-center">
|
||||
<span class="opacity-50">{{ __('or you can') }}</span>
|
||||
<div class="inline font-medium underline cursor-pointer opacity-80">
|
||||
<span x-show="!showRecoveryInput" @click="toggleInput()">{{ __('login using a recovery code') }}</span>
|
||||
<span x-show="showRecoveryInput" @click="toggleInput()">{{ __('login using an authentication code') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
29
resources/views/livewire/auth/verify-email.blade.php
Normal file
29
resources/views/livewire/auth/verify-email.blade.php
Normal file
@@ -0,0 +1,29 @@
|
||||
<x-layouts::auth :title="__('Email verification')">
|
||||
<div class="mt-4 flex flex-col gap-6">
|
||||
<flux:text class="text-center">
|
||||
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
|
||||
</flux:text>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col items-center justify-between space-y-3">
|
||||
<form method="POST" action="{{ route('verification.send') }}">
|
||||
@csrf
|
||||
<flux:button type="submit" variant="primary" class="w-full">
|
||||
{{ __('Resend verification email') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
|
||||
{{ __('Log out') }}
|
||||
</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts::auth>
|
||||
51
resources/views/livewire/chat/chat-page.blade.php
Normal file
51
resources/views/livewire/chat/chat-page.blade.php
Normal file
@@ -0,0 +1,51 @@
|
||||
<section class="mx-auto flex h-[calc(100vh-5.5rem)] min-h-[620px] w-full max-w-[1600px] overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-950">
|
||||
<aside
|
||||
@class([
|
||||
'h-full w-full shrink-0 border-zinc-200 bg-zinc-50/80 dark:border-zinc-800 dark:bg-zinc-900/70 md:flex md:w-[22rem] lg:w-96',
|
||||
'hidden border-e' => $selectedConversationId,
|
||||
'flex md:border-e' => ! $selectedConversationId,
|
||||
])
|
||||
>
|
||||
<livewire:chat.conversation-list
|
||||
:selected-conversation-id="$selectedConversationId"
|
||||
:key="'conversation-list-'.$selectedConversationId"
|
||||
/>
|
||||
</aside>
|
||||
|
||||
<main
|
||||
@class([
|
||||
'min-w-0 flex-1 bg-white dark:bg-zinc-950 md:flex',
|
||||
'flex' => $selectedConversationId,
|
||||
'hidden' => ! $selectedConversationId,
|
||||
])
|
||||
>
|
||||
@if ($selectedConversationId)
|
||||
<livewire:chat.conversation-view
|
||||
:conversation-id="$selectedConversationId"
|
||||
:key="'conversation-view-'.$selectedConversationId"
|
||||
/>
|
||||
@else
|
||||
<div class="hidden h-full flex-1 items-center justify-center p-8 md:flex">
|
||||
<div class="max-w-md text-center">
|
||||
<div class="mx-auto mb-6 flex size-16 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
|
||||
<flux:icon.chat-bubble-left-right class="size-8" />
|
||||
</div>
|
||||
|
||||
<flux:heading size="xl">{{ __('Choose a conversation') }}</flux:heading>
|
||||
<flux:text class="mt-3 text-balance text-zinc-500 dark:text-zinc-400">
|
||||
{{ __('Your messages, teammates, and shared context will appear here.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</main>
|
||||
|
||||
@if ($selectedConversationId && $detailsPanelOpen)
|
||||
<aside class="hidden h-full w-[21rem] shrink-0 border-s border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/60 2xl:flex">
|
||||
<livewire:chat.conversation-details-panel
|
||||
:conversation-id="$selectedConversationId"
|
||||
:key="'conversation-details-'.$selectedConversationId"
|
||||
/>
|
||||
</aside>
|
||||
@endif
|
||||
</section>
|
||||
@@ -0,0 +1,102 @@
|
||||
<aside class="flex h-full w-full flex-col overflow-y-auto">
|
||||
<div class="border-b border-zinc-200 p-5 dark:border-zinc-800">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<flux:heading>{{ __('Details') }}</flux:heading>
|
||||
<flux:text class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ $this->conversation->isGroup() ? __('Group conversation') : __('Direct conversation') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<flux:badge color="zinc" size="sm">
|
||||
{{ trans_choice(':count message|:count messages', $this->conversation->messages_count, ['count' => $this->conversation->messages_count]) }}
|
||||
</flux:badge>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-col items-center text-center">
|
||||
<div class="flex size-20 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-emerald-500 text-xl font-semibold text-white shadow-sm">
|
||||
{{ $this->initials() }}
|
||||
</div>
|
||||
|
||||
<flux:heading size="lg" class="mt-4 max-w-full truncate">{{ $this->title() }}</flux:heading>
|
||||
|
||||
@if ($this->conversation->description)
|
||||
<flux:text class="mt-2 text-balance text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ $this->conversation->description }}
|
||||
</flux:text>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 p-5">
|
||||
<section>
|
||||
<flux:heading size="sm">{{ __('Quick actions') }}</flux:heading>
|
||||
|
||||
<div class="mt-3 grid grid-cols-3 gap-2">
|
||||
<flux:tooltip :content="__('Mute')" position="top">
|
||||
<flux:button type="button" variant="filled" icon="bell-slash" aria-label="{{ __('Mute') }}" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:tooltip :content="__('Pin')" position="top">
|
||||
<flux:button type="button" variant="filled" icon="bookmark" aria-label="{{ __('Pin') }}" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:tooltip :content="__('Files')" position="top">
|
||||
<flux:button type="button" variant="filled" icon="folder" aria-label="{{ __('Files') }}" />
|
||||
</flux:tooltip>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<flux:separator />
|
||||
|
||||
<section>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<flux:heading size="sm">{{ __('Participants') }}</flux:heading>
|
||||
<flux:badge size="sm" color="zinc">{{ $this->conversation->participants->count() }}</flux:badge>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-3">
|
||||
@foreach ($this->conversation->participants as $participant)
|
||||
<div wire:key="details-participant-{{ $participant->id }}" class="flex items-center gap-3">
|
||||
<flux:avatar
|
||||
circle
|
||||
:name="$participant->user->name"
|
||||
:initials="$participant->user->initials()"
|
||||
/>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||||
{{ $participant->user->name }}
|
||||
</div>
|
||||
<div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{{ $participant->user->email }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($participant->role === \App\Models\ConversationParticipant::RoleAdmin)
|
||||
<flux:badge size="sm" color="amber">{{ __('Admin') }}</flux:badge>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<flux:separator />
|
||||
|
||||
<section class="space-y-3">
|
||||
<flux:heading size="sm">{{ __('Conversation health') }}</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 text-sm">
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Members') }}</div>
|
||||
<div class="mt-1 font-semibold text-zinc-900 dark:text-zinc-100">{{ $this->conversation->participants->count() }}</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Messages') }}</div>
|
||||
<div class="mt-1 font-semibold text-zinc-900 dark:text-zinc-100">{{ $this->conversation->messages_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
55
resources/views/livewire/chat/conversation-header.blade.php
Normal file
55
resources/views/livewire/chat/conversation-header.blade.php
Normal file
@@ -0,0 +1,55 @@
|
||||
<header class="sticky top-0 z-10 flex h-[4.5rem] shrink-0 items-center justify-between gap-3 border-b border-zinc-200 bg-white/85 px-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/85 sm:px-5">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<flux:button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
icon="chevron-left"
|
||||
class="md:hidden"
|
||||
wire:click="closeConversation"
|
||||
aria-label="{{ __('Back to conversations') }}"
|
||||
/>
|
||||
|
||||
@if ($this->conversation->isGroup())
|
||||
<div class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-sky-500 to-emerald-500 text-sm font-semibold text-white">
|
||||
{{ $this->initials() }}
|
||||
</div>
|
||||
@elseif ($this->isOnline())
|
||||
<flux:avatar
|
||||
circle
|
||||
badge
|
||||
badge:color="green"
|
||||
:name="$this->title()"
|
||||
:initials="$this->initials()"
|
||||
/>
|
||||
@else
|
||||
<flux:avatar
|
||||
circle
|
||||
:name="$this->title()"
|
||||
:initials="$this->initials()"
|
||||
/>
|
||||
@endif
|
||||
|
||||
<div class="min-w-0">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<flux:heading class="truncate">{{ $this->title() }}</flux:heading>
|
||||
@if ($this->conversation->isGroup())
|
||||
<flux:badge size="sm" color="sky">{{ __('Group') }}</flux:badge>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<flux:text class="truncate text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ $this->subtitle() }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<flux:tooltip :content="__('Search messages')" position="bottom">
|
||||
<flux:button type="button" variant="ghost" icon="magnifying-glass" aria-label="{{ __('Search messages') }}" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:tooltip :content="__('Conversation details')" position="bottom">
|
||||
<flux:button type="button" variant="ghost" icon="information-circle" wire:click="toggleDetails" aria-label="{{ __('Conversation details') }}" />
|
||||
</flux:tooltip>
|
||||
</div>
|
||||
</header>
|
||||
141
resources/views/livewire/chat/conversation-list.blade.php
Normal file
141
resources/views/livewire/chat/conversation-list.blade.php
Normal file
@@ -0,0 +1,141 @@
|
||||
<div class="flex h-full w-full flex-col">
|
||||
<div class="shrink-0 border-b border-zinc-200 bg-white/70 p-4 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/40">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Inbox') }}</flux:heading>
|
||||
<flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ trans_choice(':count conversation|:count conversations', $this->conversations->count(), ['count' => $this->conversations->count()]) }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<flux:badge color="emerald" size="sm">{{ __('Live') }}</flux:badge>
|
||||
</div>
|
||||
|
||||
<flux:input
|
||||
wire:model.live.debounce.300ms="search"
|
||||
icon="magnifying-glass"
|
||||
:placeholder="__('Search conversations')"
|
||||
aria-label="{{ __('Search conversations') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative min-h-0 flex-1 overflow-y-auto p-2" role="list" aria-label="{{ __('Conversations') }}">
|
||||
<div wire:loading.delay wire:target="search" class="space-y-2 p-2">
|
||||
@for ($index = 0; $index < 6; $index++)
|
||||
<div class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900">
|
||||
<flux:skeleton class="size-11 rounded-full" />
|
||||
<div class="min-w-0 flex-1 space-y-2">
|
||||
<flux:skeleton class="h-4 w-2/3" />
|
||||
<flux:skeleton class="h-3 w-full" />
|
||||
</div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<div wire:loading.remove wire:target="search" class="space-y-1">
|
||||
@forelse ($this->conversations as $conversation)
|
||||
@php
|
||||
$selected = $selectedConversationId === $conversation->id;
|
||||
$unreadCount = (int) ($conversation->unread_messages_count ?? 0);
|
||||
@endphp
|
||||
|
||||
<button
|
||||
type="button"
|
||||
wire:key="conversation-{{ $conversation->id }}"
|
||||
wire:click="selectConversation({{ $conversation->id }})"
|
||||
aria-pressed="{{ $selected ? 'true' : 'false' }}"
|
||||
@class([
|
||||
'group grid w-full grid-cols-[auto_1fr_auto] items-center gap-3 rounded-lg border p-3 text-left transition duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950',
|
||||
'border-zinc-900 bg-zinc-900 text-white shadow-sm dark:border-white dark:bg-white dark:text-zinc-950' => $selected,
|
||||
'border-transparent hover:border-zinc-200 hover:bg-white hover:shadow-sm dark:hover:border-zinc-800 dark:hover:bg-zinc-900' => ! $selected,
|
||||
])
|
||||
>
|
||||
<div class="relative">
|
||||
@if ($conversation->isGroup())
|
||||
<div @class([
|
||||
'flex size-11 items-center justify-center rounded-lg text-sm font-semibold',
|
||||
'bg-white/15 text-white dark:bg-zinc-950/10 dark:text-zinc-950' => $selected,
|
||||
'bg-gradient-to-br from-sky-500 to-emerald-500 text-white' => ! $selected,
|
||||
])>
|
||||
{{ $this->initialsFor($conversation) }}
|
||||
</div>
|
||||
@elseif ($this->isOnline($conversation))
|
||||
<flux:avatar
|
||||
circle
|
||||
badge
|
||||
badge:color="green"
|
||||
:name="$this->titleFor($conversation)"
|
||||
:initials="$this->initialsFor($conversation)"
|
||||
/>
|
||||
@else
|
||||
<flux:avatar
|
||||
circle
|
||||
:name="$this->titleFor($conversation)"
|
||||
:initials="$this->initialsFor($conversation)"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="min-w-0">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<span class="truncate text-sm font-semibold">{{ $this->titleFor($conversation) }}</span>
|
||||
@if ($conversation->isGroup())
|
||||
<span @class([
|
||||
'rounded-full px-1.5 py-0.5 text-[10px] font-medium uppercase',
|
||||
'bg-white/15 text-white/80 dark:bg-zinc-950/10 dark:text-zinc-700' => $selected,
|
||||
'bg-sky-50 text-sky-700 dark:bg-sky-400/10 dark:text-sky-300' => ! $selected,
|
||||
])>{{ __('Group') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<p @class([
|
||||
'mt-1 truncate text-sm',
|
||||
'text-white/75 dark:text-zinc-700' => $selected,
|
||||
'text-zinc-500 dark:text-zinc-400' => ! $selected,
|
||||
])>
|
||||
{{ $this->previewFor($conversation) }}
|
||||
</p>
|
||||
|
||||
<p @class([
|
||||
'mt-1 text-xs',
|
||||
'text-white/60 dark:text-zinc-600' => $selected,
|
||||
'text-zinc-400 dark:text-zinc-500' => ! $selected,
|
||||
])>
|
||||
{{ $this->participantSummaryFor($conversation) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full flex-col items-end justify-between gap-2">
|
||||
<span @class([
|
||||
'text-xs',
|
||||
'text-white/60 dark:text-zinc-600' => $selected,
|
||||
'text-zinc-400 dark:text-zinc-500' => ! $selected,
|
||||
])>
|
||||
{{ $this->timeFor($conversation->latestMessage?->created_at) }}
|
||||
</span>
|
||||
|
||||
@if ($unreadCount > 0)
|
||||
<span class="flex min-w-5 items-center justify-center rounded-full bg-emerald-500 px-1.5 text-xs font-semibold text-white">
|
||||
{{ $unreadCount > 9 ? '9+' : $unreadCount }}
|
||||
</span>
|
||||
@else
|
||||
<span class="size-2 rounded-full bg-transparent transition group-hover:bg-zinc-300 dark:group-hover:bg-zinc-700"></span>
|
||||
@endif
|
||||
</div>
|
||||
</button>
|
||||
@empty
|
||||
<div class="flex h-full min-h-72 items-center justify-center p-8 text-center">
|
||||
<div>
|
||||
<div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-zinc-400 dark:border-zinc-700">
|
||||
<flux:icon.magnifying-glass class="size-6" />
|
||||
</div>
|
||||
<flux:heading size="sm">{{ __('No conversations found') }}</flux:heading>
|
||||
<flux:text class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ __('Try a different name, email, or group title.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
120
resources/views/livewire/chat/conversation-view.blade.php
Normal file
120
resources/views/livewire/chat/conversation-view.blade.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<div
|
||||
class="flex h-full min-w-0 flex-1 flex-col"
|
||||
x-data="{
|
||||
scrollToBottom() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.messages.scrollTop = this.$refs.messages.scrollHeight
|
||||
})
|
||||
}
|
||||
}"
|
||||
x-init="scrollToBottom()"
|
||||
x-on:message-created.window="if ($event.detail.conversationId === @js($conversationId)) scrollToBottom()"
|
||||
>
|
||||
<livewire:chat.conversation-header
|
||||
:conversation-id="$conversationId"
|
||||
:key="'conversation-header-'.$conversationId"
|
||||
/>
|
||||
|
||||
<div x-ref="messages" class="min-h-0 flex-1 overflow-y-auto scroll-smooth bg-zinc-50/40 px-4 py-6 dark:bg-zinc-950 sm:px-6">
|
||||
@if ($this->hasMoreMessages)
|
||||
<div class="mb-6 flex justify-center">
|
||||
<flux:button
|
||||
size="sm"
|
||||
variant="filled"
|
||||
icon="arrow-up"
|
||||
wire:click.preserve-scroll="loadEarlier"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="loadEarlier"
|
||||
>
|
||||
{{ __('Load earlier') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($this->messages->isEmpty())
|
||||
<div class="flex h-full min-h-96 items-center justify-center text-center">
|
||||
<div class="max-w-sm">
|
||||
<div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-lg border border-dashed border-zinc-300 text-zinc-400 dark:border-zinc-700">
|
||||
<flux:icon.chat-bubble-left-ellipsis class="size-6" />
|
||||
</div>
|
||||
<flux:heading size="sm">{{ __('No messages yet') }}</flux:heading>
|
||||
<flux:text class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
{{ __('Start the conversation with a short note.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="space-y-6">
|
||||
@php
|
||||
$lastDate = null;
|
||||
@endphp
|
||||
|
||||
@foreach ($this->messages as $message)
|
||||
@php
|
||||
$messageDate = $message->created_at->toDateString();
|
||||
$isMine = $message->user_id === auth()->id();
|
||||
$senderName = $message->sender?->name ?? __('Deleted user');
|
||||
@endphp
|
||||
|
||||
@if ($messageDate !== $lastDate)
|
||||
<div class="flex items-center gap-3" wire:key="date-{{ $messageDate }}">
|
||||
<div class="h-px flex-1 bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
<span class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
|
||||
{{ $this->dateLabel($message->created_at) }}
|
||||
</span>
|
||||
<div class="h-px flex-1 bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$lastDate = $messageDate;
|
||||
@endphp
|
||||
@endif
|
||||
|
||||
<div wire:key="message-{{ $message->id }}" @class([
|
||||
'flex items-end gap-2',
|
||||
'justify-end' => $isMine,
|
||||
'justify-start' => ! $isMine,
|
||||
])>
|
||||
@unless ($isMine)
|
||||
<div class="mb-6 flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs font-semibold text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
|
||||
{{ $message->sender?->initials() ?? 'DU' }}
|
||||
</div>
|
||||
@endunless
|
||||
|
||||
<div @class([
|
||||
'max-w-[min(82%,42rem)]',
|
||||
'items-end text-right' => $isMine,
|
||||
'items-start text-left' => ! $isMine,
|
||||
])>
|
||||
@if (! $isMine && $this->conversation->isGroup())
|
||||
<div class="mb-1 px-1 text-xs font-medium text-zinc-500 dark:text-zinc-400">
|
||||
{{ $senderName }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div @class([
|
||||
'rounded-lg px-4 py-3 text-sm leading-6 shadow-sm',
|
||||
'bg-zinc-900 text-white dark:bg-white dark:text-zinc-950' => $isMine,
|
||||
'border border-zinc-200 bg-white text-zinc-800 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100' => ! $isMine,
|
||||
])>
|
||||
<p class="whitespace-pre-wrap break-words">{{ $message->body }}</p>
|
||||
</div>
|
||||
|
||||
<div @class([
|
||||
'mt-1 px-1 text-[11px] text-zinc-400 dark:text-zinc-500',
|
||||
'text-right' => $isMine,
|
||||
])>
|
||||
{{ $message->created_at->format('H:i') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<livewire:chat.message-composer
|
||||
:conversation-id="$conversationId"
|
||||
:key="'message-composer-'.$conversationId"
|
||||
/>
|
||||
</div>
|
||||
35
resources/views/livewire/chat/message-composer.blade.php
Normal file
35
resources/views/livewire/chat/message-composer.blade.php
Normal file
@@ -0,0 +1,35 @@
|
||||
<form wire:submit="sendMessage" class="shrink-0 border-t border-zinc-200 bg-white/90 p-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/90 sm:p-4">
|
||||
<div class="flex items-end gap-2 rounded-lg border border-zinc-200 bg-white p-2 shadow-sm transition focus-within:border-zinc-300 focus-within:ring-2 focus-within:ring-accent focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-700 dark:focus-within:ring-offset-zinc-950">
|
||||
<flux:tooltip :content="__('Attach file')" position="top">
|
||||
<flux:button type="button" variant="ghost" icon="paper-clip" aria-label="{{ __('Attach file') }}" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:textarea
|
||||
wire:model.live.debounce.150ms="body"
|
||||
rows="1"
|
||||
:placeholder="__('Write a message...')"
|
||||
aria-label="{{ __('Message') }}"
|
||||
class="max-h-36 min-h-11 flex-1 resize-none border-0! bg-transparent! shadow-none! ring-0!"
|
||||
x-on:keydown.enter.exact.prevent="$wire.sendMessage()"
|
||||
x-on:keydown.shift.enter.stop
|
||||
/>
|
||||
|
||||
<flux:tooltip :content="__('Emoji')" position="top">
|
||||
<flux:button type="button" variant="ghost" icon="face-smile" aria-label="{{ __('Emoji') }}" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
icon="paper-airplane"
|
||||
:disabled="blank(trim($body))"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="sendMessage"
|
||||
aria-label="{{ __('Send message') }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@error('body')
|
||||
<flux:text class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</flux:text>
|
||||
@enderror
|
||||
</form>
|
||||
13
resources/views/livewire/settings/appearance.blade.php
Normal file
13
resources/views/livewire/settings/appearance.blade.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
|
||||
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
|
||||
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
|
||||
<flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
|
||||
<flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
|
||||
</flux:radio.group>
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
34
resources/views/livewire/settings/delete-user-form.blade.php
Normal file
34
resources/views/livewire/settings/delete-user-form.blade.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<section class="mt-10 space-y-6">
|
||||
<div class="relative mb-5">
|
||||
<flux:heading>{{ __('Delete account') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:modal.trigger name="confirm-user-deletion">
|
||||
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
|
||||
{{ __('Delete account') }}
|
||||
</flux:button>
|
||||
</flux:modal.trigger>
|
||||
|
||||
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
|
||||
<form method="POST" wire:submit="deleteUser" class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
|
||||
|
||||
<flux:subheading>
|
||||
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
|
||||
</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:input wire:model="password" :label="__('Password')" type="password" viewable />
|
||||
|
||||
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
|
||||
<flux:modal.close>
|
||||
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
|
||||
</flux:modal.close>
|
||||
|
||||
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
36
resources/views/livewire/settings/profile.blade.php
Normal file
36
resources/views/livewire/settings/profile.blade.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Profile settings') }}</flux:heading>
|
||||
|
||||
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
|
||||
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
|
||||
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
|
||||
|
||||
<div>
|
||||
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
|
||||
|
||||
@if ($this->hasUnverifiedEmail)
|
||||
<div>
|
||||
<flux:text class="mt-4">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
|
||||
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</flux:link>
|
||||
</flux:text>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if ($this->showDeleteUser)
|
||||
<livewire:settings.delete-user-form />
|
||||
@endif
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
237
resources/views/livewire/settings/security.blade.php
Normal file
237
resources/views/livewire/settings/security.blade.php
Normal file
@@ -0,0 +1,237 @@
|
||||
<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"
|
||||
viewable
|
||||
/>
|
||||
<flux:input
|
||||
wire:model="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
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>
|
||||
|
||||
<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
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value="{{ $manualSetupKey }}"
|
||||
class="w-full p-3 bg-transparent outline-none text-stone-900 dark:text-stone-100"
|
||||
/>
|
||||
|
||||
<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
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
@@ -0,0 +1,89 @@
|
||||
<div
|
||||
class="py-6 space-y-6 border shadow-sm rounded-xl border-zinc-200 dark:border-white/10"
|
||||
wire:cloak
|
||||
x-data="{ showRecoveryCodes: false }"
|
||||
>
|
||||
<div class="px-6 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:icon.lock-closed variant="outline" class="size-4"/>
|
||||
<flux:heading size="lg" level="3">{{ __('2FA recovery codes') }}</flux:heading>
|
||||
</div>
|
||||
<flux:text variant="subtle">
|
||||
{{ __('Recovery codes let you regain access if you lose your 2FA device. Store them in a secure password manager.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="px-6">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<flux:button
|
||||
x-show="!showRecoveryCodes"
|
||||
icon="eye"
|
||||
icon:variant="outline"
|
||||
variant="primary"
|
||||
@click="showRecoveryCodes = true;"
|
||||
aria-expanded="false"
|
||||
aria-controls="recovery-codes-section"
|
||||
>
|
||||
{{ __('View recovery codes') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="eye-slash"
|
||||
icon:variant="outline"
|
||||
variant="primary"
|
||||
@click="showRecoveryCodes = false"
|
||||
aria-expanded="true"
|
||||
aria-controls="recovery-codes-section"
|
||||
>
|
||||
{{ __('Hide recovery codes') }}
|
||||
</flux:button>
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<flux:button
|
||||
x-show="showRecoveryCodes"
|
||||
icon="arrow-path"
|
||||
variant="filled"
|
||||
wire:click="regenerateRecoveryCodes"
|
||||
>
|
||||
{{ __('Regenerate codes') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div
|
||||
x-show="showRecoveryCodes"
|
||||
x-transition
|
||||
id="recovery-codes-section"
|
||||
class="relative overflow-hidden"
|
||||
x-bind:aria-hidden="!showRecoveryCodes"
|
||||
>
|
||||
<div class="mt-3 space-y-3">
|
||||
@error('recoveryCodes')
|
||||
<flux:callout variant="danger" icon="x-circle" heading="{{$message}}"/>
|
||||
@enderror
|
||||
|
||||
@if (filled($recoveryCodes))
|
||||
<div
|
||||
class="grid gap-1 p-4 font-mono text-sm rounded-lg bg-zinc-100 dark:bg-white/5"
|
||||
role="list"
|
||||
aria-label="{{ __('Recovery codes') }}"
|
||||
>
|
||||
@foreach($recoveryCodes as $code)
|
||||
<div
|
||||
role="listitem"
|
||||
class="select-text"
|
||||
wire:loading.class="opacity-50 animate-pulse"
|
||||
>
|
||||
{{ $code }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<flux:text variant="subtle" class="text-xs">
|
||||
{{ __('Each recovery code can be used once to access your account and will be removed after use. If you need more, click Regenerate codes above.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user