updating the authentication package

thedevdojo · May 3, 2024 · f8657ef · f8657ef
1 parent 4c62f25
commit f8657ef
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 70 deletions.
diff --git a/config/devdojo/auth/appearance.php b/config/devdojo/auth/appearance.php
@@ -17,6 +17,11 @@
         'image_overlay_color' => '#000000',
         'image_overlay_opacity' => '0.5',
     ],
+    'color' => [
+        'text' => '#212936',
+        'button' => '#09090b',
+        'button_text' => '#ffffff'
+    ],
     'alignment' => [
         'heading' => 'center',
     ],

diff --git a/resources/views/components/elements/button.blade.php b/resources/views/components/elements/button.blade.php
@@ -17,17 +17,6 @@
     };
 @endphp
 
-@php
-    $typeClasses = match ($type) {
-        'primary' => 'bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-700 hover:bg-zinc-950 dark:focus:ring-offset-zinc-900 dark:focus:ring-zinc-100 dark:hover:bg-white dark:hover:text-zinc-800 focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2',
-        'secondary' => 'bg-white border text-zinc-500 hover:text-zinc-700 border-zinc-200/70 dark:focus:ring-offset-zinc-900 dark:border-zinc-400/10 hover:bg-zinc-50 active:bg-white dark:focus:ring-zinc-700 focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-200/60 dark:bg-zinc-800/50 dark:hover:bg-zinc-800/70 dark:text-zinc-400 focus:shadow-outline',
-        'success' => 'bg-green-600 text-white hover:bg-green-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-green-700/90 focus:ring-green-700',
-        'info' => 'bg-blue-600 text-white hover:bg-blue-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-blue-700/90 focus:ring-blue-700',
-        'warning' => 'bg-amber-500 text-white hover:bg-amber-500/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-amber-600/90 focus:ring-amber-600',
-        'danger' => 'bg-red-600 text-white hover:bg-red-600/90 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:bg-red-700/90 focus:ring-red-700',
-    };
-@endphp
-
 @php
 switch ($tag ?? 'button') {
     case 'button':
@@ -46,7 +35,7 @@
 }
 @endphp
 
-<{!! $tagAttr !!} {!! $attributes->except(['class']) !!} class="{{ $sizeClasses }} {{ $typeClasses }} cursor-pointer inline-flex items-center w-full justify-center disabled:opacity-50 font-semibold focus:outline-none">
+<{!! $tagAttr !!} {!! $attributes->except(['class']) !!} class="{{ $sizeClasses }} auth-button opacity-[95%] hover:opacity-100 focus:ring-2  focus:ring-offset-2 cursor-pointer inline-flex items-center w-full justify-center disabled:opacity-50 font-semibold focus:outline-none" style="color:{{ config('devdojo.auth.appearance.color.button_text') }}; background-color:{{ config('devdojo.auth.appearance.color.button') }};">
     <svg xmlns="http://www.w3.org/2000/svg" wire:loading viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1.5 w-4 h-4 animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg>
     {{ $slot }}
 </{{ $tagClose }}>
diff --git a/resources/views/components/elements/heading.blade.php b/resources/views/components/elements/heading.blade.php
@@ -10,7 +10,8 @@
         'items-center' => $align == 'center',
         'items-start' => $align == 'left'
     ])
