Merge pull request #7 from lukeraymonddowning/vanilla-js

Removes the requirement for Alpine JS

.gitignore

@@ -1 +1,3 @@
-vendor
+vendor/
+.phpunit.result.cache
+composer.lock

README.md

@@ -69,11 +69,7 @@ That's it! Your route is now protected from spam. If you want to take it to the
 Honey makes it a breeze to integrate Google's [Recaptcha](https://developers.google.com/recaptcha) on your Laravel
 site. We integrate with Recaptcha v3 for completely seamless and invisible bot prevention. Here's how to get started.
 
-Honey uses [Alpine JS](https://github.com/alpinejs/alpine) to integrate Recaptcha. If you don't want to use Alpine,
-you can still use Honey, but you won't be able to use its Recaptcha integration. Follow Alpine's 30 second install
-instructions, then come back here.
-
-Next, you need to go grab a key pair from Google. You can get yours here: 
+First, you need to go grab a key pair from Google. You can get yours here: 
 [https://g.co/recaptcha/v3](https://g.co/recaptcha/v3). Head into your `.env` file, and add your key pair.
 
 ```dotenv
@@ -270,14 +266,13 @@ When you include the `<x-honey/>` blade directive, Honey adds a hidden input to
 If the form is submitted faster than defined in the `minimum_time_passed` config entry, or removes the input from the request, 
 this check will fail.
 
-##### Alpine input filled check
-This check is disabled by default, because not everybody uses Alpine JS, but if you do, you should enable it. 
+##### Javascript input filled check
 When you include the `<x-honey/>` blade directive, Honey adds a hidden input to your form. It starts empty, but after
-the time specified in the `minimum_time_passed` config entry, Alpine JS fills the input with an encrypted value.
+the time specified in the `minimum_time_passed` config entry, Javascript fills the input with an encrypted value.
 If the input has been filled out with a different value, or has no value, the check will fail.
 
 #### Minimum time passed
-If you have the minimum time passed check or the alpine input filled check enabled, both checks will use this value
+If you have the minimum time passed check or the Javascript input filled check enabled, both checks will use this value
 to determine, in seconds, the minimum amount of time that should pass from the page loading until the form can be 
 submitted. Forms that are submitted more quickly than this will fail the spam check.
 

config/config.php

@@ -1,5 +1,6 @@
 <?php
 
+use Lukeraymonddowning\Honey\Checks\JavascriptInputFilledCheck;
 use Lukeraymonddowning\Honey\Checks\MinimumTimePassedCheck;
 use Lukeraymonddowning\Honey\Checks\PresentButEmptyCheck;
 use Lukeraymonddowning\Honey\Checks\UserIsBlockedSpammerCheck;
@@ -53,7 +54,7 @@
         UserIsBlockedSpammerCheck::class,
         PresentButEmptyCheck::class,
         MinimumTimePassedCheck::class,
-        // AlpineInputFilledCheck::class,
+        JavascriptInputFilledCheck::class,
     ],
 
     /**
@@ -63,7 +64,7 @@
      *
      * Here you can alter how long, in seconds, must have passed between
      * a form loading and the request coming back in if you have either
-     * `MinimumTimePassedCheck` or `AlpineInputFilledCheck` enabled.
+     * `MinimumTimePassedCheck` or `JavascriptInputFilledCheck` enabled.
      */
     'minimum_time_passed' => 3,
 
@@ -110,7 +111,7 @@
                 'names' => [
                     'present_but_empty' => 'honey_present',
                     'time_of_page_load' => 'honey_time',
-                    'alpine_input' => 'honey_alpine',
+                    'javascript_input' => 'honey_javascript',
                     'recaptcha_input' => 'honey_recaptcha_token'
                 ]
             ],
@@ -127,7 +128,7 @@
      * different values. Not all inputs support this feature.
      */
     'input_values' => [
-        'alpine' => Lukeraymonddowning\Honey\InputValues\AlpineInputValue::class,
+        'javascript' => Lukeraymonddowning\Honey\InputValues\JavascriptInputValue::class,
         'time_of_page_load' => Lukeraymonddowning\Honey\InputValues\TimeOfPageLoadValue::class,
     ],
 

src/Checks/AlpineInputFilledCheck.php → src/Checks/JavascriptInputFilledCheck.php

@@ -8,7 +8,7 @@
 use Lukeraymonddowning\Honey\InputNameSelectors\InputNameSelector;
 use Lukeraymonddowning\Honey\InputValues\Values;
 
-class AlpineInputFilledCheck implements Check
+class JavascriptInputFilledCheck implements Check
 {
     private InputNameSelector $inputNameSelector;
 
@@ -32,15 +32,15 @@ public function passes($data): bool
 
     protected function notInRequest($data)
     {
-        return !array_key_exists($this->inputNameSelector->getAlpineInputName(), $data);
+        return !array_key_exists($this->inputNameSelector->getJavascriptInputName(), $data);
     }
 
     protected function hasUnexpectedValue($data)
     {
-        $value = $data[$this->inputNameSelector->getAlpineInputName()];
+        $value = $data[$this->inputNameSelector->getJavascriptInputName()];
 
         try {
-            return !Values::alpine()->checkValue($value);
+            return !Values::javascript()->checkValue($value);
         } catch (Exception $exception) {
             return true;
         }

src/InputNameSelectors/InputNameSelector.php

@@ -10,7 +10,7 @@ public function getPresentButEmptyInputName(): string;
 
     public function getTimeOfPageLoadInputName(): string;
 
-    public function getAlpineInputName(): string;
+    public function getJavascriptInputName(): string;
 
     public function getRecaptchaInputName(): string;
 }

src/InputNameSelectors/StaticInputNameSelector.php

@@ -23,9 +23,9 @@ public function getTimeOfPageLoadInputName(): string
         return $this->inputNames['time_of_page_load'];
     }
 
-    public function getAlpineInputName(): string
+    public function getJavascriptInputName(): string
     {
-        return $this->inputNames['alpine_input'];
+        return $this->inputNames['javascript_input'];
     }
 
     public function getRecaptchaInputName(): string

src/InputValues/AlpineInputValue.php → src/InputValues/JavascriptInputValue.php

@@ -6,7 +6,7 @@
 
 use Illuminate\Support\Facades\Crypt;
 
-class AlpineInputValue implements InputValue
+class JavascriptInputValue implements InputValue
 {
     public function getValue(): string
     {

src/InputValues/Values.php

@@ -7,9 +7,9 @@
 class Values
 {
 
-    public static function alpine()
+    public static function javascript()
     {
-        return static::resolve('alpine');
+        return static::resolve('javascript');
     }
 
     public static function timeOfPageLoad()

src/Traits/WithHoney.php

@@ -21,7 +21,7 @@ public function mountWithHoney()
     {
         $this->honeyInputs[Honey::inputs()->getPresentButEmptyInputName()] = null;
         $this->honeyInputs[Honey::inputs()->getTimeOfPageLoadInputName()] = Values::timeOfPageLoad()->getValue();
-        $this->honeyInputs[Honey::inputs()->getAlpineInputName()] = null;
+        $this->honeyInputs[Honey::inputs()->getJavascriptInputName()] = null;
     }
 
     public function getHoneyPassedProperty()

src/Views/Honey.php

@@ -20,10 +20,27 @@ public function __construct(InputNameSelector $inputNameSelector)
     public function render()
     {
         return <<<'blade'
-                <div style="display: {{ isset($attributes['debug']) ? 'block' : 'none' }};">
-                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getPresentButEmptyInputName() }}" type="text" name="{{ $inputNameSelector->getPresentButEmptyInputName() }}" value="">
-                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getTimeOfPageLoadInputName() }}" type="text" name="{{ $inputNameSelector->getTimeOfPageLoadInputName() }}" value="{{ $timeOfPageLoadValue() }}">
-                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getAlpineInputName() }}" x-data="" x-init="setTimeout(function() { if ($el.value.length == 0) { $el.value = '{{ $alpineValue() }}'; $el.dispatchEvent(new Event('change'))} }, {{ $alpineTimeout() }})" type="text" name="{{ $inputNameSelector->getAlpineInputName() }}" value="">
+                @once
+                    <script>
+                        window.addEventListener('load', () => {
+                            setTimeout(() => {
+                                document.querySelectorAll('input[data-purpose="{{ $inputNameSelector->getJavascriptInputName() }}"]')
+                                    .forEach(input => {
+                                        if (input.value.length > 0) {
+                                            return;
+                                        }
+                                        
+                                        input.value = "{{ $javascriptValue() }}";
+                                        input.dispatchEvent(new Event('change'));
+                                    });
+                            }, {{ $javascriptTimeout() }})
+                        });
+                    </script>
+                @endonce
+                <div style="display: @isset($attributes['debug']) block @else none @endisset;">
+                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getPresentButEmptyInputName() }}" name="{{ $inputNameSelector->getPresentButEmptyInputName() }}" value="">
+                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getTimeOfPageLoadInputName() }}" name="{{ $inputNameSelector->getTimeOfPageLoadInputName() }}" value="{{ $timeOfPageLoadValue() }}">
+                    <input wire:model.lazy.defer="honeyInputs.{{ $inputNameSelector->getJavascriptInputName() }}" data-purpose="{{ $inputNameSelector->getJavascriptInputName() }}" name="{{ $inputNameSelector->getJavascriptInputName() }}" value="">
                     {{ $slot }}
                 </div>     
                 @isset($attributes['recaptcha'])
@@ -37,12 +54,12 @@ public function timeOfPageLoadValue()
         return Values::timeOfPageLoad()->getValue();
     }
 
-    public function alpineValue()
+    public function javascriptValue()
     {
-        return Values::alpine()->getValue();
+        return Values::javascript()->getValue();
     }
 
-    public function alpineTimeout()
+    public function javascriptTimeout()
     {
         return config('honey.minimum_time_passed') * 1000;
     }