Merge pull request #6178 from LibreSign/feat/improve-signature-request-confirmation

feat: improve signature request confirmation

Author: vitormattos

src/Components/Request/VisibleElements.vue

@@ -42,8 +42,8 @@
 				:variant="variantOfSaveButton"
 				:wide="true"
 				:class="{ disabled: signerSelected }"
-				@click="isDraft ? save() : showConfirm = true">
-				{{ isDraft ? t('libresign', 'Save') : t('libresign', 'Send') }}
+				@click="save()">
+				{{ t('libresign', 'Save') }}
 			</NcButton>
 
 			<NcButton v-if="canSign"
@@ -61,31 +61,6 @@
 				@pdf-editor:end-init="updateSigners"
 				@pdf-editor:on-delete-signer="onDeleteSigner" />
 		</div>
-		<NcDialog v-if="showConfirm"
-			:open.sync="showConfirm"
-			:name="t('libresign', 'Confirm')"
-			:no-close="loading"
-			:message="t('libresign', 'Send signature request?')">
-			<NcNoteCard v-if="errorConfirmRequest.length > 0"
-				type="error">
-				{{ errorConfirmRequest }}
-			</NcNoteCard>
-			<template #actions>
-				<NcButton :disabled="loading"
-					@click="showConfirm = false">
-					{{ t('libresign', 'Cancel') }}
-				</NcButton>
-				<NcButton variant="primary"
-					:disabled="loading"
-					@click="request">
-					<template #icon>
-						<NcLoadingIcon v-if="loading" :size="20" name="Loading" />
-						<Send v-else :size="20" />
-					</template>
-					{{ t('libresign', 'Send') }}
-				</NcButton>
-			</template>
-		</NcDialog>
 	</NcDialog>
 </template>
 
@@ -102,8 +77,6 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
-import Send from 'vue-material-design-icons/Send.vue'
-
 import Chip from '../Chip.vue'
 import PdfEditor from '../PdfEditor/PdfEditor.vue'
 import Signer from '../Signers/Signer.vue'
@@ -121,7 +94,6 @@ export default {
 		NcButton,
 		NcLoadingIcon,
 		PdfEditor,
-		Send,
 	},
 	setup() {
 		const filesStore = useFilesStore()
@@ -131,9 +103,7 @@ export default {
 		return {
 			canRequestSign: loadState('libresign', 'can_request_sign', false),
 			modal: false,
-			showConfirm: false,
 			loading: false,
-			errorConfirmRequest: '',
 			signerSelected: null,
 			width: getCapabilities().libresign.config['sign-elements']['full-signature-width'],
 			height: getCapabilities().libresign.config['sign-elements']['full-signature-height'],
@@ -204,7 +174,6 @@ export default {
 			this.filesStore.loading = true
 		},
 		closeModal() {
-			this.errorConfirmRequest = ''
 			this.modal = false
 			this.filesStore.loading = false
 		},
@@ -306,26 +275,6 @@ export default {
 				return false
 			}
 		},
-		async request() {
-			this.loading = true
-			this.errorConfirmRequest = ''
-			const visibleElements = this.buildVisibleElements()
-
-			try {
-				const response = await this.filesStore.updateSignatureRequest({ visibleElements, status: 1 })
-				this.filesStore.addFile(response.data)
-				this.showConfirm = false
-				showSuccess(t('libresign', response.message))
-				this.closeModal()
-				emit('libresign:visible-elements-saved')
-				this.loading = false
-				return true
-			} catch (error) {
-				this.errorConfirmRequest = error.response?.data?.ocs?.data?.message || t('libresign', 'An error occurred')
-				this.loading = false
-				return false
-			}
-		},
 		buildVisibleElements() {
 			const visibleElements = []
 			const scale = this.$refs.pdfEditor.$refs.vuePdfEditor.scale || 1

src/Components/RightSidebar/RequestSignatureTab.vue

@@ -134,6 +134,44 @@
 				</NcAppSidebarTab>
 			</NcAppSidebar>
 		</NcDialog>
+		<NcDialog v-if="showConfirmRequest"
+			:name="t('libresign', 'Confirm')"
+			:message="t('libresign', 'Send signature request?')"
+			@closing="showConfirmRequest = false">
+			<template #actions>
+				<NcButton @click="showConfirmRequest = false">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+				<NcButton variant="primary"
+					:disabled="hasLoading"
+					@click="confirmRequest">
+					<template #icon>
+						<NcLoadingIcon v-if="hasLoading" :size="20" />
+						<Send v-else :size="20" />
+					</template>
+					{{ t('libresign', 'Send') }}
+				</NcButton>
+			</template>
+		</NcDialog>
+		<NcDialog v-if="showConfirmRequestSigner"
+			:name="t('libresign', 'Confirm')"
+			:message="t('libresign', 'Send signature request?')"
+			@closing="showConfirmRequestSigner = false; selectedSigner = null">
+			<template #actions>
+				<NcButton @click="showConfirmRequestSigner = false; selectedSigner = null">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+				<NcButton variant="primary"
+					:disabled="hasLoading"
+					@click="confirmRequestSigner">
+					<template #icon>
+						<NcLoadingIcon v-if="hasLoading" :size="20" />
+						<Send v-else :size="20" />
+					</template>
+					{{ t('libresign', 'Send') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 <script>
@@ -241,6 +279,9 @@ export default {
 			document: {},
 			hasInfo: false,
 			methods: [],
+			showConfirmRequest: false,
+			showConfirmRequestSigner: false,
+			selectedSigner: null,
 		}
 	},
 	computed: {
@@ -518,11 +559,17 @@ export default {
 
 		},
 		async requestSignatureForSigner(signer) {
+			this.selectedSigner = signer
+			this.showConfirmRequestSigner = true
+		},
+		async confirmRequestSigner() {
+			if (!this.selectedSigner) return
+
 			this.hasLoading = true
 			try {
 				const file = this.filesStore.getFile()
 				const signers = file.signers.map(s => {
-					if (s.signRequestId === signer.signRequestId) {
+					if (s.signRequestId === this.selectedSigner.signRequestId) {
 						return { ...s, status: 1 }
 					}
 					return s
@@ -532,6 +579,8 @@ export default {
 					signers,
 				})
 				showSuccess(t('libresign', 'Signature requested'))
+				this.showConfirmRequestSigner = false
+				this.selectedSigner = null
 			} catch (error) {
 				if (error.response?.data?.ocs?.data?.message) {
 					showError(error.response.data.ocs.data.message)
@@ -572,10 +621,14 @@ export default {
 			this.hasLoading = false
 		},
 		async request() {
+			this.showConfirmRequest = true
+		},
+		async confirmRequest() {
 			this.hasLoading = true
 			try {
 				const response = await this.filesStore.updateSignatureRequest({ visibleElements: [], status: 1 })
 				showSuccess(t('libresign', response.message))
+				this.showConfirmRequest = false
 			} catch (error) {
 				if (error.response?.data?.ocs?.data?.message) {
 					showError(error.response.data.ocs.data.message)