ugly form to fetch a CE license from api

Author: overheadhunter

assets/js/hubsubscription.js

@@ -1,11 +1,64 @@
 "use strict";
 
+const COMMUNITY_EDITION_REGISTER_URL = API_BASE_URL + '/licenses/hub/register';
+
 const BILLING_PORTAL_SESSION_URL = LEGACY_STORE_URL + '/hub/billing-portal-session';
 const CUSTOM_BILLING_URL = LEGACY_STORE_URL + '/hub/custom-billing';
 const GENERATE_PAY_LINK_URL = LEGACY_STORE_URL + '/hub/generate-pay-link';
 const MANAGE_SUBSCRIPTION_URL = LEGACY_STORE_URL + '/hub/manage-subscription';
 const UPDATE_PAYMENT_METHOD_URL = LEGACY_STORE_URL + '/hub/update-payment-method';
 
+class CommunityEdition {
+  
+  constructor(form, registrationData, searchParams) {
+    this._form = form;
+    this._registrationData = registrationData;
+    this._registrationData.hubId = searchParams.get('hub_id');
+    this._registrationData.returnUrl = searchParams.get('return_url');
+  }
+
+  register() {
+    if (!this._registrationData.captcha) {
+      this._registrationData.errorMessage = 'Please complete the CAPTCHA challenge.';
+      return;
+    }
+
+    this._registrationData.inProgress = true;
+    this._registrationData.errorMessage = '';
+    $.ajax({
+      url: COMMUNITY_EDITION_REGISTER_URL,
+      type: 'POST',
+      data: {
+        captcha: this._registrationData.captcha,
+        hubId: this._registrationData.hubId,
+        email: this._registrationData.email
+      }
+    }).done(token => {
+      this.onRegisterSucceeded(token);
+    }).fail(xhr => {
+      this.onRegisterFailed('Registering Hub failed.');
+    });
+  }
+
+  onRegisterSucceeded(token) {
+    this._registrationData.inProgress = false;
+    this._registrationData.errorMessage = '';
+    if (this._registrationData.returnUrl && this._registrationData.returnUrl.length > 0) {
+      const returnUrl = new URL(this._registrationData.returnUrl);
+      returnUrl.searchParams.set('token', token);
+      window.location.href = returnUrl;
+    } else {
+      console.warn('No return URL specified, cannot transfer token to Hub.', token);
+    }
+  }
+
+  onRegisterFailed(error) {
+    this._registrationData.inProgress = false;
+    this._registrationData.errorMessage = error;
+  }
+
+}
+
 class HubSubscription {
 
   constructor(form, subscriptionData, searchParams) {

layouts/hub-billing/single.html

@@ -453,6 +453,34 @@ <h3 class="font-headline text-xl md:text-2xl leading-relaxed mb-4">
         </div>
       </template>
     </form>
+
+    <!-- COMMUNITY EDITION -->
+    <form x-data="{data: {captcha: null, hubId: null, email: null, returnUrl: null, inProgress: false, errorMessage: null}, captchaState: null}" x-init="communityEdition = new CommunityEdition($refs.form, data, new URLSearchParams(location.search))" x-ref="form" @submit.prevent="communityEdition.register(); $refs.captcha.reset()">
+      <div class="w-full mb-4 md:w-1/2 md:pr-3">
+        <label class="label-uppercase mb-2">
+          {{ i18n "hub_billing_checkout_standard_hubid" . }}
+        </label>
+        <input x-model="data.hubId" type="text" class="input-box w-full mb-2" readonly/>
+        <p class="text-xs text-gray-600">
+          {{ i18n "hub_billing_checkout_standard_hubid_description" . }}
+        </p>
+      </div>
+      <div>
+        <label class="label-uppercase mb-2">
+          {{ i18n "hub_billing_checkout_standard_email" . }}
+        </label>
+        <input x-model="data.email" x-ref="email" @blur="$refs.email.classList.add('show-invalid')" type="email" class="input-box w-full" placeholder="{{ i18n "hub_billing_checkout_standard_email_placeholder" . }}" required/>
+      </div>
+
+      <button :disabled="data.inProgress || captchaState == 'verifying' || !/^\S+@\S+\.\S+$/.test(data.email)" type="submit" class="btn btn-primary w-full md:w-64">
+        <i :class="{'fa-paper-plane': !data.inProgress, 'fa-spinner fa-spin': data.inProgress}" class="fa-solid" aria-hidden="true"></i>
+        Create Community Edition License
+      </button>
+      {{ $challengeUrl := printf "%s/licenses/hub/challenge" .Site.Params.apiBaseUrl }}
+      {{ partial "captcha.html" (dict "challengeUrl" $challengeUrl "captchaPayload" "data.captcha" "captchaState" "captchaState") }}
+      <p :class="{'hidden': !data.errorMessage}" class="text-sm text-red-600 mt-2" x-text="data.errorMessage"></p>
+    </form>
+
   </div>
 {{ end }}
 {{ define "script" }}