Merge pull request #7206 from LibreSign/backport/7203/stable32

[stable32] chore: migration to vue3

Author: vitormattos

src/components/PdfEditor/SignatureBox.vue

@@ -11,41 +11,54 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
 import { usernameToColor } from '@nextcloud/vue/functions/usernameToColor'
+import { computed } from 'vue'
 
-export default {
+defineOptions({
 	name: 'SignatureBox',
-	props: {
-		label: {
-			type: String,
-			default: '',
-		},
-		signer: {
-			type: Object,
-			default: null,
-		},
-	},
-	computed: {
-		signatureBoxAriaLabel() {
-			// TRANSLATORS Accessible label for a placed signature box on the PDF. {name} is the signer's display name.
-			return t('libresign', 'Signature position for {name}', { name: this.label })
-		},
-		boxStyle() {
-			const signer = this.signer || {}
-			const seed = signer.displayName || signer.name || signer.email || signer.id || this.label
-			if (!seed) {
-				return {}
-			}
-			const { r, g, b } = usernameToColor(String(seed))
-			return {
-				borderColor: `rgb(${r}, ${g}, ${b})`,
-				backgroundColor: `rgba(${r}, ${g}, ${b}, 0.12)`,
-			}
-		},
-	},
-}
+})
+
+type Signer = {
+	displayName?: string
+	name?: string
+	email?: string
+	id?: string
+} | null
+
+const props = withDefaults(defineProps<{
+	label?: string
+	signer?: Signer
+}>(), {
+	label: '',
+	signer: null,
+})
+
+const signatureBoxAriaLabel = computed(() => {
+	return t('libresign', 'Signature position for {name}', { name: props.label })
+})
+
+const boxStyle = computed(() => {
+	const signer = props.signer || {}
+	const seed = signer.displayName || signer.name || signer.email || signer.id || props.label
+
+	if (!seed) {
+		return {}
+	}
+
+	const { r, g, b } = usernameToColor(String(seed))
+	return {
+		borderColor: `rgb(${r}, ${g}, ${b})`,
+		backgroundColor: `rgba(${r}, ${g}, ${b}, 0.12)`,
+	}
+})
+
+defineExpose({
+	signatureBoxAriaLabel,
+	boxStyle,
+	props,
+})
 </script>
 
 <style lang="scss" scoped>

src/tests/components/PdfEditor/SignatureBox.spec.ts

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import SignatureBox from '../../../components/PdfEditor/SignatureBox.vue'
+
+const usernameToColorMock = vi.fn((_seed: string) => ({ r: 10, g: 20, b: 30 }))
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string, params?: Record<string, string>) => {
+		if (!params) {
+			return text
+		}
+
+		return Object.entries(params).reduce((message, [key, value]) => {
+			return message.replace(`{${key}}`, value)
+		}, text)
+	}),
+	translate: vi.fn((_app: string, text: string) => text),
+	translatePlural: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	n: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	getLanguage: vi.fn(() => 'en'),
+	getLocale: vi.fn(() => 'en'),
+	isRTL: vi.fn(() => false),
+}))
+
+vi.mock('@nextcloud/vue/functions/usernameToColor', () => ({
+	usernameToColor: (seed: string) => usernameToColorMock(seed),
+}))
+
+describe('SignatureBox.vue', () => {
+	it('computes the aria label from the label prop', () => {
+		const wrapper = mount(SignatureBox, {
+			props: {
+				label: 'Ada Lovelace',
+			},
+		})
+
+		expect(wrapper.attributes('aria-label')).toBe('Signature position for Ada Lovelace')
+	})
+
+	it('uses signer displayName as the color seed when available', () => {
+		const wrapper = mount(SignatureBox, {
+			props: {
+				label: 'Fallback',
+				signer: {
+					displayName: 'Grace Hopper',
+				},
+			},
+		})
+
+		expect(usernameToColorMock).toHaveBeenCalledWith('Grace Hopper')
+		expect(wrapper.vm.boxStyle).toEqual({
+			borderColor: 'rgb(10, 20, 30)',
+			backgroundColor: 'rgba(10, 20, 30, 0.12)',
+		})
+	})
+
+	it('returns an empty style object when there is no seed', () => {
+		const wrapper = mount(SignatureBox)
+
+		expect(wrapper.vm.boxStyle).toEqual({})
+	})
+})

src/tests/components/PreviewSignature/PreviewSignature.spec.ts

@@ -109,4 +109,4 @@ describe('PreviewSignature.vue', () => {
 			responseType: 'arraybuffer',
 		})
 	})
-})
+})

src/tests/views/Account/partials/UserImage.spec.ts

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import UserImage from '../../../../views/Account/partials/UserImage.vue'
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+	translate: vi.fn((_app: string, text: string) => text),
+	translatePlural: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	n: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	getLanguage: vi.fn(() => 'en'),
+	getLocale: vi.fn(() => 'en'),
+	isRTL: vi.fn(() => false),
+}))
+
+describe('UserImage.vue', () => {
+	it('renders the profile picture heading and passes the user data to the avatar', () => {
+		const wrapper = mount(UserImage, {
+			props: {
+				user: {
+					uid: 'ada',
+					displayName: 'Ada Lovelace',
+				},
+			},
+			global: {
+				stubs: {
+					NcAvatar: {
+						name: 'NcAvatar',
+						props: ['user', 'displayName'],
+						template: '<div class="avatar-stub" />',
+					},
+				},
+			},
+		})
+
+		expect(wrapper.text()).toContain('Profile picture')
+		const avatar = wrapper.findComponent({ name: 'NcAvatar' })
+		expect(avatar.props('user')).toBe('ada')
+		expect(avatar.props('displayName')).toBe('Ada Lovelace')
+	})
+})

