From a161c634a26d243827b0dac1a9d9a6b7d0d0741c Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Fri, 12 Apr 2024 02:12:15 -0300
Subject: [PATCH 1/2] feat: able to change password when sign

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/views/Account/Account.vue                 | 171 +++-------------
 src/views/Account/partials/ManagePassword.vue | 132 +++++++++++++
 src/views/Account/partials/UserImage.vue      |   1 +
 src/views/CreatePassword.vue                  |  47 ++---
 src/views/ReadCertificate.vue                 | 183 +++++++++---------
 src/views/ResetPassword.vue                   |  61 +++---
 src/views/SignPDF/_partials/Sign.vue          |  91 +++++----
 7 files changed, 346 insertions(+), 340 deletions(-)
 create mode 100644 src/views/Account/partials/ManagePassword.vue

diff --git a/src/views/Account/Account.vue b/src/views/Account/Account.vue
index 40e04cfc7d..328d8d6583 100644
--- a/src/views/Account/Account.vue
+++ b/src/views/Account/Account.vue
@@ -1,183 +1,62 @@
 <template>
-	<NcContent class="container-account" app-name="libresign">
-		<div class="content-account">
-			<div class="user">
-				<UserImage v-bind="{ user }" />
-				<div class="details">
-					<div class="user-details">
-						<h3>{{ t('libresign', 'Details') }}</h3>
-						<div class="user-display-name icon-user">
-							<p>{{ user.displayName }}</p>
-						</div>
-					</div>
-					<div class="user-password">
-						<h3>{{ t('libresign', 'Certificate') }}</h3>
-						<div class="user-display-password">
-							<NcButton :wide="true"
-								@click="uploadCertificate()">
-								{{ t('libresign', 'Upload certificate') }}
-								<template #icon>
-									<CloudUploadIcon :size="20" />
-								</template>
-							</NcButton>
-							<NcButton v-if="signMethodsStore.hasSignatureFile()"
-								:wide="true"
-								@click="handleModal('readCertificate')">
-								{{ t('libresign', 'Read certificate') }}
-								<template #icon>
-									<LockOpenCheckIcon :size="20" />
-								</template>
-							</NcButton>
-							<NcButton v-if="signMethodsStore.hasSignatureFile()"
-								:wide="true"
-								@click="deleteCertificate()">
-								{{ t('libresign', 'Delete certificate') }}
-								<template #icon>
-									<DeleteIcon :size="20" />
-								</template>
-							</NcButton>
-							<NcButton v-if="certificateEngine !== 'none' && !signMethodsStore.hasSignatureFile()"
-								:wide="true"
-								@click="handleModal('createPassword')">
-								{{ t('libresign', 'Create certificate') }}
-								<template #icon>
-									<CertificateIcon :size="20" />
-								</template>
-							</NcButton>
-							<NcButton v-else-if="signMethodsStore.hasSignatureFile()"
-								:wide="true"
-								@click="handleModal('resetPassword')">
-								{{ t('librsign', 'Change password') }}
-								<template #icon>
-									<FileReplaceIcon :size="20" />
-								</template>
-							</NcButton>
-						</div>
-						<NcModal v-if="modal.length > 0"
-							@close="handleModal('')">
-							<CreatePassword v-if="modal === 'createPassword'" @close="handleModal('')" />
-							<ReadCertificate v-if="modal === 'readCertificate'" @close="handleModal('')" />
-							<ResetPassword v-if="modal === 'resetPassword'" @close="handleModal('')" />
-						</NcModal>
+	<div class="content-account">
+		<div class="user">
+			<UserImage v-bind="{ user }" />
+			<div class="details">
+				<div class="user-details">
+					<h3>{{ t('libresign', 'Details') }}</h3>
+					<div class="user-display-name icon-user">
+						<p>{{ user.displayName }}</p>
 					</div>
 				</div>
+				<div class="user-password">
+					<h3>{{ t('libresign', 'Certificate') }}</h3>
+					<ManagePassword />
+				</div>
 			</div>
+		</div>
 
-			<div class="user">
-				<Signatures />
-				<Documents />
-			</div>
+		<div class="user">
+			<Signatures />
+			<Documents />
 		</div>
