Merge pull request #5 from niladam/feature/allow-custom-position-and-use-badge

niladam · web-flow · commit 49a91c21b7c3 · 2024-11-28T13:09:45.000+02:00
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ This is the contents of the published config file:
 
 ```php
 use Carbon\Carbon;
-use Niladam\FilamentAutoLogout\Enums\AutoLogoutPosition;
+use Filament\View\PanelsRenderHook;
 
 return [
     /**
@@ -64,31 +64,31 @@ return [
     'time_left_text' => env('FILAMENT_AUTO_LOGOUT_TIME_LEFT_TEXT', 'Time left:'),
 
     /**
-     * The position of the time left box.
+     * Where should the badge be rendered?
      *
-     * Defaults to right.
-     *
-     * Currently only 'right' and 'left' (bottom) are supported
+     * @see https://filamentphp.com/docs/3.x/support/render-hooks#available-render-hooks for a list of supported hooks.
      */
-    'time_left_position' => env('FILAMENT_AUTO_LOGOUT_TIME_LEFT_POSITION', AutoLogoutPosition::BOTTOM_RIGHT),
+    'location' => env('FILAMENT_AUTO_LOGOUT_LOCATION', PanelsRenderHook::GLOBAL_SEARCH_BEFORE),
 ];
 ```
 
 ## Usage
 
 ```php
 use Carbon\Carbon;
+use Filament\Support\Colors\Color;
 use Niladam\FilamentAutoLogout\AutoLogoutPlugin;
 
 $panel
     ->plugins([
         AutoLogoutPlugin::make()
-            ->positionLeft()                                // Align the time left box to the left. Defaults to right.
+            ->color(Color::Emerald)                         // Set the color. Defaults to Zinc
             ->disableIf(fn () => auth()->id() === 1)        // Disable the user with ID 1
             ->logoutAfter(Carbon::SECONDS_PER_MINUTE * 5)   // Logout the user after 5 minutes
-            ->withoutWarning()                              // Disable the warning
+            ->withoutWarning()                              // Disable the warning before logging out
             ->withoutTimeLeft()                             // Disable the time left
             ->timeLeftText('Oh no. Kicking you in...')      // Change the time left text
+            ->timeLeftText('')                              // Remove the time left text (displays only countdown)
     ]);
 ```
 
diff --git a/config/filament-auto-logout.php b/config/filament-auto-logout.php
@@ -1,7 +1,7 @@
 <?php
 
 use Carbon\Carbon;
-use Niladam\FilamentAutoLogout\Enums\AutoLogoutPosition;
+use Filament\View\PanelsRenderHook;
 
 return [
     /**
@@ -39,22 +39,9 @@
     'time_left_text' => env('FILAMENT_AUTO_LOGOUT_TIME_LEFT_TEXT', 'Time left:'),
 
     /**
-     * The position of the time left box.
+     * Where should the badge be rendered?
      *
-     * Defaults to right.
-     *
-     * Currently only 'right' and 'left' (bottom) are supported
-     */
-    'time_left_position' => env('FILAMENT_AUTO_LOGOUT_TIME_LEFT_POSITION', AutoLogoutPosition::BOTTOM_RIGHT),
-
-    /**
-     * The route name where the logout will be posted.
-     *
-     * Defaults to filament's logout route & controller, but uses a custom route name
-     * to ensure it doesn't conflict with any other logout routes
-     *
-     * You can overwrite this here but ensure that the route accepts a POST request
-     * and handles the logout process entirely.
+     * @see https://filamentphp.com/docs/3.x/support/render-hooks#available-render-hooks for a list of supported hooks.
      */
-    'auto_logout_route_name' => env('FILAMENT_AUTO_LOGOUT_ROUTE_NAME', 'filament-auto-logout-plugin-form'),
+    'location' => env('FILAMENT_AUTO_LOGOUT_LOCATION', PanelsRenderHook::GLOBAL_SEARCH_BEFORE),
 ];
