@nuxt-customer-portal/saas-configuration 0.3.0

package/app/components/portal-settings/HomeStep.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { PortalSettings } from '../../../shared/settings'
+
+const state = defineModel<PortalSettings>({ required: true })
+const locale = ref<'en' | 'nl'>('en')
+const { t } = useI18n()
+const section = computed(() => state.value.content[locale.value])
+function addFeature() {
+  section.value.home.features.push({ title: '', description: '', visible: true })
+}
+</script>
+
+<template>
+  <div class="content-editor">
+    <div class="locale-tabs">
+      <UButton
+        v-for="code in ['en', 'nl'] as const"
+        :key="code"
+        type="button"
+        :variant="locale === code ? 'solid' : 'outline'"
+        @click="locale = code"
+      >
+        {{ code.toUpperCase() }}
+      </UButton>
+    </div>
+    <UFormField :name="`content.${locale}.home.heroTitle`" :label="t('saasSettings.editor.fields.heroTitle')">
+      <UInput v-model="section.home.heroTitle" class="w-full" />
+    </UFormField>
+    <UFormField
+      :name="`content.${locale}.home.heroDescription`"
+      :label="t('saasSettings.editor.fields.heroDescription')"
+    >
+      <UTextarea v-model="section.home.heroDescription" :rows="4" class="w-full" />
+    </UFormField>
+    <div class="settings-grid">
+      <UFormField :name="`content.${locale}.home.heroActionLabel`" :label="t('saasSettings.editor.fields.actionLabel')">
+        <UInput v-model="section.home.heroActionLabel" class="w-full" /> </UFormField
+      ><UFormField :name="`content.${locale}.home.heroActionUrl`" :label="t('saasSettings.editor.fields.actionUrl')">
+        <UInput v-model="section.home.heroActionUrl" class="w-full" />
+      </UFormField>
+    </div>
+    <UFormField
+      :name="`content.${locale}.home.introductionTitle`"
+      :label="t('saasSettings.editor.fields.introductionTitle')"
+    >
+      <UInput v-model="section.home.introductionTitle" class="w-full" />
+    </UFormField>
+    <UFormField :name="`content.${locale}.home.introductionBody`" :label="t('saasSettings.editor.fields.introduction')">
+      <UTextarea v-model="section.home.introductionBody" :rows="5" class="w-full" />
+    </UFormField>
+    <div v-for="(feature, index) in section.home.features" :key="index" class="feature-editor">
+      <UFormField :name="`content.${locale}.home.features.${index}.title`">
+        <UInput v-model="feature.title" :placeholder="t('saasSettings.editor.featureTitle')" /> </UFormField
+      ><UFormField :name="`content.${locale}.home.features.${index}.description`">
+        <UTextarea
+          v-model="feature.description"
+          :placeholder="t('saasSettings.editor.featureDescription')"
+        /> </UFormField
+      ><USwitch v-model="feature.visible" /><UButton
+        type="button"
+        icon="i-lucide-trash-2"
+        color="neutral"
+        variant="ghost"
+        @click="section.home.features.splice(index, 1)"
+      />
+    </div>
+    <UButton
+      v-if="section.home.features.length < 6"
+      type="button"
+      icon="i-lucide-plus"
+      color="neutral"
+      variant="outline"
+      @click="addFeature"
+    >
+      {{ t('saasSettings.editor.actions.addFeature') }}
+    </UButton>
+    <UFormField :name="`content.${locale}.home.supportTitle`" :label="t('saasSettings.editor.fields.supportTitle')">
+      <UInput v-model="section.home.supportTitle" class="w-full" />
+    </UFormField>
+    <UFormField :name="`content.${locale}.home.supportBody`" :label="t('saasSettings.editor.fields.supportText')">
+      <UTextarea v-model="section.home.supportBody" class="w-full" />
+    </UFormField>
+    <UCheckbox v-model="section.home.supportVisible" :label="t('saasSettings.editor.showSupport')" />
+  </div>
+</template>
+
+<style scoped>
+.content-editor {
+  display: grid;
+  gap: 1.25rem;
+}
+.locale-tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+.feature-editor {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 1rem;
+  background: var(--ui-bg-muted);
+  border-radius: 0.65rem;
+}
+@media (max-width: 768px) {
+  .settings-grid,
+  .feature-editor {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/app/components/portal-settings/LegalStep.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PortalSettings } from '../../../shared/settings'
+
+const state = defineModel<PortalSettings>({ required: true })
+const locale = ref<'en' | 'nl'>('en')
+const { t } = useI18n()
+const section = computed(() => state.value.content[locale.value])
+</script>
+
+<template>
+  <div class="content-editor">
+    <div class="locale-tabs">
+      <UButton
+        v-for="code in ['en', 'nl'] as const"
+        :key="code"
+        type="button"
+        :variant="locale === code ? 'solid' : 'outline'"
+        @click="locale = code"
+      >
+        {{ code.toUpperCase() }}
+      </UButton>
+    </div>
+    <UFormField :name="`content.${locale}.terms.title`" :label="t('saasSettings.editor.fields.termsTitle')">
+      <UInput v-model="section.terms.title" class="w-full" /> </UFormField
+    ><UFormField :name="`content.${locale}.terms.body`" :label="t('saasSettings.editor.fields.termsText')">
+      <UTextarea v-model="section.terms.body" :rows="12" class="w-full" /> </UFormField
+    ><UFormField :name="`content.${locale}.privacy.title`" :label="t('saasSettings.editor.fields.privacyTitle')">
+      <UInput v-model="section.privacy.title" class="w-full" /> </UFormField
+    ><UFormField :name="`content.${locale}.privacy.body`" :label="t('saasSettings.editor.fields.privacyText')">
+      <UTextarea v-model="section.privacy.body" :rows="12" class="w-full" />
+    </UFormField>
+  </div>
+</template>
+
+<style scoped>
+.content-editor {
+  display: grid;
+  gap: 1.25rem;
+}
+.locale-tabs {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

package/app/components/portal-settings/ModulesStep.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PortalModuleId, PortalSettings } from '../../../shared/settings'
+import { portalModuleIds } from '../../../shared/settings'
+
+const state = defineModel<PortalSettings>({ required: true })
+const { t } = useI18n()
+const modules = computed<Record<PortalModuleId, { label: string; description: string; icon: string }>>(() => ({
+  timesheets: {
+    label: t('saasSettings.editor.modules.timesheets'),
+    description: t('saasSettings.editor.modules.timesheetsDescription'),
+    icon: 'i-lucide-clock-3'
+  },
+  invoices: {
+    label: t('saasSettings.editor.modules.invoices'),
+    description: t('saasSettings.editor.modules.invoicesDescription'),
+    icon: 'i-lucide-receipt-text'
+  },
+  'service-requests': {
+    label: t('saasSettings.editor.modules.serviceRequests'),
+    description: t('saasSettings.editor.modules.serviceRequestsDescription'),
+    icon: 'i-lucide-messages-square'
+  },
+  'invoice-timesheets': {
+    label: t('saasSettings.editor.modules.invoiceTimesheets'),
+    description: t('saasSettings.editor.modules.invoiceTimesheetsDescription'),
+    icon: 'i-lucide-workflow'
+  }
+}))
+function toggle(moduleId: PortalModuleId, enabled: boolean) {
+  state.value.enabledModules = enabled
+    ? [...new Set([...state.value.enabledModules, moduleId])]
+    : state.value.enabledModules.filter((value) => value !== moduleId)
+}
+</script>
+
+<template>
+  <UFormField name="enabledModules">
+    <div class="module-list">
+      <label v-for="moduleId in portalModuleIds" :key="moduleId" class="module-option"
+        ><UIcon :name="modules[moduleId].icon" class="module-option__icon" /><span
+          ><strong>{{ modules[moduleId].label }}</strong
+          ><small>{{ modules[moduleId].description }}</small
+          ><small class="module-option__preserved">{{ t('saasSettings.editor.modules.preserved') }}</small></span
+        ><USwitch :model-value="state.enabledModules.includes(moduleId)" @update:model-value="toggle(moduleId, $event)"
+      /></label>
+    </div>
+  </UFormField>
+</template>
+
+<style scoped>
+.module-list {
+  display: grid;
+  gap: 1.25rem;
+}
+.module-option {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.65rem;
+}
+.module-option__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--ui-primary);
+}
+.module-option span {
+  display: grid;
+  gap: 0.2rem;
+}
+.module-option small {
+  color: var(--ui-text-muted);
+}
+.module-option__preserved {
+  font-size: 0.7rem;
+}
+@media (max-width: 480px) {
+  .module-option {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  .module-option :deep(button) {
+    grid-column: 2;
+    justify-self: start;
+  }
+}
+</style>

package/app/components/portal-settings/ReviewStep.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { PortalSettings } from '../../../shared/settings'
+
+defineProps<{ state: PortalSettings }>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="review-grid">
+    <div>
+      <span>{{ t('saasSettings.editor.review.portal') }}</span
+      ><strong>{{ state.branding.portalName }}</strong>
+    </div>
+    <div>
+      <span>{{ t('saasSettings.editor.review.theme') }}</span
+      ><strong>{{ state.appearance.theme }}</strong>
+    </div>
+    <div>
+      <span>{{ t('saasSettings.editor.review.colorMode') }}</span
+      ><strong>{{ state.appearance.colorMode }}</strong>
+    </div>
+    <div>
+      <span>{{ t('saasSettings.editor.review.activeModules') }}</span
+      ><strong>{{ state.enabledModules.length }}</strong>
+    </div>
+    <p>{{ t('saasSettings.editor.review.description') }}</p>
+  </div>
+</template>
+
+<style scoped>
+.review-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.review-grid div {
+  display: grid;
+  padding: 1rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.65rem;
+}
+.review-grid span {
+  color: var(--ui-text-muted);
+  font-size: 0.8rem;
+}
+.review-grid p {
+  grid-column: 1/-1;
+}
+@media (max-width: 768px) {
+  .review-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/app/composables/usePortalSettings.ts

@@ -0,0 +1,25 @@
+import type { PortalOnboardingState, PortalSettings } from '../../shared/settings'
+
+export interface PublicPortalSettings extends Pick<
+  PortalSettings,
+  'branding' | 'appearance' | 'enabledModules' | 'content'
+> {
+  completed: boolean
+}
+
+export const usePortalSettings = () => {
+  const settings = useState<PublicPortalSettings | null>('portal-runtime-settings', () => null)
+  const enabledModules = useState<string[] | null>('portal-enabled-modules', () => null)
+  const bootstrap = useState<PortalOnboardingState | null>('portal-bootstrap-state', () => null)
+
+  const refreshPublicSettings = async () => {
+    settings.value = await $fetch<PublicPortalSettings>('/api/portal/public')
+    enabledModules.value = settings.value.enabledModules
+    return settings.value
+  }
+  const refreshBootstrap = async () => {
+    bootstrap.value = await $fetch<PortalOnboardingState>('/api/portal/bootstrap')
+    return bootstrap.value
+  }
+  return { settings, bootstrap, enabledModules, refreshPublicSettings, refreshBootstrap }
+}

package/app/middleware/00-portal-onboarding.global.ts

@@ -0,0 +1,52 @@
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const { bootstrap, refreshBootstrap } = usePortalSettings()
+  if (!bootstrap.value) {
+    await refreshBootstrap().catch(() => null)
+  }
+  const state = bootstrap.value
+  if (!state) {
+    return
+  }
+
+  const bootstrapRoutes = ['/signup', '/verify-email', '/login', '/forgot-password', '/reset-password']
+  const publicConfiguredRoutes = ['/', '/terms', '/privacy', '/contact']
+
+  if (!state.adminExists) {
+    if (['/signup', '/verify-email'].includes(to.path)) {
+      return
+    }
+    return navigateTo('/signup', { replace: true })
+  }
+
+  if (!state.completed) {
+    const { data: session } = await authClient.useSession(useFetch)
+    if (to.path === '/onboarding' || bootstrapRoutes.includes(to.path)) {
+      return
+    }
+    if (session.value?.user?.role === 'admin') {
+      return navigateTo('/onboarding', { replace: true })
+    }
+    return navigateTo('/login', { replace: true })
+  }
+
+  if (to.path === '/onboarding') {
+    return navigateTo('/admin/portal-settings', { replace: true })
+  }
+  if (publicConfiguredRoutes.includes(to.path)) {
+    return
+  }
+
+  const settings = useState<{ enabledModules?: string[] } | null>('portal-runtime-settings')
+  const routeModules: Record<string, string[]> = {
+    timesheets: ['/timesheets', '/admin/timesheets'],
+    invoices: ['/invoices', '/admin/invoices'],
+    'service-requests': ['/requests', '/admin/requests']
+  }
+  for (const [moduleId, prefixes] of Object.entries(routeModules)) {
+    if (!settings.value?.enabledModules?.includes(moduleId) && prefixes.some((prefix) => to.path.startsWith(prefix))) {
+      return navigateTo('/dashboard', { replace: true })
+    }
+  }
+})