-	</NcContent>
+	</div>
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { getCurrentUser } from '@nextcloud/auth'
-import { loadState } from '@nextcloud/initial-state'
-import axios from '@nextcloud/axios'
-import { generateOcsUrl } from '@nextcloud/router'
-import { showError, showSuccess } from '@nextcloud/dialogs'
-import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
-import LockOpenCheckIcon from 'vue-material-design-icons/LockOpenCheck.vue'
-import DeleteIcon from 'vue-material-design-icons/Delete.vue'
-import FileReplaceIcon from 'vue-material-design-icons/FileReplace.vue'
-import CertificateIcon from 'vue-material-design-icons/Certificate.vue'
-import CreatePassword from '../CreatePassword.vue'
-import ReadCertificate from '../ReadCertificate.vue'
-import ResetPassword from '../ResetPassword.vue'
 import UserImage from './partials/UserImage.vue'
 import Signatures from './partials/Signatures.vue'
 import Documents from './partials/Documents.vue'
-import { useSignMethodsStore } from '../../store/signMethods.js'
+import ManagePassword from './partials/ManagePassword.vue'
 
 export default {
 	name: 'Account',
 
 	components: {
-		NcModal,
-		NcContent,
-		NcButton,
-		CloudUploadIcon,
-		LockOpenCheckIcon,
-		DeleteIcon,
-		FileReplaceIcon,
-		CertificateIcon,
-		CreatePassword,
-		ReadCertificate,
-		ResetPassword,
 		Signatures,
 		UserImage,
 		Documents,
-	},
-	setup() {
-		const signMethodsStore = useSignMethodsStore()
-		return { signMethodsStore }
+		ManagePassword,
 	},
 
 	data() {
 		return {
 			user: getCurrentUser(),
-			modal: '',
-			certificateEngine: loadState('libresign', 'certificate_engine', ''),
 		}
 	},
-	mounted() {
-		this.signMethodsStore.setHasSignatureFile(loadState('libresign', 'config', {})?.hasSignatureFile ?? false)
-	},
-	methods: {
-		uploadCertificate() {
-			const input = document.createElement('input')
-			// @todo PFX file, didn't worked, wrong code
-			input.accept = 'application/x-pkcs12'
-			input.type = 'file'
-
-			input.onchange = async (ev) => {
-				const file = ev.target.files[0]
-
-				if (file) {
-					this.doUpload(file)
-				}
-
-				input.remove()
-			}
-
-			input.click()
-		},
-		async doUpload(file) {
-			try {
-				const formData = new FormData()
-				formData.append('file', file)
-				const response = await axios.post(generateOcsUrl('/apps/libresign/api/v1/account/pfx'), formData)
-				showSuccess(response.data.message)
-				this.signMethodsStore.setHasSignatureFile(true)
-			} catch (err) {
-				showError(err.response.data.message)
-			}
-		},
-		async deleteCertificate() {
-			const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/account/pfx'))
-			showSuccess(response.data.message)
-			this.signMethodsStore.setHasSignatureFile(false)
-		},
-		handleModal(status) {
-			this.modal = status
-		},
-	},
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
-.container-account{
+.app-content{
 	display: flex;
 	flex-direction: row;
 
 	.content-account{
 		width: 100%;
-		margin: 10px;
+		margin-top: 50px;
 		display: flex;
 		height: 100%;
 
@@ -228,12 +107,6 @@ export default {
 			.user-password{
 				display: flex;
 				flex-direction: column;
-
-				.user-display-password{
-					display: flex;
-					flex-direction: column;
-					gap: 12px;
-				}
 			}
 		}
 
diff --git a/src/views/Account/partials/ManagePassword.vue b/src/views/Account/partials/ManagePassword.vue
new file mode 100644
index 0000000000..e0fc6b27ce
--- /dev/null
+++ b/src/views/Account/partials/ManagePassword.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="user-display-password">
+		<NcButton :wide="true"
+			@click="uploadCertificate()">
+			{{ t('libresign', 'Upload certificate') }}
+			<template #icon>
+				<CloudUploadIcon :size="20" />
+			</template>
+		</NcButton>
+		<NcButton v-if="signMethodsStore.hasSignatureFile()"
+			:wide="true"
+			@click="signMethodsStore.showModal('readCertificate')">
+			{{ t('libresign', 'Read certificate') }}
+			<template #icon>
+				<LockOpenCheckIcon :size="20" />
+			</template>
+		</NcButton>
+		<NcButton v-if="signMethodsStore.hasSignatureFile()"
+			:wide="true"
+			@click="deleteCertificate()">
+			{{ t('libresign', 'Delete certificate') }}
+			<template #icon>
+				<DeleteIcon :size="20" />
+			</template>
+		</NcButton>
+		<NcButton v-if="certificateEngine !== 'none' && !signMethodsStore.hasSignatureFile()"
+			:wide="true"
+			@click="signMethodsStore.showModal('createPassword')">
+			{{ t('libresign', 'Create certificate') }}
+			<template #icon>
+				<CertificateIcon :size="20" />
+			</template>
+		</NcButton>
+		<NcButton v-else-if="signMethodsStore.hasSignatureFile()"
+			:wide="true"
+			@click="signMethodsStore.showModal('resetPassword')">
+			{{ t('librsign', 'Change password') }}
+			<template #icon>
+				<FileReplaceIcon :size="20" />
+			</template>
+		</NcButton>
+		<CreatePassword />
+		<ReadCertificate />
+		<ResetPassword />
+	</div>
+</template>
+
+<script>
+import { generateOcsUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import axios from '@nextcloud/axios'
+import CertificateIcon from 'vue-material-design-icons/Certificate.vue'
+import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
+import DeleteIcon from 'vue-material-design-icons/Delete.vue'
+import FileReplaceIcon from 'vue-material-design-icons/FileReplace.vue'
+import LockOpenCheckIcon from 'vue-material-design-icons/LockOpenCheck.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import CreatePassword from '../../CreatePassword.vue'
+import ReadCertificate from '../../ReadCertificate.vue'
+import ResetPassword from '../../ResetPassword.vue'
+import { useSignMethodsStore } from '../../../store/signMethods.js'
+
+export default {
+	name: 'ManagePassword',
+	components: {
+		CertificateIcon,
+		CloudUploadIcon,
+		DeleteIcon,
+		FileReplaceIcon,
+		LockOpenCheckIcon,
+		NcButton,
+		CreatePassword,
+		ReadCertificate,
+		ResetPassword,
+	},
+	setup() {
+		const signMethodsStore = useSignMethodsStore()
+		return { signMethodsStore }
+	},
+	data() {
+		return {
+			modal: '',
+			certificateEngine: loadState('libresign', 'certificate_engine', ''),
+		}
+	},
+	methods: {
+		uploadCertificate() {
+			const input = document.createElement('input')
+			// @todo PFX file, didn't worked, wrong code
+			input.accept = 'application/x-pkcs12'
+			input.type = 'file'
+
+			input.onchange = async (ev) => {
+				const file = ev.target.files[0]
+
+				if (file) {
+					this.doUpload(file)
+				}
+
+				input.remove()
+			}
+
+			input.click()
+		},
+		async doUpload(file) {
+			try {
+				const formData = new FormData()
+				formData.append('file', file)
+				const response = await axios.post(generateOcsUrl('/apps/libresign/api/v1/account/pfx'), formData)
+				showSuccess(response.data.message)
+				this.signMethodsStore.setHasSignatureFile(true)
+			} catch (err) {
+				showError(err.response.data.message)
+			}
+		},
+		async deleteCertificate() {
+			const response = await axios.delete(generateOcsUrl('/apps/libresign/api/v1/account/pfx'))
+			showSuccess(response.data.message)
+			this.signMethodsStore.setHasSignatureFile(false)
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+
+.user-display-password {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+</style>
diff --git a/src/views/Account/partials/UserImage.vue b/src/views/Account/partials/UserImage.vue
index 53ee6dfc99..d7b830b8eb 100644
--- a/src/views/Account/partials/UserImage.vue
+++ b/src/views/Account/partials/UserImage.vue
@@ -32,6 +32,7 @@ export default {
 <style lang="scss" scoped>
 .user-image {
 	display: flex;
+	padding: 10px;
 	width: 100%;
 	flex-direction: column;
 	align-items: center;
diff --git a/src/views/CreatePassword.vue b/src/views/CreatePassword.vue
index 82d48a774e..cf04802e1e 100644
--- a/src/views/CreatePassword.vue
+++ b/src/views/CreatePassword.vue
@@ -1,32 +1,25 @@
 <template>
-	<NcContent app-name="libresign" class="with-sidebar--full">
-		<form @submit="e => e.preventDefault()">
-			<header>
-				<h2>{{ t('libresign', 'Password Creation') }}</h2>
-			</header>
-			<div class="container">
-				<p>{{ t('libresign', 'For security reasons, you must create a password to sign the documents. Enter your new password in the field below.') }}</p>
-				<div class="input-group">
-					<label for="password">{{ t('libresign', 'Enter a password') }}</label>
-					<NcPasswordField :disabled="hasLoading"
-						:label="t('libresign', 'Enter a password')"
-						:placeholder="t('libresign', 'Enter a password')"
-						:value.sync="password" />
-				</div>
-				<NcButton :disabled="hasLoading" @click="send">
-					<template #icon>
-						<NcLoadingIcon v-if="hasLoading" :size="20" />
-					</template>
-					{{ t('libresign', 'Confirm') }}
-				</NcButton>
-			</div>
-		</form>
-	</NcContent>
+	<NcDialog v-if="signMethodsStore.modal.createPassword"
+		:name="t('libresign', 'Password Creation')"
+		@closing="signMethodsStore.closeModal('createPassword')">
+		<p>{{ t('libresign', 'For security reasons, you must create a password to sign the documents. Enter your new password in the field below.') }}</p>
+		<NcPasswordField :disabled="hasLoading"
+			:label="t('libresign', 'Enter a password')"
+			:placeholder="t('libresign', 'Enter a password')"
+			:value.sync="password" />
+		<template #actions>
+			<NcButton :disabled="hasLoading" @click="send">
+				<template #icon>
+					<NcLoadingIcon v-if="hasLoading" :size="20" />
+				</template>
+				{{ t('libresign', 'Confirm') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import '@nextcloud/password-confirmation/dist/style.css' // Required for dialog styles
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -38,7 +31,7 @@ import { useSignMethodsStore } from '../store/signMethods.js'
 export default {
 	name: 'CreatePassword',
 	components: {
-		NcContent,
+		NcDialog,
 		NcPasswordField,
 		NcButton,
 		NcLoadingIcon,
@@ -63,8 +56,8 @@ export default {
 					showSuccess(t('libresign', 'New password to sign documents has been created'))
 					this.signMethodsStore.setHasSignatureFile(true)
 					this.password = ''
-					this.$emit('close', true)
 					this.$emit('password:created', true)
+					this.signMethodsStore.closeModal('createPassword')
 				})
 				.catch(({ response }) => {
 					this.signMethodsStore.setHasSignatureFile(false)
diff --git a/src/views/ReadCertificate.vue b/src/views/ReadCertificate.vue
index 565fb36f3a..ac98e9b050 100644
--- a/src/views/ReadCertificate.vue
+++ b/src/views/ReadCertificate.vue
@@ -1,95 +1,93 @@
 <template>
-	<NcContent app-name="libresign" class="with-sidebar--full">
-		<form @submit="e => e.preventDefault()">
-			<header>
-				<h2>{{ t('libresign', 'Certificate data') }}</h2>
-			</header>
-			<NcNoteCard v-if="error" type="error">
-				<p>{{ error }}</p>
-			</NcNoteCard>
-			<table v-if="Object.keys(certificateData).length">
-				<thead>
-					<tr>
-						<th colspan="2">
-							{{ t('libresign', 'Issuer of certificate') }}
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="(value, customName) in certificateData.issuer" :key="customName">
-						<td>{{ getLabelFromId(customName) }}</td>
-						<td>{{ value }}</td>
-					</tr>
-				</tbody>
-				<thead>
-					<tr>
-						<th colspan="2">
-							{{ t('libresign', 'Owner of certificate') }}
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="(value, customName) in certificateData.subject" :key="customName">
-						<td>{{ getLabelFromId(customName) }}</td>
-						<td>{{ value }}</td>
-					</tr>
-				</tbody>
-				<thead>
-					<tr>
-						<th colspan="2">
-							{{ t('libresign', 'Validate') }}
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>From</td>
-						<td>{{ certificateData.validate.from }}</td>
-					</tr>
-					<tr>
-						<td>To</td>
-						<td>{{ certificateData.validate.to }}</td>
-					</tr>
-				</tbody>
-				<thead>
-					<tr>
-						<th colspan="2">
-							{{ t('libresign', 'Extra informations') }}
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>Name</td>
-						<td>{{ certificateData.name }}</td>
-					</tr>
-					<tr v-for="(value, name) in certificateData.extensions" :key="name">
-						<td>{{ name }}</td>
-						<td>{{ value }}</td>
-					</tr>
-				</tbody>
-			</table>
-			<div v-else class="container">
-				<div class="input-group">
-					<NcPasswordField :disabled="hasLoading"
-						:label="t('libresign', 'Certificate password')"
-						:placeholder="t('libresign', 'Certificate password')"
-						:value.sync="password" />
-				</div>
-				<NcButton :disabled="hasLoading" @click="send()">
-					<template #icon>
-						<NcLoadingIcon v-if="hasLoading" :size="20" />
-					</template>
-					{{ t('libresign', 'Confirm') }}
-				</NcButton>
+	<NcDialog v-if="signMethodsStore.modal.readCertificate"
+		:name="t('libresign', 'Certificate data')"
+		@closing="onClose">
+		<NcNoteCard v-if="error" type="error">
+			<p>{{ error }}</p>
+		</NcNoteCard>
+		<table v-if="Object.keys(certificateData).length">
+			<thead>
+				<tr>
+					<th colspan="2">
+						{{ t('libresign', 'Issuer of certificate') }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(value, customName) in certificateData.issuer" :key="customName">
+					<td>{{ getLabelFromId(customName) }}</td>
+					<td>{{ value }}</td>
+				</tr>
+			</tbody>
+			<thead>
+				<tr>
+					<th colspan="2">
+						{{ t('libresign', 'Owner of certificate') }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(value, customName) in certificateData.subject" :key="customName">
+					<td>{{ getLabelFromId(customName) }}</td>
+					<td>{{ value }}</td>
+				</tr>
+			</tbody>
+			<thead>
+				<tr>
+					<th colspan="2">
+						{{ t('libresign', 'Validate') }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>From</td>
+					<td>{{ certificateData.validate.from }}</td>
+				</tr>
+				<tr>
+					<td>To</td>
+					<td>{{ certificateData.validate.to }}</td>
+				</tr>
+			</tbody>
+			<thead>
+				<tr>
+					<th colspan="2">
+						{{ t('libresign', 'Extra informations') }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>Name</td>
+					<td>{{ certificateData.name }}</td>
+				</tr>
+				<tr v-for="(value, name) in certificateData.extensions" :key="name">
+					<td>{{ name }}</td>
+					<td>{{ value }}</td>
+				</tr>
+			</tbody>
+		</table>
+		<div v-else class="container">
+			<div class="input-group">
+				<NcPasswordField :disabled="hasLoading"
+					:label="t('libresign', 'Certificate password')"
+					:placeholder="t('libresign', 'Certificate password')"
+					:value.sync="password" />
 			</div>
-		</form>
-	</NcContent>
+		</div>
+		<template v-if="Object.keys(certificateData).length === 0" #actions>
+			<NcButton :disabled="hasLoading" @click="send()">
+				<template #icon>
+					<NcLoadingIcon v-if="hasLoading" :size="20" />
+				</template>
+				{{ t('libresign', 'Confirm') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import '@nextcloud/password-confirmation/dist/style.css' // Required for dialog styles
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -97,16 +95,21 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import { selectCustonOption } from '../helpers/certification.js'
+import { useSignMethodsStore } from '../store/signMethods.js'
 
 export default {
 	name: 'ReadCertificate',
 	components: {
-		NcContent,
+		NcDialog,
 		NcPasswordField,
 		NcButton,
 		NcNoteCard,
 		NcLoadingIcon,
 	},
+	setup() {
+		const signMethodsStore = useSignMethodsStore()
+		return { signMethodsStore }
+	},
 	data() {
 		return {
 			hasLoading: false,
@@ -138,6 +141,10 @@ export default {
 				})
 			this.hasLoading = false
 		},
+		onClose() {
+			this.certificateData = []
+			this.signMethodsStore.closeModal('readCertificate')
+		},
 	},
 }
 </script>
diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
index 828ba0d35f..fc85a0ddf6 100644
--- a/src/views/ResetPassword.vue
+++ b/src/views/ResetPassword.vue
@@ -1,48 +1,51 @@
 /* eslint-disable no-new */
 <template>
-	<NcContent app-name="libresign" class="with-sidebar--full">
-		<form @submit="(e) => e.preventDefault()">
-			<header>
-				<h2>{{ t('libresign', 'Password reset') }}</h2>
-				<p>{{ t('libresign', 'Enter new password and then repeat it') }}</p>
-			</header>
-			<div class="container">
-				<div class="input-group">
-					<label for="new-password">{{ t('libresign', 'Current password') }}</label>
-					<NcPasswordField :value.sync="currentPassword" type="password" />
-				</div>
-				<div class="input-group">
-					<label for="new-password">{{ t('libresign', 'New password') }}</label>
-					<NcPasswordField :value.sync="newPassword" type="password" />
-				</div>
-				<div class="input-group">
-					<label for="repeat-password">{{ t('libresign', 'Repeat password') }}</label>
-					<NcPasswordField :value.sync="rPassword" :has-error="!validNewPassord" type="password" />
-				</div>
-				<button :disabled="!canSave"
-					:class="hasLoading ? 'btn-load loading primary btn-confirm' : 'primary btn-confirm'"
-					@click="send">
-					{{ t('libresign', 'Confirm') }}
-				</button>
+	<NcDialog v-if="signMethodsStore.modal.resetPassword"
+		:name="t('libresign', 'Password reset')"
+		@closing="signMethodsStore.closeModal('resetPassword')">
+		<p>{{ t('libresign', 'Enter new password and then repeat it') }}</p>
+		<div class="container">
+			<div class="input-group">
+				<label for="new-password">{{ t('libresign', 'Current password') }}</label>
+				<NcPasswordField :value.sync="currentPassword" type="password" />
 			</div>
-		</form>
-	</NcContent>
+			<div class="input-group">
+				<label for="new-password">{{ t('libresign', 'New password') }}</label>
+				<NcPasswordField :value.sync="newPassword" type="password" />
+			</div>
+			<div class="input-group">
+				<label for="repeat-password">{{ t('libresign', 'Repeat password') }}</label>
+				<NcPasswordField :value.sync="rPassword" :has-error="!validNewPassord" type="password" />
+			</div>
+		</div>
+		<template #actions>
+			<button :disabled="!canSave"
+				:class="hasLoading ? 'btn-load loading primary btn-confirm' : 'primary btn-confirm'"
+				@click="send">
+				{{ t('libresign', 'Confirm') }}
+			</button>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
-import '@nextcloud/password-confirmation/dist/style.css' // Required for dialog styles
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { useSignMethodsStore } from '../store/signMethods.js'
 
 export default {
 	name: 'ResetPassword',
 	components: {
-		NcContent,
+		NcDialog,
 		NcPasswordField,
 	},
+	setup() {
+		const signMethodsStore = useSignMethodsStore()
+		return { signMethodsStore }
+	},
 	data() {
 		return {
 			newPassword: '',
diff --git a/src/views/SignPDF/_partials/Sign.vue b/src/views/SignPDF/_partials/Sign.vue
index bd5ad4841e..a3c5853e14 100644
--- a/src/views/SignPDF/_partials/Sign.vue
+++ b/src/views/SignPDF/_partials/Sign.vue
@@ -40,49 +40,40 @@
 				</p>
 			</div>
 		</div>
-		<NcModal v-if="signMethodsStore.modal.clickToSign"
+		<NcDialog v-if="signMethodsStore.modal.clickToSign"
 			:can-close="!loading"
-			@close="signMethodsStore.closeModal('clickToSign')">
-			<div class="modal__content">
-				<h2 class="modal__header">
+			:name="t('libresign', 'Confirm')"
+			@closing="signMethodsStore.closeModal('clickToSign')">
+			{{ t('libresign', 'Confirm your signature') }}
+			<template #actions>
+				<NcButton :disabled="loading"
+					@click="signMethodsStore.closeModal('clickToSign')">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary"
+					:disabled="loading"
+					@click="signWithClick">
+					<template #icon>
+						<NcLoadingIcon v-if="loading" :size="20" />
+					</template>
 					{{ t('libresign', 'Confirm') }}
-				</h2>
-				{{ t('libresign', 'Confirm your signature') }}
-				<div class="modal__button-row">
-					<NcButton :disabled="loading"
-						@click="signMethodsStore.closeModal('clickToSign')">
-						{{ t('libresign', 'Cancel') }}
-					</NcButton>
-					<NcButton type="primary"
-						:disabled="loading"
-						@click="signWithClick">
-						<template #icon>
-							<NcLoadingIcon v-if="loading" :size="20" />
-						</template>
-						{{ t('libresign', 'Confirm') }}
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
-		<NcModal v-if="signMethodsStore.modal.password"
+				</NcButton>
+			</template>
+		</NcDialog>
+		<NcDialog v-if="signMethodsStore.modal.password"
 			:can-close="!loading"
-			@close="signMethodsStore.closeModal('password')">
-			<div class="modal__content">
-				<h2 class="modal__header">
-					{{ t('libresign', 'Confirm your signature') }}
-				</h2>
-				{{ t('libresign', 'Subscription password.') }}
-				<NcPasswordField :value.sync="signPassword" type="password" />
-				<div class="modal__button-row">
-					<NcButton @click="signMethodsStore.closeModal('password')">
-						{{ t('libresign', 'Cancel') }}
-					</NcButton>
-					<NcButton type="primary" :disabled="signPassword.length < 3" @click="signWithPassword()">
-						{{ t('libresign', 'Sign the document.') }}
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+			:name="t('libresign', 'Confirm your signature')"
+			@closing="onCloseConfirmPassword">
+			{{ t('libresign', 'Subscription password.') }}
+			<NcPasswordField :value.sync="signPassword" type="password" />
+			<a id="lost-password" @click="toggleManagePassword">{{ t('libresign', 'Forgot password?') }}</a>
+			<ManagePassword v-if="showManagePassword" />
+			<template #actions>
+				<NcButton type="primary" :disabled="signPassword.length < 3" @click="signWithPassword()">
+					{{ t('libresign', 'Sign the document.') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 		<Draw v-if="signMethodsStore.modal.createSignature"
 			:draw-editor="true"
 			:text-editor="true"
@@ -90,11 +81,7 @@
 			type="signature"
 			@save="saveSignature"
 			@close="signMethodsStore.closeModal('createSignature')" />
-		<NcModal v-if="signMethodsStore.modal.createPassword"
-			@close="signMethodsStore.closeModal('createPassword')">
-			<CreatePassword @password:created="signMethodsStore.setHasSignatureFile"
-				@close="signMethodsStore.closeModal('createPassword')" />
-		</NcModal>
+		<CreatePassword @password:created="signMethodsStore.setHasSignatureFile" />
 		<SMSManager v-if="signMethodsStore.modal.sms"
 			:phone-number="user?.account?.phoneNumber"
 			:uuid="signStore.uuid"
@@ -112,7 +99,7 @@
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import axios from '@nextcloud/axios'
@@ -130,11 +117,12 @@ import { useSignStore } from '../../../store/sign.js'
 import { useSignMethodsStore } from '../../../store/signMethods.js'
 import { useSignatureElementsStore } from '../../../store/signatureElements.js'
 import { useSidebarStore } from '../../../store/sidebar.js'
+import ManagePassword from '../../Account/partials/ManagePassword.vue'
 
 export default {
 	name: 'Sign',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcLoadingIcon,
 		NcPasswordField,
@@ -143,6 +131,7 @@ export default {
 		EmailManager,
 		Signatures,
 		Draw,
+		ManagePassword,
 	},
 	setup() {
 		const signStore = useSignStore()
@@ -158,6 +147,7 @@ export default {
 				account: { uid: '', displayName: '' },
 			},
 			signPassword: '',
+			showManagePassword: false,
 		}
 	},
 	computed: {
@@ -215,6 +205,13 @@ export default {
 				}
 			}
 		},
+		toggleManagePassword() {
+			this.showManagePassword = !this.showManagePassword
+		},
+		onCloseConfirmPassword() {
+			this.showManagePassword = false
+			this.signMethodsStore.closeModal('password')
+		},
 		saveSignature() {
 			if (this.signatureElementsStore.success.length) {
 				showSuccess(this.signatureElementsStore.success)

From ad7154051ba90819641d5d4ef2c385b85d28a702 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Fri, 12 Apr 2024 02:43:26 -0300
Subject: [PATCH 2/2] chore: clean code

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/Modals/ModalContent.vue        | 57 -------------------
 src/views/Account/partials/ManagePassword.vue |  1 +
 src/views/CreatePassword.vue                  | 33 -----------
 src/views/ResetPassword.vue                   | 49 +++-------------
 4 files changed, 10 insertions(+), 130 deletions(-)
 delete mode 100644 src/Components/Modals/ModalContent.vue

diff --git a/src/Components/Modals/ModalContent.vue b/src/Components/Modals/ModalContent.vue
deleted file mode 100644
index 0f353101ef..0000000000
--- a/src/Components/Modals/ModalContent.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-	<NcContent class="modal-content" app-name="libresign">
-		<main>
-			<header>
-				<slot name="header">
-					<h2>{{ title }}</h2>
-				</slot>
-			</header>
-			<section>
-				<slot />
-			</section>
-		</main>
-	</NcContent>
-</template>
-
-<script>
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-export default {
-	name: 'ModalContent',
-	components: {
-		NcContent,
-	},
-	props: {
-		title: {
-			type: String,
-			required: false,
-			default: '',
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.modal-content {
-	padding-top: 20px;
-}
-
-header, main, section {
-	width: 100%;
-}
-
-main {
-	justify-content: flex-start;
-	align-items: center;
-	margin: 0 1em;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-header {
-	text-align: center;
-	h2 {
-		font-size: 2.5em;
-	}
-}
-</style>
diff --git a/src/views/Account/partials/ManagePassword.vue b/src/views/Account/partials/ManagePassword.vue
index e0fc6b27ce..e89e0e8390 100644
--- a/src/views/Account/partials/ManagePassword.vue
+++ b/src/views/Account/partials/ManagePassword.vue
@@ -76,6 +76,7 @@ export default {
 	},
 	setup() {
 		const signMethodsStore = useSignMethodsStore()
+		signMethodsStore.setHasSignatureFile(loadState('libresign', 'config', {})?.hasSignatureFile ?? false)
 		return { signMethodsStore }
 	},
 	data() {
diff --git a/src/views/CreatePassword.vue b/src/views/CreatePassword.vue
index cf04802e1e..627b7e3634 100644
--- a/src/views/CreatePassword.vue
+++ b/src/views/CreatePassword.vue
@@ -73,36 +73,3 @@ export default {
 	},
 }
 </script>
-<style lang="scss" scoped>
-	form{
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		max-width: 100%;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		header{
-			font-weight: bold;
-			font-size: 20px;
-			margin-bottom: 12px;
-			line-height: 30px;
-			color: var(--color-text-light);
-		}
-	}
-
-	.container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 20px;
-		gap: 4px 0;
-	}
-
-	.input-group{
-		justify-content: space-between;
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-	}
-</style>
diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
index fc85a0ddf6..ac83745186 100644
--- a/src/views/ResetPassword.vue
+++ b/src/views/ResetPassword.vue
@@ -19,11 +19,14 @@
 			</div>
 		</div>
 		<template #actions>
-			<button :disabled="!canSave"
+			<NcButton :disabled="!canSave"
 				:class="hasLoading ? 'btn-load loading primary btn-confirm' : 'primary btn-confirm'"
 				@click="send">
+				<template #icon>
+					<NcLoadingIcon v-if="hasLoading" :size="20" />
+				</template>
 				{{ t('libresign', 'Confirm') }}
-			</button>
+			</NcButton>
 		</template>
 	</NcDialog>
 </template>
@@ -31,6 +34,7 @@
 <script>
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
@@ -41,6 +45,7 @@ export default {
 	components: {
 		NcDialog,
 		NcPasswordField,
+		NcButton,
 	},
 	setup() {
 		const signMethodsStore = useSignMethodsStore()
@@ -56,7 +61,7 @@ export default {
 	},
 	computed: {
 		canSave() {
-			return this.currentPassword && this.validNewPassord
+			return this.currentPassword && this.validNewPassord && !this.hasLoading
 		},
 		validNewPassord() {
 			return this.newPassword.length > 3 && this.newPassword === this.rPassword
@@ -72,6 +77,7 @@ export default {
 				})
 				showSuccess(response.data.message)
 				this.hasLoading = false
+				this.signMethodsStore.closeModal('resetPassword')
 				this.$emit('close', true)
 			} catch (err) {
 				if (err.response.data.message) {
@@ -86,28 +92,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-	form{
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		max-width: 100%;
-		margin: 50px;
-		justify-content: center;
-		align-items: center;
-		text-align: center;
-		padding: 1rem;
-		header{
-			margin-bottom: 2.5rem;
-		}
-		h1{
-			font-size: 45px;
-			margin-bottom: 1rem;
-		}
-		p{
-			font-size: 15px;
-		}
-	}
-
 	.container {
 		display: flex;
 		flex-direction: column;
@@ -120,21 +104,6 @@ export default {
 		text-align: start;
 	}
 
-	.btn-confirm{
-		width: 100%;
-		max-width: 280px;
-	}
-
-	.btn-load{
-		background-color: transparent !important;
-		font-size: 0;
-		pointer-events: none;
-		cursor: not-allowed;
-		margin-top: 10px;
-		border: none;
-
-	}
-
 	.input-group{
 		display: flex;
 		flex-direction: column;