phone validation: bugfixes, tweaks and refinements

app/site.rb

@@ -304,6 +304,13 @@ get '/site/:username/confirm_phone' do
   erb :'site/confirm_phone'
 end
 
+def restart_phone_verification
+  current_site.phone_verification_sent_at = nil
+  current_site.phone_verification_sid = nil
+  current_site.save_changes validate: false
+  redirect "/site/#{current_site.username}/confirm_phone"
+end
+
 post '/site/:username/confirm_phone' do
   require_login
   redirect '/' unless current_site.phone_verification_needed?
@@ -335,6 +342,11 @@ post '/site/:username/confirm_phone' do
 
     flash[:success] = 'Validation message sent! Check your phone and enter the code below.'
   else
+
+    restart_phone_verification if current_site.phone_verification_sent_at < Time.now - Site::PHONE_VERIFICATION_EXPIRATION_TIME
+    minutes_remaining = ((current_site.phone_verification_sent_at - (Time.now - Site::PHONE_VERIFICATION_EXPIRATION_TIME))/60).round
+
+    begin
       # Check code
       vc = $twilio.verify
                   .v2
@@ -347,7 +359,17 @@ post '/site/:username/confirm_phone' do
         current_site.phone_verified = true
         current_site.save_changes validate: false
       else
-      flash[:error] = 'Code was not correct, please re-enter.'
+        flash[:error] = "Code was not correct, please try again. If the phone number you entered was incorrect, you can re-enter the number after #{minutes_remaining} more minutes have passed."
+      end
+
+    rescue Twilio::REST::RestError => e
+      if e.message =~ /60202/
+        flash[:error] = "You have exhausted your check attempts. Please try again in #{minutes_remaining} minutes."
+      elsif e.message =~ /20404/ # Unable to create record
+        restart_phone_verification
+      else
+        raise e
+      end
     end
   end
 

config.yml.ci

@@ -21,3 +21,6 @@ cache_control_ips:
   - 4.5.6.7
 hcaptcha_site_key: "10000000-ffff-ffff-ffff-000000000001"
 hcaptcha_secret_key: "0x0000000000000000000000000000000000000000"
+twilio_account_sid: ACEDERPDERP
+twilio_auth_token: derpderpderp
+twilio_service_sid: VADERPDERPDERP

config.yml.template

@@ -55,3 +55,6 @@ test:
   cache_control_ips:
     - 1.2.3.4
     - 4.5.6.7
+  twilio_account_sid: ACEDERPDERP
+  twilio_auth_token: derpderpderp
+  twilio_service_sid: VADERPDERPDERP

migrations/120_fix_phone_sent_at.rb

@@ -0,0 +1,11 @@
+Sequel.migration do
+  up {
+    DB.drop_column :sites, :phone_verification_sent_at
+    DB.add_column :sites, :phone_verification_sent_at, Time
+  }
+
+  down {
+    DB.drop_column :sites, :phone_verification_sent_at
+    DB.add_column :sites, :phone_verification_sent_at, :time
+  }
+end

models/site.rb

@@ -167,6 +167,9 @@ class Site < Sequel::Model
   BLACK_BOX_WAIT_TIME = 10.seconds
   MAX_DISPLAY_FOLLOWS = 56*3
 
+  PHONE_VERIFICATION_EXPIRATION_TIME = 10.minutes
+  PHONE_VERIFICATION_LOCKOUT_ATTEMPTS = 3
+
   many_to_many :tags
 
   one_to_many :profile_comments

views/site/confirm_phone.erb

@@ -2,7 +2,7 @@
   <h2>Verify your phone number</h2>
   <div class="txt-Center"><img src="/img/catbus.png" width="90px"></div>
   <h3 class="subtitle">
-    You're almost ready!<br>
+    Last thing!<br>
     To prevent spam and keep the searchability of your site high, we have one last step:
     <br>please verify your mobile phone number.
   </h3>
@@ -27,13 +27,13 @@
         <% if current_site.phone_verification_sid %>
           <fieldset>
             <label for="token">Enter the code:<br></label>
-          <input name="code" type="text" class="input-Area" autofill="off" autocapitalize="off" autocorrect="off" value="<%= flash[:code] %>" style="width: 290px">
+          <input name="code" type="text" class="input-Area" autofill="off" autocapitalize="off" autocorrect="off" value="<%= flash[:code] %>" style="width: 100px" maxlength=6>
           </fieldset>
           <input class="btn-Action" type="submit" value="Verify Code">
         <% else %>
 
           <fieldset>
-            <label for="token">Enter your phone number<br><small>(including country code)</small></label>
+            <label for="phone">Enter your phone number<br><small>(including country code)</small></label>
           <input id="phone" name="phone" type="text" class="input-Area" autofill="off" autocapitalize="off" autocorrect="off" autocomplete="off" style="width: 290px">
           <input id="phone_intl" name="phone_intl" type="hidden">
           </fieldset>