package/app/pages/admin/portal-settings.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+const { t } = useI18n()
+useSeoMeta({ title: () => t('saasSettings.title') })
+</script>
+
+<template><PortalSettingsEditor /></template>

package/app/pages/index.vue

@@ -0,0 +1,170 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import type { PublicPortalSettings } from '../composables/usePortalSettings'
+
+definePageMeta({ layout: 'portal', public: true })
+const { locale, t } = useI18n()
+const { isAuthenticated } = usePortalSession()
+const settings = useState<PublicPortalSettings | null>('portal-runtime-settings')
+const content = computed(() => settings.value?.content?.[locale.value as 'en' | 'nl'] || settings.value?.content?.en)
+const heroActionLabel = computed(() =>
+  isAuthenticated.value ? t('saasSettings.public.myDashboard') : content.value?.home.heroActionLabel
+)
+const heroActionUrl = computed(() =>
+  isAuthenticated.value ? '/dashboard' : content.value?.home.heroActionUrl || '/login'
+)
+useSeoMeta({ title: () => content.value?.home.heroTitle || settings.value?.branding?.portalName || 'Customer Portal' })
+</script>
+
+<template>
+  <main v-if="content" class="public-home">
+    <section class="public-hero">
+      <div>
+        <p class="eyebrow">{{ settings?.branding?.tagline }}</p>
+        <h1>{{ content.home.heroTitle }}</h1>
+        <p>{{ content.home.heroDescription }}</p>
+        <UButton v-if="heroActionLabel" :to="heroActionUrl" size="xl" trailing-icon="i-lucide-arrow-right">
+          {{ heroActionLabel }}
+        </UButton>
+      </div>
+      <aside>
+        <PublicPortalLogo />
+        <p v-if="settings?.branding?.supportEmail">{{ settings.branding.supportEmail }}</p>
+      </aside>
+    </section>
+    <section class="public-intro">
+      <h2>{{ content.home.introductionTitle }}</h2>
+      <p>{{ content.home.introductionBody }}</p>
+    </section>
+    <section v-if="content.home.features.some((item: any) => item.visible)" class="public-features">
+      <article v-for="(feature, index) in content.home.features.filter((item: any) => item.visible)" :key="index">
+        <span>0{{ Number(index) + 1 }}</span>
+        <h3>{{ feature.title }}</h3>
+        <p>{{ feature.description }}</p>
+      </article>
+    </section>
+    <section v-if="content.home.supportVisible" class="public-support">
+      <h2>{{ content.home.supportTitle }}</h2>
+      <p>{{ content.home.supportBody }}</p>
+      <UButton
+        v-if="settings?.branding?.supportUrl"
+        :to="settings.branding.supportUrl"
+        color="neutral"
+        variant="outline"
+      >
+        Contact support
+      </UButton>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+/* Hallmark · genre: modern-minimal · macrostructure: split masthead + numbered ledger · theme: portal-native
+ * pre-emit critique: P5 H5 E4 S5 R5 V5 · mobile: pass (34,49–57)
+ */
+.public-home {
+  padding: clamp(1rem, 4vw, 4rem);
+  display: grid;
+  gap: clamp(3rem, 8vw, 7rem);
+  overflow-x: clip;
+}
+.public-hero {
+  min-height: 34rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.5fr);
+  gap: 3rem;
+  align-items: end;
+  border-bottom: 1px solid var(--ui-border);
+  padding-bottom: 3rem;
+}
+.public-hero h1 {
+  font-size: clamp(3rem, 8vw, 7.5rem);
+  line-height: 0.92;
+  letter-spacing: -0.06em;
+  font-weight: 900;
+  max-width: 12ch;
+  overflow-wrap: anywhere;
+}
+.public-hero p {
+  max-width: 45rem;
+  font-size: 1.15rem;
+  color: var(--ui-text-muted);
+  margin: 1.5rem 0;
+}
+.public-hero aside {
+  align-self: start;
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+  padding-top: 1rem;
+}
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--portal-primary) !important;
+}
+.public-intro {
+  display: grid;
+  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
+  gap: 3rem;
+}
+.public-intro h2,
+.public-support h2 {
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 800;
+  overflow-wrap: anywhere;
+}
+.public-intro p,
+.public-support p {
+  font-size: 1.2rem;
+  white-space: pre-line;
+  color: var(--ui-text-muted);
+}
+.public-features {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-top: 1px solid var(--ui-border);
+}
+.public-features article {
+  padding: 1.5rem;
+  border-right: 1px solid var(--ui-border);
+}
+.public-features span {
+  font-variant-numeric: tabular-nums;
+  color: var(--portal-primary);
+  font-weight: 800;
+}
+.public-features h3 {
+  font-size: 1.4rem;
+  font-weight: 750;
+  margin: 0.75rem 0;
+}
+.public-features p {
+  color: var(--ui-text-muted);
+}
+.public-support {
+  display: grid;
+  gap: 1.25rem;
+  max-width: 48rem;
+  padding-bottom: 3rem;
+}
+@media (max-width: 768px) {
+  .public-hero,
+  .public-intro {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+  .public-hero {
+    align-items: start;
+  }
+  .public-features {
+    grid-template-columns: 1fr;
+  }
+  .public-features article {
+    border-right: 0;
+    border-bottom: 1px solid var(--ui-border);
+  }
+}
+</style>

package/app/pages/onboarding.vue

@@ -0,0 +1,8 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+definePageMeta({ layout: 'centerform' })
+const { t } = useI18n()
+useSeoMeta({ title: () => t('saasSettings.onboardingTitle') })
+</script>
+
+<template><PortalSettingsEditor onboarding /></template>

package/app/pages/privacy.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import type { PublicPortalSettings } from '../composables/usePortalSettings'
+
+definePageMeta({ layout: 'portal', public: true })
+const { locale } = useI18n()
+const settings = useState<PublicPortalSettings | null>('portal-runtime-settings')
+const page = computed(
+  () => (settings.value?.content?.[locale.value as 'en' | 'nl'] || settings.value?.content?.en)?.privacy
+)
+useSeoMeta({ title: () => page.value?.title || 'Privacy' })
+</script>
+
+<template>
+  <article v-if="page" class="legal-page">
+    <p class="eyebrow">Legal</p>
+    <h1>{{ page.title }}</h1>
+    <div>{{ page.body }}</div>
+  </article>
+</template>
+
+<style scoped>
+.legal-page {
+  max-width: 52rem;
+  margin: 0 auto;
+  padding: clamp(2rem, 7vw, 6rem) 1rem;
+}
+.legal-page h1 {
+  font-size: clamp(2.5rem, 7vw, 5rem);
+  font-weight: 850;
+  overflow-wrap: anywhere;
+  margin-bottom: 3rem;
+}
+.legal-page div {
+  white-space: pre-wrap;
+  line-height: 1.75;
+  color: var(--ui-text-muted);
+}
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--portal-primary);
+}
+</style>

