@antelopejs/dms-saas 0.0.1

package/frontend-vue/app/components/Register.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+/**
+ * Reference implementation of the public registration flow.
+ *
+ * Deliberately plain: every SaaS wants its own funnel — its arguments, its way
+ * of presenting plans, one page or three steps — so this screen exists to work
+ * out of the box, not to be the design anyone ships. Replace it by turning the
+ * bundled page off (`publicScreens.register: false` in the dms-saas config) and
+ * registering your own page on the `register` slug, then build the markup you
+ * want on `useSaasRegistration()`, which owns the Stripe orchestration, the
+ * validation order and the provisioning call.
+ */
+interface DmsSaasPublicRuntimeConfig {
+  admissionMode?: "open" | "invitation-only";
+}
+
+const {
+  form,
+  plans,
+  countryItems,
+  paymentElementId,
+  errorMessage,
+  isSubmitting,
+  formatPlanPrice,
+  submit,
+} = useSaasRegistration();
+
+const customerTypeItems = [
+  { value: "individual", label: "saas.register.customer_type.individual" },
+  { value: "business", label: "saas.register.customer_type.business" },
+];
+const config = useDmsRuntimeConfig();
+const isRegistrationClosed =
+  (config.public.dmsSaas as DmsSaasPublicRuntimeConfig | undefined)
+    ?.admissionMode === "invitation-only";
+</script>
+
+<template>
+  <DmsSaasRegistrationClosed v-if="isRegistrationClosed" />
+  <div v-else class="mx-auto w-full max-w-xl px-4 pb-16">
+    <UCard>
+      <template #header>
+        <h2 class="text-xl font-semibold">{{ $t("saas.register.title") }}</h2>
+      </template>
+
+      <DmsOAuthButtons :note="$t('saas.oauth_registration.entry_note')" />
+
+      <form class="flex flex-col gap-4" @submit.prevent="submit">
+        <URadioGroup
+          v-model="form.customerType"
+          :items="
+            customerTypeItems.map((item) => ({
+              value: item.value,
+              label: $t(item.label),
+            }))
+          "
+        />
+
+        <UFormField :label="$t('saas.register.field.email')">
+          <UInput v-model="form.email" type="email" class="w-full" required />
+        </UFormField>
+
+        <UFormField :label="$t('saas.register.field.password')">
+          <UInput
+            v-model="form.password"
+            type="password"
+            class="w-full"
+            required
+          />
+        </UFormField>
+
+        <UFormField :label="$t('saas.register.field.full_name')">
+          <UInput v-model="form.name" class="w-full" required />
+        </UFormField>
+
+        <UFormField :label="$t('saas.register.field.workspace_name')">
+          <UInput v-model="form.workspaceName" class="w-full" required />
+        </UFormField>
+
+        <template v-if="form.customerType === 'business'">
+          <UFormField :label="$t('saas.register.field.company_name')">
+            <UInput v-model="form.companyName" class="w-full" required />
+          </UFormField>
+          <UFormField :label="$t('saas.register.field.vat_number')">
+            <UInput v-model="form.vatNumber" class="w-full" />
+          </UFormField>
+        </template>
+
+        <h3 class="font-semibold">{{ $t("saas.register.billing_address") }}</h3>
+
+        <UFormField :label="$t('saas.register.field.country')">
+          <USelect
+            v-model="form.country"
+            :items="countryItems"
+            class="w-full"
+            required
+          />
+        </UFormField>
+
+        <UFormField :label="$t('saas.register.field.address_line1')">
+          <UInput v-model="form.addressLine1" class="w-full" />
+        </UFormField>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormField :label="$t('saas.register.field.postal_code')">
+            <UInput v-model="form.postalCode" class="w-full" />
+          </UFormField>
+          <UFormField :label="$t('saas.register.field.city')">
+            <UInput v-model="form.city" class="w-full" />
+          </UFormField>
+        </div>
+
+        <h3 class="font-semibold">{{ $t("saas.register.choose_plan") }}</h3>
+
+        <div class="flex flex-col gap-2">
+          <button
+            v-for="plan in plans"
+            :key="plan._id"
+            type="button"
+            class="border-default rounded-md border p-3 text-left"
+            :class="form.selectedPlanId === plan._id ? 'border-primary' : ''"
+            @click="form.selectedPlanId = plan._id"
+          >
+            <div class="flex items-baseline justify-between gap-2">
+              <span class="font-medium">{{ plan.name }}</span>
+              <span class="tabular-nums">{{ formatPlanPrice(plan) }}</span>
+            </div>
+            <p class="text-muted text-sm">{{ plan.description }}</p>
+          </button>
+        </div>
+
+        <UFormField :label="$t('saas.register.field.card')">
+          <div :id="paymentElementId" class="border-default rounded-md border p-4" />
+        </UFormField>
+
+        <UCheckbox v-model="form.hasAcceptedLegal" required>
+          <template #label>
+            <i18n-t keypath="saas.register.legal_acceptance" tag="span">
+              <template #terms_and_conditions>
+                <DmsLink
+                  to="/legal/terms-and-conditions"
+                  target="_blank"
+                  class="underline"
+                >
+                  {{ $t("saas.legal.terms_and_conditions") }}
+                </DmsLink>
+              </template>
+              <template #privacy_policy>
+                <DmsLink
+                  to="/legal/privacy-policy"
+                  target="_blank"
+                  class="underline"
+                >
+                  {{ $t("saas.legal.privacy_policy") }}
+                </DmsLink>
+              </template>
+            </i18n-t>
+          </template>
+        </UCheckbox>
+
+        <UAlert
+          v-if="errorMessage"
+          color="error"
+          variant="subtle"
+          :description="errorMessage"
+        />
+
+        <UButton type="submit" :loading="isSubmitting" color="primary" block>
+          {{ $t("saas.register.submit") }}
+        </UButton>
+      </form>
+    </UCard>
+  </div>
+</template>

