From fe6726ada0535d6feb1952ef8869d9c41ad43904 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 29 Mar 2026 06:53:48 +0000
Subject: [PATCH] feat: restyle auth layout into a modern split-screen design

- updated `auth.blade.php` to use a flexible 2-column split-screen layout similar to modern admin dashboards.
- replaced the old `.login-box-msg` with bold typography.
- removed AdminLTE `.card-outline` and `.card-primary` classes from individual auth forms (`login`, `register`, `forgot-password`, `reset-password`, `verification-notice`) to seamlessly integrate with the new layout style.
- implemented `setting('auth_image')` configuration support for the left-side cover image with a gradient overlay.

Co-authored-by: juzaweb <47020363+juzaweb@users.noreply.github.com>
---
 .../components/must-verification.blade.php    |   2 +-
 .../views/auth/forgot-password.blade.php      |   4 +-
 src/resources/views/auth/login.blade.php      |   4 +-
 src/resources/views/auth/register.blade.php   |   4 +-
 .../views/auth/reset-password.blade.php       |   4 +-
 .../views/auth/verification-notice.blade.php  |   4 +-
 src/resources/views/layouts/auth.blade.php    | 126 +++++++++++++++++-
 7 files changed, 130 insertions(+), 18 deletions(-)

diff --git a/src/resources/views/auth/components/must-verification.blade.php b/src/resources/views/auth/components/must-verification.blade.php
index 3e119dc7..0cff64f5 100644
--- a/src/resources/views/auth/components/must-verification.blade.php
+++ b/src/resources/views/auth/components/must-verification.blade.php
@@ -1 +1 @@
-<p class="login-box-msg">{{ __('core::translation.please_verify_your_email_address') }}</p>
+<p class="login-box-msg font-weight-bold">{{ __('core::translation.please_verify_your_email_address') }}</p>
diff --git a/src/resources/views/auth/forgot-password.blade.php b/src/resources/views/auth/forgot-password.blade.php
index b853b7ee..ce22354f 100644
--- a/src/resources/views/auth/forgot-password.blade.php
+++ b/src/resources/views/auth/forgot-password.blade.php
@@ -1,9 +1,9 @@
 @extends('core::layouts.auth')
 
 @section('content')
-    <div class="card card-outline card-primary">
+    <div class="card">
         <div class="card-body">
-            <p class="login-box-msg">{{ __('core::translation.enter_your_email_to_reset_password') }}</p>
+            <p class="login-box-msg font-weight-bold">{{ __('core::translation.enter_your_email_to_reset_password') }}</p>
 
             @if (session('success'))
                 <div class="alert alert-success">
diff --git a/src/resources/views/auth/login.blade.php b/src/resources/views/auth/login.blade.php
index 4c0de79b..f07671dd 100644
--- a/src/resources/views/auth/login.blade.php
+++ b/src/resources/views/auth/login.blade.php
@@ -1,9 +1,9 @@
 @extends('core::layouts.auth')
 
 @section('content')
-    <div class="card card-outline card-primary">
+    <div class="card">
         <div class="card-body">
-            <p class="login-box-msg">{{ __('core::translation.sign_in_to_start_your_session') }}</p>
+            <p class="login-box-msg font-weight-bold">{{ __('core::translation.sign_in_to_start_your_session') }}</p>
 
             @if (session('success'))
                 <div class="alert alert-success">
diff --git a/src/resources/views/auth/register.blade.php b/src/resources/views/auth/register.blade.php
index ec29b5f2..54d7b74c 100644
--- a/src/resources/views/auth/register.blade.php
+++ b/src/resources/views/auth/register.blade.php
@@ -1,9 +1,9 @@
 @extends('core::layouts.auth')
 
 @section('content')
-    <div class="card card-outline card-primary">
+    <div class="card">
         <div class="card-body" id="register-form">
-            <p class="login-box-msg">{{ __('core::translation.sign_up_new_a_account') }}</p>
+            <p class="login-box-msg font-weight-bold">{{ __('core::translation.sign_up_new_a_account') }}</p>
 
             <div id="jquery-message"></div>
 
diff --git a/src/resources/views/auth/reset-password.blade.php b/src/resources/views/auth/reset-password.blade.php
index 89d7748d..2c187720 100644
--- a/src/resources/views/auth/reset-password.blade.php
+++ b/src/resources/views/auth/reset-password.blade.php
@@ -1,9 +1,9 @@
 @extends('core::layouts.auth')
 
 @section('content')
-    <div class="card card-outline card-primary">
+    <div class="card">
         <div class="card-body">