diff --git a/resources/dist/filament-auto-logout.js b/resources/dist/filament-auto-logout.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -53,7 +53,6 @@
                 },
                 showWarning() {
                     if (!this.warningDisplayed) {
-
                         const totalSeconds = this.warningBefore;
                         const minutes = Math.floor(totalSeconds / 60);
                         const seconds = totalSeconds % 60;
@@ -150,32 +149,38 @@
                 }
             });
 
-            if (!document.getElementById('idle-timeout-element')) {
-                if (form.dataset.showTimeleft === '1') {
-                    const el = document.createElement('div');
-                    el.setAttribute('x-data', '{}');
+            if (form.dataset.showTimeleft === '1') {
+                let el = document.getElementById('idle-timeout-element');
+
+                if (!el) {
+                    el = document.createElement('div');
                     el.id = 'idle-timeout-element';
+                    document.body.appendChild(el);
+                }
+
+                const timeLeftText = form.dataset.timeLeftText || null;
 
-                    const timeLeftText = form.dataset.timeLeftText || 'Time left: '; // Fallback to default text
+                el.setAttribute(
+                    'x-data',
+                    JSON.stringify({
+                        timeLeftText: timeLeftText,
+                    })
+                );
 
-                    el.setAttribute(
-                      'x-data',
-                      JSON.stringify({
-                          timeLeftText: timeLeftText, // Pass it into the Alpine scope
-                      })
-                    );
+                let timerDisplay = el.querySelector('#timer-display');
 
-                    const timerDisplay = document.createElement('div');
+                if (!timerDisplay) {
+                    timerDisplay = document.createElement('div');
                     timerDisplay.id = 'timer-display';
-                    timerDisplay.setAttribute(
-                      'x-text',
-                      'timeLeftText + Math.floor($store.idleTimeoutStore.timeLeftSecs / 60) + "m " + ($store.idleTimeoutStore.timeLeftSecs % 60) + "s"'
-                    );
                     el.appendChild(timerDisplay);
-
-                    document.body.appendChild(el);
-                    Alpine.initTree(el);
                 }
+
+                timerDisplay.setAttribute(
+                    'x-text',
+                    'timeLeftText + Math.floor($store.idleTimeoutStore.timeLeftSecs / 60) + "m " + ($store.idleTimeoutStore.timeLeftSecs % 60) + "s"'
+                );
+
+                Alpine.initTree(el);
             }
         }
     });
diff --git a/resources/views/main.blade.php b/resources/views/main.blade.php
@@ -2,7 +2,7 @@
     <script src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-auto-logout', 'niladam/filament-auto-logout') }}"></script>
     <form id="auto-logout-form"
           data-auto-logout-enabled="{{ $enabled }}"
-          action="{{ route($route_name) }}"
+          action="{{ $logout_url }}"
           data-duration="{{ $duration }}"
           data-warn-before="{{ $warn_before }}"
           data-show-timeleft="{{ $show_time_left }}"
@@ -11,16 +11,22 @@
         @csrf
     </form>
     
-    <style>
-        #idle-timeout-element {
-            position: fixed;
-            bottom: 50px;
-            padding: 6px;
-            background: #333;
-            color: #fff;
-            z-index: 20;
-            {{ $position }}: 10px;
-            border-radius: 5px;
-        }
-    </style>
+    @if($show_time_left)
+        <div id="idle-timeout-element"
+             class="
+            idle-timeout-element hidden sm:flex items-center h-9 px-3 text-sm font-medium
+            rounded-lg shadow-sm ring-1
+            ring-custom-600/20 bg-custom-50 text-custom-600
+            dark:ring-custom-400/30 dark:bg-custom-400/10 dark:text-custom-400
+            text-center
+    "
+             style="
+                --c-50: {{ $color[50] }};
+                --c-300: {{ $color[300] }};
+                --c-400: {{ $color[400] }};
+                --c-600: {{ $color[600] }};
+                "
+        >
+        </div>
+    @endif
 @endauth
