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;
use App\Services\System\Setting\SystemService;
use App\Settings\SystemSettings;
use Illuminate\Http\Request;
use Inertia\Middleware;
@ -40,6 +41,8 @@ public function share(Request $request): array
...parent::share($request),
'name' => fn () => app(SystemSettings::class)->app_name,
'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 () => [
'user' => $request->user() ? [
'id' => $request->user()->id,

View File

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

View File

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

View File

@ -1,40 +1,38 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])>
<head>
<script>
(function() {
const appearance = @json($appearance ?? 'system');
<head>
<script>
(function() {
const appearance = @json($appearance ?? 'system');
if (appearance === 'dark' || (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)')
.matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="description" content="{{ config('app.name', 'Laravel') }} - Progressive Web App">
<meta name="theme-color" content="#171717">
if (appearance === 'dark' || (appearance === 'system' && window.matchMedia('(prefers-color-scheme: dark)')
.matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
})();
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="description" content="{{ config('app.name', 'Laravel') }} - Progressive Web App">
<meta name="theme-color" content="#171717">
<link rel="icon" href="/favicon.ico" 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="icon" href="{{ $page['props']['logo_url'] ?? asset('assets/logo.png') }}" sizes="any">
<link rel="manifest" href="/build/manifest.webmanifest">
@fonts
@fonts
@vite(['resources/css/app.css', 'resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
<x-inertia::head>
<title>{{ config('app.name', 'Laravel') }}</title>
</x-inertia::head>
</head>
@vite(['resources/css/app.css', 'resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
<x-inertia::head>
<title>{{ config('app.name', 'Laravel') }}</title>
</x-inertia::head>
</head>
<body class="font-sans antialiased">
<x-inertia::app />
</body>
<body class="font-sans antialiased">
<x-inertia::app />
</body>
</html>