@nuxt-customer-portal/saas-configuration 0.3.0

package/app/components/PortalSettingsEditor.vue

@@ -0,0 +1,452 @@
+<script setup lang="ts">
+import type { PortalOnboardingStep, PortalSettings } from '../../shared/settings'
+import { portalOnboardingSteps, portalSettingsSchema } from '../../shared/settings'
+import { primaryForeground } from '../../shared/primary-contrast'
+
+const props = defineProps<{ onboarding?: boolean }>()
+const { t } = useI18n()
+const {
+  data,
+  status,
+  error: loadError
+} = await useFetch<{ settings: PortalSettings; step: PortalOnboardingStep; completed: boolean }>(
+  '/api/admin/portal-settings'
+)
+const state = ref<PortalSettings | null>(null)
+const step = ref<PortalOnboardingStep>('branding')
+const busy = ref(false)
+const colorMode = useColorMode()
+const toast = useToast()
+
+function showError(message: string) {
+  toast.add({ title: message, color: 'error' })
+}
+
+watch(
+  data,
+  (value) => {
+    if (!value || state.value) {
+      return
+    }
+    state.value = structuredClone(value.settings)
+    step.value = !props.onboarding && value.step === 'review' ? 'branding' : value.step
+  },
+  { immediate: true }
+)
+
+watchEffect(() => {
+  if (!props.onboarding && step.value === 'review') {
+    step.value = 'branding'
+  }
+})
+
+watch(
+  () => state.value?.appearance.colorMode,
+  (policy) => {
+    if (policy === 'light-only') {
+      colorMode.preference = 'light'
+    }
+    if (policy === 'dark-only') {
+      colorMode.preference = 'dark'
+    }
+  },
+  { immediate: true }
+)
+
+const showColorModeSwitcher = computed(() => state.value?.appearance.colorMode === 'user-choice')
+const editorSteps = computed(() => portalOnboardingSteps.filter((item) => item !== 'review'))
+const primaryColorStyle = computed<Record<string, string>>(() => {
+  const appearance = state.value?.appearance
+  if (!appearance) {
+    return {} as Record<string, string>
+  }
+  const primary = colorMode.value === 'dark' ? appearance.primaryDark : appearance.primaryLight
+  return {
+    '--portal-primary': primary,
+    '--portal-on-primary': primaryForeground(primary),
+    '--ui-primary': primary,
+    '--color-primary-500': primary,
+    '--color-primary-600': primary
+  }
+})
+const stepIndex = computed(() => portalOnboardingSteps.indexOf(step.value))
+const stepLabels = computed<Record<PortalOnboardingStep, string>>(() => ({
+  branding: t('saasSettings.editor.steps.branding'),
+  modules: t('saasSettings.editor.steps.modules'),
+  home: t('saasSettings.editor.steps.home'),
+  legal: t('saasSettings.editor.steps.legal'),
+  review: t('saasSettings.editor.steps.review')
+}))
+async function save(next?: PortalOnboardingStep) {
+  if (!state.value) {
+    return false
+  }
+  const parsed = portalSettingsSchema.safeParse(state.value)
+  if (!parsed.success) {
+    showError(t('saasSettings.editor.messages.reviewSettings'))
+    return false
+  }
+  busy.value = true
+  try {
+    const result = await $fetch<{ settings: PortalSettings; step: PortalOnboardingStep }>(
+      '/api/admin/portal-settings',
+      { method: 'PUT', body: { settings: parsed.data, step: next || step.value } }
+    )
+    state.value = structuredClone(result.settings)
+    step.value = result.step
+    await usePortalSettings().refreshPublicSettings()
+    if (!props.onboarding) {
+      toast.add({ title: t('saasSettings.editor.messages.saved'), color: 'success' })
+    }
+    return true
+  } catch {
+    showError(t('saasSettings.editor.messages.saveFailed'))
+    return false
+  } finally {
+    busy.value = false
+  }
+}
+async function complete() {
+  if (!state.value) {
+    return
+  }
+  busy.value = true
+  try {
+    await $fetch('/api/admin/portal-settings/complete', { method: 'POST', body: { settings: state.value } })
+    await Promise.all([usePortalSettings().refreshBootstrap(), usePortalSettings().refreshPublicSettings()])
+    window.location.assign('/dashboard')
+  } catch {
+    showError(t('saasSettings.editor.messages.completeFailed'))
+  } finally {
+    busy.value = false
+  }
+}
+async function submitForm() {
+  if (!props.onboarding) {
+    return save()
+  }
+  if (step.value === 'review') {
+    return complete()
+  }
+  return save(portalOnboardingSteps[Math.min(stepIndex.value + 1, portalOnboardingSteps.length - 1)]!)
+}
+</script>
+
+<template>
+  <div :class="['settings-page', { 'settings-page--editor': !props.onboarding }]" :style="primaryColorStyle">
+    <div v-if="props.onboarding && showColorModeSwitcher" class="settings-toolbar"><UColorModeButton /></div>
+    <div :class="['settings-workbench', { 'settings-workbench--editor': !props.onboarding }]">
+      <div v-if="status === 'pending'" class="settings-state">
+        <UIcon name="i-lucide-loader-circle" class="animate-spin" /> {{ t('saasSettings.editor.loading') }}
+      </div>
+      <UAlert
+        v-else-if="loadError"
+        color="error"
+        :title="t('saasSettings.editor.unavailable')"
+        :description="loadError.message"
+      />
+      <template v-else-if="state">
+        <nav v-if="props.onboarding" class="settings-rail" :aria-label="t('saasSettings.editor.configurationSections')">
+          <p class="settings-rail__label">{{ t('saasSettings.editor.setupProgress') }}</p>
+          <button
+            v-for="item in portalOnboardingSteps"
+            :key="item"
+            type="button"
+            :class="['settings-step', { 'settings-step--active': step === item }]"
+            :disabled="portalOnboardingSteps.indexOf(item) > stepIndex"
+            @click="step = item"
+          >
+            <span>{{ portalOnboardingSteps.indexOf(item) + 1 }}</span
+            >{{ stepLabels[item] }}
+          </button>
+        </nav>
+        <section class="settings-panel">
+          <header v-if="props.onboarding">
+            <p class="eyebrow">{{ stepIndex + 1 }} / {{ portalOnboardingSteps.length }}</p>
+            <h1>{{ stepLabels[step] }}</h1>
+          </header>
+          <header v-else class="editor-header">
+            <div class="editor-title">
+              <UIcon name="i-lucide-palette" class="size-6" />
+              <h1>{{ t('saasSettings.title') }}</h1>
+            </div>
+            <nav class="editor-tabs" :aria-label="t('saasSettings.editor.configurationSections')">
+              <UButton
+                v-for="item in editorSteps"
+                :key="item"
+                type="button"
+                color="neutral"
+                :variant="step === item ? 'soft' : 'ghost'"
+                @click="step = item"
+              >
+                {{ stepLabels[item] }}
+              </UButton>
+            </nav>
+            <h2>{{ stepLabels[step] }}</h2>
+          </header>
+          <UForm
+            class="settings-form"
+            :state="state"
+            :schema="portalSettingsSchema"
+            @submit="submitForm"
+            @error="showError(t('saasSettings.editor.messages.reviewSettings'))"
+          >
+            <PortalSettingsBrandingStep v-if="step === 'branding'" v-model="state" @error="showError" />
+            <PortalSettingsModulesStep v-else-if="step === 'modules'" v-model="state" />
+            <PortalSettingsHomeStep v-else-if="step === 'home'" v-model="state" />
+            <PortalSettingsLegalStep v-else-if="step === 'legal'" v-model="state" />
+            <PortalSettingsReviewStep v-else :state="state" />
+            <footer class="settings-actions">
+              <UButton
+                v-if="props.onboarding && stepIndex > 0"
+                type="button"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-arrow-left"
+                @click="step = portalOnboardingSteps[stepIndex - 1]!"
+              >
+                {{ t('saasSettings.editor.actions.back') }} </UButton
+              ><span /><UButton v-if="!props.onboarding" type="submit" icon="i-lucide-save" :loading="busy">
+                {{ t('saasSettings.editor.actions.save') }} </UButton
+              ><UButton
+                v-else-if="step !== 'review'"
+                type="submit"
+                :loading="busy"
+                trailing-icon="i-lucide-arrow-right"
+              >
+                {{ t('saasSettings.editor.actions.saveContinue') }} </UButton
+              ><UButton v-else type="submit" :loading="busy" icon="i-lucide-check">
+                {{ t('saasSettings.editor.actions.complete') }}
+              </UButton>
+            </footer>
+          </UForm>
+        </section>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings-page {
+  width: min(100%, 76rem);
+  margin: 0 auto;
+}
+.settings-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding-bottom: 0.75rem;
+}
+.settings-page .settings-workbench {
+  width: 100%;
+  margin: 0;
+}
+.settings-workbench--editor {
+  display: block;
+  min-height: 0;
+  border: 0;
+  background: transparent;
+}
+.settings-workbench--editor .settings-panel {
+  padding: 0;
+}
+.editor-header {
+  display: grid;
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+.editor-header h1 {
+  margin-bottom: 0;
+}
+.editor-header h2 {
+  font-size: 1.35rem;
+  font-weight: 750;
+}
+.editor-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--ui-border);
+}
+.settings-workbench {
+  display: grid;
+  grid-template-columns: 15rem minmax(0, 1fr);
+  width: min(100%, 76rem);
+  min-height: calc(100vh - 8rem);
+  margin: 0 auto;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-bg);
+}
+.settings-rail {
+  padding: 1.5rem;
+  border-right: 1px solid var(--ui-border);
+  background: var(--ui-bg-muted);
+}
+.settings-rail__label,
+.eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.7rem;
+  font-weight: 800;
+  color: var(--ui-text-muted);
+  margin-bottom: 1rem;
+}
+.settings-step {
+  display: flex;
+  width: 100%;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.7rem;
+  border-radius: 0.5rem;
+  text-align: left;
+  color: var(--ui-text-muted);
+}
+.settings-step:hover:not(:disabled),
+.settings-step--active {
+  background: var(--ui-bg-accented);
+  color: var(--ui-text-highlighted);
+}
+.settings-step:focus-visible {
+  outline: 2px solid var(--portal-primary);
+  outline-offset: 2px;
+}
+.settings-step:disabled {
+  opacity: 0.45;
+}
+.settings-step span {
+  display: grid;
+  place-items: center;
+  width: 1.65rem;
+  height: 1.65rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 999px;
+}
+.settings-panel {
+  padding: clamp(1.25rem, 4vw, 3rem);
+  min-width: 0;
+}
+.settings-panel h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 800;
+  overflow-wrap: anywhere;
+  margin-bottom: 2rem;
+}
+.settings-form {
+  width: 100%;
+  min-width: 0;
+}
+.settings-alert {
+  margin-top: 1.25rem;
+}
+.settings-actions {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1rem;
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--ui-border);
+}
+.settings-state {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 2rem;
+}
+@media (max-width: 768px) {
+  .settings-workbench {
+    grid-template-columns: 1fr;
+  }
+  .settings-rail {
+    display: flex;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--ui-border);
+  }
+  .settings-rail__label {
+    display: none;
+  }
+  .settings-step {
+    min-width: max-content;
+  }
+  .settings-panel {
+    padding: 1rem;
+  }
+  .settings-actions :deep(button) {
+    white-space: nowrap;
+  }
+}
+@media (max-width: 414px) {
+  .settings-step {
+    font-size: 0;
+  }
+  .settings-step span {
+    font-size: 0.8rem;
+  }
+  .settings-actions {
+    grid-template-columns: 1fr;
+  }
+  .settings-actions span {
+    display: none;
+  }
+  .settings-actions :deep(button) {
+    width: 100%;
+  }
+}
+.settings-page .settings-workbench.settings-workbench--editor {
+  display: block;
+  min-height: 0;
+  border: 0;
+  background: transparent;
+}
+.settings-page .settings-workbench--editor .settings-panel {
+  width: 100%;
+  padding: 0;
+}
+.settings-page--editor {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 1rem;
+}
+.settings-panel .editor-header {
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+.settings-panel .editor-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.settings-panel .editor-title > svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.settings-panel .editor-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 600;
+  letter-spacing: normal;
+}
+.settings-panel .editor-header h2 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+}
+.settings-page--editor .settings-actions {
+  margin-top: 1.5rem;
+}
+@media (min-width: 640px) {
+  .settings-page--editor {
+    padding: 1.5rem;
+  }
+}
+@media (min-width: 1024px) {
+  .settings-page--editor {
+    padding: 2rem;
+  }
+}
+</style>

