wip

app/Providers/AppServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\Vite;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -19,6 +20,15 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        Vite::useStyleTagAttributes(function (?string $src, string $url, ?array $chunk, ?array $manifest) {
+            if ($src !== null) {
+                return [
+                    'class' => preg_match("/(resources\/assets\/vendor\/scss\/(rtl\/)?core)-?.*/i", $src) ? 'template-customizer-core-css' :
+                        (preg_match("/(resources\/assets\/vendor\/scss\/(rtl\/)?theme)-?.*/i", $src) ? 'template-customizer-theme-css' : ''),
+                ];
+            }
+
+            return [];
+        });
     }
 }

app/Services/ThemeHelper.php

@@ -0,0 +1,227 @@
+<?php
+
+namespace App\Services;
+
+use Illuminate\Support\Facades\Config;
+use Illuminate\Support\Str;
+
+class ThemeHelper
+{
+    public static function appClasses(): array
+    {
+
+        $data = config('custom.custom');
+
+        // default data array
+        $DefaultData = [
+            'myLayout' => 'vertical',
+            'myTheme' => 'theme-default',
+            'myStyle' => 'light',
+            'myRTLSupport' => true,
+            'myRTLMode' => true,
+            'hasCustomizer' => true,
+            'showDropdownOnHover' => true,
+            'displayCustomizer' => true,
+            'contentLayout' => 'compact',
+            'headerType' => 'fixed',
+            'navbarType' => 'fixed',
+            'menuFixed' => true,
+            'menuCollapsed' => false,
+            'footerFixed' => false,
+            'menuFlipped' => false,
+            // 'menuOffcanvas' => false,
+            'customizerControls' => [
+                'rtl',
+                'style',
+                'headerType',
+                'contentLayout',
+                'layoutCollapsed',
+                'showDropdownOnHover',
+                'layoutNavbarOptions',
+                'themes',
+            ],
+            //   'defaultLanguage'=>'en',
+        ];
+
+        // if any key missing of array from custom.php file it will be merge and set a default value from dataDefault array and store in data variable
+        $data = array_merge($DefaultData, $data);
+
+        // All options available in the template
+        $allOptions = [
+            'myLayout' => ['vertical', 'horizontal', 'blank', 'front'],
+            'menuCollapsed' => [true, false],
+            'hasCustomizer' => [true, false],
+            'showDropdownOnHover' => [true, false],
+            'displayCustomizer' => [true, false],
+            'contentLayout' => ['compact', 'wide'],
+            'headerType' => ['fixed', 'static'],
+            'navbarType' => ['fixed', 'static', 'hidden'],
+            'myStyle' => ['light', 'dark', 'system'],
+            'myTheme' => ['theme-default', 'theme-bordered', 'theme-semi-dark'],
+            'myRTLSupport' => [true, false],
+            'myRTLMode' => [true, false],
+            'menuFixed' => [true, false],
+            'footerFixed' => [true, false],
+            'menuFlipped' => [true, false],
+            // 'menuOffcanvas' => [true, false],
+            'customizerControls' => [],
+            // 'defaultLanguage'=>array('en'=>'en','fr'=>'fr','de'=>'de','ar'=>'ar'),
+        ];
+
+        // if myLayout value empty or not match with default options in custom.php config file then set a default value
+        foreach ($allOptions as $key => $value) {
+            if (array_key_exists($key, $DefaultData)) {
+                if (gettype($DefaultData[$key]) === gettype($data[$key])) {
+                    // data key should be string
+                    if (is_string($data[$key])) {
+                        // data key should not be empty
+                        if (isset($data[$key]) && $data[$key] !== null) {
+                            // data key should not be exist inside allOptions array's sub array
+                            if (! array_key_exists($data[$key], $value)) {
+                                // ensure that passed value should be match with any of allOptions array value
+                                $result = array_search($data[$key], $value, 'strict');
+                                if (empty($result) && $result !== 0) {
+                                    $data[$key] = $DefaultData[$key];
+                                }
+                            }
+                        } else {
+                            // if data key not set or
+                            $data[$key] = $DefaultData[$key];
+                        }
+                    }
+                } else {
+                    $data[$key] = $DefaultData[$key];
+                }
+            }
+        }
+        $styleVal = $data['myStyle'] == 'dark' ? 'dark' : 'light';
+        $styleUpdatedVal = $data['myStyle'] == 'dark' ? 'dark' : $data['myStyle'];
+        // Determine if the layout is admin or front based on cookies
+        $layoutName = $data['myLayout'];
+        $isAdmin = Str::contains($layoutName, 'front') ? false : true;
+
+        $modeCookieName = $isAdmin ? 'admin-mode' : 'front-mode';
+        $colorPrefCookieName = $isAdmin ? 'admin-colorPref' : 'front-colorPref';
+
+        // Determine style based on cookies, only if not 'blank-layout'
+        if ($layoutName !== 'blank') {
+            if (isset($_COOKIE[$modeCookieName])) {
+                $styleVal = $_COOKIE[$modeCookieName];
+                if ($styleVal === 'system') {
+                    $styleVal = isset($_COOKIE[$colorPrefCookieName]) ? $_COOKIE[$colorPrefCookieName] : 'light';
+                }
+                $styleUpdatedVal = $_COOKIE[$modeCookieName];
+            }
+        }
+
+        isset($_COOKIE['theme']) ? $themeVal = $_COOKIE['theme'] : $themeVal = $data['myTheme'];
+
+        $directionVal = isset($_COOKIE['direction']) ? ($_COOKIE['direction'] === 'true' ? 'rtl' : 'ltr') : $data['myRTLMode'];
+
+        // layout classes
+        $layoutClasses = [
+            'layout' => $data['myLayout'],
+            'theme' => $themeVal,
+            'themeOpt' => $data['myTheme'],
+            'style' => $styleVal,
+            'styleOpt' => $data['myStyle'],
+            'styleOptVal' => $styleUpdatedVal,
+            'rtlSupport' => $data['myRTLSupport'],
+            'rtlMode' => $data['myRTLMode'],
+            'textDirection' => $directionVal, // $data['myRTLMode'],
+            'menuCollapsed' => $data['menuCollapsed'],
+            'hasCustomizer' => $data['hasCustomizer'],
+            'showDropdownOnHover' => $data['showDropdownOnHover'],
+            'displayCustomizer' => $data['displayCustomizer'],
+            'contentLayout' => $data['contentLayout'],
+            'headerType' => $data['headerType'],
+            'navbarType' => $data['navbarType'],
+            'menuFixed' => $data['menuFixed'],
+            'footerFixed' => $data['footerFixed'],
+            'menuFlipped' => $data['menuFlipped'],
+            'customizerControls' => $data['customizerControls'],
+        ];
+
+        // sidebar Collapsed
+        if ($layoutClasses['menuCollapsed'] == true) {
+            $layoutClasses['menuCollapsed'] = 'layout-menu-collapsed';
+        }
+
+        // Header Type
+        if ($layoutClasses['headerType'] == 'fixed') {
+            $layoutClasses['headerType'] = 'layout-menu-fixed';
+        }
+        // Navbar Type
+        if ($layoutClasses['navbarType'] == 'fixed') {
+            $layoutClasses['navbarType'] = 'layout-navbar-fixed';
+        } elseif ($layoutClasses['navbarType'] == 'static') {
+            $layoutClasses['navbarType'] = '';
+        } else {
+            $layoutClasses['navbarType'] = 'layout-navbar-hidden';
+        }
+
+        // Menu Fixed
+        if ($layoutClasses['menuFixed'] == true) {
+            $layoutClasses['menuFixed'] = 'layout-menu-fixed';
+        }
+
+        // Footer Fixed
+        if ($layoutClasses['footerFixed'] == true) {
+            $layoutClasses['footerFixed'] = 'layout-footer-fixed';
+        }
+
+        // Menu Flipped
+        if ($layoutClasses['menuFlipped'] == true) {
+            $layoutClasses['menuFlipped'] = 'layout-menu-flipped';
+        }
+
+        // Menu Offcanvas
+        // if ($layoutClasses['menuOffcanvas'] == true) {
+        //   $layoutClasses['menuOffcanvas'] = 'layout-menu-offcanvas';
+        // }
+
+        // RTL Supported template
+        if ($layoutClasses['rtlSupport'] == true) {
+            $layoutClasses['rtlSupport'] = '/rtl';
+        }
+
+        // RTL Layout/Mode
+        if ($layoutClasses['rtlMode'] == true) {
+            $layoutClasses['rtlMode'] = 'rtl';
+            $layoutClasses['textDirection'] = isset($_COOKIE['direction']) ? ($_COOKIE['direction'] === 'true' ? 'rtl' : 'ltr') : 'rtl';
+
+        } else {
+            $layoutClasses['rtlMode'] = 'ltr';
+            $layoutClasses['textDirection'] = isset($_COOKIE['direction']) && $_COOKIE['direction'] === 'true' ? 'rtl' : 'ltr';
+
+        }
+
+        // Show DropdownOnHover for Horizontal Menu
+        if ($layoutClasses['showDropdownOnHover'] == true) {
+            $layoutClasses['showDropdownOnHover'] = true;
+        } else {
+            $layoutClasses['showDropdownOnHover'] = false;
+        }
+
+        // To hide/show display customizer UI, not js
+        if ($layoutClasses['displayCustomizer'] == true) {
+            $layoutClasses['displayCustomizer'] = true;
+        } else {
+            $layoutClasses['displayCustomizer'] = false;
+        }
+
+        return $layoutClasses;
+    }
+
+    public static function updatePageConfig($pageConfigs): void
+    {
+        $demo = 'custom';
+        if (isset($pageConfigs)) {
+            if (count($pageConfigs) > 0) {
+                foreach ($pageConfigs as $config => $val) {
+                    Config::set('custom.'.$demo.'.'.$config, $val);
+                }
+            }
+        }
+    }
+}