diff --git a/src/AutoLogoutPlugin.php b/src/AutoLogoutPlugin.php
@@ -5,10 +5,11 @@
 use Closure;
 use Filament\Contracts\Plugin;
 use Filament\Panel;
+use Filament\Support\Colors\Color;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Filament\View\PanelsRenderHook;
 use Illuminate\Support\Facades\View;
-use Niladam\FilamentAutoLogout\Enums\AutoLogoutPosition;
+use ReflectionClass;
 
 class AutoLogoutPlugin implements Plugin
 {
@@ -24,10 +25,12 @@ class AutoLogoutPlugin implements Plugin
 
     public int | Closure $warnBeforeSeconds = 30;
 
-    public AutoLogoutPosition | Closure $position = AutoLogoutPosition::BOTTOM_RIGHT;
+    public array | Closure $color = Color::Zinc;
 
     public ?string $timeleftText = null;
 
+    private string $location = PanelsRenderHook::GLOBAL_SEARCH_BEFORE;
+
     public function getId(): string
     {
         return 'filament-auto-logout';
@@ -36,8 +39,8 @@ public function getId(): string
     public function register(Panel $panel): void
     {
         $panel->renderHook(
-            PanelsRenderHook::BODY_END,
-            fn () => $this->renderView()
+            name: $this->getLocation(),
+            hook: fn () => $this->renderView($panel->getLogoutUrl())
         );
     }
 
@@ -47,17 +50,17 @@ public function boot(Panel $panel): void
 
     }
 
-    protected function renderView(): string
+    protected function renderView(string $logoutUrl): string
     {
         return View::make('filament-auto-logout::main', [
             'enabled' => $this->evaluate($this->enabled),
             'has_warning' => $this->evaluate($this->hasWarning),
             'show_time_left' => $this->evaluate($this->showTimeLeft),
             'duration' => $this->evaluate($this->duration),
             'warn_before' => $this->evaluate($this->hasWarning) ? $this->evaluate($this->warnBeforeSeconds) : 0,
-            'position' => $this->position->getPosition(),
             'time_left_text' => $this->timeleftText,
-            'route_name' => config('filament-auto-logout.auto_logout_route_name'),
+            'color' => $this->getColor(),
+            'logout_url' => $logoutUrl,
         ])->render();
     }
 
@@ -111,13 +114,6 @@ public function warnBefore(int | Closure $warnBefore): static
         return $this;
     }
 
-    public function positionLeft(AutoLogoutPosition $position = AutoLogoutPosition::BOTTOM_LEFT): static
-    {
-        $this->position = $position;
-
-        return $this;
-    }
-
     public function logoutAfter(int | Closure $duration): static
     {
         $this->duration = $duration instanceof Closure
@@ -133,4 +129,42 @@ public function timeLeftText(?string $timeLeftText): static
 
         return $this;
     }
+
+    public function color(array | Closure $color = Color::Zinc): static
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    protected function getColor(): array
+    {
+        return $this->evaluate($this->color);
+    }
+
+    public function location(string $location = PanelsRenderHook::GLOBAL_SEARCH_BEFORE): static
+    {
+        $this->location = $this->isValidPanelHook($location)
+            ? $location
+            : PanelsRenderHook::GLOBAL_SEARCH_BEFORE;
+
+        return $this;
+    }
+
+    protected function isValidPanelHook(string $location): bool
+    {
+        static $validLocations = null;
+
+        if ($validLocations === null) {
+            $reflection = new ReflectionClass(PanelsRenderHook::class);
+            $validLocations = array_values($reflection->getConstants());
+        }
+
+        return in_array($location, $validLocations, true);
+    }
+
+    protected function getLocation(): string
+    {
+        return $this->evaluate($this->location);
+    }
 }
diff --git a/src/Enums/AutoLogoutPosition.php b/src/Enums/AutoLogoutPosition.php