->
+    style="color:{{ config('devdojo.auth.appearance.color.text') }}"
+    >
     <div @class([
         'flex flex-col w-full',
         'items-center' => $align == 'center',
@@ -24,8 +25,8 @@
          :svgString="config('devdojo.auth.appearance.logo.svg_string')"
          />
     </div>
-    <h1 id="auth-heading" class="mt-1 text-xl font-medium leading-9 text-gray-800 dark:text-gray-200">{{ $text ?? '' }}</h1>
+    <h1 id="auth-heading" class="mt-1 text-xl font-medium leading-9">{{ $text ?? '' }}</h1>
     @if(($description ?? false) && $show_subheadline)
-        <p class="mb-1.5 space-x-0.5 text-sm leading-5 text-center text-gray-500 dark:text-gray-400">{{ $description ?? '' }}</p>
+        <p class="mb-1.5 space-x-0.5 text-sm leading-5 text-center opacity-[67%]">{{ $description ?? '' }}</p>
     @endif
 </div>
diff --git a/resources/views/components/elements/text-link.blade.php b/resources/views/components/elements/text-link.blade.php
@@ -1,5 +1,5 @@
 <x-auth::elements.link
     {{ $attributes->except('wire:navigate') }}
-    class="text-gray-500 underline cursor-pointer dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-800">
+    class="underline cursor-pointer opacity-[67%] hover:opacity-[80%]">
     {{ $slot }}
 </x-auth::elements.link>
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -13,6 +13,15 @@
             <link rel="stylesheet" href="/auth/build/assets/styles.css" />
         @endif
 
+        @php
+            $buttonRGBColor = \Devdojo\Auth\Helper::convertHexToRGBString(config('devdojo.auth.appearance.color.button'));
+        @endphp
+        <style>
+            .auth-button:focus{
+                --tw-ring-opacity: 1; --tw-ring-color: rgb({{ $buttonRGBColor }} / var(--tw-ring-opacity));
+            }
+        </style>
+
         <link href="{{ url(config('devdojo.auth.appearance.favicon.light')) }}" rel="icon" media="(prefers-color-scheme: light)" />
         <link href="{{ url(config('devdojo.auth.appearance.favicon.dark')) }}" rel="icon" media="(prefers-color-scheme: dark)" />
 

diff --git a/resources/views/components/layouts/setup.blade.php b/resources/views/components/layouts/setup.blade.php
@@ -64,7 +64,7 @@
             }
         });
     "
-    class="bg-gray-50 dark:bg-zinc-950">
+    class="overflow-hidden w-screen h-screen bg-gray-50 dark:bg-zinc-950">
     <div class="flex flex-col justify-start items-start w-screen h-screen">
         <div class="flex justify-center items-start w-full h-full">
 
@@ -75,7 +75,7 @@ class="bg-gray-50 dark:bg-zinc-950">
                     <section class="relative z-10 ml-3 w-full h-screen duration-300 ease-out" x-cloak>
                         <div class="flex relative items-stretch pt-2 h-screen justify-stretch">
 
-                            <div class="flex overflow-x-scroll relative justify-center items-center w-full h-full bg-white rounded-tl-2xl border-t border-l border-zinc-200">
+                            <div class="flex overflow-x-hidden relative justify-center items-center w-full h-full bg-white rounded-tl-2xl border-t border-l border-zinc-200">
 
                                 <div class="flex z-20 justify-center items-start w-full h-full">
                                     {{ $slot }}
@@ -95,45 +95,52 @@ class="bg-gray-50 dark:bg-zinc-950">
         }
     </script>
 