resources/views/auth/confirm-password.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,12 +10,12 @@
 @section('title', 'Confirm Password')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
             <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
@@ -26,8 +26,14 @@
 
             <!-- /Left Section -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-forgot-password-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-forgot-password-illustration-light.png" data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png" />
+                <img src="{{asset('assets/img/illustrations/auth-forgot-password-illustration-'.$configData['style'].'.png') }}"
-      <img src="{{asset('assets/img/illustrations/auth-cover-forgot-password-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-forgot-password-mask-light.png" data-app-dark-img="illustrations/auth-cover-forgot-password-mask-dark.png" />
+                     class="auth-cover-illustration w-100" alt="auth-illustration"
+                     data-app-light-img="illustrations/auth-forgot-password-illustration-light.png"
+                     data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-forgot-password-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-forgot-password-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-forgot-password-mask-dark.png"/>
             </div>
             <!-- /Left Section -->
 
@@ -43,9 +49,10 @@
                                 <div class="input-group input-group-merge @error('password') is-invalid @enderror">
                                     <div class="form-floating form-floating-outline">
                                         <input type="password" id="password"
-                    class="form-control @error('password') is-invalid @enderror" name="password"
+                                               class="form-control @error('password') is-invalid @enderror"
+                                               name="password"
                                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                    aria-describedby="password" />
