New Branch Structure
This commit is contained in:
Mark Gregory
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,66 @@
|
||||
@import 'tailwindcss';
|
||||
@import '../../vendor/livewire/flux/dist/flux.css';
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f5f5f5;
|
||||
--color-zinc-200: #e5e5e5;
|
||||
--color-zinc-300: #d4d4d4;
|
||||
--color-zinc-400: #a3a3a3;
|
||||
--color-zinc-500: #737373;
|
||||
--color-zinc-600: #525252;
|
||||
--color-zinc-700: #404040;
|
||||
--color-zinc-800: #262626;
|
||||
--color-zinc-900: #171717;
|
||||
--color-zinc-950: #0a0a0a;
|
||||
|
||||
--color-accent: var(--color-neutral-800);
|
||||
--color-accent-content: var(--color-neutral-800);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-white);
|
||||
--color-accent-content: var(--color-white);
|
||||
--color-accent-foreground: var(--color-neutral-800);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
@@ -0,0 +1,4 @@
|
||||
import { Passkeys } from '@laravel/passkeys';
|
||||
|
||||
window.Passkeys = Passkeys;
|
||||
window.dispatchEvent(new CustomEvent('passkeys:ready'));
|
||||
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
/* Dashboard backend theme
|
||||
* The primary Tailwind bundle remains resources/css/app.css.
|
||||
*/
|
||||
:root {
|
||||
--dashboard-sidebar-width: 16rem;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1 @@
|
||||
// Dashboard backend theme JavaScript entry point.
|
||||
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "Dashboard",
|
||||
"slug": "admin",
|
||||
"extends": "common",
|
||||
"version": "1.0.0",
|
||||
"author": "ABSDEV",
|
||||
"description": "Backend-only Laravel Livewire and Flux dashboard theme.",
|
||||
"entry_view": "dashboard",
|
||||
"stylesheet": "css/theme.css",
|
||||
"script": "js/app.js",
|
||||
"type": "backend",
|
||||
"views": true,
|
||||
"livewire_views": true,
|
||||
"supports": {
|
||||
"dark_mode": true,
|
||||
"animations": false,
|
||||
"auth": false,
|
||||
"preview": true,
|
||||
"variants": true,
|
||||
"settings": false,
|
||||
"seo": false,
|
||||
"export": true,
|
||||
"accessibility_validation": true
|
||||
},
|
||||
"variables": {},
|
||||
"preview": "images/preview.webp",
|
||||
"variants": {
|
||||
"light": {
|
||||
"label": "Light",
|
||||
"variables": {}
|
||||
},
|
||||
"dark": {
|
||||
"label": "Dark",
|
||||
"variables": {
|
||||
"surface": "#18181b",
|
||||
"surface-muted": "#27272a",
|
||||
"text-primary": "#fafafa"
|
||||
}
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"site_title": {
|
||||
"type": "text",
|
||||
"label": "Dashboard title",
|
||||
"default": "Dashboard"
|
||||
},
|
||||
"logo_url": {
|
||||
"type": "url",
|
||||
"label": "Logo URL",
|
||||
"default": ""
|
||||
},
|
||||
"--brand-primary": {
|
||||
"type": "color",
|
||||
"label": "Primary colour",
|
||||
"default": "#2563eb"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<x-layouts.app :title="__('Create user')">
|
||||
<div class="mx-auto max-w-2xl space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-100">Create user</h1>
|
||||
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Add a backend user and assign roles.</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('administration.users.store') }}" class="space-y-5 rounded-xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
@csrf
|
||||
|
||||
<flux:input name="name" :label="__('Name')" :value="old('name')" required autofocus />
|
||||
<flux:input name="email" type="email" :label="__('Email')" :value="old('email')" required />
|
||||
<flux:input name="password" type="password" :label="__('Password')" required />
|
||||
<flux:input name="password_confirmation" type="password" :label="__('Confirm password')" required />
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Roles</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
@foreach ($roles as $role)
|
||||
<label class="flex items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700">
|
||||
<input type="checkbox" name="roles[]" value="{{ $role }}" @checked(in_array($role, old('roles', []), true))>
|
||||
<span>{{ $role }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<flux:button :href="route('administration.users.index')" wire:navigate>Cancel</flux:button>
|
||||
<flux:button variant="primary" type="submit">Create user</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,35 @@
|
||||
<x-layouts.app :title="__('Edit user')">
|
||||
<div class="mx-auto max-w-2xl space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-100">Edit user</h1>
|
||||
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Update account details and roles.</p>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('administration.users.update', $user) }}" class="space-y-5 rounded-xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<flux:input name="name" :label="__('Name')" :value="old('name', $user->name)" required autofocus />
|
||||
<flux:input name="email" type="email" :label="__('Email')" :value="old('email', $user->email)" required />
|
||||
<flux:input name="password" type="password" :label="__('New password')" />
|
||||
<flux:input name="password_confirmation" type="password" :label="__('Confirm new password')" />
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Roles</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
@foreach ($roles as $role)
|
||||
<label class="flex items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700">
|
||||
<input type="checkbox" name="roles[]" value="{{ $role }}" @checked(in_array($role, old('roles', $user->roles->pluck('name')->all()), true))>
|
||||
<span>{{ $role }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<flux:button :href="route('administration.users.index')" wire:navigate>Cancel</flux:button>
|
||||
<flux:button variant="primary" type="submit">Save changes</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,62 @@
|
||||
<x-layouts.app :title="__('Users')">
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-100">Users</h1>
|
||||
<p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">Create, edit and soft delete backend user accounts.</p>
|
||||
</div>
|
||||
|
||||
<flux:button :href="route('administration.users.create')" variant="primary" wire:navigate>
|
||||
Create user
|
||||
</flux:button>
|
||||
</div>
|
||||
|
||||
@if (session('status'))
|
||||
<div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
||||
<thead class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-600 dark:bg-zinc-950 dark:text-zinc-400">
|
||||
<tr>
|
||||
<th class="px-4 py-3">Name</th>
|
||||
<th class="px-4 py-3">Email</th>
|
||||
<th class="px-4 py-3">Roles</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
|
||||
@forelse ($users as $user)
|
||||
<tr>
|
||||
<td class="px-4 py-3 font-medium text-zinc-950 dark:text-zinc-100">{{ $user->name }}</td>
|
||||
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">{{ $user->email }}</td>
|
||||
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">
|
||||
{{ $user->roles->pluck('name')->join(', ') ?: '—' }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex justify-end gap-2">
|
||||
<flux:button size="sm" :href="route('administration.users.edit', $user)" wire:navigate>Edit</flux:button>
|
||||
<form method="POST" action="{{ route('administration.users.destroy', $user) }}">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<flux:button size="sm" variant="danger" type="submit">Delete</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-4 py-8 text-center text-zinc-600 dark:text-zinc-400">No users found.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if (method_exists($users, 'links'))
|
||||
{{ $users->links() }}
|
||||
@endif
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,35 @@
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300" for="name">Name</label>
|
||||
<input id="name" name="name" value="{{ old('name', $user?->name) }}" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-950 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" required>
|
||||
@error('name') <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300" for="email">Email</label>
|
||||
<input id="email" name="email" type="email" value="{{ old('email', $user?->email) }}" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-950 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" required>
|
||||
@error('email') <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300" for="password">Password</label>
|
||||
<input id="password" name="password" type="password" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-950 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" {{ $user ? '' : 'required' }}>
|
||||
@error('password') <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300" for="password_confirmation">Confirm password</label>
|
||||
<input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-950 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100" {{ $user ? '' : 'required' }}>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-zinc-700 dark:text-zinc-300">Roles</span>
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach ($roles as $role)
|
||||
<label class="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
<input type="checkbox" name="roles[]" value="{{ $role->name }}" @checked(in_array($role->name, old('roles', $user?->roles->pluck('name')->all() ?? []), true)) class="rounded border-zinc-300 dark:border-zinc-700">
|
||||
{{ $role->name }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@error('roles') <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
@props([
|
||||
'id' => uniqid(),
|
||||
])
|
||||
|
||||
<svg {{ $attributes }} fill="none">
|
||||
<defs>
|
||||
<pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
|
||||
<path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
|
||||
</svg>
|
||||
@@ -0,0 +1,18 @@
|
||||
<x-layouts.app :title="__('Dashboard')">
|
||||
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
||||
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-stylist-theme-admin::placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-stylist-theme-admin::placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-stylist-theme-admin::placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-stylist-theme-admin::placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
@@ -0,0 +1,47 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="M12 7v14" />
|
||||
<path d="M16 12h2" />
|
||||
<path d="M16 8h2" />
|
||||
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
|
||||
<path d="M6 12h2" />
|
||||
<path d="M6 8h2" />
|
||||
</svg>
|
||||
@@ -0,0 +1,43 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="m7 15 5 5 5-5" />
|
||||
<path d="m7 9 5-5 5 5" />
|
||||
</svg>
|
||||
@@ -0,0 +1,45 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<path d="M9 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v5" />
|
||||
<circle cx="13" cy="12" r="2" />
|
||||
<path d="M18 19c-2.8 0-5-2.2-5-5v8" />
|
||||
<circle cx="20" cy="19" r="2" />
|
||||
</svg>
|
||||
@@ -0,0 +1,45 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')->add(
|
||||
match ($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
},
|
||||
);
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<rect width="7" height="7" x="3" y="3" rx="1" />
|
||||
<rect width="7" height="7" x="14" y="3" rx="1" />
|
||||
<rect width="7" height="7" x="14" y="14" rx="1" />
|
||||
<rect width="7" height="7" x="3" y="14" rx="1" />
|
||||
</svg>
|
||||
@@ -0,0 +1,51 @@
|
||||
@props([
|
||||
'expandable' => false,
|
||||
'expanded' => true,
|
||||
'heading' => null,
|
||||
])
|
||||
|
||||
<?php if ($expandable && $heading): ?>
|
||||
|
||||
<ui-disclosure
|
||||
{{ $attributes->class('group/disclosure') }}
|
||||
@if ($expanded === true) open @endif
|
||||
data-flux-navlist-group
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="group/disclosure-button mb-[2px] flex h-10 w-full items-center rounded-lg text-zinc-500 hover:bg-zinc-800/5 hover:text-zinc-800 lg:h-8 dark:text-white/80 dark:hover:bg-white/[7%] dark:hover:text-white"
|
||||
>
|
||||
<div class="ps-3 pe-4">
|
||||
<flux:icon.chevron-down class="hidden size-3! group-data-open/disclosure-button:block" />
|
||||
<flux:icon.chevron-right class="block size-3! group-data-open/disclosure-button:hidden" />
|
||||
</div>
|
||||
|
||||
<span class="text-sm font-medium leading-none">{{ $heading }}</span>
|
||||
</button>
|
||||
|
||||
<div class="relative hidden space-y-[2px] ps-7 data-open:block" @if ($expanded === true) data-open @endif>
|
||||
<div class="absolute inset-y-[3px] start-0 ms-4 w-px bg-zinc-200 dark:bg-white/30"></div>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</ui-disclosure>
|
||||
|
||||
<?php elseif ($heading): ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
<div class="px-1 py-2">
|
||||
<div class="text-xs leading-none text-zinc-400">{{ $heading }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Common Application Theme",
|
||||
"slug": "common",
|
||||
"version": "1.0.0",
|
||||
"author": "ABSDEV",
|
||||
"description": "Application-wide layouts, authentication, settings and shared Blade components.",
|
||||
"entry_view": "livewire.auth.login",
|
||||
"type": "common",
|
||||
"views": true,
|
||||
"livewire_views": true,
|
||||
"supports": {
|
||||
"auth": true,
|
||||
"settings": true,
|
||||
"dark_mode": true,
|
||||
"preview": false
|
||||
},
|
||||
"variables": {},
|
||||
"settings": {}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 714 B |
@@ -0,0 +1,17 @@
|
||||
@props([
|
||||
'sidebar' => false,
|
||||
])
|
||||
|
||||
@if($sidebar)
|
||||
<flux:sidebar.brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
|
||||
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
|
||||
<x-stylist-theme-common::app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</x-slot>
|
||||
</flux:sidebar.brand>
|
||||
@else
|
||||
<flux:brand :name="config('app.name', 'Laravel')" {{ $attributes }}>
|
||||
<x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
|
||||
<x-stylist-theme-common::app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</x-slot>
|
||||
</flux:brand>
|
||||
@endif
|
||||
@@ -0,0 +1,9 @@
|
||||
@props([
|
||||
'title',
|
||||
'description',
|
||||
])
|
||||
|
||||
<div class="flex w-full flex-col text-center">
|
||||
<flux:heading size="xl">{{ $title }}</flux:heading>
|
||||
<flux:subheading>{{ $description }}</flux:subheading>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
@props([
|
||||
'status',
|
||||
])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -0,0 +1,39 @@
|
||||
<flux:dropdown position="bottom" align="start">
|
||||
<flux:sidebar.profile
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
icon:trailing="chevron-up-down"
|
||||
data-test="sidebar-menu-button"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
<flux:menu.separator />
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item
|
||||
as="button"
|
||||
type="submit"
|
||||
icon="arrow-right-start-on-rectangle"
|
||||
class="w-full cursor-pointer"
|
||||
data-test="logout-button"
|
||||
>
|
||||
{{ __('Log out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu.radio.group>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
@@ -0,0 +1,5 @@
|
||||
<x-stylist-theme-common::layouts.app.sidebar :title="$title ?? null">
|
||||
<flux:main>
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
</x-stylist-theme-common::layouts.app.sidebar>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('stylist-theme-common::partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden mr-2" icon="bars-2" inset="left" />
|
||||
|
||||
<x-stylist-theme-common::app-logo href="{{ route('dashboard') }}" wire:navigate />
|
||||
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item icon="squares-2x2" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:navbar.item>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
|
||||
<flux:tooltip :content="__('Search')" position="bottom">
|
||||
<flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Repository')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="folder"
|
||||
href="https://github.com/laravel/livewire-starter-kit"
|
||||
target="_blank"
|
||||
:label="__('Repository')"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Documentation')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="book-open"
|
||||
href="https://laravel.com/docs/starter-kits#livewire"
|
||||
target="_blank"
|
||||
:label="__('Documentation')"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
</flux:navbar>
|
||||
|
||||
<x-stylist-theme-common::desktop-user-menu />
|
||||
</flux:header>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<flux:sidebar collapsible="mobile" sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.header>
|
||||
<x-stylist-theme-common::app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
|
||||
<flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2" />
|
||||
</flux:sidebar.header>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.group :heading="__('Platform')">
|
||||
<flux:sidebar.item icon="squares-2x2" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.item icon="folder" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:sidebar.item>
|
||||
<flux:sidebar.item icon="book-open" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.nav>
|
||||
</flux:sidebar>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('stylist-theme-common::partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.header>
|
||||
<x-stylist-theme-common::app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
|
||||
<flux:sidebar.collapse class="lg:hidden" />
|
||||
</flux:sidebar.header>
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.group :heading="__('Platform')" class="grid">
|
||||
<flux:sidebar.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.group>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:sidebar.nav>
|
||||
<flux:sidebar.item icon="folder" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:sidebar.item>
|
||||
|
||||
<flux:sidebar.item icon="book-open" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:sidebar.item>
|
||||
</flux:sidebar.nav>
|
||||
|
||||
<x-stylist-theme-common::desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
|
||||
</flux:sidebar>
|
||||
|
||||
<!-- Mobile User Menu -->
|
||||
<flux:header class="lg:hidden">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevron-down"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<flux:avatar
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
|
||||
<flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
|
||||
{{ __('Settings') }}
|
||||
</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item
|
||||
as="button"
|
||||
type="submit"
|
||||
icon="arrow-right-start-on-rectangle"
|
||||
class="w-full cursor-pointer"
|
||||
data-test="logout-button"
|
||||
>
|
||||
{{ __('Log out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:header>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
<x-stylist-theme-common::layouts.auth.simple :title="$title ?? null">
|
||||
{{ $slot }}
|
||||
</x-stylist-theme-common::layouts.auth.simple>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('stylist-theme-common::partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-stylist-theme-common::app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
|
||||
<div class="px-10 py-8">{{ $slot }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('stylist-theme-common::partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
|
||||
<x-stylist-theme-common::app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
<div class="flex flex-col gap-6">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('stylist-theme-common::partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
|
||||
<div class="absolute inset-0 bg-neutral-900"></div>
|
||||
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-md">
|
||||
<x-stylist-theme-common::app-logo-icon class="me-2 h-7 fill-current text-white" />
|
||||
</span>
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
</a>
|
||||
|
||||
@php
|
||||
[$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
|
||||
@endphp
|
||||
|
||||
<div class="relative z-20 mt-auto">
|
||||
<blockquote class="space-y-2">
|
||||
<flux:heading size="lg">“{{ trim($message) }}”</flux:heading>
|
||||
<footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-stylist-theme-common::app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@persist('toast')
|
||||
<flux:toast.group>
|
||||
<flux:toast />
|
||||
</flux:toast.group>
|
||||
@endpersist
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
@assets
|
||||
@vite('resources/js/passkeys.js')
|
||||
@endassets
|
||||
|
||||
<div
|
||||
x-data="{
|
||||
supported: false,
|
||||
showForm: false,
|
||||
name: '',
|
||||
loading: false,
|
||||
error: null,
|
||||
updateSupport() {
|
||||
this.supported = Boolean(window.Passkeys?.isSupported());
|
||||
},
|
||||
getDefaultPasskeyName() {
|
||||
const ua = navigator.userAgent;
|
||||
|
||||
const browser = [
|
||||
{ pattern: /Edg|Edge/, name: 'Edge' },
|
||||
{ pattern: /OPR|Opera|OPiOS/, name: 'Opera' },
|
||||
{ pattern: /Firefox|FxiOS/, name: 'Firefox' },
|
||||
{ pattern: /Chrome|CriOS/, name: 'Chrome' },
|
||||
{ pattern: /Safari/, name: 'Safari' },
|
||||
].find(({ pattern }) => pattern.test(ua))?.name;
|
||||
|
||||
const os = [
|
||||
{ pattern: /iPhone/, name: 'iPhone' },
|
||||
{ pattern: /iPad|Macintosh(?=.*Mobile)/, name: 'iPad' },
|
||||
{ pattern: /Android/, name: 'Android' },
|
||||
{ pattern: /Mac/, name: 'Mac' },
|
||||
{ pattern: /Windows/, name: 'Windows' },
|
||||
].find(({ pattern }) => pattern.test(ua))?.name;
|
||||
|
||||
return [browser, os].filter(Boolean).join(' on ') || '';
|
||||
},
|
||||
init() {
|
||||
this.name = this.getDefaultPasskeyName();
|
||||
this.updateSupport();
|
||||
|
||||
window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
|
||||
},
|
||||
async register() {
|
||||
if (!this.name.trim()) return;
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
await window.Passkeys.register({ name: this.name });
|
||||
this.name = '';
|
||||
this.showForm = false;
|
||||
await $wire.loadPasskeys();
|
||||
} catch (e) {
|
||||
if (e.constructor?.name !== 'UserCancelledError') {
|
||||
this.error = e.message;
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.showForm = false;
|
||||
this.name = '';
|
||||
this.error = null;
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template x-if="!supported">
|
||||
<flux:text>{{ __('Passkeys are not supported in this browser.') }}</flux:text>
|
||||
</template>
|
||||
|
||||
<template x-if="supported && !showForm">
|
||||
<div>
|
||||
<flux:button
|
||||
variant="primary"
|
||||
icon="plus"
|
||||
x-on:click="showForm = true"
|
||||
>
|
||||
{{ __('Add passkey') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="supported && showForm">
|
||||
<div class="space-y-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4">
|
||||
<flux:input
|
||||
label="{{ __('Passkey name') }}"
|
||||
x-model="name"
|
||||
placeholder="{{ __('e.g., MacBook Pro, iPhone') }}"
|
||||
x-on:keydown.enter.prevent="register()"
|
||||
x-ref="passkeyNameInput"
|
||||
x-init="$nextTick(() => $refs.passkeyNameInput?.focus())"
|
||||
/>
|
||||
<flux:text class="!mt-1">{{ __('Give this passkey a name to help you identify it later.') }}</flux:text>
|
||||
|
||||
<p x-show="error" x-text="error" x-cloak class="text-sm text-red-600 dark:text-red-400"></p>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<flux:button
|
||||
variant="primary"
|
||||
x-on:click="register()"
|
||||
x-bind:disabled="loading || !name.trim()"
|
||||
>
|
||||
<span x-show="!loading">{{ __('Register passkey') }}</span>
|
||||
<span x-show="loading" x-cloak>{{ __('Registering...') }}</span>
|
||||
</flux:button>
|
||||
<flux:button
|
||||
variant="ghost"
|
||||
x-on:click="cancel()"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
@props([
|
||||
'optionsRoute' => 'passkey.login-options',
|
||||
'submitRoute' => 'passkey.login',
|
||||
'label' => __('Sign in with a passkey'),
|
||||
'loadingLabel' => __('Authenticating...'),
|
||||
'separator' => __('Or continue with email'),
|
||||
])
|
||||
|
||||
@assets
|
||||
@vite('resources/js/passkeys.js')
|
||||
@endassets
|
||||
|
||||
<div
|
||||
x-data="{
|
||||
supported: false,
|
||||
loading: false,
|
||||
error: null,
|
||||
updateSupport() {
|
||||
this.supported = Boolean(window.Passkeys?.isSupported());
|
||||
},
|
||||
init() {
|
||||
this.updateSupport();
|
||||
|
||||
window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
|
||||
},
|
||||
async verify() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const response = await window.Passkeys.verify({
|
||||
routes: {
|
||||
options: '{{ route($optionsRoute) }}',
|
||||
submit: '{{ route($submitRoute) }}',
|
||||
},
|
||||
});
|
||||
Livewire.navigate(response.redirect || '/dashboard');
|
||||
} catch (e) {
|
||||
if (e.constructor?.name !== 'UserCancelledError') {
|
||||
this.error = e.message;
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
}"
|
||||
>
|
||||
<template x-if="supported">
|
||||
<div>
|
||||
<div class="grid gap-2">
|
||||
<flux:button
|
||||
variant="outline"
|
||||
icon="finger-print"
|
||||
class="w-full"
|
||||
x-on:click="verify()"
|
||||
x-bind:disabled="loading"
|
||||
>
|
||||
<span x-show="!loading">{{ $label }}</span>
|
||||
<span x-show="loading" x-cloak>{{ $loadingLabel }}</span>
|
||||
</flux:button>
|
||||
<p x-show="error" x-text="error" x-cloak
|
||||
class="text-sm text-center text-red-600 dark:text-red-400"></p>
|
||||
</div>
|
||||
|
||||
<div class="relative my-6">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-zinc-200 dark:border-zinc-700"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 text-zinc-500 dark:text-zinc-400 bg-white dark:bg-zinc-900">
|
||||
{{ $separator }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="flex items-start max-md:flex-col">
|
||||
<div class="me-10 w-full pb-4 md:w-[220px]">
|
||||
<flux:navlist aria-label="{{ __('Settings') }}">
|
||||
<flux:navlist.item :href="route('profile.edit')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('security.edit')" wire:navigate>{{ __('Security') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('appearance.edit')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
|
||||
</flux:navlist>
|
||||
</div>
|
||||
|
||||
<flux:separator class="md:hidden" />
|
||||
|
||||
<div class="flex-1 self-stretch max-md:pt-6">
|
||||
<flux:heading>{{ $heading ?? '' }}</flux:heading>
|
||||
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
|
||||
|
||||
<div class="mt-5 w-full max-w-lg">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<x-layouts.auth :title="__('Confirm password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-stylist-theme-common::auth-header
|
||||
:title="__('Confirm password')"
|
||||
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
|
||||
/>
|
||||
|
||||
<x-stylist-theme-common::auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<x-stylist-theme-common::passkey-verify
|
||||
options-route="passkey.confirm-options"
|
||||
submit-route="passkey.confirm"
|
||||
:label="__('Confirm with passkey')"
|
||||
:loading-label="__('Confirming...')"
|
||||
:separator="__('Or confirm with password')"
|
||||
/>
|
||||
|
||||
<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>
|
||||
@@ -0,0 +1,31 @@
|
||||
<x-layouts.auth :title="__('Forgot password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-stylist-theme-common::auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-stylist-theme-common::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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<x-layouts.auth :title="__('Log in')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-stylist-theme-common::auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-stylist-theme-common::auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<x-stylist-theme-common::passkey-verify />
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</x-layouts.auth>
|
||||
@@ -0,0 +1,69 @@
|
||||
<x-layouts.auth :title="__('Register')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-stylist-theme-common::auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-stylist-theme-common::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')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<x-layouts.auth :title="__('Reset password')">
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-stylist-theme-common::auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-stylist-theme-common::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')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
viewable
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
name="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
|
||||
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>
|
||||
@@ -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-stylist-theme-common::auth-header
|
||||
:title="__('Authentication code')"
|
||||
:description="__('Enter the authentication code provided by your authenticator application.')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div x-show="showRecoveryInput">
|
||||
<x-stylist-theme-common::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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,13 @@
|
||||
<section class="w-full">
|
||||
@include('stylist-theme-common::partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Appearance settings') }}</flux:heading>
|
||||
|
||||
<x-stylist-theme-common::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-stylist-theme-common::settings.layout>
|
||||
</section>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,36 @@
|
||||
<section class="w-full">
|
||||
@include('stylist-theme-common::partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Profile settings') }}</flux:heading>
|
||||
|
||||
<x-stylist-theme-common::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-stylist-theme-common::settings.layout>
|
||||
</section>
|
||||
@@ -0,0 +1,327 @@
|
||||
<section class="w-full">
|
||||
@include('stylist-theme-common::partials.settings-heading')
|
||||
|
||||
<flux:heading class="sr-only">{{ __('Security settings') }}</flux:heading>
|
||||
|
||||
<x-stylist-theme-common::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
|
||||
<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
|
||||
|
||||
@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-stylist-theme-common::passkey-registration />
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</x-stylist-theme-common::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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,15 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>
|
||||
{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}
|
||||
</title>
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
@fonts
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@fluxAppearance
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="relative mb-6 w-full">
|
||||
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
|
||||
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
|
||||
<flux:separator variant="subtle" />
|
||||
</div>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1 @@
|
||||
// Theme JavaScript is intentionally minimal; Alpine is supplied by the Laravel application bundle.
|
||||
@@ -0,0 +1,101 @@
|
||||
{
|
||||
"name": "Swiss",
|
||||
"slug": "swiss",
|
||||
"version": "1.1.0",
|
||||
"author": "ABSDEV",
|
||||
"description": "Dark Marketing theme with integrated feature, pricing, privacy and terms sections.",
|
||||
"entry_view": "home",
|
||||
"stylesheet": "css/theme.css",
|
||||
"script": "js/app.js",
|
||||
"preview": "images/preview.webp",
|
||||
"type": "frontend",
|
||||
"views": true,
|
||||
"livewire_views": true,
|
||||
"supports": {
|
||||
"dark_mode": true,
|
||||
"animations": true,
|
||||
"privacy": true,
|
||||
"terms": true,
|
||||
"auth": false,
|
||||
"preview": true,
|
||||
"variants": true,
|
||||
"settings": true,
|
||||
"seo": true,
|
||||
"export": true,
|
||||
"accessibility_validation": true
|
||||
},
|
||||
"variables": {
|
||||
"brand-primary": "#f97316",
|
||||
"brand-secondary": "#111111",
|
||||
"brand-accent": "#fb923c",
|
||||
"surface": "#0f0e0d",
|
||||
"surface-muted": "#191714",
|
||||
"text-primary": "#f7f3ef"
|
||||
},
|
||||
"variants": {
|
||||
"light": {
|
||||
"label": "Light",
|
||||
"variables": {}
|
||||
},
|
||||
"dark": {
|
||||
"label": "Dark",
|
||||
"variables": {
|
||||
"surface": "#0f172a",
|
||||
"surface-muted": "#111827",
|
||||
"text-primary": "#f8fafc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"site_title": {
|
||||
"type": "text",
|
||||
"label": "Site title",
|
||||
"default": "Saasland"
|
||||
},
|
||||
"site_description": {
|
||||
"type": "text",
|
||||
"label": "Site description",
|
||||
"default": "Dark SaaS marketing theme with integrated feature, pricing, privacy and terms sections."
|
||||
},
|
||||
"logo_url": {
|
||||
"type": "url",
|
||||
"label": "Logo URL",
|
||||
"default": ""
|
||||
},
|
||||
"--brand-primary": {
|
||||
"type": "color",
|
||||
"label": "Primary colour",
|
||||
"default": "#f97316"
|
||||
},
|
||||
"hero_title": {
|
||||
"type": "text",
|
||||
"label": "Hero title",
|
||||
"default": ""
|
||||
},
|
||||
"facebook_url": {
|
||||
"type": "url",
|
||||
"label": "Facebook URL",
|
||||
"default": ""
|
||||
},
|
||||
"x_url": {
|
||||
"type": "url",
|
||||
"label": "X URL",
|
||||
"default": ""
|
||||
},
|
||||
"linkedin_url": {
|
||||
"type": "url",
|
||||
"label": "LinkedIn URL",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"seo": {
|
||||
"title": "Saasland",
|
||||
"description": "Dark SaaS marketing theme with integrated feature, pricing, privacy and terms sections.",
|
||||
"image": "images/preview.webp",
|
||||
"json_ld": {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "Saasland"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,444 @@
|
||||
@push('theme-head')
|
||||
<meta name="description" content="Transform your business with a modern SaaS platform.">
|
||||
@endpush
|
||||
|
||||
<div class="saasland-theme" x-data="{ menuOpen: false, openFaq: null }">
|
||||
<header class="nav">
|
||||
<a href="/" class="logo">Saasland</a>
|
||||
|
||||
<nav aria-label="Primary navigation">
|
||||
<a href="#features">Features</a>
|
||||
<a href="#roadmap">Roadmap</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
<a href="#privacy">Privacy</a>
|
||||
<a href="#terms">Terms</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
class="menu"
|
||||
type="button"
|
||||
aria-label="Toggle navigation"
|
||||
:aria-expanded="menuOpen"
|
||||
@click="menuOpen = ! menuOpen"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="mobile-nav" x-show="menuOpen" x-cloak>
|
||||
<a href="#features" @click="menuOpen = false">Features</a>
|
||||
<a href="#roadmap" @click="menuOpen = false">Roadmap</a>
|
||||
<a href="#pricing" @click="menuOpen = false">Pricing</a>
|
||||
<a href="#privacy" @click="menuOpen = false">Privacy</a>
|
||||
<a href="#terms" @click="menuOpen = false">Terms</a>
|
||||
<a href="#contact" @click="menuOpen = false">Contact</a>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="glow one"></div>
|
||||
<div class="glow two"></div>
|
||||
|
||||
<div class="wrap hero-inner">
|
||||
<span class="eyebrow">Introducing Saasland 2.0</span>
|
||||
|
||||
<h1>
|
||||
Transform Your Business With Our
|
||||
<span>SaaS Solution</span>
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
Streamline operations, boost productivity, and improve customer satisfaction
|
||||
with one connected platform built for modern teams.
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn primary" href="#pricing">Get Started Free →</a>
|
||||
<a class="btn secondary" href="#contact">Book Demo</a>
|
||||
</div>
|
||||
|
||||
<div class="trust">
|
||||
<div class="avatars" aria-hidden="true">
|
||||
<i>A</i>
|
||||
<i>B</i>
|
||||
<i>C</i>
|
||||
</div>
|
||||
<small><b>500+</b> businesses already use our platform</small>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="dash-top">
|
||||
<b>Performance overview</b>
|
||||
<span>Live</span>
|
||||
</div>
|
||||
|
||||
<div class="metrics">
|
||||
<article>
|
||||
<small>Monthly revenue</small>
|
||||
<strong>£48,240</strong>
|
||||
<em>+18.4%</em>
|
||||
</article>
|
||||
<article>
|
||||
<small>Active users</small>
|
||||
<strong>12,842</strong>
|
||||
<em>+9.2%</em>
|
||||
</article>
|
||||
<article>
|
||||
<small>Conversion</small>
|
||||
<strong>7.8%</strong>
|
||||
<em>+2.1%</em>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="chart" aria-label="Performance chart">
|
||||
<i style="height: 28%"></i>
|
||||
<i style="height: 42%"></i>
|
||||
<i style="height: 35%"></i>
|
||||
<i style="height: 62%"></i>
|
||||
<i style="height: 54%"></i>
|
||||
<i style="height: 78%"></i>
|
||||
<i style="height: 92%"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="features">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<span>Powerful features</span>
|
||||
<h2>Everything your team needs to grow</h2>
|
||||
<p>
|
||||
Move faster with flexible tools that bring planning, collaboration,
|
||||
reporting, and customer insight into one workspace.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid three">
|
||||
<article class="card">
|
||||
<b>01</b>
|
||||
<h3>Smart automation</h3>
|
||||
<p>Automate routine processes and let your team focus on work that creates value.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<b>02</b>
|
||||
<h3>Real-time analytics</h3>
|
||||
<p>Understand performance instantly with useful dashboards and actionable reporting.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<b>03</b>
|
||||
<h3>Team collaboration</h3>
|
||||
<p>Keep discussions, decisions, documents, and delivery aligned in one place.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<b>04</b>
|
||||
<h3>Secure by design</h3>
|
||||
<p>Protect business data with robust access controls and dependable infrastructure.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<b>05</b>
|
||||
<h3>Easy integrations</h3>
|
||||
<p>Connect the services you already use without rebuilding your existing workflow.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<b>06</b>
|
||||
<h3>Priority support</h3>
|
||||
<p>Get expert assistance when you need it from a team that understands your goals.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt" id="roadmap">
|
||||
<div class="wrap split">
|
||||
<div>
|
||||
<span class="section-label">Built for momentum</span>
|
||||
<h2>From first idea to measurable growth</h2>
|
||||
<p>
|
||||
Launch quickly, learn from every interaction, and scale with confidence
|
||||
using a platform designed around clear outcomes.
|
||||
</p>
|
||||
<ul class="checks">
|
||||
<li>Fast, guided onboarding</li>
|
||||
<li>Custom workflows for every team</li>
|
||||
<li>Live performance and usage insight</li>
|
||||
<li>Enterprise-ready controls</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="roadmap">
|
||||
<article>
|
||||
<span>01</span>
|
||||
<div>
|
||||
<h3>Connect</h3>
|
||||
<p>Bring your data and tools together.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<span>02</span>
|
||||
<div>
|
||||
<h3>Automate</h3>
|
||||
<p>Remove repetitive work and delays.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article>
|
||||
<span>03</span>
|
||||
<div>
|
||||
<h3>Optimise</h3>
|
||||
<p>Use evidence to improve every cycle.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="pricing">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<span>Simple pricing</span>
|
||||
<h2>Choose a plan that fits</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid three pricing">
|
||||
<article class="card plan">
|
||||
<h3>Starter</h3>
|
||||
<strong>£19<small>/month</small></strong>
|
||||
<p>For individuals and small teams getting started.</p>
|
||||
<ul>
|
||||
<li>5 team members</li>
|
||||
<li>Core analytics</li>
|
||||
<li>Email support</li>
|
||||
</ul>
|
||||
<a class="btn secondary" href="#contact">Start free</a>
|
||||
</article>
|
||||
|
||||
<article class="card plan featured">
|
||||
<div class="popular">Most popular</div>
|
||||
<h3>Growth</h3>
|
||||
<strong>£49<small>/month</small></strong>
|
||||
<p>For growing businesses that need more control.</p>
|
||||
<ul>
|
||||
<li>25 team members</li>
|
||||
<li>Advanced analytics</li>
|
||||
<li>Automations</li>
|
||||
<li>Priority support</li>
|
||||
</ul>
|
||||
<a class="btn primary" href="#contact">Choose Growth</a>
|
||||
</article>
|
||||
|
||||
<article class="card plan">
|
||||
<h3>Scale</h3>
|
||||
<strong>Custom</strong>
|
||||
<p>For established organisations with complex needs.</p>
|
||||
<ul>
|
||||
<li>Unlimited members</li>
|
||||
<li>Custom integrations</li>
|
||||
<li>Dedicated success manager</li>
|
||||
</ul>
|
||||
<a class="btn secondary" href="#contact">Contact sales</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<span>Customer stories</span>
|
||||
<h2>Trusted by ambitious teams</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid three">
|
||||
<blockquote class="card">
|
||||
“Saasland gave us one clear view of the business and cut reporting time dramatically.”
|
||||
<footer>Alex Morgan · Northstar</footer>
|
||||
</blockquote>
|
||||
<blockquote class="card">
|
||||
“Our onboarding is faster, our handoffs are cleaner, and the team finally works from the same data.”
|
||||
<footer>Priya Shah · Lumina</footer>
|
||||
</blockquote>
|
||||
<blockquote class="card">
|
||||
“We launched in days and had enough insight to improve conversion in the first month.”
|
||||
<footer>Daniel Reed · Orbit</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="wrap faq">
|
||||
<div>
|
||||
<span class="section-label">FAQ</span>
|
||||
<h2>Answers before you begin</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<article>
|
||||
<button type="button" @click="openFaq = openFaq === 1 ? null : 1">
|
||||
Can I try Saasland free?
|
||||
<span>+</span>
|
||||
</button>
|
||||
<p x-show="openFaq === 1">
|
||||
Yes. Start with a free trial and move to a paid plan when your team is ready.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<button type="button" @click="openFaq = openFaq === 2 ? null : 2">
|
||||
Can I change plans later?
|
||||
<span>+</span>
|
||||
</button>
|
||||
<p x-show="openFaq === 2">
|
||||
You can upgrade or change your plan as your requirements evolve.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<button type="button" @click="openFaq = openFaq === 3 ? null : 3">
|
||||
Does it integrate with existing tools?
|
||||
<span>+</span>
|
||||
</button>
|
||||
<p x-show="openFaq === 3">
|
||||
Yes. Saasland is designed to connect with common business platforms and custom services.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section alt legal-area" id="privacy">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<span>Privacy</span>
|
||||
<h2>Your data, handled responsibly</h2>
|
||||
<p>
|
||||
We collect only the information needed to provide, secure, and improve
|
||||
Saasland. We do not sell your personal information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid three legal-grid">
|
||||
<article class="card legal-card">
|
||||
<b>01</b>
|
||||
<h3>Information we collect</h3>
|
||||
<p>
|
||||
Account details, contact information, billing records, product usage,
|
||||
support messages, and technical data such as browser and device details.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card legal-card">
|
||||
<b>02</b>
|
||||
<h3>How we use it</h3>
|
||||
<p>
|
||||
To operate the service, process payments, protect accounts, provide
|
||||
support, improve features, and meet legal obligations.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card legal-card">
|
||||
<b>03</b>
|
||||
<h3>Your choices</h3>
|
||||
<p>
|
||||
You may request access, correction, export, or deletion of your data,
|
||||
and you can change communication preferences at any time.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="legal-note">
|
||||
<strong>Privacy contact</strong>
|
||||
<p>
|
||||
Questions about privacy can be sent to
|
||||
<a href="mailto:privacy@example.com">privacy@example.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section legal-area" id="terms">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<span>Terms</span>
|
||||
<h2>Clear terms for using Saasland</h2>
|
||||
<p>
|
||||
By creating an account or using the service, you agree to use Saasland
|
||||
lawfully and in accordance with these core terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid three legal-grid">
|
||||
<article class="card legal-card">
|
||||
<b>01</b>
|
||||
<h3>Account responsibilities</h3>
|
||||
<p>
|
||||
Keep account details accurate, protect login credentials, and ensure
|
||||
activity under your account follows applicable laws and these terms.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card legal-card">
|
||||
<b>02</b>
|
||||
<h3>Subscriptions and billing</h3>
|
||||
<p>
|
||||
Paid plans renew according to the selected billing period. Fees are due
|
||||
when stated and plan changes take effect under the displayed terms.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="card legal-card">
|
||||
<b>03</b>
|
||||
<h3>Acceptable use</h3>
|
||||
<p>
|
||||
Do not misuse the platform, interfere with service availability, access
|
||||
data without permission, or use Saasland for unlawful activity.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="legal-note">
|
||||
<strong>Legal contact</strong>
|
||||
<p>
|
||||
Questions about these terms can be sent to
|
||||
<a href="mailto:legal@example.com">legal@example.com</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta" id="contact">
|
||||
<div class="wrap">
|
||||
<h2>Ready to transform your business?</h2>
|
||||
<p>Start building a faster, more connected operation today.</p>
|
||||
<a class="btn light" href="/register">Get started free →</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrap footer-grid">
|
||||
<div>
|
||||
<a class="logo" href="/">Saasland</a>
|
||||
<p>Modern software for modern companies.</p>
|
||||
</div>
|
||||
<div>
|
||||
<b>Product</b>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#pricing">Pricing</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>Company</b>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#">About</a>
|
||||
</div>
|
||||
<div>
|
||||
<b>Legal</b>
|
||||
<a href="#privacy">Privacy</a>
|
||||
<a href="#terms">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap copyright">
|
||||
© {{ date('Y') }} Saasland. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
[data-theme="flatly"] {
|
||||
--brand-primary: #2563eb;
|
||||
--brand-secondary: #0f172a;
|
||||
--brand-accent: #22c55e;
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #f8fafc;
|
||||
--text-primary: #0f172a;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1 @@
|
||||
// Theme-specific JavaScript entry point.
|
||||
@@ -0,0 +1,100 @@
|
||||
{
|
||||
"name": "Welcome",
|
||||
"slug": "welcome",
|
||||
"extends": "common",
|
||||
"version": "1.1.2",
|
||||
"author": "ABSDEV",
|
||||
"description": "Laravel 13 welcome theme.",
|
||||
"entry_view": "welcome",
|
||||
"stylesheet": "css/theme.css",
|
||||
"script": "js/app.js",
|
||||
"type": "frontend",
|
||||
"views": true,
|
||||
"livewire_views": true,
|
||||
"supports": {
|
||||
"dark_mode": false,
|
||||
"animations": false,
|
||||
"auth": false,
|
||||
"preview": true,
|
||||
"variants": true,
|
||||
"settings": false,
|
||||
"seo": true,
|
||||
"export": true,
|
||||
"accessibility_validation": true
|
||||
},
|
||||
"variables": {
|
||||
"brand-primary": "#2563eb",
|
||||
"brand-secondary": "#0f172a",
|
||||
"brand-accent": "#22c55e",
|
||||
"surface": "#ffffff",
|
||||
"surface-muted": "#f8fafc",
|
||||
"text-primary": "#0f172a"
|
||||
},
|
||||
"preview": "images/preview.webp",
|
||||
"variants": {
|
||||
"light": {
|
||||
"label": "Light",
|
||||
"variables": {}
|
||||
},
|
||||
"dark": {
|
||||
"label": "Dark",
|
||||
"variables": {
|
||||
"surface": "#0f172a",
|
||||
"surface-muted": "#111827",
|
||||
"text-primary": "#f8fafc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"site_title": {
|
||||
"type": "text",
|
||||
"label": "Site title",
|
||||
"default": "Welcome"
|
||||
},
|
||||
"site_description": {
|
||||
"type": "text",
|
||||
"label": "Site description",
|
||||
"default": "Laravel 13 welcome theme."
|
||||
},
|
||||
"logo_url": {
|
||||
"type": "url",
|
||||
"label": "Logo URL",
|
||||
"default": ""
|
||||
},
|
||||
"--brand-primary": {
|
||||
"type": "color",
|
||||
"label": "Primary colour",
|
||||
"default": "#2563eb"
|
||||
},
|
||||
"hero_title": {
|
||||
"type": "text",
|
||||
"label": "Hero title",
|
||||
"default": ""
|
||||
},
|
||||
"facebook_url": {
|
||||
"type": "url",
|
||||
"label": "Facebook URL",
|
||||
"default": ""
|
||||
},
|
||||
"x_url": {
|
||||
"type": "url",
|
||||
"label": "X URL",
|
||||
"default": ""
|
||||
},
|
||||
"linkedin_url": {
|
||||
"type": "url",
|
||||
"label": "LinkedIn URL",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"seo": {
|
||||
"title": "Welcome",
|
||||
"description": "Laravel 13 welcome theme.",
|
||||
"image": "images/preview.webp",
|
||||
"json_ld": {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "Welcome"
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user