Merge pull request #6225 from LibreSign/feat/disabled-identify-methods-handling

feat: disabled identify methods handling

Author: vitormattos

src/Components/Request/IdentifySigner.vue

@@ -16,7 +16,11 @@
 			<strong>{{ identifyMethodLabel }}:</strong> {{ signer.id }}
 		</NcNoteCard>
 
-		<NcTextField v-if="signerSelected"
+		<NcNoteCard v-if="disabled" type="warning" class="disabled-warning">
+			{{ t('libresign', 'This signer cannot be used because the identification method "{method}" has been disabled by the administrator.', { method: identifyMethodLabel }) }}
+		</NcNoteCard>
+
+		<NcTextField v-if="signerSelected && !disabled"
 			v-model="displayName"
 			aria-describedby="name-input"
 			autocapitalize="none"
@@ -27,7 +31,7 @@
 			:helper-text="nameHelperText"
 			@update:value="onNameChange" />
 
-		<div v-if="signerSelected && showCustomMessage" class="description-wrapper">
+		<div v-if="signerSelected && showCustomMessage && !disabled" class="description-wrapper">
 			<NcCheckboxRadioSwitch v-model:checked="enableCustomMessage"
 				type="switch"
 				@update:checked="onToggleCustomMessage">
@@ -43,7 +47,7 @@
 				resize="none" />
 		</div>
 
-		<div class="identifySigner__footer">
+		<div v-if="!disabled" class="identifySigner__footer">
 			<div class="button-group">
 				<NcButton @click="filesStore.disableIdentifySigner()">
 					{{ t('libresign', 'Cancel') }}
@@ -119,6 +123,10 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup() {
 		const filesStore = useFilesStore()
@@ -253,6 +261,11 @@ export default {
 	width: 96%;
 	margin: 0 auto;
 
+	.disabled-warning {
+		margin-top: 12px;
+		width: 100%;
+	}
+
 	#account-or-email {
 		width: 100%;
 	}

src/Components/RightSidebar/RequestSignatureTab.vue

@@ -7,6 +7,9 @@
 		<NcNoteCard v-if="showDocMdpWarning" type="warning">
 			{{ t('libresign', 'This document has been certified with no changes allowed. You cannot add more signers to this document.') }}
 		</NcNoteCard>
+		<NcNoteCard v-if="hasSignersWithDisabledMethods" type="warning">
+			{{ t('libresign', 'Some signers use identification methods that have been disabled. Please remove or update them before requesting signatures.') }}
+		</NcNoteCard>
 		<NcButton v-if="filesStore.canAddSigner()"
 			:variant="hasSigners ? 'secondary' : 'primary'"
 			@click="addSigner">
@@ -132,11 +135,7 @@
 			:size="size"
 			:name="modalTitle"
 			@closing="filesStore.disableIdentifySigner()">
-			<NcNoteCard v-if="isSignerMethodDisabled" type="warning">
-				{{ t('libresign', 'The identification method "{method}" used by this signer has been disabled by the system administrator.', { method: disabledMethodName }) }}
-			</NcNoteCard>
-			<NcAppSidebar v-else
-				:name="modalTitle"
+			<NcAppSidebar :name="modalTitle"
 				:active="activeTab"
 				@update:active="onTabChange">
 				<NcAppSidebarTab v-for="method in enabledMethods"
@@ -150,7 +149,8 @@
 					<IdentifySigner :signer-to-edit="signerToEdit"
 						:placeholder="method.friendly_name"
 						:method="method.name"
-						:methods="methods" />
+						:methods="methods"
+						:disabled="isSignerMethodDisabled" />
 				</NcAppSidebarTab>
 			</NcAppSidebar>
 		</NcDialog>
@@ -348,6 +348,10 @@ export default {
 					return false
 				}
 
+				if (!this.canSignerActInOrder(signer)) {
+					return false
+				}
+
 				return !!method
 			}
 		},
@@ -377,6 +381,24 @@ export default {
 				return this.canSignerActInOrder(signer)
 			}
 		},