+                                               aria-describedby="password"/>
                                         <label for="password">Password</label>
                                     </div>
                                     <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -63,5 +70,5 @@ class="form-control @error('password') is-invalid @enderror" name="password"
             </div>
             <!-- /Confirm Password -->
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/forgot-password.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,12 +10,12 @@
 @section('title', 'Forgot Password')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
             <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
@@ -26,8 +26,14 @@
 
             <!-- /Left Section -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-forgot-password-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-forgot-password-illustration-light.png" data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png" />
+                <img src="{{asset('assets/img/illustrations/auth-forgot-password-illustration-'.$configData['style'].'.png') }}"
-      <img src="{{asset('assets/img/illustrations/auth-cover-forgot-password-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-forgot-password-mask-light.png" data-app-dark-img="illustrations/auth-cover-forgot-password-mask-dark.png" />
+                     class="auth-cover-illustration w-100" alt="auth-illustration"
+                     data-app-light-img="illustrations/auth-forgot-password-illustration-light.png"
+                     data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-forgot-password-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-forgot-password-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-forgot-password-mask-dark.png"/>
             </div>
             <!-- /Left Section -->
 
@@ -45,7 +51,8 @@
                     <form id="formAuthentication" class="mb-5" action="{{ route('password.email') }}" method="POST">
                         @csrf
                         <div class="form-floating form-floating-outline mb-5">
