add intermediate confirmation states to Hub CE registration and auto-fetch license key on step 3

Author: mindmonk

assets/js/hubce.js

@@ -15,8 +15,8 @@ class HubCE {
 
     // continue after email verified:
     if (searchParams.get('verifiedEmail')) {
-      feedbackData.currentStep = 2;
-      feedbackData.success = true;
+      feedbackData.currentStep = 1;
+      feedbackData.emailVerified = true;
     }
   }
 
@@ -81,6 +81,8 @@ class HubCE {
   }
 
   getHubLicense() {
+    this._feedbackData.inProgress = true;
+    this._feedbackData.errorMessage = '';
     $.ajax({
       url: REFRESH_LICENSE_URL,
       type: 'POST',
@@ -90,6 +92,7 @@ class HubCE {
       }
     }).done(response => {
       this._feedbackData.licenseText = response;
+      this._feedbackData.inProgress = false;
     }).fail(xhr => {
       this.onRequestFailed(xhr.responseJSON?.message || 'Fetching license failed.');
     });
@@ -101,7 +104,7 @@ class HubCE {
   }
 
   onRequestSucceeded() {
-    this._feedbackData.currentStep++;
+    this._feedbackData.emailSent = true;
     this._feedbackData.inProgress = false;
     this._feedbackData.errorMessage = '';
   }

i18n/en.yaml

@@ -667,6 +667,8 @@
   translation: "Step <span x-text=\"feedbackData.currentStep + 1\"></span> of <span x-text=\"steps.length\"></span>"
 - id: hub_ce_registration_steps_next
   translation: "Next"
+- id: hub_ce_registration_steps_continue
+  translation: "Continue"
 
 - id: hub_ce_registration_step_1_nav_title
   translation: "Email Address"
@@ -681,11 +683,19 @@
   translation: "Please confirm your email address"
 - id: hub_ce_registration_step_2_instructions
   translation: "We are going to send a confirmation email to <span x-text=\"submitData.email\"></span>"
+- id: hub_ce_registration_step_2_check_email
+  translation: "Please check your e-mails."
+- id: hub_ce_registration_step_2_email_verified
+  translation: "Your email has been verified successfully."
 
 - id: hub_ce_registration_step_3_license_nav_title
   translation: "License Key"
 - id: hub_ce_registration_step_3_license_title
   translation: "Your Community Edition License Key"
+- id: hub_ce_registration_step_3_loading
+  translation: "Loading license key..."
+- id: hub_ce_registration_step_3_success
+  translation: "Your new license key:"
 
 
 # Hub Managed

layouts/hub-register/single.html

@@ -2,7 +2,7 @@
   {{ partial "altcha-css.html" . }}
 {{ end }}
 {{ define "main" }}
-  <section x-data="{steps: ['{{ i18n "hub_ce_registration_step_1_nav_title" }}', '{{ i18n "hub_ce_registration_step_2_confirmation_nav_title" }}', '{{ i18n "hub_ce_registration_step_3_license_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: '', licenseText: null}, submitData: {captcha: null, oldLicense: '', email: '', acceptNewsletter: false}, acceptTerms: false, hubCE: null, captchaState: null}" x-init="hubCE = new HubCE($refs.form, feedbackData, submitData, new URLSearchParams(location.hash.substring(1)))" class="container py-12">
+  <section x-data="{steps: ['{{ i18n "hub_ce_registration_step_1_nav_title" }}', '{{ i18n "hub_ce_registration_step_2_confirmation_nav_title" }}', '{{ i18n "hub_ce_registration_step_3_license_nav_title" }}'], feedbackData: {currentStep: 0, success: false, inProgress: false, errorMessage: '', licenseText: null, emailSent: false, emailVerified: false}, submitData: {captcha: null, oldLicense: '', email: '', acceptNewsletter: false}, acceptTerms: false, hubCE: null, captchaState: null}" x-init="hubCE = new HubCE($refs.form, feedbackData, submitData, new URLSearchParams(location.hash.substring(1)))" class="container py-12">
     <header class="mb-6">
       <h1 class="font-h1 mb-8">{{ .Title }}</h1>
       <p class="lead">{{ i18n "hub_ce_registration_description" }}</p>
