feat: Self hosted onboarding (#22102)

* intro work * update wixard form to have content callback to remove preset navigation * more fixes to deployment * fix calling static service * fix save license key text * ensure default steps work as expected * fix conditional for rendering step * skip step * add on next step for free license * refactor wizard form to use nuqs * fix styles * merge base param with step config * fix next stepo text * use deployment Signature token * decrypt signature token * fix: resolve type errors and test failures from wizard form refactor - Fix signatureToken field name to signatureTokenEncrypted in deployment repository - Add missing getSignatureToken method to verifyApiKey test mock - Fix WizardForm import from default to named export in test file - Add missing nextStep prop to Steps component in WizardForm Resolves TypeScript type check errors and unit test failures without changing functionality. Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add missing getDeploymentSignatureToken mock in LicenseKeyService test Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add nuqs library mock for WizardForm test Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add missing nav prop to AdminAppsList component with eslint disable Co-Authored-By: sean@cal.com <Sean@brydon.io> * Apply suggestions from code review Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Update apps/web/modules/auth/setup-view.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * fix license schema changes * revret schema generation * fix eslint errors * remove required nav type + add use client * fix types * Update packages/ui/components/form/wizard/useWizardState.ts Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * fix controller issue * add checks for deployment key being null - add more tests * fix tests * add deployment key tests * fix: resolve crypto mock to handle empty encryption keys gracefully - Updated symmetricDecrypt mock to return null instead of throwing 'Invalid key' error when encryption key is empty - All getDeploymentKey tests now pass including the previously failing 'should return null when decryption fails due to missing encryption key' test - Fixes mocking issues in PR 22102 self-hosted onboarding wizard form refactor Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix label * add i18n to error * use enum for steps * add as const * fix test env issues --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
2025-07-09 09:26:01 +01:00
1 parent 6410687fb6
commit 19563aa697
@@ -9,6 +9,7 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { emailRegex } from "@calcom/lib/emailSchema";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { EmailField, Label, TextField, PasswordField } from "@calcom/ui/components/form";

@@ -34,7 +35,12 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
  return <AdminUser {...props} />;
 };

