ae91361edb
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 <alberto@decabeza.es>
40 lines
1.5 KiB
Plaintext
40 lines
1.5 KiB
Plaintext
<div class="verification account row">
|
|
<% track_event(category: "verification", action: "success_census") %>
|
|
<div class="small-12 column">
|
|
<div class="text-center">
|
|
|
|
<div class="small-4 column verification-step completed">
|
|
<span class="number">1</span> <%= t("verification.step_1") %>
|
|
</div>
|
|
<div class="small-4 column verification-step is-active">
|
|
<span class="number">2</span> <%= t("verification.step_2") %>
|
|
</div>
|
|
<div class="small-4 column verification-step">
|
|
<span class="number">3</span> <%= t("verification.step_3") %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progress small-12 success">
|
|
<span class="meter" style="width: 66%"></span>
|
|
</div>
|
|
|
|
<%= back_link_to account_path, t("verification.back") %>
|
|
|
|
<h1><%= t("verification.sms.new.title") %></h1>
|
|
|
|
<%= form_for @sms, as: "sms", url: sms_path do |f| %>
|
|
<%= render "shared/errors", resource: @sms %>
|
|
|
|
<div class="small-12 medium-6">
|
|
<%= f.label :phone, t("verification.sms.new.phone"), class: "inline-block" %>
|
|
<span class="inline-block"><%= sanitize(t("verification.sms.new.phone_format")) %></span>
|
|
<p class="help-text" id="phone-text-help"><%= t("verification.sms.new.phone_note") %></p>
|
|
<%= f.phone_field :phone, label: false,
|
|
aria: { describedby: "phone-help-text" } %>
|
|
</div>
|
|
|
|
<%= f.submit t("verification.sms.new.submit_button"), class: "button success" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|