From ca6293c7edb55601ddf9a16503a519cb3ed461b1 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 20 Oct 2025 10:29:39 +0200
Subject: [PATCH 1/3] fix: plain view logo flickering on page reload

Don't load the plain view logo on `/` routes because it would cause a flickering on regular page reloads.
---
 packages/web-runtime/src/layouts/Plain.vue | 39 +++++++++-------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index d3d9fe6ab2..219c9b3386 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -3,41 +3,32 @@
     <h1 class="sr-only" v-text="pageTitle" />
     <router-view />
     <img
-      v-if="!backgroundImg"
+      v-if="!backgroundImg && route.fullPath !== '/'"
       alt="OpenCloud emblem"
       src="/packages/design-system/src/assets/images/icon-lilac.svg"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, defineComponent, unref } from 'vue'
+import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouteMeta, useThemeStore } from '@opencloud-eu/web-pkg'
+import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'PlainLayout',
-  setup() {
-    const { $gettext } = useGettext()
-    const themeStore = useThemeStore()
-    const { currentTheme } = storeToRefs(themeStore)
+const { $gettext } = useGettext()
+const themeStore = useThemeStore()
+const { currentTheme } = storeToRefs(themeStore)
 
-    const title = useRouteMeta('title')
+const title = useRouteMeta('title')
+const route = useRoute()
 
-    const pageTitle = computed(() => {
-      return $gettext(unref(title) || '')
-    })
-    const backgroundImg = computed(() => unref(currentTheme).background)
-    const backgroundImgStyle = computed(() => {
-      return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
-    })
-
-    return {
-      pageTitle,
-      backgroundImg,
-      backgroundImgStyle
-    }
-  }
+const pageTitle = computed(() => {
+  return $gettext(unref(title) || '')
+})
+const backgroundImg = computed(() => unref(currentTheme).background)
+const backgroundImgStyle = computed(() => {
+  return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
 })
 </script>

From 1c1f6daea9288103bfe196631fd40a94849dcd87 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 20 Oct 2025 10:57:04 +0200
Subject: [PATCH 2/3] fix: logo display on plain views

---
 packages/web-runtime/src/layouts/Plain.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/layouts/Plain.vue b/packages/web-runtime/src/layouts/Plain.vue
index 219c9b3386..3b2569fe35 100644
--- a/packages/web-runtime/src/layouts/Plain.vue
+++ b/packages/web-runtime/src/layouts/Plain.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="oc-login h-screen" :style="backgroundImgStyle">
     <h1 class="sr-only" v-text="pageTitle" />
-    <router-view />
+    <router-view class="relative z-1" />
     <img
       v-if="!backgroundImg && route.fullPath !== '/'"
       alt="OpenCloud emblem"
       src="/packages/design-system/src/assets/images/icon-lilac.svg"
+      class="hidden sm:block fixed w-3xs xs:w-xs md:w-md lg:w-lg bottom-[-40px] right-[-40px]"
     />
   </div>
 </template>

From aee841799b2993aca5a7729562edfadcea93fec5 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Mon, 20 Oct 2025 11:00:00 +0200
Subject: [PATCH 3/3] fix: plain layout card background color

Adjusts the card background color on plain views to the regular surface color to match the default login form.
---
 packages/web-runtime/src/pages/accessDenied.vue             | 2 +-
 packages/web-runtime/src/pages/logout.vue                   | 2 +-
 packages/web-runtime/src/pages/missingOrInvalidConfig.vue   | 2 +-
 packages/web-runtime/src/pages/oidcCallback.vue             | 2 +-
 packages/web-runtime/src/pages/resolvePrivateLink.vue       | 6 +-----
 packages/web-runtime/src/pages/resolvePublicLink.vue        | 2 +-
 .../unit/pages/__snapshots__/accessDenied.spec.ts.snap      | 2 +-
 7 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/web-runtime/src/pages/accessDenied.vue b/packages/web-runtime/src/pages/accessDenied.vue
index 2b6950429c..06b71d5d5b 100644
--- a/packages/web-runtime/src/pages/accessDenied.vue
+++ b/packages/web-runtime/src/pages/accessDenied.vue
@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <oc-button
diff --git a/packages/web-runtime/src/pages/logout.vue b/packages/web-runtime/src/pages/logout.vue
index 52c177ff08..a4a2dbcdc9 100644
--- a/packages/web-runtime/src/pages/logout.vue
+++ b/packages/web-runtime/src/pages/logout.vue
@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <template #footer>
diff --git a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
index a6c08fbc1b..9fb85de30b 100644
--- a/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
+++ b/packages/web-runtime/src/pages/missingOrInvalidConfig.vue
@@ -7,7 +7,7 @@
       :logo-url="logoImg"
       :title="$gettext('Missing or invalid config')"
       body-class="text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="$gettext('Please check if the file config.json exists and is correct.')" />
       <p v-text="$gettext('Also, make sure to check the browser console for more information.')" />
diff --git a/packages/web-runtime/src/pages/oidcCallback.vue b/packages/web-runtime/src/pages/oidcCallback.vue
index ebc8db6a9e..6298aac8ed 100644
--- a/packages/web-runtime/src/pages/oidcCallback.vue
+++ b/packages/web-runtime/src/pages/oidcCallback.vue
@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="cardTitle"
       body-class="w-sm text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-text="cardHint" />
       <template #footer>
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 281b698330..52b72735b8 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="oc-link-resolve h-screen flex flex-col justify-center items-center">
-    <oc-card
-      :title="headerTitle"
-      body-class="w-lg text-center"
-      class="bg-role-surface-container rounded-lg"
-    >
+    <oc-card :title="headerTitle" body-class="w-lg text-center" class="rounded-lg">
       <oc-spinner v-if="loading" data-testid="loading-spinner" :aria-hidden="true" />
       <p v-else-if="errorMessage" data-testid="error-message" class="text-xl">{{ errorMessage }}</p>
     </oc-card>
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index f0ff919ecf..f65a40c064 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -4,7 +4,7 @@
       :logo-url="logoImg"
       :title="headerTitle"
       body-class="w-lg text-center"
-      class="bg-role-surface-container rounded-lg"
+      class="rounded-lg"
     >
       <p v-if="errorMessage" data-testid="error-message" class="text-xl">
         {{ errorMessage }}
diff --git a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
index 2767312417..1411bb1e82 100644
--- a/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/pages/__snapshots__/accessDenied.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`access denied page > renders component 1`] = `
 "<div class="h-screen flex flex-col justify-center items-center">
-  <div class="oc-card bg-role-surface-container rounded-lg">
+  <div class="oc-card rounded-lg">
     <div class="oc-card-header"><img src="themes/opencloud/assets/logo.svg" alt="" aria-hidden="true" class="max-w-48 max-h-48 absolute -translate-y-16">
       <h2 class="mt-0">Not logged in</h2>
     </div>