-    <div x-show="preview" class="overflow-hidden absolute inset-0 left-0 z-[99] pt-5 px-5 bg-white w-screen h-screen" x-cloak>
-        <div x-show="preview" x-transition.opacity class="absolute inset-0 z-10 w-screen h-screen delay-500 bg-black/50" x-cloak></div>
-        <div x-show="preview"
-            x-transition:enter="transition ease-out duration-300"
-            x-transition:enter-start="opacity-0 translate-y-full"
-            x-transition:enter-end="opacity-100 translate-y-0"
-            x-transition:leave="transition ease-in duration-300"
-            x-transition:leave-start="opacity-100 translate-y-0"
-            x-transition:leave-end="opacity-0 translate-y-full"
-             class="flex overflow-hidden relative z-20 flex-col w-full h-full rounded-t-md" x-cloak>
-            <div class="flex relative z-50 flex-shrink-0 justify-center items-center w-full h-10 bg-white border-b border-zinc-200">
-                <div class="relative" x-on:click.outside="previewMenuDropdown=false">
-                    <button x-on:click="previewMenuDropdown=!previewMenuDropdown" class="flex justify-between items-center px-3 w-64 h-7 text-xs rounded-md border cursor-pointer bg-zinc-100 hover:bg-zinc-200/70">
-                        <img src="{{ url(config('devdojo.auth.appearance.favicon.light')) }}" class="w-4 h-4 -translate-x-1.5" />
-                        <span class="font-medium">Login</span>
-                        <x-phosphor-caret-down-fill class="ml-2 w-3 h-3" />
-                    </button>
-                    <div x-show="previewMenuDropdown" x-transition.scale.origin.top.opacity class="[&>button]:px-3 [&>button]:block [&>button]:rounded-md space-y-1 [&>button:hover]:bg-zinc-100 group [&>button]:text-left [&>button]:w-full [&>button]:text-sm [&>button]:py-1.5 absolute left-0 bg-white shadow-xl p-2 w-64 rounded-md top-0 mt-[33px] z-[99]">
-                        <button href="">Login</button>
-                        <button href="">Register</button>
-                        <button href="">Verify Account</button>
-                        <button href="">Password Reset Request</button>
-                        <button href="">Password Reset</button>
+
+        <div x-show="preview" x-transition.opacity class="absolute inset-0 z-[98] w-screen h-screen delay-500 bg-black/50" x-cloak></div>
+        <div :class="{ 'translate-y-full' : !preview, 'translate-y-0 pt-3' : preview }"
+             class="flex absolute top-0 left-0 px-3 z-[99] ease-out duration-300 flex-col w-screen h-screen" x-cloak>
+
+            <div class="flex flex-col w-full h-full bg-white rounded-t-md">
+                <div class="flex relative z-50 flex-shrink-0 justify-center items-center w-full h-10 bg-white rounded-t-md border-b border-zinc-200">
+                    <div class="relative" x-on:click.outside="previewMenuDropdown=false">
+                        <button x-on:click="previewMenuDropdown=!previewMenuDropdown" class="flex justify-between items-center px-3 w-64 h-7 text-xs rounded-md border cursor-pointer bg-zinc-100 hover:bg-zinc-200/70">
+                            <img src="{{ url(config('devdojo.auth.appearance.favicon.light')) }}" class="w-4 h-4 -translate-x-1.5" />
+                            <span class="font-medium">Login</span>
+                            <x-phosphor-caret-down-fill class="ml-2 w-3 h-3" />
+                        </button>
+                        <div x-show="previewMenuDropdown" x-transition.scale.origin.top.opacity class="[&>button]:px-3 [&>button]:block [&>button]:rounded-md space-y-1 [&>button:hover]:bg-zinc-100 group [&>button]:text-left [&>button]:w-full [&>button]:text-sm [&>button]:py-1.5 absolute left-0 bg-white shadow-xl p-2 w-64 rounded-md top-0 mt-[33px] z-[99]">
+                            <button href="">Login</button>
+                            <button href="">Register</button>
+                            <button href="">Verify Account</button>
+                            <button href="">Password Reset Request</button>
+                            <button href="">Password Reset</button>
+                        </div>
+                    </div>
+                    <div class="flex absolute right-0 items-center h-full">
+                        <a href="/auth/login" target="_blank" class="flex flex-shrink-0 items-center px-2 py-1 mr-2 text-xs bg-white rounded-md border shadow-sm duration-200 ease-out text-zinc-500 hover:text-zinc-700 hover:border-zinc-200 group border-zinc-100">
+                            <span>Preview in New Tab</span>
+                            <x-phosphor-arrow-right-bold class="flex-shrink-0 ml-1 w-3 h-3 duration-200 ease-out -rotate-45 group-hover:-translate-y-px group-hover:translate-x-px" />
+                        </a>
+                        <button :class="{ '-translate-y-full rounded-t-md border border-zinc-200 shadow-xl' : !preview, 'rounded-tr-md border-l border-zinc-200' : preview }" x-on:click="preview=!preview" class="inline-flex z-50 items-center px-4 h-full text-sm font-medium bg-white hover:bg-zinc-100 group text-zinc-600 hover:text-zinc-800">
+                            <div x-show="!preview" class="flex items-center space-x-1">
+                                <x-phosphor-monitor-bold class="-ml-0.5 w-4 h-4 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
+                                <span>Open Preview</span>
+                            </div>
+                            <div x-show="preview" class="flex items-center space-x-1">
+                                <x-phosphor-x-bold class="-ml-0.5 w-3.5 h-3.5 duration-300 ease-out" />
+                            </div>
+                        </button>
                     </div>
                 </div>
