@nuxt-customer-portal/ui 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nuxt-customer-portal/ui
 
+## 0.10.1
+
+### Patch Changes
+
+- 7c0f8df: Edit localized terms and privacy policies with the shared Markdown editor, render sanitized Markdown on legal pages, and add subtle localized links to the sidebar footer in expanded and collapsed modes.
+  - @nuxt-customer-portal/core@0.10.1
+
+## 0.10.0
+
+### Minor Changes
+
+- 1235d0f: Let portal administrators upload separate desktop and mobile authentication backgrounds in Appearance settings. Add responsive image selection, single-image fallback, preview and removal controls, validated image uploads, and English/Dutch descriptions. Keep existing settings compatible. Position authentication forms near the top on mobile while preserving desktop positioning, with or without a background image.
+
+### Patch Changes
+
+- 1235d0f: Redirect the portal home route to `/dashboard` instead of showing the public landing page. Preserve dashboard authentication, onboarding, and saved homepage content. Send portal logout directly to `/login` instead of the home route, and remove the home back button from authentication pages.
+
+  Use a neutral welcome heading on the sign-in page in English and Dutch so it also welcomes first-time visitors.
+
+  Show translated email and password prompts instead of technical validation errors when sign-in fields are empty or missing.
+
+- Updated dependencies [f115496]
+  - @nuxt-customer-portal/core@0.10.0
+
 ## 0.9.1
 
 ### Patch Changes

package/app/components/AppUserMenu.vue

@@ -26,7 +26,7 @@ const signOut = async () => {
   await authClient.signOut()
   userStore.clearUserData()
   emit('navigate')
-  await navigateTo('/')
+  await navigateTo('/login', { replace: true })
 }
 
 const userMenuItems = computed(() => {

package/app/components/PortalLegalLinks.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{ collapsed?: boolean }>()
+const emit = defineEmits<{ navigate: [] }>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <nav
+    :aria-label="t('portalLegal.navigation')"
+    class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted"
+    :class="collapsed ? 'justify-center' : 'px-2'"
+  >
+    <NuxtLink
+      v-for="link in [
+        { to: '/terms', label: t('portalLegal.terms'), icon: 'i-lucide-file-text' },
+        { to: '/privacy', label: t('portalLegal.privacy'), icon: 'i-lucide-shield' }
+      ]"
+      :key="link.to"
+      :to="link.to"
+      :title="collapsed ? link.label : undefined"
+      class="rounded hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+      :class="collapsed ? 'flex min-h-8 min-w-8 items-center justify-center' : 'py-2'"
+      @click="emit('navigate')"
+    >
+      <UIcon v-if="collapsed" :name="link.icon" class="size-4" aria-hidden="true" />
+      <span :class="{ 'sr-only': collapsed }">{{ link.label }}</span>
+    </NuxtLink>
+  </nav>
+</template>

package/app/layouts/auth.vue

@@ -1,22 +1,21 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
+import { resolveAuthBackgrounds, type AuthBackgroundBranding } from '../utils/auth-background'
+
 const route = useRoute()
 const { t } = useI18n()
 const bootstrap = useState<{ adminExists?: boolean; completed?: boolean } | null>('portal-bootstrap-state', () => null)
+const settings = useState<{ branding?: AuthBackgroundBranding } | null>('portal-runtime-settings', () => null)
+const backgrounds = computed(() => resolveAuthBackgrounds(settings.value?.branding))
 </script>
 
 <template>
-  <div class="auth-shell h-screen flex items-center justify-center px-4">
-    <UButton
-      icon="i-lucide-chevron-left"
-      to="/"
-      size="xl"
-      color="neutral"
-      variant="subtle"
-      class="auth-back-button absolute left-8 top-8 rounded-full z-10"
-    />
-
-    <UPageCard variant="subtle" class="max-w-sm w-full">
+  <div class="auth-shell" :class="{ 'auth-shell--illustrated': backgrounds.desktop }">
+    <picture v-if="backgrounds.desktop" class="auth-background" aria-hidden="true">
+      <source media="(max-width: 1023px)" :srcset="backgrounds.mobile" />
+      <img :src="backgrounds.desktop" alt="" fetchpriority="high" decoding="async" />
+    </picture>
+    <UPageCard variant="subtle" class="auth-card relative w-full max-w-sm shrink-0">
       <UAlert
         v-if="route.path === '/signup' && bootstrap && !bootstrap.adminExists"
         class="mb-5"
@@ -30,3 +29,50 @@ const bootstrap = useState<{ adminExists?: boolean; completed?: boolean } | null
     </UPageCard>
   </div>
 </template>
+
+<style scoped>
+.auth-shell {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: max(1.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
+    max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+}
+.auth-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.auth-background img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center bottom;
+}
+.auth-card {
+  z-index: 1;
+}
+.auth-shell--illustrated .auth-card {
+  background: var(--ui-bg-elevated);
+  box-shadow: 0 1.5rem 4.5rem color-mix(in srgb, var(--ui-text) 12%, transparent);
+}
+@media (max-width: 1023px) {
+  .auth-shell {
+    align-items: flex-start;
+  }
+}
+@media (min-width: 1024px) {
+  .auth-shell--illustrated {
+    justify-content: flex-start;
+    padding-inline: clamp(3rem, 12vw, 12rem);
+  }
+  .auth-background img {
+    object-position: right center;
+  }
+}
+</style>

package/app/layouts/default.vue

@@ -97,7 +97,8 @@ onMounted(async () => {
           />
         </template>
         <template #footer="{ collapsed, collapse }">
-          <div class="flex w-full py-2" :class="collapsed ? 'justify-center' : 'justify-end'">
+          <div class="flex w-full items-center py-2" :class="collapsed ? 'flex-col' : 'justify-between'">
+            <PortalLegalLinks :collapsed="collapsed" @navigate="open = false" />
             <UButton
               :icon="collapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'"
               color="neutral"

package/app/utils/auth-background.ts

@@ -0,0 +1,11 @@
+export interface AuthBackgroundBranding {
+  authBackgroundDesktop?: string
+  authBackgroundMobile?: string
+}
+
+export function resolveAuthBackgrounds(branding?: AuthBackgroundBranding | null) {
+  return {
+    desktop: branding?.authBackgroundDesktop || branding?.authBackgroundMobile || '',
+    mobile: branding?.authBackgroundMobile || branding?.authBackgroundDesktop || ''
+  }
+}

package/i18n/locales/en.json

@@ -1,4 +1,9 @@
 {
+  "portalLegal": {
+    "navigation": "Legal information",
+    "terms": "Terms",
+    "privacy": "Privacy policy"
+  },
   "portalMarkdown": {
     "visual": "Visual editor",
     "source": "Markdown",

package/i18n/locales/nl.json

@@ -1,4 +1,9 @@
 {
+  "portalLegal": {
+    "navigation": "Juridische informatie",
+    "terms": "Voorwaarden",
+    "privacy": "Privacybeleid"
+  },
   "portalMarkdown": {
     "visual": "Visuele editor",
     "source": "Markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -39,7 +39,7 @@
     "remark-parse": "^11.0.0",
     "unified": "^11.0.5",
     "zod": "^4.4.3",
-    "@nuxt-customer-portal/core": "^0.9.1"
+    "@nuxt-customer-portal/core": "^0.10.1"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'ui',
-  version: '0.9.1',
+  version: '0.10.1',
   source: '@nuxt-customer-portal/ui',
   dependsOn: ['core']
 }