package/app/components/PublicPortalLogo.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ compact?: boolean }>(), { compact: false })
+const settings = useState<{
+  branding?: { portalName?: string; markLight?: string; markDark?: string; logoLight?: string; logoDark?: string }
+} | null>('portal-runtime-settings', () => null)
+const colorMode = useColorMode()
+const source = computed(() => {
+  const branding = settings.value?.branding
+  if (!branding) {
+    return ''
+  }
+  const kind = props.compact ? 'mark' : 'logo'
+  return colorMode.value === 'dark'
+    ? branding[`${kind}Dark`] || branding[`${kind}Light`] || ''
+    : branding[`${kind}Light`] || branding[`${kind}Dark`] || ''
+})
+</script>
+
+<template>
+  <img
+    v-if="source"
+    :src="source"
+    :alt="compact ? '' : settings?.branding?.portalName"
+    :class="compact ? 'size-10 rounded-lg object-contain' : 'h-12 max-w-64 object-contain'"
+  /><strong v-else class="text-xl">{{ settings?.branding?.portalName || 'Customer Portal' }}</strong>
+</template>

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import type { PortalSettings } from '../../../shared/settings'
+
+const state = defineModel<PortalSettings>({ required: true })
+const emit = defineEmits<{ error: [message: string] }>()
+const { t } = useI18n()
+type BrandAssetField = 'markLight' | 'markDark' | 'logoLight' | 'logoDark'
+const assetErrors = reactive<Partial<Record<BrandAssetField, string>>>({})
+const assetFields = computed<BrandAssetField[]>(() => {
+  if (state.value.appearance.colorMode === 'light-only') {
+    return ['markLight', 'logoLight']
+  }
+  if (state.value.appearance.colorMode === 'dark-only') {
+    return ['markDark', 'logoDark']
+  }
+  return ['markLight', 'markDark', 'logoLight', 'logoDark']
+})
+
+function readAsDataUrl(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result))
+    reader.onerror = () => reject(new Error('Could not read image'))
+    reader.readAsDataURL(file)
+  })
+}
+
+function readDimensions(source: string) {
+  return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    const image = new Image()
+    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight })
+    image.onerror = () => reject(new Error('Could not decode image'))
+    image.src = source
+  })
+}
+
+function rejectImage(field: BrandAssetField, message: string) {
+  assetErrors[field] = message
+  emit('error', message)
+}
+
+async function readImage(file: File | null | undefined, field: BrandAssetField) {
+  if (!file) {
+    return
+  }
+  assetErrors[field] = undefined
+  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > 2_000_000) {
+    rejectImage(field, t('saasSettings.editor.messages.invalidImage'))
+    return
+  }
+  try {
+    const source = await readAsDataUrl(file)
+    const { width, height } = await readDimensions(source)
+    if (width > 2400 || height > 2400) {
+      rejectImage(field, t('saasSettings.editor.messages.imageTooLarge'))
+      return
+    }
+    if (field.startsWith('mark') && (width < 64 || height < 64)) {
+      rejectImage(field, t('saasSettings.editor.messages.markTooSmall'))
+      return
+    }
+    state.value.branding[field] = source
+  } catch {
+    rejectImage(field, t('saasSettings.editor.messages.invalidImage'))
+  }
+}
+
+function removeImage(field: BrandAssetField) {
+  assetErrors[field] = undefined
+  state.value.branding[field] = ''
+}
+</script>
+
+<template>
+  <div class="settings-grid">
+    <UFormField name="branding.portalName" required :label="t('saasSettings.editor.fields.portalName')">
+      <UInput v-model="state.branding.portalName" class="w-full" />
+    </UFormField>
+    <UFormField name="branding.tagline" :label="t('saasSettings.editor.fields.tagline')">
+      <UInput v-model="state.branding.tagline" class="w-full" />
+    </UFormField>
+    <UFormField name="branding.supportEmail" :label="t('saasSettings.editor.fields.supportEmail')">
+      <UInput v-model="state.branding.supportEmail" type="email" class="w-full" />
+    </UFormField>
+    <UFormField name="branding.supportUrl" :label="t('saasSettings.editor.fields.supportUrl')">
+      <UInput v-model="state.branding.supportUrl" class="w-full" />
+    </UFormField>
+    <h2 class="section-heading">{{ t('saasSettings.editor.appearanceSection') }}</h2>
+    <UFormField name="appearance.theme" required :label="t('saasSettings.editor.fields.theme')">
+      <USelect
+        v-model="state.appearance.theme"
+        :items="[
+          { label: t('saasSettings.editor.themes.apex'), value: 'apex' },
+          { label: t('saasSettings.editor.themes.brutal'), value: 'brutal' }
+        ]"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField name="appearance.colorMode" required :label="t('saasSettings.editor.fields.colorMode')">
+      <USelect
+        v-model="state.appearance.colorMode"
+        :items="[
+          { label: t('saasSettings.editor.colorModes.userChoice'), value: 'user-choice' },
+          { label: t('saasSettings.editor.colorModes.lightOnly'), value: 'light-only' },
+          { label: t('saasSettings.editor.colorModes.darkOnly'), value: 'dark-only' }
+        ]"
+        class="w-full"
+      />
+    </UFormField>
+    <UFormField
+      v-if="state.appearance.colorMode !== 'dark-only'"
+      name="appearance.primaryLight"
+      required
+      :label="t('saasSettings.editor.fields.primaryLight')"
+    >
+      <input v-model="state.appearance.primaryLight" type="color" class="color-input" />
+    </UFormField>
+    <UFormField
+      v-if="state.appearance.colorMode !== 'light-only'"
+      name="appearance.primaryDark"
+      required
+      :label="t('saasSettings.editor.fields.primaryDark')"
+    >
+      <input v-model="state.appearance.primaryDark" type="color" class="color-input" />
+    </UFormField>
+    <h2 class="section-heading">{{ t('saasSettings.editor.logoSection') }}</h2>
+    <UFormField
+      v-for="field in assetFields"
+      :key="field"
+      :name="`branding.${field}`"
+      :label="t(`saasSettings.editor.fields.${field}`)"
+      :description="t(`saasSettings.editor.assetDescriptions.${field}`)"
+      :error="assetErrors[field]"
+    >
+      <div class="asset-field">
+        <img v-if="state.branding[field]" :src="state.branding[field]" alt="" /><UFileUpload
+          variant="button"
+          accept="image/png,image/jpeg,image/webp"
+          reset
+          :label="t('saasSettings.editor.actions.chooseImage')"
+          @update:model-value="readImage($event, field)"
+        /><UButton
+          v-if="state.branding[field]"
+          type="button"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          @click="removeImage(field)"
+        >
+          {{ t('saasSettings.editor.actions.remove') }}
+        </UButton>
+      </div>
+    </UFormField>
+  </div>
+</template>
+
+<style scoped>
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+.section-heading {
+  grid-column: 1/-1;
+  margin-top: 0.75rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--ui-border);
+  font-size: 1rem;
+  font-weight: 700;
+}
+.asset-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 4rem;
+}
+.asset-field img {
+  width: 4rem;
+  height: 4rem;
+  object-fit: contain;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.5rem;
+}
+.color-input {
+  width: 100%;
+  height: 2.75rem;
+  border: 1px solid var(--ui-border);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  background: var(--ui-bg);
+}
+@media (max-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>