@@ -18,8 +18,8 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
           <ol role="list" class="flex items-center gap-3 md:flex-col md:items-start md:gap-6">
             <template x-for="(step, index) in steps" :key="index">
               <li>
-                <!-- Complete Step -->
-                <template x-if="index < feedbackData.currentStep &amp;&amp; !feedbackData.success">
+                <!-- Complete Step (clickable) -->
+                <template x-if="index < feedbackData.currentStep &amp;&amp; !feedbackData.success &amp;&amp; !feedbackData.emailSent">
                   <a href="#" class="group" @click.prevent="feedbackData.currentStep = index" :data-umami-event="`hub-managed-nav-step-${index + 1}`">
                     <span class="flex items-center gap-3">
                       <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
@@ -31,7 +31,8 @@ <h1 class="font-h1 mb-8">{{ .Title }}</h1>
                     </span>
                   </a>
                 </template>
-                <template x-if="index < feedbackData.currentStep &amp;&amp; feedbackData.success">
+                <!-- Complete Step (not clickable) -->
+                <template x-if="index < feedbackData.currentStep &amp;&amp; (feedbackData.success || feedbackData.emailSent)">
                   <span class="flex items-center gap-3">
                     <div class="relative flex w-5 h-5 shrink-0 items-center justify-center">
                       <svg class="w-full h-full text-primary group-hover:text-secondary" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -91,10 +92,10 @@ <h2 class="font-h2 mb-6">
           </div>
         </template>
 
-          <!-- Step 2: Confirmation -->
-        <template x-if="feedbackData.currentStep == 1">
-          <div class="md:col-span-2 grid grid-cols-6 gap-6">
-            <div class="flex flex-col col-span-6 lg:col-span-4">
+          <!-- Step 2a: Confirmation (form with checkboxes) -->
+        <template x-if="feedbackData.currentStep == 1 &amp;&amp; !feedbackData.emailSent &amp;&amp; !feedbackData.emailVerified">
+          <div class="md:col-span-2 gap-6">
+            <div class="flex flex-col">
               <p class="hidden md:block font-p text-sm text-gray-500 mb-2">
                 {{ i18n "hub_managed_steps_title" | safeHTML }}
               </p>
@@ -121,23 +122,44 @@ <h2 class="font-h2 mb-6">
           </div>
         </template>
 
-        <!-- Step 3a: License Key (loading...) -->
-        <template x-if="feedbackData.currentStep == 2 &amp;&amp; !feedbackData.success">
-          <div class="md:col-span-2 grid grid-cols-6 gap-6">
-            <div class="flex flex-col col-span-6 lg:col-span-4">
+        <!-- Step 2b: Confirmation (email sent, waiting for verification) -->
+        <template x-if="feedbackData.currentStep == 1 &amp;&amp; feedbackData.emailSent &amp;&amp; !feedbackData.emailVerified">
+          <div class="md:col-span-2 gap-6">
+            <div class="flex flex-col">
               <p class="hidden md:block font-p text-sm text-gray-500 mb-2">
                 {{ i18n "hub_managed_steps_title" | safeHTML }}
               </p>
               <h2 class="font-h2 mb-6">
-                {{ i18n "hub_ce_registration_step_3_license_title" }}
+                {{ i18n "hub_ce_registration_step_2_confirmation_title" }}
+              </h2>
+              <p class="font-p mb-6">{{ i18n "hub_ce_registration_step_2_check_email" | safeHTML }}</p>
+            </div>
+          </div>
+        </template>
+
+        <!-- Step 2c: Confirmation (email verified, show continue button) -->
+        <template x-if="feedbackData.currentStep == 1 &amp;&amp; feedbackData.emailVerified">
+          <div class="md:col-span-2 gap-6">
+            <div class="flex flex-col">
+              <p class="hidden md:block font-p text-sm text-gray-500 mb-2">
+                {{ i18n "hub_managed_steps_title" | safeHTML }}
+              </p>
+              <h2 class="font-h2 mb-6">
+                {{ i18n "hub_ce_registration_step_2_confirmation_title" }}
               </h2>
