add retry button for failed token refresh and use x-if for captcha

Show a Retry button when the license token refresh fails, allowing
the user to re-trigger the captcha and refresh flow. Switch the
captcha container from x-show to x-if so the ALTCHA widget is fully
destroyed and recreated on retry, guaranteeing a fresh challenge.

Author: tobihagemann

assets/js/hubsubscription.js

@@ -518,6 +518,7 @@ class HubSubscription {
       }
     }).fail(xhr => {
       this._subscriptionData.errorMessage = xhr.responseJSON?.message || 'Refreshing license failed.';
+      this._subscriptionData.needsTokenRefresh = false;
       this._subscriptionData.inProgress = false;
     });
   }

i18n/de.yaml

@@ -546,6 +546,8 @@
   translation: "Dies ist dein Lizenzschlüssel, der an deine Hub-ID gebunden ist. Drück auf den Button unten, um ihn automatisch auf deine Hub-Instanz zu übertragen."
 - id: hub_billing_manage_license_key_transfer_action
   translation: "Zum Hub übertragen"
+- id: hub_billing_manage_license_key_retry_action
+  translation: "Erneut versuchen"
 
 - id: hub_billing_manage_modal_charge_amount_description
   translation: "Rechnungsbetrag"

i18n/en.yaml

@@ -546,6 +546,8 @@
   translation: "This is your license key that is bound to your Hub ID. Press the button below to transfer it to your Hub instance automatically."
 - id: hub_billing_manage_license_key_transfer_action
   translation: "Transfer to Hub"
+- id: hub_billing_manage_license_key_retry_action
+  translation: "Retry"
 
 - id: hub_billing_manage_modal_charge_amount_description
   translation: "Charge Amount"

layouts/hub-billing/single.html

@@ -176,13 +176,18 @@ <h2 class="font-h2 mb-4 mt-12">
             {{ i18n "hub_billing_manage_license_key_instruction" . }}
           </p>
           <textarea x-model="subscriptionData.token" class="input-box w-full text-sm md:text-base leading-relaxed break-all" rows="6" readonly></textarea>
-          <button :disabled="subscriptionData.inProgress || !subscriptionData.token" class="btn btn-primary text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
+          <button x-show="!subscriptionData.token" :disabled="subscriptionData.inProgress" @click.prevent="subscriptionData.errorMessage = ''; subscriptionData.needsTokenRefresh = true" class="btn btn-primary text-center w-full md:w-64 mt-4">
+            {{ i18n "hub_billing_manage_license_key_retry_action" . }}
+          </button>
+          <button x-show="subscriptionData.token" :disabled="subscriptionData.inProgress" class="btn btn-primary text-center w-full md:w-64 mt-4" @click.prevent="hubSubscription.transferTokenToHub()">
             {{ i18n "hub_billing_manage_license_key_transfer_action" . }}
           </button>
-          <div x-show="subscriptionData.needsTokenRefresh && !subscriptionData.inProgress" class="mt-4">
-            {{ $challengeUrl := printf "%s/licenses/hub/challenge" .Site.Params.apiBaseUrl }}
-            {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "subscriptionData.captcha" "captchaState" "captchaState" "ref" "refreshCaptcha" "auto" "onload" "onVerified" "hubSubscription.refreshToken()") }}
-          </div>
+          <template x-if="subscriptionData.needsTokenRefresh && !subscriptionData.inProgress">
+            <div class="mt-4">
+              {{ $challengeUrl := printf "%s/licenses/hub/challenge" .Site.Params.apiBaseUrl }}
+              {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "subscriptionData.captcha" "captchaState" "captchaState" "ref" "refreshCaptcha" "auto" "onload" "onVerified" "hubSubscription.refreshToken()") }}
+            </div>
+          </template>
           <p x-show="subscriptionData.needsTokenRefresh && subscriptionData.inProgress" class="text-sm text-gray-600 mt-4">
             <i class="fa-solid fa-spinner fa-spin"></i>
             {{ i18n "hub_billing_loading_description" . }}