69e7ecfd3c
Our account creation form is publicly accessible, and open to abuse by spammers. The spam bots enter random email addresses and increase our bounce rate. We decided to add a captcha to the form to prevent this abuse. I evaluated a few options and decided to use Cloudflare's Turnstile since it's free and privacy-friendly. It's also easy to implement. [^1] We add their client-side widget to our form. This widget add token input and we use this token to verify the captcha on the server-side. I added `cloudflare_turnstile.erb` component to add Cloudflare Turnstile to any form easily. External Cloudflare script is loaded only when the component is used. There are 3 different modes for Turnstile: managed, non-interactive, and invisible [^2]. It's configurable in the Cloudflare UI. I think we can start with the invisible mode and see how it goes. [^1]: https://developers.cloudflare.com/turnstile/get-started/ [^2]: https://developers.cloudflare.com/turnstile/concepts/widget/
49 lines
1.4 KiB
Plaintext
49 lines
1.4 KiB
Plaintext
<% @page_title = "Create Account" %>
|
|
|
|
<% @page_message = "Create a new account" %>
|
|
|
|
<form class="rodauth space-y-6" role="form" method="POST">
|
|
<%== rodauth.create_account_additional_form_tags %>
|
|
<%== rodauth.csrf_tag %>
|
|
|
|
<%== render(
|
|
"components/form/text",
|
|
locals: {
|
|
name: "name",
|
|
label: "Full Name",
|
|
attributes: {
|
|
required: true,
|
|
autocomplete: "name"
|
|
}
|
|
}
|
|
) %>
|
|
|
|
<%== render("components/rodauth/login_field") %>
|
|
|
|
<% if rodauth.create_account_set_password? %>
|
|
<%== render("components/rodauth/password_field") %>
|
|
|
|
<% if rodauth.require_password_confirmation? %>
|
|
<%== render("components/rodauth/password_field", locals: {confirm: true}) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%== render("components/form/cloudflare_turnstile") %>
|
|
|
|
<div class="flex flex-col text-center">
|
|
<%== render("components/form/submit_button", locals: { text: "Create Account" }) %>
|
|
<a href="/login" class="mt-2 text-sm font-semibold leading-6 text-gray-900">Sign in to existing account</a>
|
|
</div>
|
|
|
|
<% if Config.managed_service %>
|
|
<div class="flex items-center justify-center">
|
|
<p class="text-sm text-gray-500 text-center">By signing up you agree to our
|
|
<a
|
|
href="https://ubicloud.com/terms-of-service"
|
|
target="_blank"
|
|
class="font-medium text-orange-500 hover:text-orange-600 underline underline-offset-2"
|
|
>terms of service</a>.</p>
|
|
</div>
|
|
<% end %>
|
|
</form>
|