✨ Support Turnstile Execution modes

- More samples
MichelJansson · Dec 9, 2023 · 9c49610 · 9c49610
1 parent 069f8c8
commit 9c49610
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ Use the `BlazorTurnstile` component to render the Cloudflare Turnstile widget.
 <Turnstile @bind-Token="@_turnstileToken"
            SiteKey="[your-site-key]"
            Appearance="@TurnstileAppearance.Always"
+           Execution="@TurnstileExecution.Render"
            Theme="@TurnstileTheme.Light"
            OnCallback="@TurnstileCallback"
            OnErrorCallback="@TurnstileErrorCallback"

diff --git a/samples/BlazorWebAssembly/Pages/AppearanceModeInteractionOnly.razor b/samples/BlazorWebAssembly/Pages/AppearanceModeInteractionOnly.razor
@@ -0,0 +1,42 @@
+@using BlazorTurnstile
+
+<Turnstile @bind-Token="@_turnstileToken"
+           SiteKey="1x00000000000000000000AA"
+           OnCallback="@TurnstileCallback"
+           OnErrorCallback="@TurnstileErrorCallback"
+           Theme="@TurnstileTheme.Light"
+           Appearance="@TurnstileAppearance.InteractionOnly"
+           @ref="turnstile" />
+
+<button class="btn btn-secondary" @onclick="ResetTurnstile">Reset Turnstile</button>
+
+<h3 class="mt-3 h4">Token:</h3>
+@if (_turnstileToken != null)
+{
+    @_turnstileToken
+}
+else
+{
+    <i>Loading or error...</i>
+}
+
+@code {
+    private Turnstile turnstile = default!;
+
+    private string? _turnstileToken;
+
+    private void TurnstileCallback(string token)
+    {
+        Console.WriteLine($"Turnstile Token: {token}");
+    }
+
+    private void TurnstileErrorCallback(string message)
+    {
+        Console.WriteLine($"Turnstile Error: {message}");
+    }
+
+    private async void ResetTurnstile()
+    {
+        await turnstile.ResetAsync();
+    }
+}
diff --git a/samples/BlazorWebAssembly/Pages/ExecutionModeExecute.razor b/samples/BlazorWebAssembly/Pages/ExecutionModeExecute.razor
@@ -0,0 +1,49 @@
+@using BlazorTurnstile
+
+<Turnstile @bind-Token="@_turnstileToken"
+           SiteKey="1x00000000000000000000AA"
+           OnCallback="@TurnstileCallback"
+           OnErrorCallback="@TurnstileErrorCallback"
+           Theme="@TurnstileTheme.Light"
+           Appearance="@TurnstileAppearance.Execute"
+           Execution="@TurnstileExecution.Execute"
+           @ref="turnstile" />
+
+<button class="btn btn-primary" @onclick="ExecuteTurnstile">Execute Turnstile</button>
+<button class="btn btn-secondary" @onclick="ResetTurnstile">Reset Turnstile</button>
+
+<h3 class="mt-3 h4">Token:</h3>
+@if (_turnstileToken != null)
+{
+    @_turnstileToken
+}
+else
+{
+    <i>Waiting for execution...</i>
+}
+
+@code {
+    private Turnstile turnstile = default!;
+
+    private string? _turnstileToken;
+
+    private void TurnstileCallback(string token)
+    {
+        Console.WriteLine($"Turnstile Token: {token}");
+    }
+
+    private void TurnstileErrorCallback(string message)
+    {
+        Console.WriteLine($"Turnstile Error: {message}");
+    }
+
+    private async void ExecuteTurnstile()
+    {
+        await turnstile.ExecuteAsync();
+    }
+
+    private async void ResetTurnstile()
+    {
+        await turnstile.ResetAsync();
+    }
+}
diff --git a/samples/BlazorWebAssembly/Pages/Home.razor → ...es/BlazorWebAssembly/Pages/HomePage.razor b/samples/BlazorWebAssembly/Pages/Home.razor → ...es/BlazorWebAssembly/Pages/HomePage.razor
@@ -3,22 +3,18 @@
 
 <PageTitle>BlazorTurnstile Samples</PageTitle>
 