package/app/pages/terms.vue

@@ -0,0 +1,46 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+import type { PublicPortalSettings } from '../composables/usePortalSettings'
+
+definePageMeta({ layout: 'portal', public: true })
+const { locale } = useI18n()
+const settings = useState<PublicPortalSettings | null>('portal-runtime-settings')
+const page = computed(
+  () => (settings.value?.content?.[locale.value as 'en' | 'nl'] || settings.value?.content?.en)?.terms
+)
+useSeoMeta({ title: () => page.value?.title || 'Terms' })
+</script>
+
+<template>
+  <article v-if="page" class="legal-page">
+    <p class="eyebrow">Legal</p>
+    <h1>{{ page.title }}</h1>
+    <div>{{ page.body }}</div>
+  </article>
+</template>
+
+<style scoped>
+.legal-page {
+  max-width: 52rem;
+  margin: 0 auto;
+  padding: clamp(2rem, 7vw, 6rem) 1rem;
+}
+.legal-page h1 {
+  font-size: clamp(2.5rem, 7vw, 5rem);
+  font-weight: 850;
+  overflow-wrap: anywhere;
+  margin-bottom: 3rem;
+}
+.legal-page div {
+  white-space: pre-wrap;
+  line-height: 1.75;
+  color: var(--ui-text-muted);
+}
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--portal-primary);
+}
+</style>