Merge pull request #6217 from LibreSign/feat/improve-signer-edit-modal

feat: improve signer edit modal

Author: vitormattos

src/Components/Request/IdentifySigner.vue

@@ -4,12 +4,18 @@
 -->
 <template>
 	<div class="identifySigner">
-		<SignerSelect :signer="signer"
+		<SignerSelect v-if="isNewSigner"
+			:signer="signer"
 			:placeholder="placeholder"
 			:method="method"
 			@update:signer="updateSigner" />
+		<NcNoteCard v-else type="info">
+			<template #icon>
+				<NcIconSvgWrapper :size="20" :svg="getMethodIcon()" />
+			</template>
+			<strong>{{ identifyMethodLabel }}:</strong> {{ signer.id }}
+		</NcNoteCard>
 
-		<label v-if="signerSelected" for="name-input">{{ t('libresign', 'Signer name') }}</label>
 		<NcTextField v-if="signerSelected"
 			v-model="displayName"
 			aria-describedby="name-input"
@@ -35,17 +41,39 @@
 	</div>
 </template>
 <script>
+import svgAccount from '@mdi/svg/svg/account.svg?raw'
+import svgEmail from '@mdi/svg/svg/email.svg?raw'
+import svgSms from '@mdi/svg/svg/message-processing.svg?raw'
+import svgWhatsapp from '@mdi/svg/svg/whatsapp.svg?raw'
+import svgXmpp from '@mdi/svg/svg/xmpp.svg?raw'
+
 import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 import SignerSelect from './SignerSelect.vue'
 
+import svgSignal from '../../../img/logo-signal-app.svg?raw'
+import svgTelegram from '../../../img/logo-telegram-app.svg?raw'
 import { useFilesStore } from '../../store/files.js'
 
+const iconMap = {
+	svgAccount,
+	svgEmail,
+	svgSignal,
+	svgSms,
+	svgTelegram,
+	svgWhatsapp,
+	svgXmpp,
+}
+
 export default {
 	name: 'IdentifySigner',
 	components: {
 		NcButton,
+		NcIconSvgWrapper,
+		NcNoteCard,
 		NcTextField,
 		SignerSelect,
 	},
@@ -66,6 +94,10 @@ export default {
 			type: String,
 			default: t('libresign', 'Name'),
 		},
+		methods: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	setup() {
 		const filesStore = useFilesStore()
@@ -86,14 +118,24 @@ export default {
 			return !!this.signer?.id
 		},
 		isNewSigner() {
-			return this.id === null || this.id === undefined
+			return !this.signerToEdit || Object.keys(this.signerToEdit).length === 0
 		},
 		saveButtonText() {
 			if (this.isNewSigner) {
 				return t('libresign', 'Save')
 			}
 			return t('libresign', 'Update')
 		},
+		identifyMethodLabel() {
+			if (!this.signer?.method) {
+				return ''
+			}
+			const methodConfig = this.methods.find(m => m.name === this.signer.method)
+			if (!methodConfig?.friendly_name) {
+				return ''
+			}
+			return methodConfig.friendly_name
+		},
 	},
 	beforeMount() {
 		this.displayName = this.signerToEdit.displayName ?? ''
@@ -108,6 +150,13 @@ export default {
 		}
 	},
 	methods: {
+		getMethodIcon() {
+			const method = this.signer?.method
+			if (!method) {
+				return iconMap.svgAccount
+			}
+			return iconMap[`svg${method.charAt(0).toUpperCase() + method.slice(1)}`] || iconMap.svgAccount
+		},
 		updateSigner(signer) {
 			this.signer = signer ?? {}
 			this.displayName = signer?.displayName ?? ''
@@ -165,6 +214,17 @@ export default {
 		width: 100%;
 	}
 
+	:deep(.notecard) {
+		width: 100%;
+		margin-bottom: 16px;
+
+		div {
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+
 	&__footer {
 		width: 100%;
 		display: flex;

src/Components/RightSidebar/RequestSignatureTab.vue

@@ -122,10 +122,14 @@
 			:size="size"
 			:name="modalTitle"
 			@closing="filesStore.disableIdentifySigner()">
-			<NcAppSidebar :name="modalTitle"
+			<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"
 				:active="activeTab"
 				@update:active="onTabChange">
-				<NcAppSidebarTab v-for="method in enabledMethods()"
+				<NcAppSidebarTab v-for="method in enabledMethods"
 					:id="`tab-${method.name}`"
 					:key="method.name"
 					:name="method.friendly_name">
@@ -135,7 +139,8 @@
 					</template>
 					<IdentifySigner :signer-to-edit="signerToEdit"
 						:placeholder="method.friendly_name"
-						:method="method.name" />
+						:method="method.name"
+						:methods="methods" />
 				</NcAppSidebarTab>
 			</NcAppSidebar>
 		</NcDialog>
@@ -395,6 +400,32 @@ 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)
+			}
+
+			return enabledMethods
+		},
+		isSignerMethodDisabled() {
+			if (Object.keys(this.signerToEdit).length > 0 && this.signerToEdit.identifyMethods?.length) {
+				const signerMethod = this.signerToEdit.identifyMethods[0].method
+				const methodConfig = this.methods.find(m => m.name === signerMethod)
+				return !methodConfig?.enabled
+			}
+			return false
+		},
+		disabledMethodName() {
+			if (this.isSignerMethodDisabled && this.signerToEdit.identifyMethods?.length) {
+				const signerMethod = this.signerToEdit.identifyMethods[0].method
+				const methodConfig = this.methods.find(m => m.name === signerMethod)
+				return methodConfig?.friendly_name || signerMethod
+			}
+			return ''
+		},
 	},
 	watch: {
 		signers(signers) {
@@ -470,9 +501,6 @@ export default {
 				return signerOrder === order && signer.status === 0
 			})
 		},
-		enabledMethods() {
-			return this.methods.filter(method => method.enabled)
-		},
 		isSignElementsAvailable() {
 			return getCapabilities()?.libresign?.config?.['sign-elements']?.['is-available'] === true
 		},
@@ -491,10 +519,15 @@ export default {
 		},
 		addSigner() {
 			this.signerToEdit = {}
+			this.activeTab = this.userConfigStore.signer_identify_tab || ''
 			this.filesStore.enableIdentifySigner()
 		},
 		editSigner(signer) {
 			this.signerToEdit = signer
+			if (signer.identifyMethods?.length) {
+				const signerMethod = signer.identifyMethods[0].method
+				this.activeTab = `tab-${signerMethod}`
+			}
 			this.filesStore.enableIdentifySigner()
 		},
 		onTabChange(tabId) {