-            <p class="login-box-msg">{{ __('core::translation.enter_your_email_to_reset_password') }}</p>
+            <p class="login-box-msg font-weight-bold">{{ __('core::translation.enter_your_email_to_reset_password') }}</p>
 
             @if (session('success'))
                 <div class="alert alert-success">
diff --git a/src/resources/views/auth/verification-notice.blade.php b/src/resources/views/auth/verification-notice.blade.php
index 0a0e92fd..4484b3d8 100644
--- a/src/resources/views/auth/verification-notice.blade.php
+++ b/src/resources/views/auth/verification-notice.blade.php
@@ -1,9 +1,9 @@
 @extends('core::layouts.auth')
 
 @section('content')
-    <div class="card card-outline card-primary">
+    <div class="card">
         <div class="card-body">
-            <p class="login-box-msg">{{ __('core::translation.please_verify_your_email_address') }}</p>
+            <p class="login-box-msg font-weight-bold">{{ __('core::translation.please_verify_your_email_address') }}</p>
 
             @if (session('success'))
                 <div class="alert alert-success">
diff --git a/src/resources/views/layouts/auth.blade.php b/src/resources/views/layouts/auth.blade.php
index 58bd7964..cce6db4c 100644
--- a/src/resources/views/layouts/auth.blade.php
+++ b/src/resources/views/layouts/auth.blade.php
@@ -22,22 +22,134 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/css/flag-icons.min.css">
     <link rel="stylesheet" href="{{ mix('css/vendor.min.css', 'juzaweb') }}">
     <link rel="stylesheet" href="{{ mix('css/admin.min.css', 'juzaweb') }}">
+    <style>
+        .auth-layout {
+            display: flex;
+            min-height: 100vh;
+            background-color: var(--bg-primary, #f4f6f9);
+        }
+        .auth-image {
+            display: none;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            position: relative;
+        }
+        @media (min-width: 992px) {
+            .auth-image {
+                display: flex;
+                flex: 1;
+            }
+            .auth-form-wrapper {
+                flex: 0 0 500px;
+            }
+        }
+        .auth-form-wrapper {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 2rem;
+            background-color: var(--bg-secondary, #ffffff);
+            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05);
+        }
+        .auth-logo {
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        .auth-logo a {
+            color: var(--text-primary, #333);
+            text-decoration: none;
+        }
+        .auth-image-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
+            z-index: 1;
+        }
+        .auth-image-content {
+            position: relative;
+            z-index: 2;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 4rem;
+            color: white;
+            width: 100%;
+        }
+        .auth-image-content h1 {
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 1rem;
+        }
+        .auth-image-content p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            max-width: 600px;
+        }
+        .login-box {
+            width: 100%;
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        .login-box .card {
+            box-shadow: none !important;
+            border: none !important;
+            background: transparent;
+        }
+        .login-box .card-body {
+            padding: 0;
+        }
+        .login-box-msg {
+            padding: 0 0 20px 0;
+            margin: 0;
+            text-align: center;
+            font-size: 1.1rem;
+            color: var(--text-secondary, #6c757d);
+        }
+    </style>
 </head>
-<body class="hold-transition login-page">
+<body class="hold-transition">
 <div id="admin-overlay">
     <div class="cv-spinner">
         <span class="spinner"></span>
     </div>
 </div>
-<div class="login-box">
-    <div class="login-logo">
-        <a href="/"><b>Juza</b>web</a>
+
+<div class="auth-layout">
+    @php
+        $bgImage = setting('auth_image') ? upload_url(setting('auth_image')) : asset('juzaweb/images/auth-bg.jpg');
+    @endphp
+    <div class="auth-image" style="background-image: url('{{ $bgImage }}');">
+        <div class="auth-image-overlay"></div>
+        <div class="auth-image-content">
+            <h1>{{ setting('title', 'Juzaweb CMS') }}</h1>
+            <p>{{ setting('description', 'The best CMS for Laravel') }}</p>
+        </div>
     </div>
-    <!-- /.login-logo -->
 
-    @yield('content')
+    <div class="auth-form-wrapper">
+        <div class="login-box">
+            <div class="auth-logo">
+                <a href="/">
+                    @if($logo = setting('logo'))
+                        <img src="{{ upload_url($logo) }}" alt="{{ setting('title') }}" style="max-height: 60px;">
+                    @else
+                        <b>Juza</b>web
+                    @endif
+                </a>
+            </div>
+
+            @yield('content')
+        </div>
+    </div>
 </div>
-<!-- /.login-box -->
 
 <x-js-var />