-            <input type="text" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="john@example.com" autofocus>
+                            <input type="text" class="form-control @error('email') is-invalid @enderror" id="email"
+                                   name="email" placeholder="john@example.com" autofocus>
                             <label for="email">Email</label>
                             @error('email')
                             <span class="invalid-feedback" role="alert">
@@ -67,5 +74,5 @@
             </div>
             <!-- /Forgot Password -->
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/login.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,28 +10,36 @@
 @section('title', 'Login')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
-    <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
+            <span
+                class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
             <span class="app-brand-text demo text-heading fw-semibold">{{config('variables.templateName')}}</span>
         </a>
         <!-- /Logo -->
         <div class="authentication-inner row m-0">
             <!-- /Left Section -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-login-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-login-illustration-light.png" data-app-dark-img="illustrations/auth-login-illustration-dark.png" />
+                <img src="{{asset('assets/img/illustrations/auth-login-illustration-'.$configData['style'].'.png') }}"
-      <img src="{{asset('assets/img/illustrations/auth-cover-login-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-login-mask-light.png" data-app-dark-img="illustrations/auth-cover-login-mask-dark.png" />
+                     class="auth-cover-illustration w-100" alt="auth-illustration"
+                     data-app-light-img="illustrations/auth-login-illustration-light.png"
+                     data-app-dark-img="illustrations/auth-login-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-login-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-login-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-login-mask-dark.png"/>
             </div>
             <!-- /Left Section -->
 
             <!-- Login -->
-    <div class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg position-relative py-sm-12 px-12 py-6">
+            <div
+                class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg position-relative py-sm-12 px-12 py-6">
                 <div class="w-px-400 mx-auto pt-5 pt-lg-0">
                     <h4 class="mb-1">Welcome to {{config('variables.templateName')}}! 👋</h4>
                     <p class="mb-5">Please sign-in to your account and start the adventure</p>
@@ -46,7 +54,9 @@
                     <form id="formAuthentication" class="mb-5" action="{{ route('login') }}" method="POST">
                         @csrf
                         <div class="form-floating form-floating-outline mb-5">
-            <input type="text" class="form-control @error('email') is-invalid @enderror" id="login-email" name="email" placeholder="john@example.com" autofocus value="{{ old('email') }}">
+                            <input type="text" class="form-control @error('email') is-invalid @enderror"
+                                   id="login-email" name="email" placeholder="john@example.com" autofocus
+                                   value="{{ old('email') }}">
                             <label for="login-email">Email</label>
                             @error('email')
                             <span class="invalid-feedback" role="alert">
@@ -59,9 +69,10 @@
                                 <div class="input-group input-group-merge @error('password') is-invalid @enderror">
                                     <div class="form-floating form-floating-outline">
                                         <input type="password" id="login-password"
-                    class="form-control @error('password') is-invalid @enderror" name="password"
+                                               class="form-control @error('password') is-invalid @enderror"
+                                               name="password"
                                                placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
-                    aria-describedby="password" />
+                                               aria-describedby="password"/>
                                         <label for="login-password">Password</label>
                                     </div>
                                     <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -125,5 +136,5 @@ class="form-control @error('password') is-invalid @enderror" name="password"
             </div>
             <!-- /Login -->
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/register.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,12 +10,12 @@
 @section('title', 'Register Pages')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
             <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