package/frontend-vue/app/components/RegistrationClosed.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="mx-auto w-full max-w-xl px-4 pb-16">
+    <UCard>
+      <template #header>
+        <h2 class="text-xl font-semibold">
+          {{ $t("saas.admission.title") }}
+        </h2>
+      </template>
+      <p class="text-muted mb-6">{{ $t("saas.admission.description") }}</p>
+      <UButton to="/auth/login" color="primary">
+        {{ $t("saas.admission.login") }}
+      </UButton>
+    </UCard>
+  </div>
+</template>

package/frontend-vue/app/components/SeatQuotaBanner.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+
+const BILLING_PATH = "/settings/workspace/billing";
+const KEY_PREFIX = "saas.workspace.seats";
+
+const { data: quota, error, refresh } = useSeatQuota();
+const { t } = useI18n();
+
+const hasLimit = computed(() => (quota.value?.maxMembers ?? -1) >= 0);
+
+const isFull = computed(
+  () =>
+    hasLimit.value &&
+    (quota.value?.occupied ?? 0) >= (quota.value?.maxMembers ?? 0),
+);
+
+const usageLabel = computed(() => {
+  const occupied = quota.value?.occupied ?? 0;
+  if (!hasLimit.value) {
+    return t(`${KEY_PREFIX}.badge_unlimited`, { occupied });
+  }
+  return `${occupied} / ${quota.value?.maxMembers}`;
+});
+
+const breakdown = computed(() =>
+  t(`${KEY_PREFIX}.description`, {
+    members: quota.value?.members ?? 0,
+    invites: quota.value?.pendingInvites ?? 0,
+  }),
+);
+
+const limitMessage = computed(() =>
+  quota.value?.isTenantOwner
+    ? t(`${KEY_PREFIX}.limit_reached_owner`)
+    : t(`${KEY_PREFIX}.limit_reached_member`),
+);
+
+// Refetch rather than serve the shared cache: adding a member or an invite
+// lands back on this page, and a stale count would contradict the table right
+// above the banner.
+onMounted(refresh);
+</script>
+
+<template>
+  <DmsSaasLoadFailure
+    v-if="error && !quota"
+    :title="$t(`${KEY_PREFIX}.load_failed`)"
+    @retry="refresh"
+  />
+  <UCard
+    v-else-if="quota"
+    variant="subtle"
+    :class="isFull ? 'ring-error/40' : undefined"
+  >
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <div class="flex flex-col gap-1">
+        <div class="flex flex-wrap items-center gap-2">
+          <UIcon name="i-ph-users-three" class="text-muted size-5" />
+          <h3 class="font-semibold">{{ $t(`${KEY_PREFIX}.title`) }}</h3>
+          <UBadge :color="isFull ? 'error' : 'neutral'" variant="subtle">
+            {{ usageLabel }}
+          </UBadge>
+        </div>
+        <p class="text-muted text-sm">{{ breakdown }}</p>
+        <p v-if="isFull" class="text-sm">{{ limitMessage }}</p>
+      </div>
+      <UButton
+        v-if="isFull && quota.isTenantOwner"
+        color="primary"
+        icon="i-ph-arrow-circle-up"
+        :to="BILLING_PATH"
+      >
+        {{ $t(`${KEY_PREFIX}.upgrade`) }}
+      </UButton>
+    </div>
+  </UCard>
+</template>

