Merge pull request #7 from kaptk2/widget-configurations

Closes #1
Closes #2

.github/workflows/dependabot-auto-merge.yml

@@ -13,7 +13,7 @@ jobs:
 
       - name: Dependabot metadata
         id: metadata
-        uses: dependabot/[email protected].5
+        uses: dependabot/[email protected].4
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
 

README.md

@@ -52,11 +52,11 @@ In your layout file, include the Turnstile scripts using the `@turnstileScripts`
 </html>
 ```
 
-Once that's done, you can use the `@turnstile` directive in `<form>` to output the appropriate markup with your site key configured.
+Once that's done, you can use the `<x-turnstile />` component inside of a `<form>` to output the appropriate markup with your site key configured.
 
 ```blade
 <form action="/" method="POST">
-    @turnstile()
+    <x-turnstile />
 
     <button>
         Submit
@@ -101,6 +101,36 @@ public function submit(Request $request)
 }
 ```
 
+### Customizing the widget
+
+You can customize the widget by passing attributes to the `<x-turnstile />` component.
+
+> To learn more about these parameters, refer to [the offical documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations).
+
+```blade
+<form action="/" method="POST">
+    <x-turnstile
+        data-action="login"
+        data-cdata="sessionid-123456789"
+        data-callback="callback"
+        data-expired-callback="expiredCallback"
+        data-error-callback="errorCallback"
+        data-theme="dark"
+        data-tabindex="1"
+    />
+
+    <button>
+        Submit
+    </button>
+</form>
+```
+
+This package can also integrate seamlessly with [Livewire](https://laravel-livewire.com). Upon successful validation, the property specified inside of `wire:model` will be updated with the Turnstile token.
+
+```blade
+<x-turnstile wire:model="yourModel" />
+```
+
 ## Testing
 
 ```bash
@@ -122,7 +152,7 @@ Please review [our security policy](../../security/policy) on how to report secu
 ## Credits
 
 - [Ryan Chandler](https://github.com/ryangjchandler)
-- [All Contributors](../../contributors)
+- [All contributors](../../contributors)
 
 ## License
 

composer.json

@@ -31,7 +31,8 @@
         "phpstan/phpstan-deprecation-rules": "^1.0",
         "phpstan/phpstan-phpunit": "^1.0",
         "phpunit/phpunit": "^9.5",
-        "spatie/laravel-ray": "^1.26"
+        "spatie/laravel-ray": "^1.26",
+        "spatie/pest-plugin-snapshots": "^1.1"
     },
     "autoload": {
         "psr-4": {

resources/views/components/turnstile.blade.php

@@ -0,0 +1,19 @@
+<div
+    class="cf-turnstile"
+    data-sitekey="{{ config('services.turnstile.key') }}"
+    @if ($attributes->has('wire:model'))
+        wire:ignore
+        data-callback="captchaCallback"
+        {{ $attributes->filter(fn($value, $key) => ! in_array($key, ['data-callback', 'wire:model'])) }}
+    @else
+        {{ $attributes->whereStartsWith('data-') }}
+    @endif
+></div>
+
+@if ($attributes->has('wire:model'))
+    <script>
+        function captchaCallback(token) {
+            @this.set("{{ $attributes->get('wire:model') }}", token);
+        }
+    </script>
+@endif

src/LaravelCloudflareTurnstileServiceProvider.php

@@ -5,6 +5,7 @@
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Validation\Rule;
 use RyanChandler\LaravelCloudflareTurnstile\Rules\Turnstile;
+use RyanChandler\LaravelCloudflareTurnstile\View\Components\Turnstile as TurnstileComponent;
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
 
@@ -26,14 +27,12 @@ public function packageRegistered()
 
     public function packageBooted()
     {
+        Blade::component('turnstile', TurnstileComponent::class);
+
         Blade::directive('turnstileScripts', function () {
             return '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';
         });
 
-        Blade::directive('turnstile', function () {
-            return '<div class="cf-turnstile" data-sitekey="'.config('services.turnstile.key').'"></div>';
-        });
-
         Rule::macro('turnstile', function () {
             return app(Turnstile::class);
         });

src/View/Components/Turnstile.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace RyanChandler\LaravelCloudflareTurnstile\View\Components;
+
+use Illuminate\View\Component;
+
+class Turnstile extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('cloudflare-turnstile::components.turnstile');
+    }
+}

tests/TurnstileBladeDirectiveTest.php

@@ -0,0 +1,63 @@
+<?php
+
+use Illuminate\Support\Facades\Blade;
+use function Spatie\Snapshots\assertMatchesHtmlSnapshot;
+
+beforeEach(function () {
+    config()->set('services.turnstile.key', '1x00000000000000000000AA');
+    config()->set('services.turnstile.secret', '2x0000000000000000000000000000000AA');
+});
+
+it('can render a turnstile widget', function () {
+    $html = Blade::render('<x-turnstile />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom action', function () {
+    $html = Blade::render('<x-turnstile data-action="test-action" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom cdata', function () {
+    $html = Blade::render('<x-turnstile data-cdata="test-cdata" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom callback', function () {
+    $html = Blade::render('<x-turnstile data-callback="testCallback" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom expired callback', function () {
+    $html = Blade::render('<x-turnstile data-expired-callback="testExpiredCallback" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom error callback', function () {
+    $html = Blade::render('<x-turnstile data-error-callback="testErrorCallback" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a custom theme', function () {
+    $html = Blade::render('<x-turnstile data-theme="dark" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a tabindex', function () {
+    $html = Blade::render('<x-turnstile data-tabindex="1" />');
+
+    assertMatchesHtmlSnapshot($html);
+});
+
+it('can render a turnstile widget with a wire model', function () {
+    $html = Blade::render('<x-turnstile wire:model="captcha" />');
+
+    assertMatchesHtmlSnapshot($html);
+});

tests/TurnstileScriptBladeDirectiveTest.php

@@ -0,0 +1,10 @@
+<?php
+
+use Illuminate\Support\Facades\Blade;
+use function Spatie\Snapshots\assertMatchesHtmlSnapshot;
+
+it('can render a turnstile script snippet', function () {
+    $html = Blade::render('@turnstileScripts');
+
+    assertMatchesHtmlSnapshot($html);
+});

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_action__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-action="test-action"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_callback__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-callback="testCallback"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_cdata__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-cdata="test-cdata"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_error_callback__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-error-callback="testErrorCallback"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_expired_callback__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-expired-callback="testExpiredCallback"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_custom_theme__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-theme="dark"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_tabindex__1.html

@@ -0,0 +1,4 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" data-tabindex="1"></div>
+
+</body></html>

tests/__snapshots__/TurnstileBladeDirectiveTest__it_can_render_a_turnstile_widget_with_a_wire_model__1.html

@@ -0,0 +1,9 @@
+<html><body>
+<div class="cf-turnstile" data-sitekey="1x00000000000000000000AA" wire:ignore data-callback="captchaCallback"></div>
+
+    <script>
+        function captchaCallback(token) {
+            @this.set("captcha", token);
+        }
+    </script>
+</body></html>

tests/__snapshots__/TurnstileScriptBladeDirectiveTest__it_can_render_a_turnstile_script_snippet__1.html

@@ -0,0 +1 @@
+<html><head><script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script></head></html>