@nuxt-customer-portal/ui 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nuxt-customer-portal/ui
 
+## 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "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.0"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

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