+		hasSignersWithDisabledMethods() {
+			const file = this.filesStore.getFile()
+			if (!file?.signers) {
+				return false
+			}
+
+			return file.signers.some(signer => {
+				if (signer.signed) {
+					return false
+				}
+				const method = signer.identifyMethods?.[0]?.method
+				if (!method) {
+					return false
+				}
+				const methodConfig = this.methods.find(m => m.name === method)
+				return !methodConfig?.enabled
+			})
+		},
 		showSaveButton() {
 			if (!this.filesStore.canSave()) {
 				return false
@@ -392,12 +414,19 @@ export default {
 				return false
 			}
 
+			if (this.hasSignersWithDisabledMethods) {
+				return false
+			}
+
 			return true
 		},
 		showRequestButton() {
 			if (!this.filesStore.canSave()) {
 				return false
 			}
+			if (this.hasSignersWithDisabledMethods) {
+				return false
+			}
 			return this.hasDraftSigners
 		},
 		hasDraftSigners() {
@@ -429,14 +458,16 @@ export default {
 			return this.t('libresign', 'Add new signer')
 		},
 		enabledMethods() {
-			const enabledMethods = this.methods.filter(method => method.enabled)
-
 			if (Object.keys(this.signerToEdit).length > 0 && this.signerToEdit.identifyMethods?.length) {
 				const signerMethod = this.signerToEdit.identifyMethods[0].method
-				return enabledMethods.filter(method => method.name === signerMethod)
+				const signerMethodConfig = this.methods.find(m => m.name === signerMethod)
+
+				if (signerMethodConfig) {
+					return [signerMethodConfig]
+				}
 			}
 
-			return enabledMethods
+			return this.methods.filter(method => method.enabled)
 		},
 		isSignerMethodDisabled() {
 			if (Object.keys(this.signerToEdit).length > 0 && this.signerToEdit.identifyMethods?.length) {
@@ -494,6 +525,14 @@ export default {
 			return iconMap[`svg${name.charAt(0).toUpperCase() + name.slice(1)}`] || iconMap.svgAccount
 		},
 		canSignerActInOrder(signer) {
+			const method = signer.identifyMethods?.[0]?.method
+			if (method) {
+				const methodConfig = this.methods.find(m => m.name === method)
+				if (!methodConfig?.enabled) {
+					return false
+				}
+			}
+
 			if (!this.isOrderedNumeric) {
 				return true
 			}

src/Components/Signers/Signer.vue

@@ -9,6 +9,7 @@
 		:counter-type="counterType"
 		:force-display-actions="true"
 		:class="signerClass"
+		:title="disabledTooltip"
 		@click="signerClickAction">
 		<template #icon>
 			<NcAvatar :size="44" :display-name="signer.displayName" />
@@ -89,6 +90,7 @@ export default {
 	data() {
 		return {
 			canRequestSign: loadState('libresign', 'can_request_sign', false),
+			methods: loadState('libresign', 'identify_methods', []),
 		}
 	},
 	computed: {
@@ -114,9 +116,32 @@ export default {
 		counterType() {
 			return this.counterNumber !== null ? 'highlighted' : undefined
 		},
+		isMethodDisabled() {
+			if (!this.signer.identifyMethods?.length) {
+				return false
+			}
+			const signerMethod = this.signer.identifyMethods[0].method
+			const methodConfig = this.methods.find(m => m.name === signerMethod)
+			return !methodConfig?.enabled
+		},
+		disabledMethodLabel() {
+			if (!this.signer.identifyMethods?.length) {
+				return ''
+			}
+			const signerMethod = this.signer.identifyMethods[0].method
+			const methodConfig = this.methods.find(m => m.name === signerMethod)
+			return methodConfig?.friendly_name || signerMethod
+		},
+		disabledTooltip() {
+			if (this.isMethodDisabled) {
+				return this.t('libresign', 'This signer cannot be used because the identification method "{method}" has been disabled by the administrator.', { method: this.disabledMethodLabel })
+			}
+			return ''
+		},
 		signerClass() {
 			return {
 				'signer-signed': this.signer.signed,
+				'signer-method-disabled': this.isMethodDisabled,
 			}
 		},
 		showDragHandle() {
@@ -173,6 +198,9 @@ export default {
 			if (this.signer.signed) {
 				return
 			}
+			if (this.isMethodDisabled) {
+				return
+			}
 			emit(this.event, this.signer)
 		},
 		closeActions() {
@@ -220,4 +248,33 @@ export default {
 	cursor: not-allowed;
 	opacity: 0.3;
 }
+
+.signer-method-disabled {
+	opacity: 0.6;
+
+	:deep(.list-item__wrapper) {
+		cursor: not-allowed !important;
+	}
+
+	:deep(.list-item-content__wrapper) {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: var(--color-background-dark);
+			opacity: 0.2;
+			pointer-events: none;
+		}
+	}
+
+	:deep(.list-item-content__actions) {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}
 </style>