Merge pull request #7033 from LibreSign/backport/7032/stable33

[stable33] fix: external page vue3 migration

Author: vitormattos

src/ExternalApp.vue

@@ -0,0 +1,54 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="external-app">
+		<router-view />
+		<RightSidebar />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineOptions } from 'vue'
+
+defineOptions({ name: 'LibreSignExternal' })
+
+import RightSidebar from './components/RightSidebar/RightSidebar.vue'
+</script>
+
+<style lang="scss">
+// Override server.css layout rules that assume authenticated header layout.
+// `html body #content` beats the specificity of server.css selectors.
+html body #content {
+	position: fixed;
+	inset: 0;
+	margin: 0;
+	width: 100vw;
+	height: 100vh;
+	border-radius: 0;
+}
+
+// On mobile, NcAppSidebar relies on NcContent to overlay content.
+// Without it, force the sidebar to cover the viewport as a full-screen overlay.
+@media (max-width: 512px) {
+	#app-sidebar {
+		position: fixed;
+		inset: 0;
+		width: 100vw !important;
+		max-width: 100vw !important;
+		height: 100vh;
+		z-index: 2000;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.external-app {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	background-color: var(--color-main-background);
+}
+</style>

src/components/RightSidebar/RightSidebar.vue

@@ -3,8 +3,9 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcAppSidebar v-if="sidebarStore.isVisible"
+	<NcAppSidebar v-if="sidebarStore.activeTab.length > 0"
 		ref="rightAppSidebar"
+		:open="sidebarStore.isVisible"
 		:name="fileName"
 		:subtitle="subTitle"
 		v-model:active="sidebarStore.activeTab"

src/components/Settings/Settings.vue

@@ -56,7 +56,7 @@ export default {
 	},
 	data() {
 		return {
-			isAdmin: getCurrentUser().isAdmin,
+			isAdmin: getCurrentUser()?.isAdmin ?? false,
 		}
 	},
 	methods: {

src/external.ts

@@ -7,7 +7,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
-import App from './App.vue'
+import App from './ExternalApp.vue'
 import router from './router/router'
 
 if (window.OCA && !window.OCA.LibreSign) {

src/store/sidebar.js

@@ -9,7 +9,7 @@ export const useSidebarStore = defineStore('sidebar', {
 	state: () => ({
 		show: false,
 		activeTab: '',
-		sidebarRoutes: ['fileslist', 'SignPDF', 'ValidationFile', 'IdDocsApprove'],
+		sidebarRoutes: ['fileslist', 'SignPDF', 'SignPDFExternal', 'ValidationFile', 'IdDocsApprove'],
 	}),
 
 	getters: {

src/tests/components/Settings/Settings.spec.ts

@@ -258,6 +258,54 @@ describe('Settings', () => {
 		})
 	})
 
+	describe('RULE: unauthenticated users (signing via email link) do not crash the component', () => {
+		const createUnauthenticatedWrapper = () => {
+			getCurrentUserMock.mockReturnValue(null)
+
+			return mount(Settings, {
+				global: {
+					stubs: {
+						NcAppNavigationItem: {
+							name: 'NcAppNavigationItem',
+							props: ['name', 'to', 'href', 'icon'],
+							template: '<li><slot name="icon" /><span class="item-name">{{ name }}</span><slot /></li>',
+						},
+						AccountIcon: { template: '<div class="account-icon"></div>' },
+						StarIcon: { template: '<div class="star-icon"></div>' },
+						TuneIcon: { template: '<div class="tune-icon"></div>' },
+					},
+					mocks: { t },
+				},
+			})
+		}
+
+		it('mounts without throwing when getCurrentUser returns null', () => {
+			expect(() => createUnauthenticatedWrapper()).not.toThrow()
+		})
+
+		it('isAdmin is false when getCurrentUser returns null', () => {
+			wrapper = createUnauthenticatedWrapper()
+
+			expect(getWrapper().vm.isAdmin).toBe(false)
+		})
+
+		it('hides the Administration link when user is unauthenticated', () => {
+			wrapper = createUnauthenticatedWrapper()
+			const items = getItems()
+			const adminItem = findItemByName(items, 'Administration')
+
+			expect(adminItem).toBeUndefined()
+		})
+
+		it('shows 2 navigation items for unauthenticated user', () => {
+			wrapper = createUnauthenticatedWrapper()
+			const items = getItems()
+
+			// Account + Rate = 2
+			expect(items.length).toBe(2)
+		})
+	})
+
 	describe('RULE: navigation items count depends on admin status', () => {
 		it('shows 2 items for non-admin', () => {
 			wrapper = createWrapper(false)

src/tests/store/sidebar.spec.ts

@@ -213,6 +213,16 @@ describe('sidebar store - visibility rules', () => {
 			expect(store.show).toBe(true)
 		})
 
+		it('keeps sidebar visible for SignPDFExternal route', () => {
+			const store = useSidebarStore()
+			store.show = true
+			store.activeTab = 'sign-tab'
+
+			store.handleRouteChange('SignPDFExternal')
+
+			expect(store.show).toBe(true)
+		})
+
 		it('hides sidebar for non-allowed routes', () => {
 			const store = useSidebarStore()
 			store.show = true

src/views/SignPDF/SignPDF.vue

@@ -103,7 +103,7 @@ export default {
 			await this.initIdDocsApprove()
 		}
 
-		if (this.isMobile){
+		if (this.isMobile && this.$route?.name !== 'SignPDFExternal') {
 			this.toggleSidebar();
 		}