Add optional phone number to hub managed signup form

Author: tobihagemann

i18n/de.yaml

@@ -734,6 +734,12 @@
   translation: "URL"
 - id: hub_managed_step_4_quantity
   translation: "Erwartete Nutzer"
+- id: hub_managed_step_4_phone
+  translation: "Telefonnummer"
+- id: hub_managed_step_4_phone_add
+  translation: "Telefonnummer hinzufügen (optional)"
+- id: hub_managed_step_4_phone_placeholder
+  translation: "z.B. +49 123 4567890"
 - id: hub_managed_step_4_message
   translation: "Nachricht"
 - id: hub_managed_step_4_message_add

i18n/en.yaml

@@ -773,6 +773,12 @@
   translation: "URL"
 - id: hub_managed_step_4_quantity
   translation: "Expected Users"
+- id: hub_managed_step_4_phone
+  translation: "Phone Number"
+- id: hub_managed_step_4_phone_add
+  translation: "Add phone number (optional)"
+- id: hub_managed_step_4_phone_placeholder
+  translation: "e.g., +49 123 4567890"
 - id: hub_managed_step_4_message
   translation: "Message"
 - id: hub_managed_step_4_message_add

layouts/hub-managed/single.html

@@ -2,7 +2,7 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section x-data="{steps: ['{{ i18n "hub_managed_step_1_nav_title" }}', '{{ i18n "hub_managed_step_2_nav_title" }}', '{{ i18n "hub_managed_step_3_nav_title" }}', '{{ i18n "hub_managed_step_4_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, email: '', subdomain: '', quantity: null, message: null, acceptNewsletter: false, earlyaccess: false}, acceptTerms: false, lowQuantityModalIsOpen: false, hubManaged: null, captchaState: null}" x-init="hubManaged = new HubManaged($refs.form, feedbackData, submitData)" class="container py-12">
+  <section x-data="{steps: ['{{ i18n "hub_managed_step_1_nav_title" }}', '{{ i18n "hub_managed_step_2_nav_title" }}', '{{ i18n "hub_managed_step_3_nav_title" }}', '{{ i18n "hub_managed_step_4_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: ''}, submitData: {captcha: null, email: '', subdomain: '', quantity: null, phone: null, message: null, acceptNewsletter: false, earlyaccess: false}, acceptTerms: false, lowQuantityModalIsOpen: false, hubManaged: null, captchaState: null}" x-init="hubManaged = new HubManaged($refs.form, feedbackData, submitData)" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_managed_description" }}</p>
@@ -164,6 +164,16 @@ <h2 class="font-h2 mb-6">
                     </span>
                     <span class="font-p text-sm" x-text="submitData.quantity"></span>
                   </li>
+                  <li class="flex justify-between gap-2">
+                    <span class="font-p text-sm text-gray-500">
+                      {{ i18n "hub_managed_step_4_phone" }}
+                    </span>
+                    <a x-show="submitData.phone == null" href="#" class="font-p text-link text-sm" @click.prevent="submitData.phone = ''">
+                      <i class="fa-solid fa-plus-circle"></i>
+                      {{ i18n "hub_managed_step_4_phone_add" }}
+                    </a>
+                    <input x-show="submitData.phone != null" type="tel" id="phone" pattern="\+?[\d\s]{6,}" maxlength="30" class="input-box text-sm w-full max-w-xs" placeholder="{{ i18n "hub_managed_step_4_phone_placeholder" }}" x-model="submitData.phone" x-cloak>
+                  </li>
                   <li class="flex justify-between gap-2">
                     <span class="font-p text-sm text-gray-500">
                       {{ i18n "hub_managed_step_4_message" }}