Merge pull request #2723 from LibreSign/feat/able-to-change-password-…

…when-sign

feat: able to change password when sign

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;
-				}
 			}
 		}