From de789447434d477a38354b925468e8ee4c4358a0 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Fri, 12 Apr 2024 13:34:47 -0300
Subject: [PATCH] chore: Replace ncmodal by ncdialog

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 src/Components/Draw/Draw.vue                  |  29 ++-
 src/Components/Draw/Editor.vue                |  62 ++-----
 src/Components/Draw/FileUpload.vue            |  54 ++----
 src/Components/Draw/TextInput.vue             |  60 ++-----
 src/views/Request.vue                         |  82 +++------
 src/views/Settings/RootCertificateCfssl.vue   |  50 ++----
 src/views/Settings/RootCertificateOpenSsl.vue |  50 ++----
 .../SignPDF/_partials/ModalEmailManager.vue   | 169 ++++++------------
 8 files changed, 197 insertions(+), 359 deletions(-)

diff --git a/src/Components/Draw/Draw.vue b/src/Components/Draw/Draw.vue
index 88c40a22a1..25c0842989 100644
--- a/src/Components/Draw/Draw.vue
+++ b/src/Components/Draw/Draw.vue
@@ -1,6 +1,8 @@
 <template>
-	<NcModal class="draw-signature"
-		@close="close">
+	<NcDialog v-if="mounted"
+		class="draw-signature"
+		:name="t('libresign', 'Customize your signatures')"
+		@closing="close">
 		<NcAppSidebar active="tab-draw"
 			:name="t('libresign', 'Customize your signatures')">
 			<NcAppSidebarTab v-if="drawEditor"