@@ -26,8 +26,14 @@
 
             <!-- /Left Text -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-register-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-register-illustration-light.png" data-app-dark-img="illustrations/auth-register-illustration-dark.png" />
+                <img src="{{asset('assets/img/illustrations/auth-register-illustration-'.$configData['style'].'.png') }}"
-      <img src="{{asset('assets/img/illustrations/auth-cover-register-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-register-mask-light.png" data-app-dark-img="illustrations/auth-cover-register-mask-dark.png" />
+                     class="auth-cover-illustration w-100" alt="auth-illustration"
+                     data-app-light-img="illustrations/auth-register-illustration-light.png"
+                     data-app-dark-img="illustrations/auth-register-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-register-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-register-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-register-mask-dark.png"/>
             </div>
             <!-- /Left Text -->
 
@@ -40,7 +46,8 @@
                     <form id="formAuthentication" class="mb-5" action="{{ route('register') }}" method="POST">
                         @csrf
                         <div class="form-floating form-floating-outline mb-5">
-            <input type="text" class="form-control @error('name') is-invalid @enderror" id="username" name="name" placeholder="johndoe" autofocus value="{{ old('name') }}">
+                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="username"
+                                   name="name" placeholder="johndoe" autofocus value="{{ old('name') }}">
                             <label for="username">Username</label>
                             @error('name')
                             <span class="invalid-feedback" role="alert">
@@ -49,7 +56,8 @@
                             @enderror
                         </div>
                         <div class="form-floating form-floating-outline mb-5">
-            <input type="text" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="john@example.com" value="{{ old('email') }}">
+                            <input type="text" class="form-control @error('email') is-invalid @enderror" id="email"
+                                   name="email" placeholder="john@example.com" value="{{ old('email') }}">
                             <label for="email">Email</label>
                             @error('email')
                             <span class="invalid-feedback" role="alert">
@@ -60,7 +68,10 @@
                         <div class="mb-5 form-password-toggle">
                             <div class="input-group input-group-merge @error('password') is-invalid @enderror">
                                 <div class="form-floating form-floating-outline">
-                <input type="password" id="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                                    <input type="password" id="password"
+                                           class="form-control @error('password') is-invalid @enderror" name="password"
+                                           placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                                           aria-describedby="password"/>
                                     <label for="password">Password</label>
                                 </div>
                                 <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -74,7 +85,10 @@
                         <div class="mb-5 form-password-toggle">
                             <div class="input-group input-group-merge">
                                 <div class="form-floating form-floating-outline">
-                <input type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                                    <input type="password" id="password-confirm" class="form-control"
+                                           name="password_confirmation"
+                                           placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                                           aria-describedby="password"/>
                                     <label for="password-confirm">Confirm Password</label>
                                 </div>
                                 <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -83,7 +97,8 @@
                         @if (Laravel\Jetstream\Jetstream::hasTermsAndPrivacyPolicyFeature())
                             <div class="mb-5">
                                 <div class="form-check mt-2 @error('terms') is-invalid @enderror">
-                <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox" id="terms" name="terms" />
+                                    <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox"
+                                           id="terms" name="terms"/>
                                     <label class="form-check-label" for="terms">
                                         I agree to
                                         <a href="{{ route('policy.show') }}" target="_blank">privacy policy</a> &
@@ -134,5 +149,5 @@
             </div>
             <!-- /Register -->
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/reset-password.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,12 +10,12 @@
 @section('title', 'Reset Password')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="position-relative">
+    <div class="position-relative">
         <div class="authentication-wrapper authentication-cover">
             <!-- Logo -->
             <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
@@ -27,8 +27,14 @@
 
                 <!-- /Left Section -->
                 <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-        <img src="{{asset('assets/img/illustrations/auth-reset-password-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-reset-password-illustration-light.png" data-app-dark-img="illustrations/auth-reset-password-illustration-dark.png" />
