Add phone number formatting to registration form

app/javascript/controllers/phone_format_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    this.inputTarget.addEventListener('input', this.formatPhoneNumber.bind(this))
+  }
+
+  formatPhoneNumber(event) {
+    const input = event.target
+    let value = input.value.replace(/\D/g, '') // Remove non-numeric characters
+
+    if (value.length > 10) {
+      value = value.slice(0, 10)
+    }
+
+    // Format the value
+    if (value.length > 6) {
+      value = value.replace(/(\d{3})(\d{3})(\d{0,4})/, '$1-$2-$3')
+    } else if (value.length > 3) {
+      value = value.replace(/(\d{3})(\d{0,3})/, '$1-$2')
+    }
+
+    input.value = value
+  }
+}

app/views/registrations/new.html.erb

@@ -57,7 +57,10 @@
 
                 <div class="form-group">
                     <%= form.label :phone_number %>
-                    <%= form.text_field :phone_number, class: 'form-control' %>
+                    <%= form.text_field :phone_number, 
+                                        placeholder: '123-456-7890', 
+                                        class: 'form-control', 
+                                        data: { controller: "phone-format", phone_format_target: "input" } %>
                     <div class="error-message" >
                         <%= @registration.errors.full_messages_for(:phone_number).join(', ') %>
                     </div>