Adding latest updates

thedevdojo · May 6, 2024 · 913f327 · 913f327
1 parent 6634c84
commit 913f327
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 13 deletions.
diff --git a/public/app.css b/public/app.css
@@ -0,0 +1,3 @@
+#auth-body{
+  opacity:80;
+}
diff --git a/resources/views/components/elements/container.blade.php b/resources/views/components/elements/container.blade.php
@@ -12,8 +12,8 @@
     };
 @endphp
 
-<div class="relative w-full sm:max-w-md {{ $containerParentClasses }}">
-    <div class="flex relative top-0 z-20 flex-col justify-center items-stretch px-10 py-8 w-full h-screen bg-white border-gray-200 sm:top-auto sm:h-full {{ $containerClasses }}">
+<div id="auth-container-parent" class="relative w-full sm:max-w-md {{ $containerParentClasses }}">
+    <div id="auth-container" class="flex relative top-0 z-20 flex-col justify-center items-stretch px-10 py-8 w-full h-screen bg-white border-gray-200 sm:top-auto sm:h-full {{ $containerClasses }}">
         {{ $slot }}
     </div>
 </div>
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -12,6 +12,10 @@
             <script src="/auth/build/assets/scripts.js"></script>
             <link rel="stylesheet" href="/auth/build/assets/styles.css" />
         @endif
+
+        @if(file_exists(public_path('auth/app.css')))
+            <link rel="stylesheet" href="/auth/app.css" />
+        @endif
 
         @php
             $buttonRGBColor = \Devdojo\Auth\Helper::convertHexToRGBString(config('devdojo.auth.appearance.color.button'));
@@ -37,10 +41,10 @@
         <link href="{{ url(config('devdojo.auth.appearance.favicon.dark')) }}" rel="icon" media="(prefers-color-scheme: dark)" />
 
     </head>
-<body class="overflow-hidden relative w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.color') }}">
+<body id="auth-body" class="overflow-hidden relative w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.color') }}">
     @if(config('devdojo.auth.appearance.background.image'))
-        <img src="{{ config('devdojo.auth.appearance.background.image') }}" class="object-cover absolute z-10 w-screen h-screen" />
-        <div class="absolute inset-0 z-20 w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.image_overlay_color') }}; opacity:{{ config('devdojo.auth.appearance.background.image_overlay_opacity') }};"></div>
+        <img src="{{ config('devdojo.auth.appearance.background.image') }}" id="auth-background-image" class="object-cover absolute z-10 w-screen h-screen" />
+        <div id="auth-background-image-overlay" class="absolute inset-0 z-20 w-screen h-screen" style="background-color:{{ config('devdojo.auth.appearance.background.image_overlay_color') }}; opacity:{{ config('devdojo.auth.appearance.background.image_overlay_opacity') }};"></div>
     @endif
 
     @php
@@ -51,9 +55,9 @@
         };
     @endphp
 
-    <div class="flex relative z-30 flex-col justify-center w-screen min-h-screen {{ $slotParentClasses }}">
+    <main id="auth-main-content" class="flex relative z-30 flex-col justify-center w-screen min-h-screen {{ $slotParentClasses }}">
         {{ $slot }} 
-    </div>
+    </main>
 
     @if(config('devdojo.auth.settings.enable_branding') && !app()->isLocal())
         <a href="https://devdojo.com/auth" target="_blank" class="flex fixed bottom-0 left-1/2 z-30 justify-center items-center px-2.5 py-1.5 w-auto text-xs font-medium rounded-t-lg border -translate-x-1/2 cursor-pointer bg-zinc-900 hover:bg-zinc-800/70 text-white/40 hover:text-white/80 border-zinc-800">

diff --git a/resources/views/components/layouts/setup.blade.php b/resources/views/components/layouts/setup.blade.php
@@ -21,13 +21,16 @@
         <script>
             window.codemirrorEditor = null;
             function enableCodeMirror(){
-                
                 codemirrorEditor = CodeMirror.fromTextArea(document.getElementById('css-editor'), {
                     lineNumbers: true,
                     tabSize: 2,
-                    mode: "css",
+                    mode: {name: "css", json: true},
                     theme: "base16-light"
                 });
+
+                codemirrorEditor.on('change', () => {
+                    window.dispatchEvent(new CustomEvent('update-css-code', { detail: { value: codemirrorEditor.getValue() }}));
+                });
             }
         </script>
 

diff --git a/resources/views/livewire/setup/color.blade.php b/resources/views/livewire/setup/color.blade.php
@@ -23,15 +23,15 @@ class="max-w-xl">
             <input type="color" value="#000000" wire:model.live="button_color" />
         </div>
     </div>
-    <div class="pb-5">
+    <div class="pb-5 mb-5 border-b border-zinc-200">
         <div class="pb-3 w-full">
             <label class="block text-sm font-medium leading-6 text-gray-900">Button Text Color</label>
         </div>
         <div class="w-full h-auto">
             <input type="color" value="#000000" wire:model.live="button_text_color" />
         </div>
     </div>
-    <div class="pb-5">
+    <div class="pb-5 mb-5 border-b border-zinc-200">
         <div class="pb-3 w-full">
             <label class="block text-sm font-medium leading-6 text-gray-900">Input Text Color</label>
         </div>

diff --git a/resources/views/livewire/setup/css.blade.php b/resources/views/livewire/setup/css.blade.php
@@ -1,3 +1,11 @@
-<div>
-    <textarea id="css-editor" class="w-full min-h-[350px] rounded-xl border border-zinc-200 overflow-hidden"></textarea>
+<div x-data="{
+    css: @entangle('css')
+}"
+x-init=""
+@update-css-code.window="css=event.detail.value;"
+    >
+    <div class="mb-3 w-full" wire:ignore>
+        <textarea id="css-editor" class="w-full min-h-[350px] rounded-xl border border-zinc-200 overflow-hidden" x-model="css"></textarea>
+    </div>
+    <x-auth::setup.button wire:click="update">Update</x-auth::setup.button>
 </div>
diff --git a/src/Livewire/Setup/Css.php b/src/Livewire/Setup/Css.php
@@ -8,10 +8,22 @@
 
 class Css extends Component
 {
+    public $css = '';
+
     public function mount(){
+        $css_file = public_path('auth/app.css');
+        if(file_exists($css_file)){
+            $this->css = file_get_contents($css_file);
+        }
 
     }
 
+    public function update(){
+        $css_file = public_path('auth/app.css');
+        file_put_contents($css_file, $this->css);
+        $this->js('savedMessageOpen()');
+    }
+
     public function render()
     {
         return view('auth::livewire.setup.css');