From 480f62cb1b3c86df50a65ec601c01b5710969d79 Mon Sep 17 00:00:00 2001 From: Goulven Champenois Date: Thu, 12 Oct 2023 22:24:27 +0200 Subject: [PATCH] UX improvements to the one-time-code field Small UX improvements - `autocomplete: "one-time-code"` allows browsers like Safari to automatically suggest OTPs received in SMS and emails. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#sect16 - `autofocus: true` opens the virtual keyboard automatically on mobile, and helps keyboard users on desktop too - `pattern: [a-z0-9]` allows browsers to adapt the virtual keyboard on mobile, and to validate before sending the form on mobile and desktop. You could even go the extra mile and add a stimulus controller to strip whitespace, in case the user copies spaces or newlines along with the code. --- app/views/auth_verification/show.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/auth_verification/show.html.erb b/app/views/auth_verification/show.html.erb index 7447408..dd6f7a9 100644 --- a/app/views/auth_verification/show.html.erb +++ b/app/views/auth_verification/show.html.erb @@ -11,7 +11,7 @@ <%= f.hidden_field :email, value: @email %>
- <%= f.text_field :verification_code, placeholder: "Verification Code", maxlength: 6, class: "mb-4 block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md sm:text-sm" %> + <%= f.text_field :verification_code, placeholder: "Verification Code", autofocus: true, autocomplete: "one-time-code", pattern: "[a-z0-9]", maxlength: 6, class: "mb-4 block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md sm:text-sm" %>
<%= f.button class: "w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500" do %>