Add all files

themes/lucentui/views/components/captcha/hcaptcha.blade.php

@@ -0,0 +1,23 @@
+<script src="https://js.hcaptcha.com/1/api.js?render=explicit&onload=captchaOnload" async defer></script>
+<div id="h-captcha" data-sitekey="{{ config('settings.captcha_site_key') }}"></div>
+
+<script>
+    function captchaOnload() {
+        // On livewire validation error reset captcha
+        Livewire.hook('request', ({
+            succeed,
+            fail
+        }) => {
+            succeed(() => {
+                hcaptcha.reset();
+            });
+        })
+
+        hcaptcha.render('h-captcha', {
+            sitekey: '{{ config('settings.captcha_site_key') }}',
+            callback: function(token) {
+                @this.set('captcha', token, false)
+            },
+        });
+    }
+</script>

themes/lucentui/views/components/captcha/index.blade.php

@@ -0,0 +1,26 @@
+@if (config('settings.captcha') !== 'disabled')
+    <div class="flex flex-col items-center justify-center bg-background-secondary/50 mt-4 p-4 border border-primary/50 rounded-lg shadow-md">
+        <div wire:ignore class="w-full">
+            <p class="text-base text-sm text-center">
+                Are you a bot?
+            </p>
+            <p class="text-xs text-center text-base/50 mb-4">
+                Please complete the CAPTCHA below to continue.
+            </p>
+            <div class="flex justify-center">
+                @if (config('settings.captcha') == 'recaptcha-v2')
+                    <x-captcha.recaptcha-v2 :$form />
+                @elseif(config('settings.captcha') == 'recaptcha-v3')
+                    <x-captcha.recaptcha-v3 :$form />
+                @elseif(config('settings.captcha') == 'turnstile')
+                    <x-captcha.turnstile :$form />
+                @elseif(config('settings.captcha') == 'hcaptcha')
+                    <x-captcha.hcaptcha :$form />
+                @endif
+            </div>
+        </div>
+        @error('captcha')
+            <p class="text-red-500 text-xs mt-2 text-center">{{ $message }}</p>
+        @enderror
+    </div>
+@endif

themes/lucentui/views/components/captcha/recaptcha-v2.blade.php

@@ -0,0 +1,21 @@
+<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=captchaOnload" async defer></script>
+<div id="g-recaptcha" data-sitekey="{{ config('settings.captcha_site_key') }}"></div>
+
+<script>
+    function captchaOnload() {
+        // On livewire validation error reset captcha
+        Livewire.hook('request', ({
+            succeed,
+            fail
+        }) => {
+            succeed(() => grecaptcha.reset());
+        })
+
+        grecaptcha.render('g-recaptcha', {
+            sitekey: '{{ config('settings.captcha_site_key') }}',
+            callback: function(token) {
+                @this.set('captcha', token, false)
+            },
+        });
+    }
+</script>

themes/lucentui/views/components/captcha/recaptcha-v3.blade.php

@@ -0,0 +1,21 @@
+<script src="https://www.google.com/recaptcha/api.js?render={{ config('settings.captcha_site_key') }}" async defer>
+</script>
+<div id="g-recaptcha" data-sitekey="{{ config('settings.captcha_site_key') }}"></div>
+
+<script>
+    document.addEventListener('livewire:initialized', () => {
+        const submitBtn = document.querySelector('#{{ $form }} button[type="submit"]')
+
+        submitBtn.addEventListener("click", function(event) {
+            event.preventDefault();
+            grecaptcha.ready(function() {
+                grecaptcha.execute('{{ config('settings.captcha_site_key') }}', {
+                    action: 'submit'
+                }).then(function(token) {
+                    @this.set('captcha', token, false)
+                    @this.submit();
+                });
+            });
+        });
+    });
+</script>

themes/lucentui/views/components/captcha/turnstile.blade.php

@@ -0,0 +1,34 @@
+@assets
+<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
+@endassets
+
+<div id="cf-turnstile"></div>
+
+<script>
+    function renderTurnstile() {
+        const isDarkMode = localStorage.getItem('_x_darkMode') === 'true';
+        const theme = isDarkMode ? 'dark' : 'light';
+
+        turnstile.render('#cf-turnstile', {
+            sitekey: '{{ config('settings.captcha_site_key') }}',
+            size: 'flexible',
+            theme: theme,
+            callback: token => @this.set('captcha', token, false),
+        });
+    }
+
+    document.addEventListener('livewire:initialized', () => {
+        // On livewire validation error reset captcha
+        Livewire.hook('request', ({ succeed }) => {
+            succeed(() => {
+                turnstile.reset();
+            });
+        })
+    });
+</script>
+
+@script
+<script>
+    renderTurnstile();
+</script>
+@endscript