feat: add dynamic logo and login cover images via system settings and clean up legacy role migration logic

This commit is contained in:
Yoga Pangestu 2026-06-14 02:05:35 +07:00
parent f0cc242c7e
commit 26463c02a3
4 changed files with 37 additions and 32 deletions

View File

@ -2,6 +2,7 @@
namespace App\Http\Middleware; namespace App\Http\Middleware;
use App\Services\System\Setting\SystemService;
use App\Settings\SystemSettings; use App\Settings\SystemSettings;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Inertia\Middleware; use Inertia\Middleware;
@ -40,6 +41,8 @@ public function share(Request $request): array
...parent::share($request), ...parent::share($request),
'name' => fn () => app(SystemSettings::class)->app_name, 'name' => fn () => app(SystemSettings::class)->app_name,
'address' => fn () => app(SystemSettings::class)->address, 'address' => fn () => app(SystemSettings::class)->address,
'logo_url' => fn () => app(SystemService::class)->systemData()['logo_url'] ?? asset('assets/logo.png'),
'login_cover_url' => fn () => app(SystemService::class)->systemData()['login_cover_url'] ?? null,
'auth' => fn () => [ 'auth' => fn () => [
'user' => $request->user() ? [ 'user' => $request->user() ? [
'id' => $request->user()->id, 'id' => $request->user()->id,

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useForm } from '@inertiajs/vue3'; import { useForm, usePage } from '@inertiajs/vue3';
import { Eye, EyeOff } from '@lucide/vue'; import { Eye, EyeOff } from '@lucide/vue';
import { ref } from 'vue'; import { ref } from 'vue';
import type {HTMLAttributes} from 'vue'; import type {HTMLAttributes} from 'vue';
@ -22,6 +22,8 @@ const props = defineProps<{
class?: HTMLAttributes['class']; class?: HTMLAttributes['class'];
}>(); }>();
const page = usePage();
const showPassword = ref(false); const showPassword = ref(false);
const form = useForm({ const form = useForm({
@ -129,7 +131,7 @@ function submit() {
</form> </form>
<div class="relative hidden bg-muted md:block"> <div class="relative hidden bg-muted md:block">
<img <img
src="https://images.pexels.com/photos/37080685/pexels-photo-37080685.jpeg" :src="page.props.login_cover_url || 'https://images.pexels.com/photos/37080685/pexels-photo-37080685.jpeg'"
alt="Image" alt="Image"
class="absolute inset-0 h-full w-full object-cover" class="absolute inset-0 h-full w-full object-cover"
/> />

View File

@ -25,6 +25,8 @@ declare module '@inertiajs/core' {
}; };
sidebarOpen: boolean; sidebarOpen: boolean;
appearance: 'light' | 'dark' | 'system'; appearance: 'light' | 'dark' | 'system';
logo_url: string | null;
login_cover_url: string | null;
[key: string]: unknown; [key: string]: unknown;
}; };
} }

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
<head> <head>
<script> <script>
(function() { (function() {
const appearance = @json($appearance ?? 'system'); const appearance = @json($appearance ?? 'system');
@ -20,9 +20,7 @@
<meta name="description" content="{{ config('app.name', 'Laravel') }} - Progressive Web App"> <meta name="description" content="{{ config('app.name', 'Laravel') }} - Progressive Web App">
<meta name="theme-color" content="#171717"> <meta name="theme-color" content="#171717">
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="{{ $page['props']['logo_url'] ?? asset('assets/logo.png') }}" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" sizes="180x180">
<link rel="manifest" href="/build/manifest.webmanifest"> <link rel="manifest" href="/build/manifest.webmanifest">
@fonts @fonts
@ -31,10 +29,10 @@
<x-inertia::head> <x-inertia::head>
<title>{{ config('app.name', 'Laravel') }}</title> <title>{{ config('app.name', 'Laravel') }}</title>
</x-inertia::head> </x-inertia::head>
</head> </head>
<body class="font-sans antialiased"> <body class="font-sans antialiased">
<x-inertia::app /> <x-inertia::app />
</body> </body>
</html> </html>