chore: use nextcloud vue

Signed-off-by: Vitor Mattos <[email protected]>

Author: vitormattos

src/views/SignPDF/_partials/ModalSMSManager.vue

@@ -1,59 +1,59 @@
 <template>
-	<NcModal size="normal" @close="close">
-		<NcContent class="modal-view">
-			<template slot="header">
-				<h2>{{ t('libresign', 'Sign with your cellphone number.') }}</h2>
-				<!-- <p>{{ t('libresign', 'Sign the document.') }}</p> -->
-			</template>
-
-			<div v-if="newPhoneNumber" class="code-request">
-				<h3 class="phone">
-					{{ newPhoneNumber }}
-				</h3>
-
-				<div v-if="tokenRequested">
-					<input v-model="token"
-						:disabled="loading"
-						name="code"
-						type="text">
-				</div>
-
-				<div>
-					<button v-if="!tokenRequested" :disabled="loading" @click="requestCode">
-						{{ t('libresign', 'Request code.') }}
-					</button>
-
-					<button v-if="tokenRequested" :disabled="loading" @click="sendCode">
-						{{ t('libresign', 'Send code.') }}
-					</button>
-				</div>
-			</div>
-			<div v-else class="store-number">
-				<div>
-					<input v-model="newPhoneNumber"
-						:disabled="loading"
-						name="cellphone"
-						placeholder="+55 00 0 0000 0000"
-						type="tel"
-						@change="sanitizeNumber">
-				</div>
-
-				<div>
-					<button :disabled="loading || newPhoneNumber.length < 10" @click="saveNumber">
-						{{ t('libresign', 'Save your number.') }}
-					</button>
-				</div>
-			</div>
-		</NcContent>
-	</NcModal>
+	<NcDialog v-if="signMethodsStore.modal.sms"
+		:name="t('libresign', 'Sign with your cellphone number.')"
+		@closing="signMethodsStore.closeModal('sms')">
+		<div v-if="newPhoneNumber" class="code-request">
+			<h3 class="phone">
+				{{ newPhoneNumber }}
+			</h3>
+
+			<NcTextField v-if="tokenRequested"
+				v-model="token"
+				:disabled="loading"
+				name="code"
+				type="text">
+			</NcTextField>
+		</div>
+		<div v-else class="store-number">
+			<NcTextField v-model="newPhoneNumber"
+				:disabled="loading"
+				name="cellphone"
+				placeholder="+55 00 0 0000 0000"
+				type="tel"
+				@change="sanitizeNumber">
+			</NcTextField>
+		</div>
+		<template #actions>
+			<NcButton v-if="newPhoneNumber && !tokenRequested" :disabled="loading" @click="requestCode">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Request code.') }}
+			</NcButton>
+			<NcButton v-if="newPhoneNumber && tokenRequested" :disabled="loading" @click="sendCode">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Send code.') }}
+			</NcButton>
+			<NcButton v-if="!newPhoneNumber" :disabled="loading || newPhoneNumber.length < 10" @click="saveNumber">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+				</template>
+				{{ t('libresign', 'Save your number.') }}
+			</NcButton>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
+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 NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { confirmPassword } from '@nextcloud/password-confirmation'
-import '@nextcloud/password-confirmation/dist/style.css' // Required for dialog styles
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { onError } from '../../../helpers/errors.js'
 import { settingsService } from '../../../domains/settings/index.js'
@@ -66,7 +66,10 @@ const sanitizeNumber = val => {
 export default {
 	name: 'ModalSMSManager',
 	components: {
-		NcModal,
+		NcDialog,
+		NcLoadingIcon,
+		NcTextField,
+		NcButton,
 	},
 	props: {
 		phoneNumber: {
@@ -163,29 +166,10 @@ h3.phone {
 	text-align: center;
 }
 
-button {
-	width: 60%;
-	max-width: 200px;
-	margin-top: 5px;
-	margin-left: auto;
-	margin-right: auto;
-	display: block;
-
-}
-
 .code-request, .store-number {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
-	input {
-		font-family: monospace;
-		font-size: 1.1em;
-		width: 50%;
-		max-width: 250px;
-		height: auto !important;
-		display: block;
-		margin: 0 auto;
-	}
 }
 
 .code-request input {