+                    <img src="{{asset('assets/img/illustrations/auth-reset-password-illustration-'.$configData['style'].'.png') }}"
-        <img src="{{asset('assets/img/illustrations/auth-cover-reset-password-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-reset-password-mask-light.png" data-app-dark-img="illustrations/auth-cover-reset-password-mask-dark.png" />
+                         class="auth-cover-illustration w-100" alt="auth-illustration"
+                         data-app-light-img="illustrations/auth-reset-password-illustration-light.png"
+                         data-app-dark-img="illustrations/auth-reset-password-illustration-dark.png"/>
+                    <img src="{{asset('assets/img/illustrations/auth-cover-reset-password-mask-'.$configData['style'].'.png') }}"
+                         class="authentication-image" alt="mask"
+                         data-app-light-img="illustrations/auth-cover-reset-password-mask-light.png"
+                         data-app-dark-img="illustrations/auth-cover-reset-password-mask-dark.png"/>
                 </div>
                 <!-- /Left Section -->
 
@@ -37,12 +43,15 @@
                     <div class="w-px-400 mx-auto pt-5 pt-lg-0">
                         <h4 class="mb-1">Reset Password 🔒</h4>
                         <p class="mb-5">Your new password must be different from previously used passwords</p>
-          <form id="formAuthentication" class="mb-5" action="{{ route('password.update') }}" method="POST">
+                        <form id="formAuthentication" class="mb-5" action="{{ route('password.update') }}"
+                              method="POST">
                             @csrf
                             <input type="hidden" name="token" value="{{ $request->route('token') }}">
 
                             <div class="form-floating form-floating-outline mb-5">
-              <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="john@example.com" value="{{Request()->email}}" readonly />
+                                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
+                                       name="email" placeholder="john@example.com" value="{{Request()->email}}"
+                                       readonly/>
                                 <label for="email">Email</label>
                                 @error('email')
                                 <span class="invalid-feedback" role="alert">
@@ -53,7 +62,11 @@
                             <div class="mb-5 form-password-toggle">
                                 <div class="input-group input-group-merge @error('password') is-invalid @enderror">
                                     <div class="form-floating form-floating-outline">
-                  <input type="password" id="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" autofocus />
+                                        <input type="password" id="password"
+                                               class="form-control @error('password') is-invalid @enderror"
+                                               name="password"
+                                               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                                               aria-describedby="password" autofocus/>
                                         <label for="password">New Password</label>
                                     </div>
                                     <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -67,7 +80,10 @@
                             <div class="mb-5 form-password-toggle">
                                 <div class="input-group input-group-merge">
                                     <div class="form-floating form-floating-outline">
-                  <input type="password" id="confirm-password" class="form-control" name="password_confirmation" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
+                                        <input type="password" id="confirm-password" class="form-control"
+                                               name="password_confirmation"
+                                               placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
+                                               aria-describedby="password"/>
                                         <label for="confirm-password">Confirm Password</label>
                                     </div>
                                     <span class="input-group-text cursor-pointer"><i class="ri-eye-off-line"></i></span>
@@ -78,7 +94,8 @@
                             </button>
                             <div class="text-center">
                                 @if (Route::has('login'))
-                <a href="{{ route('login') }}" class="d-flex align-items-center justify-content-center">
+                                    <a href="{{ route('login') }}"
+                                       class="d-flex align-items-center justify-content-center">
                                         <i class="ri-arrow-left-s-line scaleX-n1-rtl ri-20px me-1_5"></i>
                                         Back to login
                                     </a>
@@ -90,5 +107,5 @@
                 <!-- /Reset Password -->
             </div>
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/two-factor-challenge.blade.php

@@ -1,7 +1,7 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -10,12 +10,12 @@
 @section('title', 'Two Steps Verifications')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
             <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
@@ -26,8 +26,14 @@
 
             <!-- /Left Section -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-two-steps-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-two-steps-illustration-light.png" data-app-dark-img="illustrations/auth-two-steps-illustration-dark.png" />