src/tests/views/CreatePassword.spec.ts

@@ -100,4 +100,4 @@ describe('CreatePassword.vue', () => {
 		expect(wrapper.emitted('password:created')).toEqual([[false]])
 		expect(wrapper.vm.hasLoading).toBe(false)
 	})
-})
+})

src/tests/views/Settings/ActiveSignings.spec.ts

@@ -99,4 +99,4 @@ describe('ActiveSignings.vue', () => {
 
 		expect(wrapper.vm.getFileUrl(42)).toBe('/index.php/apps/files/?fileid=42')
 	})
-})
+})

src/tests/views/Settings/CertificateEngine.spec.ts

@@ -90,4 +90,4 @@ describe('CertificateEngine.vue', () => {
 
 		expect(emitMock).not.toHaveBeenCalled()
 	})
-})
+})

src/tests/views/Settings/CertificatePolicy.spec.ts

@@ -0,0 +1,122 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+
+import axios from '@nextcloud/axios'
+import CertificatePolicy from '../../../views/Settings/CertificatePolicy.vue'
+import * as viewer from '../../../utils/viewer.js'
+
+const loadStateMock = vi.fn()
+
+vi.mock('@nextcloud/axios', () => ({
+	default: {
+		post: vi.fn(),
+		delete: vi.fn(),
+	},
+}))
+
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState: (...args: unknown[]) => loadStateMock(...args),
+}))
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+	translate: vi.fn((_app: string, text: string) => text),
+	translatePlural: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	n: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	getLanguage: vi.fn(() => 'en'),
+	getLocale: vi.fn(() => 'en'),
+	isRTL: vi.fn(() => false),
+}))
+
+vi.mock('@nextcloud/router', () => ({
+	generateOcsUrl: vi.fn((path: string) => path),
+}))
+
+vi.mock('../../../utils/viewer.js', () => ({
+	openDocument: vi.fn(),
+}))
+
+describe('CertificatePolicy.vue', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		loadStateMock.mockImplementation((_app: string, key: string) => {
+			if (key === 'certificate_policies_oid') {
+				return '1.2.3'
+			}
+
+			if (key === 'certificate_policies_cps') {
+				return '/apps/files/cps.pdf'
+			}
+
+			return ''
+		})
+	})
+
+	function createWrapper() {
+		return mount(CertificatePolicy, {
+			global: {
+				stubs: {
+					NcButton: { template: '<button><slot /><slot name="icon" /></button>' },
+					NcNoteCard: { template: '<div><slot /></div>' },
+					NcTextField: true,
+					NcIconSvgWrapper: true,
+					NcLoadingIcon: true,
+				},
+			},
+		})
+	}
+
+	it('emits the initial validity on mount', () => {
+		const wrapper = createWrapper()
+
+		expect(wrapper.emitted('certificate-policy-valid')).toEqual([['/apps/files/cps.pdf']])
+	})
+
+	it('opens the current CPS document in the viewer', () => {
+		const wrapper = createWrapper()
+
+		wrapper.vm.view()
+
+		expect(viewer.openDocument).toHaveBeenCalledWith({
+			fileUrl: '/apps/files/cps.pdf',
+			filename: 'Certificate Policy',
+			nodeId: null,
+		})
+	})
+
+	it('persists the OID and toggles the success flag', async () => {
+		vi.useFakeTimers()
+		vi.mocked(axios.post).mockResolvedValue({ data: {} })
+		const wrapper = createWrapper()
+
+		wrapper.vm.OID = '2.5.4.3'
+		await wrapper.vm._saveOID()
+
+		expect(axios.post).toHaveBeenCalledWith('/apps/libresign/api/v1/admin/certificate-policy/oid', {
+			oid: '2.5.4.3',
+		})
+		expect(wrapper.vm.dislaySuccessOID).toBe(true)
+
+		await vi.advanceTimersByTimeAsync(2000)
+		expect(wrapper.vm.dislaySuccessOID).toBe(false)
+
+		vi.useRealTimers()
+	})
+
+	it('removes the CPS and emits the updated validity', async () => {
+		vi.mocked(axios.delete).mockResolvedValue({ data: {} })
+		const wrapper = createWrapper()
+
+		await wrapper.vm.removeCps()
+		await flushPromises()
+
+		expect(axios.delete).toHaveBeenCalledWith('/apps/libresign/api/v1/admin/certificate-policy')
+		expect(wrapper.vm.CPS).toBe('')
+		expect(wrapper.emitted('certificate-policy-valid')?.at(-1)).toEqual([''])
+	})
+})

src/tests/views/Settings/CollectMetadata.spec.ts

@@ -82,4 +82,4 @@ describe('CollectMetadata.vue', () => {
 
 		expect(emitMock).toHaveBeenCalledWith('collect-metadata:changed')
 	})
-})
+})

src/tests/views/Settings/ConfigureCheck.spec.ts

@@ -63,4 +63,4 @@ describe('ConfigureCheck.vue', () => {
 		expect(wrapper.text()).toContain('Install Java')
 		expect(wrapper.find('td.error').exists()).toBe(true)
 	})
-})
+})