-                <button x-on:click="preview=false" class="inline-flex absolute top-0 right-0 z-50 items-center px-4 mb-3 space-x-1 h-full text-sm font-medium bg-gradient-to-r to-white border-l border-zinc-200 group from-zinc-50 text-zinc-600 hover:text-zinc-800">
-                    <x-phosphor-x-bold class="w-3 h-3 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
-                    <span>Close Preview</span>
-                </button>
-            </div>
-            <div id="preview_loader" class="absolute inset-0 z-40 justify-center items-center mt-10 w-full h-full">
-                <div class="flex justify-center items-center w-full h-full bg-white">
-                    <svg class="w-5 h-5 animate-spin text-zinc-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                <div x-show="preview" id="preview_loader" class="absolute top-0 left-0 z-40 justify-center items-center px-3 mt-10 w-full h-full">
+                    <div class="flex justify-center items-center w-full h-full bg-white">
+                        <svg class="w-5 h-5 animate-spin text-zinc-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    </div>
                 </div>
+                <iframe x-show="preview" id="preview" src="/auth/login?preview=true" class="hidden overflow-hidden relative z-30 w-full h-full opacity-0 duration-300 ease-out"></iframe>
             </div>
-            <iframe id="preview" src="/auth/login?preview=true" class="hidden overflow-hidden relative z-30 w-full h-full opacity-0 duration-300 ease-out"></iframe>
         </div>
 
-    </div>
 
 </body>
 </html>
diff --git a/resources/views/components/setup/heading.blade.php b/resources/views/components/setup/heading.blade.php
@@ -4,10 +4,6 @@
             <x-phosphor-arrow-left-bold class="w-3 h-3 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
             <span>Back</span>
         </a>
-        <button @click="preview=true" href="/auth/setup" class="inline-flex items-center px-4 py-1.5 mb-3 space-x-1 text-sm font-medium rounded-full group bg-zinc-100 text-zinc-600 hover:text-zinc-800">
-            <x-phosphor-eye-bold class="w-4 h-4 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
-            <span>Preview</span>
-        </button>
     </div>
     <h2 class="mb-2 text-2xl font-bold text-left">{{ $title ?? '' }}</h2>
     <p class="text-sm text-left text-gray-600">{{ $description ?? '' }}</p>

diff --git a/resources/views/includes/setup/sidebar.blade.php b/resources/views/includes/setup/sidebar.blade.php
@@ -1,9 +1,9 @@
 <div class="left-0 z-50 w-80 h-screen duration-300 ease-out bg-zinc-50" x-cloak>
     <div class="flex justify-between items-center px-5 py-6 w-full">
-        <div class="flex relative items-center space-x-1.5">
-            <x-auth::setup.logo class="w-auto h-7"></x-auth::setup.logo>
-            <h1 class="text-base font-bold leading-none">Auth <span class="font-light">Setup</span></h1>
-        </div>
+        <a href="/auth/setup" wire:navigate" class="flex items-center space-x-2 cursor-pointer group">
+            <x-auth::setup.logo class="w-auto h-7 duration-300 ease-out group-hover:scale-[1.03]"></x-auth::setup.logo>
+            <span class="text-base font-bold leading-none">Auth <span class="font-light">Setup</span></span>
+        </a>
     </div>
     <div class="hidden px-3 pt-0 pb-2">
         <a href="https://auth.devdojo.com/docs" target="_blank" class="block p-5 text-xs bg-white rounded-xl border duration-300 ease-out hover:shadow-md opacity-[0.98] hover:opacity-100 border-zinc-200">

diff --git a/resources/views/livewire/setup/background.blade.php b/resources/views/livewire/setup/background.blade.php
@@ -22,7 +22,7 @@ class="max-w-xl">
         <div class="w-full h-auto">
             @if(isset($image) && $image != '')
                 <div class="relative">
