feat: show visible signature information in signer validation details

src/components/validation/SignerDetails.vue

@@ -58,6 +58,17 @@
 			</template>
 		</NcListItem>
 
+		<NcListItem v-if="isOpen && isSigned(signer)"
+			class="extra"
+			compact
+			:name="t('libresign', 'Visible signature:')">
+			<template #name>
+				<!-- TRANSLATORS Whether this signer has a visible signature on this document. -->
+				<strong>{{ t('libresign', 'Visible signature:') }}</strong>
+				{{ Array.isArray(signer.visibleElements) && signer.visibleElements.length > 0 ? t('libresign', 'Yes') : t('libresign', 'No') }}
+			</template>
+		</NcListItem>
+
 		<!-- Timestamp Authority (TSA) -->
 		<SignerTimestamp v-if="isOpen" :timestamp="signer.timestamp" />
 
@@ -271,6 +282,7 @@ import {
 import CertificateChain from './CertificateChain.vue'
 import SignerTimestamp from './SignerTimestamp.vue'
 import type { DocumentModificationState } from '../../services/validationDocument'
+import type { VisibleElementRecord } from '../../types'
 
 
 type ValidationState = {
@@ -318,6 +330,7 @@ type SignerModel = {
 	valid_from?: string | number
 	valid_to?: string | number
 	signed?: string | null
+	visibleElements?: VisibleElementRecord[]
 	status?: number
 	signature_validation?: ValidationState
 	certificate_validation?: ValidationState

src/tests/components/validation/DocumentValidationDetails.spec.ts

@@ -511,11 +511,14 @@ describe('DocumentValidationDetails', () => {
 			expect(signersList.exists()).toBe(false)
 		})
 
-		it('passes signer data to SignerDetails component', () => {
+		it.each([
+			{ visibleElements: [{}] },
+			{ visibleElements: [] },
+		])('passes document-specific visible elements to SignerDetails: $visibleElements', ({ visibleElements }) => {
 			wrapper = createWrapper({
 				document: {
 					signers: [
-						{ displayName: 'John Doe', email: 'john@example.com' },
+						{ displayName: 'John Doe', email: 'john@example.com', visibleElements },
 					],
 				},
 			})
@@ -524,6 +527,7 @@ describe('DocumentValidationDetails', () => {
 			expect(signerComponent.props('signer')).toEqual(
 				expect.objectContaining({
 					displayName: 'John Doe',
+					visibleElements,
 				})
 			)
 		})

src/tests/components/validation/SignerDetails.spec.ts

@@ -32,7 +32,11 @@ describe('SignerDetails.vue - Business Logic', () => {
 						NcAvatar: true,
 						NcButton: true,
 						NcIconSvgWrapper: true,
-						NcListItem: true,
+						NcListItem: {
+							name: 'NcListItem',
+							props: ['name'],
+							template: '<li><slot name="icon" /><slot name="name" /><slot /></li>',
+						},
 						NcNoteCard: true,
 						CertificateChain: true,
 					},
@@ -54,6 +58,58 @@ describe('SignerDetails.vue - Business Logic', () => {
 		wrapper = createWrapper()
 	})
 
+	describe('visible signature metadata', () => {
+		it.each([
+			{ description: 'one element', visibleElements: [{}], expected: 'Yes' },
+			{ description: 'several elements', visibleElements: [{}, {}], expected: 'Yes' },
+			{ description: 'empty array', visibleElements: [], expected: 'No' },
+			{ description: 'missing elements', visibleElements: undefined, expected: 'No' },
+		])('shows $expected for $description without changing validation', async ({ visibleElements, expected }) => {
+			wrapper = createWrapper({
+				initiallyOpen: true,
+				signer: {
+					signed: '2024-06-01T12:00:00Z',
+					visibleElements,
+					signature_validation: { id: 1 },
+					signatureTypeSN: 'SHA256',
+				},
+			})
+			const field = wrapper.findAllComponents({ name: 'NcListItem' })
+				.find(item => item.props('name') === 'Visible signature:')
+			expect(field?.text()).toBe(`Visible signature: ${expected}`)
+			expect(wrapper.text()).toContain('Date signed:')
+			expect(wrapper.text()).toContain('Hash algorithm: SHA256')
+			expect(wrapper.text()).toContain('Validation status')
+			expect(wrapper.find('.validation-icon--warning, .validation-icon--error').exists()).toBe(false)
+
+			wrapper.vm.validationStatusOpen = true
+			await wrapper.vm.$nextTick()
+			expect(wrapper.get('[role="region"]').text()).toContain('Document integrity verified')
+			expect(wrapper.get('[role="region"]').text()).not.toContain('Visible signature:')
+		})
+
+		it('shows metadata for signed status without a timestamp', () => {
+			wrapper = createWrapper({ initiallyOpen: true, signer: { status: 2, visibleElements: [{}] } })
+			expect(wrapper.text()).toContain('Visible signature: Yes')
+		})
+
+		it('does not show metadata for an unsigned signer even when initially open', () => {
+			wrapper = createWrapper({ initiallyOpen: true, signer: { signed: null, status: 1, visibleElements: [{}] } })
+			expect(wrapper.text()).not.toContain('Visible signature:')
+		})
+
+		it('only shows metadata while signer details are expanded', async () => {
+			wrapper = createWrapper({ signer: { signed: '2024-06-01T12:00:00Z', visibleElements: [{}] } })
+			expect(wrapper.text()).not.toContain('Visible signature:')
+			wrapper.vm.toggleOpen()
+			await wrapper.vm.$nextTick()
+			expect(wrapper.text()).toContain('Visible signature: Yes')
+			wrapper.vm.toggleOpen()
+			await wrapper.vm.$nextTick()
+			expect(wrapper.text()).not.toContain('Visible signature:')
+		})
+	})
+
 	describe('getName method', () => {
 		it('returns displayName when available', () => {
 			const signer = { displayName: 'John Doe', email: 'john@example.com' }