-<h1>BlazorTurnstile</h1>
+<h1>Blazor Turnstile</h1>
 
 <Turnstile @bind-Token="@_turnstileToken"
            SiteKey="1x00000000000000000000AA"
-           Theme="@TurnstileTheme.Light"
            OnCallback="@TurnstileCallback"
            OnErrorCallback="@TurnstileErrorCallback"
-           ResponseField="@false"
-           Appearance="@TurnstileAppearance.Always"
+           Theme="@TurnstileTheme.Light"
            @ref="turnstile" />
 
-<button @onclick="ResetTurnstile">
-    Reset Turnstile
-</button>
+<button class="btn btn-secondary" @onclick="ResetTurnstile">Reset Turnstile</button>
 
-<h3 class="mt-3">Token</h3>
+<h3 class="mt-3 h4">Token:</h3>
 @if (_turnstileToken != null)
 {
     @_turnstileToken
@@ -28,6 +24,16 @@ else
     <i>Loading or error...</i>
 }
 
+<hr />
+
+<h2>Appearance mode: Interaction-Only</h2>
+<AppearanceModeInteractionOnly />
+
+<hr />
+
+<h2>Execution mode: Execute</h2>
+<ExecutionModeExecute />
+
 @code {
     private Turnstile turnstile = default!;
 

diff --git a/src/BlazorTurnstile/Interop.cs b/src/BlazorTurnstile/Interop.cs
@@ -41,6 +41,8 @@ public async ValueTask<string> RenderAsync(
         return await module.InvokeAsync<string>("render", component, widgetElement, jsonElement);
     }
 
+    public ValueTask ExecuteAsync(ElementReference widgetElement) => _js.InvokeVoidAsync("turnstile.execute", widgetElement);
+
     public ValueTask ResetAsync(string widgetId) => _js.InvokeVoidAsync("turnstile.reset", widgetId);
 
     public ValueTask RemoveAsync(string widgetId) => _js.InvokeVoidAsync("turnstile.remove", widgetId);

diff --git a/src/BlazorTurnstile/Turnstile.razor b/src/BlazorTurnstile/Turnstile.razor
@@ -48,6 +48,12 @@
     [Parameter]
     public TurnstileAppearance? Appearance { get; set; }
 
+    /// <summary>
+    /// Execution controls when to obtain the token of the widget and can be on render (default) or on execute.
+    /// </summary>
+    [Parameter]
+    public TurnstileExecution? Execution { get; set; }
+
     /// <summary>
     /// The widget theme. The default is auto, which respects the user preference.
     /// </summary>
@@ -91,6 +97,7 @@
             {
                 Action = Action,
                 Appearance = Appearance,
+                Execution = Execution,
                 Theme = Theme,
                 Size = Size,
                 ResponseField = ResponseField,
@@ -118,6 +125,14 @@
         await OnErrorCallback.InvokeAsync(message);
     }
 
+    public async Task ExecuteAsync()
+    {
+        if (_interop != null)
+        {
+            await _interop.ExecuteAsync(_element);
+        }
+    }
+
     public async Task ResetAsync()
     {
         if (Token != null)

diff --git a/src/BlazorTurnstile/TurnstileExecution.cs b/src/BlazorTurnstile/TurnstileExecution.cs
@@ -0,0 +1,7 @@
+namespace BlazorTurnstile;
+
+public enum TurnstileExecution
+{
+    Render,
+    Execute
+}
diff --git a/src/BlazorTurnstile/TurnstileParameters.cs b/src/BlazorTurnstile/TurnstileParameters.cs
@@ -6,6 +6,7 @@ internal record TurnstileParameters(string Sitekey)
     public TurnstileAppearance? Appearance { get; set; }
     public TurnstileTheme? Theme { get; set; }
     public TurnstileSize? Size { get; set; }
+    public TurnstileExecution? Execution { get; set; }
     public bool? ResponseField { get; set; }
     public string? ResponseFieldName { get; set; }
 }