package/frontend-vue/app/components/SegmentConditionsBuilder.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+type Operator =
+  | "eq"
+  | "neq"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte"
+  | "in"
+  | "nin"
+  | "contains";
+type Logical = "and" | "or";
+type ValueKind = "string" | "number" | "boolean" | "date";
+type FieldType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "date"
+  | "enum"
+  | "enum:plan";
+
+interface FieldDefinition {
+  id: string;
+  type: FieldType;
+  valueKind: ValueKind;
+  labelKey: string;
+  descriptionKey: string;
+  operators: readonly Operator[];
+  enumValues?: readonly string[];
+  unit?: "currency" | "days" | "count";
+}
+
+interface PlanOption {
+  _id: string;
+  name: string;
+}
+
+interface FieldsCatalogResponse {
+  fields: FieldDefinition[];
+  userFields?: FieldDefinition[];
+  plans: PlanOption[];
+}
+
+interface FieldsCatalog {
+  fields: FieldDefinition[];
+  plans: PlanOption[];
+}
+
+interface Condition {
+  field: string;
+  operator: Operator;
+  value: unknown;
+}
+
+interface WorkspaceRef {
+  kind: "workspaceRef";
+  quantifier: "any" | "all";
+  role?: "member" | "owner";
+  conditions: ConditionGroup;
+}
+
+interface ConditionGroup {
+  logical: Logical;
+  conditions: Array<Condition | ConditionGroup | WorkspaceRef>;
+}
+
+const props = defineProps<{
+  modelValue?: ConditionGroup | string | null;
+  initialValue?: ConditionGroup | string | null;
+  fieldsCatalogUrl?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+
+const { $authFetch } = useAuthFetch();
+
+const CATALOG_URL = computed(
+  () => props.fieldsCatalogUrl ?? "/api/saas/segments/fields",
+);
+
+function parseValue(
+  raw: ConditionGroup | string | null | undefined,
+): ConditionGroup {
+  let v: Partial<ConditionGroup> | null = null;
+  if (typeof raw === "string") {
+    try {
+      v = raw ? (JSON.parse(raw) as ConditionGroup) : null;
+    } catch {
+      v = null;
+    }
+  } else if (raw && typeof raw === "object") {
+    v = raw as ConditionGroup;
+  }
+  return {
+    logical: v?.logical ?? "and",
+    conditions: Array.isArray(v?.conditions) ? [...v.conditions] : [],
+  };
+}
+
+const state = ref<ConditionGroup>(
+  parseValue(props.modelValue ?? props.initialValue),
+);
+const rawCatalog = ref<FieldsCatalogResponse>({
+  fields: [],
+  userFields: [],
+  plans: [],
+});
+const isLoading = ref(true);
+
+const workspaceCatalog = computed<FieldsCatalog>(() => ({
+  fields: rawCatalog.value.fields,
+  plans: rawCatalog.value.plans,
+}));
+
+const userCatalog = computed<FieldsCatalog>(() => ({
+  fields: rawCatalog.value.userFields ?? [],
+  plans: rawCatalog.value.plans,
+}));
+
+function serialize(): string {
+  return JSON.stringify({
+    logical: state.value.logical,
+    conditions: state.value.conditions,
+  });
+}
+
+function onChildUpdate(next: ConditionGroup): void {
+  state.value = next;
+  emit("update:modelValue", serialize());
+}
+
+async function loadCatalog(): Promise<void> {
+  isLoading.value = true;
+  try {
+    rawCatalog.value = await $authFetch<FieldsCatalogResponse>(
+      CATALOG_URL.value,
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+onMounted(loadCatalog);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const parsed = parseValue(value);
+    if (JSON.stringify(parsed) !== JSON.stringify(state.value)) {
+      state.value = parsed;
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div v-if="isLoading" class="flex justify-center py-4">
+      <UIcon name="i-ph-spinner" class="animate-spin" />
+    </div>
+    <template v-else>
+      <DmsSaasSegmentConditionsGroup
+        :model-value="state"
+        :catalog="userCatalog"
+        :workspace-catalog="workspaceCatalog"
+        :allow-workspace-ref="true"
+        :depth="0"
+        :disabled="disabled"
+        @update:model-value="onChildUpdate"
+      />
+    </template>
+  </div>
+</template>