-                    <img src="{{ url($image) }}" class="w-full h-auto rounded-md" />
+                    <img src="{{ url($image) . '?' . uniqid() }}" class="w-full h-auto rounded-md" />
                     <button wire:click="deleteBackgroundImage()" class="flex absolute top-0 right-0 items-center px-3 py-1.5 mt-2 mr-2 text-xs font-medium text-white rounded-md bg-red-500/70 hover:bg-red-500/90">
                         <x-phosphor-trash class="mr-1 w-4 h-4" />
                         <span>Remove Image</span>

diff --git a/resources/views/livewire/setup/logo.blade.php b/resources/views/livewire/setup/logo.blade.php
@@ -14,21 +14,21 @@ class="flex justify-start items-start space-x-7 w-full">
         </div>
 
         <div class="flex flex-col justify-center items-start w-full">
-            <div class="flex justify-start items-center p-1 space-x-1 w-auto text-xs font-medium rounded-md bg-zinc-100">
+            <div class="flex justify-start items-center p-1 w-auto text-xs font-medium rounded-lg bg-zinc-100">
                 <div 
                     x-on:click="logo_type = 'image';"
-                    :class="{'bg-white shadow-sm': logo_type == 'image', 'bg-gray-200': logo_type != 'image'}"
+                    :class="{'bg-white shadow-sm': logo_type == 'image', 'bg-transparent': logo_type != 'image'}"
                     class="flex-shrink-0 px-4 py-2 text-center text-gray-900 rounded-md cursor-pointer">Upload an Image</div>
 
                 <div 
                     x-on:click="logo_type = 'svg'; setTimeout(function(){ document.getElementById('svgTextarea').focus(); }, 10);"
-                    :class="{'bg-white shadow-sm': logo_type == 'svg', 'bg-gray-200': logo_type != 'svg'}"
+                    :class="{'bg-white shadow-sm': logo_type == 'svg', 'bg-transparent': logo_type != 'svg'}"
                     class="flex-shrink-0 px-4 py-2 text-center text-gray-900 rounded-md cursor-pointer">Use an SVG</div>
             </div>
             <div class="mt-2 w-full bg-white">
                 <div x-show="logo_type == 'image'" class="rounded-lg border border-gray-300 border-dashed bg-zinc-50">
                     <div x-show="logo_image" class="flex justify-center items-center py-2">
-                        <img src="{{ url($logo_image_src) . '?' . uniqid() }}" class="w-auto h-20" alt="logo" />
+                        <img src="{{ url($logo_image_src) . '?' . uniqid() }}" class="w-auto" style="height:{{ $logo_height }}px" alt="logo" />
                     </div>
                     <div class="flex relative justify-center items-center w-full">                                
                         <div class="flex justify-center items-center w-full">
@@ -69,7 +69,9 @@ class="flex-shrink-0 px-4 py-2 text-center text-gray-900 rounded-md cursor-point
             <label class="block text-sm font-medium leading-6 text-gray-900">Logo Height (in pixels)</label>
         </div>
         <div class="w-full h-auto">
-            <x-auth::setup.input type="number" wire:model.live="logo_height" class="w-24" />
+            <div class="w-24">
+                <x-auth::setup.input type="number" wire:model.live="logo_height" />
+            </div>
         </div>
     </div>
 

diff --git a/resources/views/pages/auth/login.blade.php b/resources/views/pages/auth/login.blade.php
@@ -94,8 +94,8 @@ public function authenticate()
                 </form>
 
 
-                <div class="mt-3 space-x-0.5 text-sm leading-5 text-left text-gray-400 dark:text-gray-300">
-                    <span>Don't have an account?</span>
+                <div class="mt-3 space-x-0.5 text-sm leading-5 text-left" style="color:{{ config('devdojo.auth.appearance.color.text') }}">
+                    <span class="opacity-[47%]">Don't have an account?</span>
                     <x-auth::elements.text-link href="{{ route('auth.register') }}">Sign up</x-auth::elements.text-link>
                 </div>