-export const AdminUser = (props: { onSubmit: () => void; onError: () => void; onSuccess: () => void }) => {
+export const AdminUser = (props: {
+  onSubmit: () => void;
+  onError: () => void;
+  onSuccess: () => void;
+  nav: { onNext: () => void; onPrev: () => void };
+}) => {
  const { t } = useLocale();

  const formSchema = z.object({
@@ -118,7 +124,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                <TextField
                  addOnLeading={
                    !longWebsiteUrl && (
-                      <span className="text-subtle inline-flex items-center rounded-none px-3 text-sm">
+                      <span className="text-subtle inline-flex items-center rounded-none text-sm">
                        {process.env.NEXT_PUBLIC_WEBSITE_URL}/
                      </span>
                    )
@@ -187,6 +193,15 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
            )}
          />
        </div>
+        <div className="flex justify-end gap-2">
+          <Button
+            type="submit"
+            color="primary"
+            loading={formMethods.formState.isSubmitting}
+            disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}>
+            {t("next")}
+          </Button>
+        </div>
      </form>
    </FormProvider>
  );
@@ -0,0 +1,255 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import classNames from "classnames";
+import Link from "next/link";
+import { useCallback, useState } from "react";
+import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+
+type LicenseSelectionFormValues = {
+  licenseKey: string;
+  signatureToken?: string;
+};
+
+type LicenseOption = "FREE" | "EXISTING";
+
+const LicenseSelection = (
+  props: {
+    value: LicenseOption;
+    onChange: (value: LicenseOption) => void;
+    onSubmit: (value: LicenseSelectionFormValues) => void;
+    onSuccess?: (
+      data: RouterOutputs["viewer"]["deploymentSetup"]["update"],
+      variables: RouterInputs["viewer"]["deploymentSetup"]["update"]
+    ) => void;
+    onPrevStep: () => void;
+    onNextStep: () => void;
+  } & Omit<JSX.IntrinsicElements["form"], "onSubmit" | "onChange">
+) => {
+  const {
+    value: initialValue = "FREE",
+    onChange,
+    onSubmit,
+    onSuccess,
+    onPrevStep,
+    onNextStep,
+    ...rest
+  } = props;
+  const [value, setValue] = useState<LicenseOption>(initialValue);
+  const { t } = useLocale();
+  const mutation = trpc.viewer.deploymentSetup.update.useMutation({
+    onSuccess,
+  });
+
+  const [licenseKeyInput, setLicenseKeyInput] = useState("");
+  const [licenseTouched, setLicenseTouched] = useState(false);
+
+  // Use TRPC query for validation
+  const { data: licenseValidation, isLoading: checkLicenseLoading } =
+    trpc.viewer.deploymentSetup.validateLicense.useQuery(
+      { licenseKey: licenseKeyInput },
+      {
+        enabled: licenseTouched && licenseKeyInput.trim().length > 0,
+      }
+    );
+
+  const schemaLicenseKey = useCallback(
+    () =>
+      z.object({
+        licenseKey: z
+          .string()
+          .min(1, t("license_key_required"))
+          .refine(() => !licenseTouched || (licenseValidation ? licenseValidation.valid : true), {
+            message: licenseValidation?.message || t("invalid_license_key"),
+          }),
+        signatureToken: z.string().optional(),
+      }),
+    [licenseValidation, licenseTouched, t]
+  );
+
+  const formMethods = useForm<LicenseSelectionFormValues>({
+    defaultValues: {
+      licenseKey: "",
+      signatureToken: "",
+    },
+    resolver: zodResolver(schemaLicenseKey()),
+  });
+
+  const handleSubmit = formMethods.handleSubmit((values) => {
+    onSubmit(values);
+    if (value === "EXISTING" && values.licenseKey) {
+      mutation.mutate(values);
+    }
+  });
+
+  const { isDirty, errors } = useFormState(formMethods);
+
+  const handleRadioChange = (newValue: LicenseOption) => {
+    setValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <form
+      {...rest}
+      className="space-y-6"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (value === "FREE") {
+          onSubmit({ licenseKey: "", signatureToken: "" });
+        } else {
+          handleSubmit();
+        }
+      }}>
+      <RadioGroup.Root
+        defaultValue={initialValue}
+        value={value}
+        aria-label={t("choose_a_license")}
+        className="grid grid-rows-2 gap-4 md:grid-cols-2 md:grid-rows-1"
+        onValueChange={(value) => handleRadioChange(value as LicenseOption)}>
+        <RadioGroup.Item value="FREE" className="h-full">
+          <div
+            className={classNames(
+              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              value === "FREE" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <p className="font-medium text-green-800">{t("free_license_fee")}</p>
+            <p className="text-subtle">{t("forever_open_and_free")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
+              <li>{t("required_to_keep_your_code_open_source")}</li>
+              <li>{t("cannot_repackage_and_resell")}</li>
+              <li>{t("no_enterprise_features")}</li>
+            </ul>
+          </div>
+        </RadioGroup.Item>
+
+        <RadioGroup.Item value="EXISTING" className="h-full">
+          <div
+            className={classNames(
+              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              value === "EXISTING" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-emphasis text-xl">{t("enter_license_key")}</h2>
+            <p className="font-medium text-green-800">{t("enter_existing_license")}</p>
+            <p className="text-subtle">{t("enter_your_license_key")}</p>
+            <p className="text-subtle text-xs">
+              {t("need_a_license")}{" "}
+              <Link
+                href="https://go.cal.com/self-hosted"
+                target="_blank"
+                rel="noreferrer noopener"
+                className="text-blue-600 hover:underline">
+                {t("purchase_license")}
+              </Link>
+            </p>
+          </div>
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      {value === "EXISTING" && (
+        <FormProvider {...formMethods}>
+          <div className="bg-muted space-y-4 rounded-md px-4 py-3">
+            <div className="space-y-4">
+              <div>
+                <Controller
+                  name="licenseKey"
+                  control={formMethods.control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TextField
+                      name="licenseKey"
+                      label={t("license_key")}
+                      className={classNames(
+                        "group-hover:border-emphasis mb-0",
+                        (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
+                      )}
+                      placeholder="cal_live_XXXXXXXXXXX"
+                      value={licenseKeyInput}
+                      addOnClassname={classNames(
+                        "hover:border-default",
+                        errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis"
+                      )}
+                      addOnSuffix={
+                        checkLicenseLoading ? (
+                          <Icon name="loader" className="h-5 w-5 animate-spin" />
+                        ) : licenseValidation?.valid && licenseTouched ? (
+                          <Icon name="check" className="h-5 w-5 text-green-700" />
+                        ) : undefined
+                      }
+                      color={errors.licenseKey ? "warn" : ""}
+                      onBlur={(e) => {
+                        setLicenseTouched(true);
+                        onBlur();
+                      }}
+                      onChange={(e) => {
+                        setLicenseKeyInput(e.target.value);
+                        onChange(e.target.value);
+                      }}
+                    />
+                  )}
+                />
+                {errors.licenseKey && (
+                  <p className="mt-1 text-sm text-red-600">{errors.licenseKey.message}</p>
+                )}
+              </div>
+
+              <div>
+                <Controller
+                  name="signatureToken"
+                  control={formMethods.control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TextField
+                      name="signatureToken"
+                      label={t("signature_token_optional")}
+                      placeholder="cal_sk_XXXXXXXXXXX"
+                      value={value || ""}
+                      onBlur={onBlur}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        onChange(e.target.value);
+                        formMethods.setValue("signatureToken", e.target.value);
+                      }}
+                    />
+                  )}
+                />
+                <p className="text-subtle mt-1 text-sm">{t("signature_token_description")}</p>
+              </div>
+            </div>
+          </div>
+        </FormProvider>
+      )}
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" color="secondary" onClick={onPrevStep}>
+          {t("prev_step")}
+        </Button>
+        {value === "EXISTING" ? (
+          <Button
+            type="submit"
+            color="primary"
+            loading={checkLicenseLoading || mutation.isPending}
+            disabled={
+              value === "EXISTING" &&
+              (!formMethods.formState.isValid || checkLicenseLoading || mutation.isPending)
+            }>
+            {t("save_license_key")}
+          </Button>
+        ) : (
+          <Button color="primary" onClick={onNextStep} type="button">
+            {t("next_step")}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};
+
+export default LicenseSelection;
@@ -1,104 +1,102 @@
 "use client";

-import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";

 import AdminAppsList from "@calcom/features/apps/AdminAppsList";
 import { APP_NAME } from "@calcom/lib/constants";
-import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { WizardForm } from "@calcom/ui/components/form";
+import type { WizardStep } from "@calcom/ui/components/form/wizard/WizardForm";

 import { AdminUserContainer as AdminUser } from "@components/setup/AdminUser";
-import ChooseLicense from "@components/setup/ChooseLicense";
-import EnterpriseLicense from "@components/setup/EnterpriseLicense";
+import LicenseSelection from "@components/setup/LicenseSelection";

 import type { getServerSideProps } from "@server/lib/setup/getServerSideProps";

-function useSetStep() {
-  const router = useRouter();
-  const searchParams = useCompatSearchParams();
-  const pathname = usePathname();
-  const setStep = (newStep = 1) => {
-    const _searchParams = new URLSearchParams(searchParams ?? undefined);
-    _searchParams.set("step", newStep.toString());
-    router.replace(`${pathname}?${_searchParams.toString()}`);
-  };
-  return setStep;
-}
+const SETUP_VIEW_SETPS = {
+  ADMIN_USER: 1,
+  LICENSE: 2,
+  APPS: 3,
+} as const;

 export type PageProps = inferSSRProps<typeof getServerSideProps>;
 export function Setup(props: PageProps) {
+  const [hasPickedAGPLv3, setHasPickedAGPLv3] = useState(false);
  const { t } = useLocale();
  const router = useRouter();
-  const [value, setValue] = useState(props.isFreeLicense ? "FREE" : "EE");
-  const isFreeLicense = value === "FREE";
-  const [isEnabledEE, setIsEnabledEE] = useState(!props.isFreeLicense);
-  const setStep = useSetStep();
+  const [licenseOption, setLicenseOption] = useState<"FREE" | "EXISTING">(
+    props.hasValidLicense ? "EXISTING" : "FREE"
+  );

-  const steps: React.ComponentProps<typeof WizardForm>["steps"] = [
+  const defaultStep = useMemo(() => {
+    if (props.userCount > 0) {
+      if (!props.hasValidLicense && !hasPickedAGPLv3) {
+        return SETUP_VIEW_SETPS.LICENSE;
+      } else {
+        return SETUP_VIEW_SETPS.APPS;
+      }
+    }
+    return SETUP_VIEW_SETPS.ADMIN_USER;
+  }, [props.userCount, props.hasValidLicense, hasPickedAGPLv3]);
+
+  const steps: WizardStep[] = [
    {
      title: t("administrator_user"),
      description: t("lets_create_first_administrator_user"),
-      content: (setIsPending) => (
+      customActions: true,
+      content: (setIsPending, nav) => (
        <AdminUser
          onSubmit={() => {
            setIsPending(true);
          }}
          onSuccess={() => {
-            setStep(2);
+            // If there's already a valid license or user picked AGPLv3, skip to apps step
+            if (props.hasValidLicense || hasPickedAGPLv3) {
+              nav.onNext();
+              nav.onNext(); // Skip license step
+            } else {
+              nav.onNext();
+            }
          }}
          onError={() => {
            setIsPending(false);
          }}
          userCount={props.userCount}
+          nav={nav}
        />
      ),
    },
-    {
-      title: t("choose_a_license"),
-      description: t("choose_license_description"),
-      content: (setIsPending) => {
-        return (
-          <ChooseLicense
-            id="wizard-step-2"
-            name="wizard-step-2"
-            value={value}
-            onChange={setValue}
-            onSubmit={() => {
-              setIsPending(true);
-              setStep(3);
-            }}
-          />
-        );
-      },
-    },
  ];

-  if (!isFreeLicense) {
+  // Only show license selection step if there's no valid license already and AGPLv3 wasn't picked
+  if (!props.hasValidLicense && !hasPickedAGPLv3) {
    steps.push({
-      title: t("step_enterprise_license"),
-      description: t("step_enterprise_license_description"),
-      content: (setIsPending) => {
-        const currentStep = 3;
+      title: t("choose_a_license"),
+      description: t("choose_license_description"),
+      customActions: true,
+      content: (setIsPending, nav) => {
        return (
-          <EnterpriseLicense
-            id={`wizard-step-${currentStep}`}
-            name={`wizard-step-${currentStep}`}
-            onSubmit={() => {
+          <LicenseSelection
+            id="wizard-step-2"
+            name="wizard-step-2"
+            value={licenseOption}
+            onChange={setLicenseOption}
+            onSubmit={(values) => {
              setIsPending(true);
+              if (licenseOption === "FREE") {
+                setHasPickedAGPLv3(true);
+                nav.onNext();
+              } else if (licenseOption === "EXISTING" && values.licenseKey) {
+                nav.onNext();
+              }
            }}
-            onSuccess={() => {
-              setStep(currentStep + 1);
-            }}
-            onSuccessValidate={() => {
-              setIsEnabledEE(true);
-            }}
+            onPrevStep={nav.onPrev}
+            onNextStep={nav.onNext}
          />
        );
      },
-      isEnabled: isEnabledEE,
    });
  }

@@ -106,23 +104,24 @@ export function Setup(props: PageProps) {
    title: t("enable_apps"),
    description: t("enable_apps_description", { appName: APP_NAME }),
    contentClassname: "!pb-0 mb-[-1px]",
-    content: (setIsPending) => {
-      const currentStep = isFreeLicense ? 3 : 4;
+    customActions: true,
+    content: (setIsPending, nav) => {
      return (
        <AdminAppsList
-          id={`wizard-step-${currentStep}`}
-          name={`wizard-step-${currentStep}`}
+          id={`wizard-step-${steps.length}`}
+          name={`wizard-step-${steps.length}`}
          classNames={{
            form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
            appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
            verticalTabsItem: "!w-48 md:p-4",
          }}
-          baseURL={`/auth/setup?step=${currentStep}`}
+          baseURL={`/auth/setup?step=${steps.length}`}
          useQueryParam={true}
          onSubmit={() => {
            setIsPending(true);
            router.replace("/");
          }}
+          nav={nav}
        />
      );
    },
@@ -131,7 +130,7 @@ export function Setup(props: PageProps) {
  return (
    <main className="bg-subtle flex items-center print:h-full md:h-screen">
      <WizardForm
-        href="/auth/setup"
+        defaultStep={defaultStep}
        steps={steps}
        nextLabel={t("next_step_text")}
        finishLabel={t("finish")}
@@ -3342,6 +3342,23 @@
  "booking_not_allowed_by_restriction_schedule_error": "Booking outside restriction schedule availability.",
  "restriction_schedule_not_found_error": "Restriction schedule not found",
  "converted_image_size_limit_exceed": "Image size limit exceeded, please use a smaller image preferably in JPEG format",
+  "license_key": "License key",
+  "license_selection_title": "Choose your license",
+  "license_selection_description": "Select how you want to license your Cal.com deployment",
+  "agplv3_license_description": "Use Cal.com under the AGPLv3 open source license",
+  "enter_license_key": "Enter License Key",
+  "enter_your_license_key": "Access to all enterprise features",
+  "enter_existing_license": "Starting at $15/user per month",
+  "enter_license_key_description": "Access to all enterprise features",
+  "license_key_placeholder": "Enter your license key",
+  "save_license_key": "Save License Key",
+  "signature_token_optional": "Signature token (optional)",
+  "signature_token_description": "Signature token is used to verify the license key is yours when incrementing usage based billing. You can find it in your purchase confirmation email. If you are on a legacy license, you can leave this blank.",
+  "need_a_license": "Need a license?",
+  "license_key_required": "License key is required",
+  "invalid_license_key": "Invalid license key",
+  "license_validation_failed": "Failed to validate license key",
+  "license_key_saved": "License key saved successfully",
  "timezone_mismatch_tooltip": "You are viewing the report based on your profile timezone ({{userTimezone}}), while your browser is set to timezone ({{browserTimezone}})",
  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
@@ -1,6 +1,7 @@
 import type { GetServerSidePropsContext } from "next";

 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { LicenseKeySingleton } from "@calcom/features/ee/common/server/LicenseKeyService";
 import { getDeploymentKey } from "@calcom/features/ee/deployment/lib/getDeploymentKey";
 import { DeploymentRepository } from "@calcom/lib/server/repository/deployment";
 import prisma from "@calcom/prisma";
@@ -37,12 +38,17 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
    });
  }

+  // Check if there's already a valid license using LicenseKeyService
+  const licenseKeyService = await LicenseKeySingleton.getInstance(deploymentRepo);
+  const hasValidLicense = await licenseKeyService.checkLicense();
+
  const isFreeLicense = (await getDeploymentKey(deploymentRepo)) === "";

  return {
    props: {
      isFreeLicense,
      userCount,
+      hasValidLicense,
    },
  };
 }