+                <img src="{{asset('assets/img/illustrations/auth-two-steps-illustration-'.$configData['style'].'.png') }}"
-      <img src="{{asset('assets/img/illustrations/auth-cover-register-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-register-mask-light.png" data-app-dark-img="illustrations/auth-cover-register-mask-dark.png" />
+                     class="auth-cover-illustration w-100" alt="auth-illustration"
+                     data-app-light-img="illustrations/auth-two-steps-illustration-light.png"
+                     data-app-dark-img="illustrations/auth-two-steps-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-register-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-register-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-register-mask-dark.png"/>
             </div>
             <!-- /Left Section -->
 
@@ -38,33 +44,40 @@
                     <h4 class="mb-1">Two Step Verification 💬</h4>
                     <div x-data="{ recovery: false }">
                         <div class="mb-6" x-show="! recovery">
-            Please confirm access to your account by entering the authentication code provided by your authenticator application.
+                            Please confirm access to your account by entering the authentication code provided by your
+                            authenticator application.
                         </div>
 
                         <div class="mb-6" x-show="recovery">
                             Please confirm access to your account by entering one of your emergency recovery codes.
                         </div>
 
-          <x-validation-errors class="mb-1" />
+                        <x-validation-errors class="mb-1"/>
 
                         <form method="POST" action="{{ route('two-factor.login') }}">
                             @csrf
                             <div class="mb-5" x-show="! recovery">
-              <x-label class="form-label" value="{{ __('Code') }}" />
+                                <x-label class="form-label" value="{{ __('Code') }}"/>
-              <x-input class="{{ $errors->has('code') ? 'is-invalid' : '' }}" type="text" inputmode="numeric" name="code" autofocus x-ref="code" autocomplete="one-time-code" />
+                                <x-input class="{{ $errors->has('code') ? 'is-invalid' : '' }}" type="text"
+                                         inputmode="numeric" name="code" autofocus x-ref="code"
+                                         autocomplete="one-time-code"/>
                                 <x-input-error for="code"></x-input-error>
                             </div>
                             <div class="mb-5" x-show="recovery">
-              <x-label class="form-label" value="{{ __('Recovery Code') }}" />
+                                <x-label class="form-label" value="{{ __('Recovery Code') }}"/>
-              <x-input class="{{ $errors->has('recovery_code') ? 'is-invalid' : '' }}" type="text" name="recovery_code" x-ref="recovery_code" autocomplete="one-time-code" />
+                                <x-input class="{{ $errors->has('recovery_code') ? 'is-invalid' : '' }}" type="text"
+                                         name="recovery_code" x-ref="recovery_code" autocomplete="one-time-code"/>
                                 <x-input-error for="recovery_code"></x-input-error>
                             </div>
                             <div class="d-flex justify-content-end gap-2">
-              <div x-show="! recovery" x-on:click="recovery = true; $nextTick(() => { $refs.recovery_code.focus()})">
+                                <div x-show="! recovery"
+                                     x-on:click="recovery = true; $nextTick(() => { $refs.recovery_code.focus()})">
                                     <button type="button" class="btn btn-outline-secondary">Use a recovery code</button>
                                 </div>
-              <div x-cloak x-show="recovery" x-on:click="recovery = false; $nextTick(() => { $refs.code.focus() })">
+                                <div x-cloak x-show="recovery"
-                <button type="button" class="btn btn-outline-secondary">Use an authentication code</button>
+                                     x-on:click="recovery = false; $nextTick(() => { $refs.code.focus() })">
+                                    <button type="button" class="btn btn-outline-secondary">Use an authentication code
+                                    </button>
                                 </div>
                                 <x-button class="px-3">Log in</x-button>
                             </div>
@@ -74,5 +87,5 @@
             </div>
             <!-- /Two Steps Verification -->
         </div>
-</div>
+    </div>
 @endsection

resources/views/auth/verify-email.blade.php

@@ -1,8 +1,8 @@
 @php
-    use App\Helpers\Helper;
+    use App\Services\ThemeHelper;
     use Illuminate\Support\Facades\Route;
     use Illuminate\Support\Facades\Auth;
-    $configData = Helper::appClasses();
+    $configData = ThemeHelper::appClasses();
     $customizerHidden = 'customizer-hide';
 @endphp
 
