From ae91361edb75aa627f0c0441d3b36582544f0e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 11 Nov 2021 02:24:39 +0100 Subject: [PATCH] Use telephone fields in phone number form controls Using a field with `type="tel"` causes most mobile phone browsers to show a numeric keyboard which makes it easy to enter phone numbers. We aren't using a number field because some browsers show "spinners" to increment/decrement numbers (which doesn't make much sense in a phone number) and because they don't allow characters like spaces. Phone numbers can have characters like spaces, dashes, parenthesis, asterisks, the plus sign, ... Since phone number formats vary depending on the region, and sometimes even within the same region several different formats can be used, for now we aren't offering any kind of format validation. We could offer a format validation that rejects just letters (although there are cases where letters are actually allowed). However, this causes issues at both the server side and the client side. We could use a client-side validation adding a `pattern` attribute to the field, but that would be something unlike anything else we use in the application, and we would need to to write some JavaScript in order to use a proper error message. On the other hand, if we add a server-side validation, we might find out existing users are invalid, and it would be impossible to update them in the many places where we update users assuming they were valid in the first place. We'd have to add a rake task to update existing user records and make sure they contain a valid phone number or create a setting so this validation only applies to new CONSUL installations. Another option would be to add a per-form validation, so the phone number is only validated in pages where it is introduced. All the mentioned scenarios offer certain complexities. So, for now, we're keeping things simple. Co-Authored-By: decabeza --- app/views/account/show.html.erb | 2 +- app/views/organizations/registrations/new.html.erb | 2 +- app/views/verification/sms/new.html.erb | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index 3976c1480..f4f2fe010 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -24,7 +24,7 @@ <%= fo.text_field :name, autofocus: true, maxlength: Organization.name_max_length %> <%= fo.text_field :responsible_name, autofocus: true, maxlength: Organization.responsible_name_max_length %> <% end %> - <%= f.text_field :phone_number %> + <%= f.phone_field :phone_number %> <% else %> <%= f.text_field :username, maxlength: User.username_max_length %> diff --git a/app/views/organizations/registrations/new.html.erb b/app/views/organizations/registrations/new.html.erb index e209c0e90..30e2dd2f6 100644 --- a/app/views/organizations/registrations/new.html.erb +++ b/app/views/organizations/registrations/new.html.erb @@ -15,7 +15,7 @@ <%= f.email_field :email %> - <%= f.text_field :phone_number %> + <%= f.phone_field :phone_number %> <%= f.invisible_captcha :address %> diff --git a/app/views/verification/sms/new.html.erb b/app/views/verification/sms/new.html.erb index b11255dc4..bef0e8539 100644 --- a/app/views/verification/sms/new.html.erb +++ b/app/views/verification/sms/new.html.erb @@ -29,8 +29,8 @@ <%= f.label :phone, t("verification.sms.new.phone"), class: "inline-block" %> <%= sanitize(t("verification.sms.new.phone_format")) %>

<%= t("verification.sms.new.phone_note") %>

- <%= f.text_field :phone, label: false, - aria: { describedby: "phone-help-text" } %> + <%= f.phone_field :phone, label: false, + aria: { describedby: "phone-help-text" } %> <%= f.submit t("verification.sms.new.submit_button"), class: "button success" %>