@@ -33,11 +35,11 @@
 		</NcAppSidebar>
 
 		<div class="content" />
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import Editor from './Editor.vue'
@@ -51,7 +53,7 @@ import { useSignatureElementsStore } from '../../store/signatureElements.js'
 export default {
 	name: 'Draw',
 	components: {
-		NcModal,
+		NcDialog,
 		NcAppSidebar,
 		NcAppSidebarTab,
 		SignatureTextIcon,
@@ -86,6 +88,14 @@ export default {
 		const signatureElementsStore = useSignatureElementsStore()
 		return { signatureElementsStore }
 	},
+	data() {
+		return {
+			mounted: false,
+		}
+	},
+	mounted() {
+		this.mounted = true
+	},
 	methods: {
 		close() {
 			this.$emit('close')
@@ -101,10 +111,19 @@ export default {
 
 <style lang="scss" scoped>
 .draw-signature{
+	::v-deep .app-sidebar-header{
+		display: none;
+	}
+	::v-deep #tab-tab-upload {
+		min-width: 350px;
+	}
 	::v-deep .modal-container {
 		width: unset !important;
 		height: unset !important;
 	}
+	::v-deep aside {
+		border-left: unset;
+	}
 	::v-deep .app-sidebar__close {
 		display: none;
 	}
diff --git a/src/Components/Draw/Editor.vue b/src/Components/Draw/Editor.vue
index 532b9c2d26..fd08470b6e 100644
--- a/src/Components/Draw/Editor.vue
+++ b/src/Components/Draw/Editor.vue
@@ -39,25 +39,24 @@
 				{{ t('libresign', 'Cancel') }}
 			</NcButton>
 		</div>
-		<NcModal v-if="modal" @close="handleModal(false)">
-			<div class="modal-confirm">
-				<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
-				<PreviewSignature :src="imageData" />
-				<div class="actions-modal">
-					<NcButton type="primary" @click="saveSignature">
-						{{ t('libresign', 'Save') }}
-					</NcButton>
-					<NcButton @click="handleModal(false)">
-						{{ t('libresign', 'Cancel') }}
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+		<NcDialog v-if="modal"
+			:name="t('libresign', 'Confirm your signature')"
+			@closing="handleModal(false)">
+			<PreviewSignature :src="imageData" />
+			<template #actions>
+				<NcButton type="primary" @click="saveSignature">
+					{{ t('libresign', 'Save') }}
+				</NcButton>
+				<NcButton @click="handleModal(false)">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import PaletteIcon from 'vue-material-design-icons/Palette.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
@@ -70,7 +69,7 @@ export default {
 	name: 'Editor',
 
 	components: {
-		NcModal,
+		NcDialog,
 		NcColorPicker,
 		PaletteIcon,
 		DeleteIcon,
@@ -191,34 +190,11 @@ export default {
 	}
 }
 
-.modal-confirm{
-	z-index: 100000;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 15px;
-
-	h1{
-		font-size: 1.4rem;
-		font-weight: bold;
-		margin: 10px;
-	}
-
-	img{
-		padding: 20px;
+img{
+	padding: 20px;
 
-		@media screen and (max-width: 650px){
-			width: 100%;
-		}
-	}
-
-	.actions-modal{
-		display: flex;
-		flex-direction: row;
-		align-self: flex-end;
-		box-sizing: border-box;
-		grid-gap: 10px;
+	@media screen and (max-width: 650px){
+		width: 100%;
 	}
 }
 </style>
diff --git a/src/Components/Draw/FileUpload.vue b/src/Components/Draw/FileUpload.vue
index 79e1935b10..91925efe29 100644
--- a/src/Components/Draw/FileUpload.vue
+++ b/src/Components/Draw/FileUpload.vue
@@ -37,25 +37,24 @@
 			</div>
 		</div>
 
-		<NcModal v-if="modal" @close="cancel">
-			<div class="modal-confirm">
-				<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
-				<img :src="imageData">
-				<div class="actions-modal">
-					<NcButton type="primary" @click="saveSignature">
-						{{ t('libresign', 'Save') }}
-					</NcButton>
-					<NcButton @click="cancel">
-						{{ t('libresign', 'Cancel') }}
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+		<NcDialog v-if="modal"
+			:name="t('libresign', 'Confirm your signature')"
+			@closing="cancel">
+			<img :src="imageData">
+			<template #actions>
+				<NcButton type="primary" @click="saveSignature">
+					{{ t('libresign', 'Save') }}
+				</NcButton>
+				<NcButton @click="cancel">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
 <script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import { Cropper } from 'vue-advanced-cropper'
 import { SignatureImageDimensions } from './options.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -65,7 +64,7 @@ export default {
 	components: {
 		NcButton,
 		Cropper,
-		NcModal,
+		NcDialog,
 	},
 	data() {
 		return {
@@ -154,26 +153,11 @@ export default {
 	box-sizing: border-box;
 	grid-gap: 10px;
 }
-.modal-confirm{
-	z-index: 100000;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 15px;
-
-	h1{
-		font-size: 1.4rem;
-		font-weight: bold;
-		margin: 10px;
-	}
+img{
+	padding: 20px;
 
-	img{
-		padding: 20px;
-
-		@media screen and (max-width: 650px){
-			width: 100%;
-		}
+	@media screen and (max-width: 650px){
+		width: 100%;
 	}
 }
 </style>
diff --git a/src/Components/Draw/TextInput.vue b/src/Components/Draw/TextInput.vue
index 12e0d34fe0..68e2282ef1 100644
--- a/src/Components/Draw/TextInput.vue
+++ b/src/Components/Draw/TextInput.vue
@@ -19,26 +19,25 @@
 				{{ t('libresign', 'Cancel') }}
 			</NcButton>
 		</div>
-		<NcModal v-if="modal" @close="handleModal(false)">
-			<div class="modal-confirm">
-				<h1>{{ t('libresign', 'Confirm your signature') }}</h1>
-				<img :src="imageData">
-				<div class="actions-modal">
-					<NcButton type="primary" @click="saveSignature">
-						{{ t('libresign', 'Save') }}
-					</NcButton>
-					<NcButton @click="cancelConfirm">
-						{{ t('libresign', 'Cancel') }}
-					</NcButton>
-				</div>
-			</div>
-		</NcModal>
+		<NcDialog v-if="modal"
+			:name="t('libresign', 'Confirm your signature')"
+			@closing="handleModal(false)">
+			<img :src="imageData">
+			<template #actions>
+				<NcButton type="primary" @click="saveSignature">
+					{{ t('libresign', 'Save') }}
+				</NcButton>
+				<NcButton @click="cancelConfirm">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 
 <script>
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-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 '@fontsource/dancing-script'
 import { SignatureImageDimensions } from './options.js'
@@ -48,7 +47,7 @@ export default {
 	name: 'TextInput',
 	components: {
 		NcTextField,
-		NcModal,
+		NcDialog,
 		NcButton,
 	},
 
@@ -166,32 +165,11 @@ export default {
 	}
 }
 
-.modal-confirm{
-	z-index: 100000;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	margin: 15px;
-
-	h1{
-		font-size: 1.4rem;
-		font-weight: bold;
-		margin: 10px;
-	}
+img{
+	padding: 20px;
 
-	img{
-		padding: 20px;
-
-		@media screen and (max-width: 650px){
-			width: 100%;
-		}
-	}
-
-	.actions-modal{
-		display: flex;
-		flex-direction: row;
-		align-self: flex-end;
+	@media screen and (max-width: 650px){
+		width: 100%;
 	}
 }
 </style>
diff --git a/src/views/Request.vue b/src/views/Request.vue
index 403176270c..ae70dcca9c 100644
--- a/src/views/Request.vue
+++ b/src/views/Request.vue
@@ -3,30 +3,32 @@
 		<div class="container-request">
 			<header>
 				<h1>{{ t('libresign', 'Request Signatures') }}</h1>
-				<p v-if="!sidebarStore.isVisible()">{{ t('libresign', 'Choose the file to request signatures.') }}</p>
+				<p v-if="!sidebarStore.isVisible()">
+					{{ t('libresign', 'Choose the file to request signatures.') }}
+				</p>
 			</header>
 			<div class="content-request">
 				<File v-show="filesStore.selectedNodeId > 0"
 					status="0"
 					status-text="none" />
-				<NcButton :wide="true"
-					v-if="!sidebarStore.isVisible()"
+				<NcButton v-if="!sidebarStore.isVisible()"
+					:wide="true"
 					@click="showModalUploadFromUrl()">
 					{{ t('libresign', 'Upload from URL') }}
 					<template #icon>
 						<LinkIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton :wide="true"
-					v-if="!sidebarStore.isVisible()"
+				<NcButton v-if="!sidebarStore.isVisible()"
+					:wide="true"
 					@click="showFilePicker = true">
 					{{ t('libresign', 'Choose from Files') }}
 					<template #icon>
 						<FolderIcon :size="20" />
 					</template>
 				</NcButton>
-				<NcButton :wide="true"
-					v-if="!sidebarStore.isVisible()"
+				<NcButton v-if="!sidebarStore.isVisible()"
+					:wide="true"
 					@click="uploadFile">
 					{{ t('libresign', 'Upload') }}
 					<template #icon>
@@ -42,21 +44,19 @@
 			:buttons="filePickerButtons"
 			:mimetype-filter="['application/pdf']"
 			@close="showFilePicker = false" />
-		<NcModal v-if="modalUploadFromUrl"
-			@close="closeModalUploadFromUrl">
-			<div class="modal__content">
-				<h2>{{ t('libresign', 'URL of a PDF file') }}</h2>
-				<NcNoteCard v-for="message in error"
-					:key="message"
-					type="error">
-					{{ message }}
-				</NcNoteCard>
-				<div class="form-group">
-					<NcTextField :label="t('libresign', 'URL of a PDF file')"
-						:value.sync="pdfUrl">
-						<LinkIcon :size="20" />
-					</NcTextField>
-				</div>
+		<NcDialog v-if="modalUploadFromUrl"
+			:name="t('libresign', 'URL of a PDF file')"
+			@closing="closeModalUploadFromUrl">
+			<NcNoteCard v-for="message in error"
+				:key="message"
+				type="error">
+				{{ message }}
+			</NcNoteCard>
+			<NcTextField :label="t('libresign', 'URL of a PDF file')"
+				:value.sync="pdfUrl">
+				<LinkIcon :size="20" />
+			</NcTextField>
+			<template #actions>
 				<NcButton :disabled="!canUploadFronUrl"
 					type="primary"
 					@click="uploadUrl">
@@ -66,8 +66,8 @@
 						<CloudUploadIcon v-else :size="20" />
 					</template>
 				</NcButton>
-			</div>
-		</NcModal>
+			</template>
+		</NcDialog>
 	</div>
 </template>
 <script>
@@ -75,7 +75,7 @@ import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
@@ -104,7 +104,7 @@ export default {
 	name: 'Request',
 	components: {
 		FilePicker,
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcButton,
 		NcNoteCard,
@@ -260,21 +260,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal__content {
-	margin: 50px;
-}
-
-.modal__content h2 {
-	text-align: center;
-}
-
-.form-group {
-	margin: calc(var(--default-grid-baseline) * 4) 0;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-}
-
 .container{
 	display: flex;
 	flex-direction: row;
@@ -312,19 +297,4 @@ export default {
 		flex-direction: column;
 	}
 }
-
-.empty-content{
-	p{
-		margin: 10px;
-	}
-}
-
-button {
-	background-position-x: 8%;
-	padding: 13px 13px 13px 45px;
-}
-
-h2 {
-	font-weight: bold;
-}
 </style>
diff --git a/src/views/Settings/RootCertificateCfssl.vue b/src/views/Settings/RootCertificateCfssl.vue
index eaae135d5a..6e26155912 100644
--- a/src/views/Settings/RootCertificateCfssl.vue
+++ b/src/views/Settings/RootCertificateCfssl.vue
@@ -49,23 +49,21 @@
 			<NcButton type="primary" @click="showModal">
 				{{ t('libresign', 'Regenerate root certificate') }}
 			</NcButton>
-			<NcModal v-if="modal"
-				@close="closeModal">
-				<div class="modal__content">
-					<h2>{{ t('libresign', 'Confirm') }}</h2>
-					{{ t('libresign', 'Regenerate root certificate will invalidate all signatures keys. Do you confirm this action?') }}
-					<div class="grid">
-						<NcButton type="error"
-							@click="clearAndShowForm">
-							{{ t('libresign', 'Yes') }}
-						</NcButton>
-						<NcButton type="primary"
-							@click="closeModal">
-							{{ t('libresign', 'No') }}
-						</NcButton>
-					</div>
-				</div>
-			</NcModal>
+			<NcDialog v-if="modal"
+				:name="t('libresign', 'Confirm')"
+				@closing="closeModal">
+				{{ t('libresign', 'Regenerate root certificate will invalidate all signatures keys. Do you confirm this action?') }}
+				<template #actions>
+					<NcButton type="error"
+						@click="clearAndShowForm">
+						{{ t('libresign', 'Yes') }}
+					</NcButton>
+					<NcButton type="primary"
+						@click="closeModal">
+						{{ t('libresign', 'No') }}
+					</NcButton>
+				</template>
+			</NcDialog>
 		</div>
 		<div v-else-if="!configureOk" id="formRootCertificate" class="form-libresign">
 			<div class="form-group">
@@ -114,7 +112,7 @@
 <script>
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-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 NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -132,7 +130,7 @@ export default {
 	components: {
 		NcSettingsSection,
 		NcCheckboxRadioSwitch,
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcTextField,
 		CertificateCustonOptions,
@@ -305,20 +303,6 @@ export default {
 	content:" *";
 }
 
-.modal__content {
-	margin: 50px;
-	text-align: center;
-
-	.grid {
-		display: flex;
-		flex-direction: row;
-		align-self: flex-end;
-		button {
-			margin: 10px;
-		}
-	}
-}
-
 @media screen and (max-width: 500px){
 	#formRootCertificateCfssl{
 		width: 100%;
diff --git a/src/views/Settings/RootCertificateOpenSsl.vue b/src/views/Settings/RootCertificateOpenSsl.vue
index 7aab149be4..053f3c6ab2 100644
--- a/src/views/Settings/RootCertificateOpenSsl.vue
+++ b/src/views/Settings/RootCertificateOpenSsl.vue
@@ -45,23 +45,21 @@
 			<NcButton type="primary" @click="showModal">
 				{{ t('libresign', 'Regenerate root certificate') }}
 			</NcButton>
-			<NcModal v-if="modal"
-				@close="closeModal">
-				<div class="modal__content">
-					<h2>{{ t('libresign', 'Confirm') }}</h2>
-					{{ t('libresign', 'Regenerate root certificate will invalidate all signatures keys. Do you confirm this action?') }}
-					<div class="grid">
-						<NcButton type="error"
-							@click="clearAndShowForm">
-							{{ t('libresign', 'Yes') }}
-						</NcButton>
-						<NcButton type="primary"
-							@click="closeModal">
-							{{ t('libresign', 'No') }}
-						</NcButton>
-					</div>
-				</div>
-			</NcModal>
+			<NcDialog v-if="modal"
+				:name="t('libresign', 'Confirm')"
+				@closing="closeModal">
+				{{ t('libresign', 'Regenerate root certificate will invalidate all signatures keys. Do you confirm this action?') }}
+				<template #actions>
+					<NcButton type="error"
+						@click="clearAndShowForm">
+						{{ t('libresign', 'Yes') }}
+					</NcButton>
+					<NcButton type="primary"
+						@click="closeModal">
+						{{ t('libresign', 'No') }}
+					</NcButton>
+				</template>
+			</NcDialog>
 		</div>
 		<div v-else id="formRootCertificateOpenSsl" class="form-libresign">
 			<div class="form-group">
@@ -103,7 +101,7 @@
 <script>
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-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 NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -121,7 +119,7 @@ export default {
 	components: {
 		NcSettingsSection,
 		NcCheckboxRadioSwitch,
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcTextField,
 		CertificateCustonOptions,
@@ -287,20 +285,6 @@ export default {
 	content:" *";
 }
 
-.modal__content {
-	margin: 50px;
-	text-align: center;
-
-	.grid {
-		display: flex;
-		flex-direction: row;
-		align-self: flex-end;
-		button {
-			margin: 10px;
-		}
-	}
-}
-
 @media screen and (max-width: 500px){
 	#formRootCertificateOpenSsl{
 		width: 100%;
diff --git a/src/views/SignPDF/_partials/ModalEmailManager.vue b/src/views/SignPDF/_partials/ModalEmailManager.vue
index af3302e65c..7c39ad2e83 100644
--- a/src/views/SignPDF/_partials/ModalEmailManager.vue
+++ b/src/views/SignPDF/_partials/ModalEmailManager.vue
@@ -1,75 +1,66 @@
 <template>
-	<NcModal size="normal"
+	<NcDialog size="normal"
 		:can-close="!loading"
-		@close="close">
-		<div class="modal__content">
-			<h2 class="modal__header">
-				{{ t('libresign', 'Sign with your email.') }}
-			</h2>
-
-			<div class="code-request">
-				<div v-if="signMethodsStore.blurredEmail().length > 0" class="email">
-					{{ signMethodsStore.blurredEmail() }}
-				</div>
-				<div v-if="signMethodsStore.settings.emailToken.hasConfirmCode">
-					{{ t('libresign', 'Enter the code you received') }}
-					<NcTextField maxlength="6"
-						:value.sync="token"
-						:disabled="loading"
-						:label="t('libresign', 'Enter your code')"
-						:placeholder="t('libresign', 'Enter your code')"
-						name="code"
-						type="text">
-						<FormTextboxPasswordIcon :size="20" />
-					</NcTextField>
-				</div>
-				<NcTextField v-else
-					:disabled="loading"
-					:label="t('libresign', 'Email')"
-					:placeholder="t('libresign', 'Email')"
-					:helper-text="errorMessage"
-					:error="errorMessage.length > 0"
-					:value.sync="sendTo"
-					@input="onChangeEmail">
-					<EmailIcon :size="20" />
-				</NcTextField>
-
-				<div class="modal__button-row">
-					<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode" :disabled="loading && !canRequestCode" @click="requestNewCode">
-						<template #icon>
-							<NcLoadingIcon v-if="loading" :size="20" />
-						</template>
-						{{ t('libresign', 'Request new code') }}
-					</NcButton>
-					<NcButton v-if="!signMethodsStore.settings.emailToken.hasConfirmCode"
-						:disabled="loading || !canRequestCode"
-						type="primary"
-						@click="requestCode">
-						<template #icon>
-							<NcLoadingIcon v-if="loading" :size="20" />
-						</template>
-						{{ t('libresign', 'Request code.') }}
-					</NcButton>
-
-					<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode"
-						:disabled="!canSendCode"
-						type="primary"
-						@click="sendCode">
-						<template #icon>
-							<NcLoadingIcon v-if="loading" :size="20" />
-						</template>
-						{{ t('libresign', 'Send code.') }}
-					</NcButton>
-				</div>
-			</div>
+		:name="t('libresign', 'Sign with your email.')"
+		@closing="close">
+		<div v-if="signMethodsStore.blurredEmail().length > 0" class="email">
+			{{ signMethodsStore.blurredEmail() }}
 		</div>
-	</NcModal>
+		<div v-if="signMethodsStore.settings.emailToken.hasConfirmCode">
+			{{ t('libresign', 'Enter the code you received') }}
+			<NcTextField maxlength="6"
+				:value.sync="token"
+				:disabled="loading"
+				:label="t('libresign', 'Enter your code')"
+				:placeholder="t('libresign', 'Enter your code')"
+				name="code"
+				type="text">
+				<FormTextboxPasswordIcon :size="20" />
+			</NcTextField>
+		</div>
+		<NcTextField v-else
+			:disabled="loading"
+			:label="t('libresign', 'Email')"
+			:placeholder="t('libresign', 'Email')"
+			:helper-text="errorMessage"
+			:error="errorMessage.length > 0"
+			:value.sync="sendTo"
+			@input="onChangeEmail">
+			<EmailIcon :size="20" />
+		</NcTextField>
+		<template #actions>
+			<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode" :disabled="loading && !canRequestCode" @click="requestNewCode">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Request new code') }}
+			</NcButton>
+			<NcButton v-if="!signMethodsStore.settings.emailToken.hasConfirmCode"
+				:disabled="loading || !canRequestCode"
+				type="primary"
+				@click="requestCode">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Request code.') }}
+			</NcButton>
+			<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode"
+				:disabled="!canSendCode"
+				type="primary"
+				@click="sendCode">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Send code.') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -90,7 +81,7 @@ const sanitizeNumber = val => {
 export default {
 	name: 'ModalEmailManager',
 	components: {
-		NcModal,
+		NcDialog,
 		NcTextField,
 		NcLoadingIcon,
 		FormTextboxPasswordIcon,
@@ -209,52 +200,4 @@ export default {
 	font-family: monospace;
 	text-align: center;
 }
-
-button {
-	width: 60%;
-	max-width: 200px;
-	margin-top: 5px;
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
-
-}
-
-.code-request {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	input {
-		font-family: monospace;
-		font-size: 1.3em;
-		width: 50%;
-		max-width: 250px;
-		height: auto !important;
-		display: block;
-		margin: 0 auto;
-	}
-}
-
-.modal {
-	&__content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: 20px;
-		gap: 4px 0;
-	}
-	&__header {
-		font-weight: bold;
-		font-size: 20px;
-		margin-bottom: 12px;
-		line-height: 30px;
-		color: var(--color-text-light);
-	}
-	&__button-row {
-		display: flex;
-		width: 100%;
-		justify-content: space-between;
-	}
-}
-
 </style>