-              <p>Todo: Please check your e-mails.</p>
+              <p class="font-p mb-6">{{ i18n "hub_ce_registration_step_2_email_verified" | safeHTML }}</p>
+              <div class="mt-auto">
+                <button @click.prevent="feedbackData.currentStep++; feedbackData.success = true" class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-continue">
+                  <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+                  {{ i18n "hub_ce_registration_steps_continue" }}
+                </button>
+              </div>
             </div>
           </div>
         </template>
 
-        <!-- Step 3b: License Key (success) -->
-        <template x-if="feedbackData.currentStep == 2 &amp;&amp; feedbackData.success">
+        <!-- Step 3: License Key -->
+        <template x-if="feedbackData.currentStep == 2">
           <div class="md:col-span-2 grid grid-cols-6 gap-6">
             <div class="flex flex-col col-span-6 lg:col-span-4">
               <p class="hidden md:block font-p text-sm text-gray-500 mb-2">
@@ -146,17 +168,45 @@ <h2 class="font-h2 mb-6">
               <h2 class="font-h2 mb-6">
                 {{ i18n "hub_ce_registration_step_3_license_title" }}
               </h2>
-              <p>Todo: return URL</p>
-              {{ $challengeUrl := printf "%s/licenses/hub/challenge" .Site.Params.apiBaseUrl }}
-              {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "submitData.captcha" "captchaState" "captchaState") }}
-              <textarea class="block input-box w-full h-48 mb-8" x-text="feedbackData.licenseText" readonly></textarea>
-             
-              <div class="mt-auto">
-                <p :class="{'hidden': !feedbackData.errorMessage}" class="text-sm text-red-600 mb-2" x-text="feedbackData.errorMessage"></p>
-                <button class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
-                  <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
-                  Todo: Return to Hub
-                </button>
+
+              <!-- Captcha (auto-starts on load, hidden when done) -->
+              <div x-show="!feedbackData.licenseText" class="mb-4">
+                <altcha-widget
+                  challengeurl="{{ .Site.Params.apiBaseUrl }}/licenses/hub/challenge"
+                  hidelogo
+                  hidefooter
+                  auto="onload"
+                  @statechange="captchaState = $event.detail.state; if ($event.detail.state === 'verified') { submitData.captcha = $event.detail.payload; hubCE.getHubLicense() }"
+                  :strings="JSON.stringify({
+                    label: '{{ i18n "altcha_label" }}',
+                    error: '{{ i18n "altcha_error" }}',
+                    expired: '{{ i18n "altcha_expired" }}',
+                    verified: '{{ i18n "altcha_verified" }}',
+                    verifying: '{{ i18n "altcha_verifying" }}',
+                    waitAlert: '{{ i18n "altcha_waitAlert" }}'
+                  })"
+                  x-ref="licenseCaptcha"
+                ></altcha-widget>
+              </div>
+
+              <!-- Loading state -->
+              <div x-show="captchaState === 'verified' &amp;&amp; !feedbackData.licenseText &amp;&amp; !feedbackData.errorMessage" class="mb-8">
+                <p class="font-p text-gray-500">
+                  <i class="fa-solid fa-spinner fa-spin mr-2" aria-hidden="true"></i>
+                  {{ i18n "hub_ce_registration_step_3_loading" }}
+                </p>
+              </div>
+
+              <!-- License Key display -->
+              <div x-show="feedbackData.licenseText">
+                <p class="font-p mb-4">{{ i18n "hub_ce_registration_step_3_success" }}</p>
+                <textarea class="block input-box w-full h-32 md:h-48 mb-8" x-text="feedbackData.licenseText" readonly></textarea>
+                <div class="mt-auto">
+                  <button class="btn btn-primary w-full md:w-64" data-umami-event="hub-ce-registration-step-1">
+                    <i :class="{'fa-chevron-right': !feedbackData.inProgress, 'fa-spinner fa-spin': feedbackData.inProgress}" class="fa-solid" aria-hidden="true"></i>
+                    Todo: Return to Hub
+                  </button>
+                </div>
               </div>
             </div>
           </div>