@@ -11,15 +11,16 @@
 @section('title', 'Verify Email')
 
 @section('page-style')
-{{-- Page Css files --}}
+    {{-- Page Css files --}}
-@vite('resources/assets/vendor/scss/pages/page-auth.scss')
+    @vite('resources/assets/vendor/scss/pages/page-auth.scss')
 @endsection
 
 @section('content')
-<div class="authentication-wrapper authentication-cover">
+    <div class="authentication-wrapper authentication-cover">
         <!-- Logo -->
         <a href="{{url('/')}}" class="auth-cover-brand d-flex align-items-center gap-2">
-    <span class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
+            <span
+                class="app-brand-logo demo">@include('_partials.macros',["width"=>25,"withbg"=>'var(--bs-primary)'])</span>
             <span class="app-brand-text demo text-heading fw-semibold">{{config('variables.templateName')}}</span>
         </a>
         <!-- /Logo -->
@@ -27,30 +28,41 @@
 
             <!-- /Left Section -->
             <div class="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center justify-content-center p-12 pb-2">
-      <img src="{{asset('assets/img/illustrations/auth-verify-email-illustration-'.$configData['style'].'.png') }}" class="auth-cover-illustration w-100" alt="auth-illustration" data-app-light-img="illustrations/auth-verify-email-illustration-light.png" data-app-dark-img="illustrations/auth-verify-email-illustration-dark.png" />
+                <img
-      <img src="{{asset('assets/img/illustrations/auth-cover-login-mask-'.$configData['style'].'.png') }}" class="authentication-image" alt="mask" data-app-light-img="illustrations/auth-cover-login-mask-light.png" data-app-dark-img="illustrations/auth-cover-login-mask-dark.png" />
+                    src="{{asset('assets/img/illustrations/auth-verify-email-illustration-'.$configData['style'].'.png') }}"
+                    class="auth-cover-illustration w-100" alt="auth-illustration"
+                    data-app-light-img="illustrations/auth-verify-email-illustration-light.png"
+                    data-app-dark-img="illustrations/auth-verify-email-illustration-dark.png"/>
+                <img src="{{asset('assets/img/illustrations/auth-cover-login-mask-'.$configData['style'].'.png') }}"
+                     class="authentication-image" alt="mask"
+                     data-app-light-img="illustrations/auth-cover-login-mask-light.png"
+                     data-app-dark-img="illustrations/auth-cover-login-mask-dark.png"/>
             </div>
             <!-- /Left Section -->
 
             <!--  Verify email -->
-    <div class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg position-relative py-sm-12 px-12 py-6">
+            <div
+                class="d-flex col-12 col-lg-5 col-xl-4 align-items-center authentication-bg position-relative py-sm-12 px-12 py-6">
                 <div class="w-px-400 mx-auto pt-5 pt-lg-0">
                     <h4 class="mb-1">Verify your email ✉️</h4>
 
                     @if (session('status') == 'verification-link-sent')
                         <div class="alert alert-success" role="alert">
                             <div class="alert-body">
-            A new verification link has been sent to the email address you provided during registration.
+                                A new verification link has been sent to the email address you provided during
+                                registration.
                             </div>
                         </div>
                     @endif
                     <p class="text-start mb-0">
-          Account activation link sent to your email address: <span class="h6">{{Auth::user()->email}}</span> Please follow the link inside to continue.
+                        Account activation link sent to your email address: <span
+                            class="h6">{{Auth::user()->email}}</span> Please follow the link inside to continue.
                     </p>
                     <div class="mt-5 d-flex flex-column gap-2">
                         <form method="POST" action="{{ route('verification.send') }}">
                             @csrf
-            <button type="submit" class="w-100 btn btn-label-secondary">click here to request another</button>
+                            <button type="submit" class="w-100 btn btn-label-secondary">click here to request another
+                            </button>
                         </form>
 
                         <form method="POST" action="{{route('logout')}}">
@@ -62,5 +74,5 @@
             </div>
             <!-- / Verify email -->
         </div>
-</div>
+    </div>
 @endsection