chore: make possible press enter to submit some forms

Signed-off-by: Vitor Mattos <[email protected]>
LibreSign · Jan 2, 2025 · 9bba92f · 9bba92f
1 parent 017c9cd
commit 9bba92f
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 70 deletions.
diff --git a/src/Components/Request/RequestPicker.vue b/src/Components/Request/RequestPicker.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<form>
+	<div>
 		<NcActions :menu-name="t('libresign', 'Request')"
 			:inline="inline ? 3 : 0"
 			:force-name="inline"
@@ -43,6 +43,8 @@
 		<NcDialog v-if="modalUploadFromUrl"
 			:name="t('libresign', 'URL of a PDF file')"
 			:can-close="!loading"
+			is-form
+			@submit.prevent="uploadUrl()"
 			@closing="closeModalUploadFromUrl">
 			<NcNoteCard v-for="message in uploadUrlErrors"
 				:key="message"
@@ -56,7 +58,7 @@
 			<template #actions>
 				<NcButton :disabled="!canUploadFronUrl"
 					type="primary"
-					@click="uploadUrl">
+					native-type="submit">
 					{{ t('libresign', 'Send') }}
 					<template #icon>
 						<NcLoadingIcon v-if="loading" :size="20" />
@@ -65,7 +67,7 @@
 				</NcButton>
 			</template>
 		</NcDialog>
-	</form>
+	</div>
 </template>
 <script>
 import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'

diff --git a/src/views/CreatePassword.vue b/src/views/CreatePassword.vue
@@ -1,14 +1,18 @@
 <template>
 	<NcDialog v-if="signMethodsStore.modal.createPassword"
 		:name="t('libresign', 'Password Creation')"
+		is-form
+		@submit.prevent="send()"
 		@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 v-model="password"
 			:disabled="hasLoading"
 			:label="t('libresign', 'Enter a password')"
 			:placeholder="t('libresign', 'Enter a password')" />
 		<template #actions>
-			<NcButton :disabled="hasLoading" @click="send">
+			<NcButton :disabled="hasLoading"
+				native-type="submit"
+				type="primary">
 				<template #icon>
 					<NcLoadingIcon v-if="hasLoading" :size="20" />
 				</template>

diff --git a/src/views/ReadCertificate.vue b/src/views/ReadCertificate.vue
@@ -2,6 +2,8 @@
 	<NcDialog v-if="signMethodsStore.modal.readCertificate"
 		:name="t('libresign', 'Certificate data')"
 		:size="size"
+		is-form
+		@submit.prevent="send()"
 		@closing="onClose">
 		<NcNoteCard v-if="error" type="error">
 			<p>{{ error }}</p>
@@ -77,7 +79,9 @@
 			</div>
 		</div>
 		<template v-if="Object.keys(certificateData).length === 0" #actions>
-			<NcButton :disabled="hasLoading" @click="send()">
+			<NcButton :disabled="hasLoading"
+				native-type="submit"
+				type="primary">
 				<template #icon>
 					<NcLoadingIcon v-if="hasLoading" :size="20" />
 				</template>

diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
@@ -2,26 +2,23 @@
 <template>
 	<NcDialog v-if="signMethodsStore.modal.resetPassword"
 		:name="t('libresign', 'Password reset')"
+		class="container"
+		is-form
+		@submit.prevent="send()"
 		@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 v-model="currentPassword" type="password" />
-			</div>
-			<div class="input-group">
-				<label for="new-password">{{ t('libresign', 'New password') }}</label>
-				<NcPasswordField v-model="newPassword" type="password" />
-			</div>
-			<div class="input-group">
-				<label for="repeat-password">{{ t('libresign', 'Repeat password') }}</label>
-				<NcPasswordField v-model="rPassword" :has-error="!validNewPassord" type="password" />
-			</div>
-		</div>
+		<NcPasswordField v-model="currentPassword"
+			:label="t('libresign', 'Current password')" />
+		<NcPasswordField v-model="newPassword"
+			:label="t('libresign', 'New password')" />
+		<NcPasswordField v-model="rPassword"
+			:has-error="!validNewPassord"
+			:label="t('libresign', 'Repeat password')" />
 		<template #actions>
 			<NcButton :disabled="!canSave"
 				:class="hasLoading ? 'btn-load loading primary btn-confirm' : 'primary btn-confirm'"
-				@click="send">
+				native-type="submit"
+				type="primary">
 				<template #icon>
 					<NcLoadingIcon v-if="hasLoading" :size="20" />
 				</template>
@@ -74,51 +71,25 @@ export default {
 	methods: {
 		async send() {
 			this.hasLoading = true
-			try {
-				const response = await axios.patch(generateOcsUrl('/apps/libresign/api/v1/account/pfx'), {
-					current: this.currentPassword,
-					new: this.newPassword,
+			await axios.patch(generateOcsUrl('/apps/libresign/api/v1/account/pfx'), {
+				current: this.currentPassword,
+				new: this.newPassword,
+			})
+				.then(({ data }) => {
+					showSuccess(data.ocs.data.message)
+					this.hasLoading = false
+					this.signMethodsStore.closeModal('resetPassword')
+					this.$emit('close', true)
 				})
-				showSuccess(response.data.ocs.data.message)
-				this.hasLoading = false
-				this.signMethodsStore.closeModal('resetPassword')
-				this.$emit('close', true)
-			} catch (err) {
-				if (err.response.data.ocs.data.message) {
-					showError(err.response.data.ocs.data.message)
-				} else {
-					showError(t('libresign', 'Error creating new password, please contact the administrator'))
-				}
-				this.hasLoading = false
-			}
+				.catch(({ response }) => {
+					if (response.data.ocs.data.message) {
+						showError(response.data.ocs.data.message)
+					} else {
+						showError(t('libresign', 'Error creating new password, please contact the administrator'))
+					}
+				})
+			this.hasLoading = false
 		},
 	},
 }
 </script>
-<style lang="scss" scoped>
-	.container {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-
-		width: 100%;
-		max-width: 420px;
-
-		text-align: start;
-	}
-
-	.input-group{
-		display: flex;
-		flex-direction: column;
-		margin: 10px;
-		width: 100%;
-		label:first-child{
-			opacity: 0.7;
-		}
-		input{
-			width: 100%;
-			max-width: 370px;
-		}
-	}
-</style>
diff --git a/src/views/SignPDF/_partials/ModalEmailManager.vue b/src/views/SignPDF/_partials/ModalEmailManager.vue
@@ -14,7 +14,8 @@
 				:label="t('libresign', 'Enter your code')"
 				:placeholder="t('libresign', 'Enter your code')"
 				name="code"
-				type="text">
+				type="text"
+				@keyup.enter="sendCode">
 				<FormTextboxPasswordIcon :size="20" />
 			</NcTextField>
 		</div>
@@ -25,18 +26,23 @@
 			:placeholder="t('libresign', 'Email')"
 			:helper-text="errorMessage"
 			:error="errorMessage.length > 0"
+			@keyup.enter="requestCode"
 			@input="onChangeEmail">
 			<EmailIcon :size="20" />
 		</NcTextField>
 		<template #actions>
-			<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode" :disabled="loading && !canRequestCode" @click="requestNewCode">
+			<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode"
+				:disabled="loading && !canRequestCode"
+				native-type="submit"
+				@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"
+				native-type="submit"
 				type="primary"
 				@click="requestCode">
 				<template #icon>
@@ -46,6 +52,7 @@
 			</NcButton>
 			<NcButton v-if="signMethodsStore.settings.emailToken.hasConfirmCode"
 				:disabled="!canSendCode"
+				native-type="submit"
 				type="primary"
 				@click="sendCode">
 				<template #icon>

diff --git a/src/views/SignPDF/_partials/Sign.vue b/src/views/SignPDF/_partials/Sign.vue
@@ -67,11 +67,15 @@
 			:name="t('libresign', 'Confirm your signature')"
 			@closing="onCloseConfirmPassword">
 			{{ t('libresign', 'Subscription password.') }}
-			<NcPasswordField v-model="signPassword" type="password" />
+			<form @submit.prevent="signWithPassword()">
+				<NcPasswordField v-model="signPassword" type="password" />
+			</form>
 			<a id="lost-password" @click="toggleManagePassword">{{ t('libresign', 'Forgot password?') }}</a>
 			<ManagePassword v-if="showManagePassword" />
 			<template #actions>
-				<NcButton type="primary" :disabled="signPassword.length < 3 || loading" @click="signWithPassword()">
+				<NcButton type="primary"
+					:disabled="signPassword.length < 3 || loading"
+					native-type="submit">
 					<template #icon>
 						<NcLoadingIcon v-if="loading" :size="20" />
 					</template>

diff --git a/src/views/Validation.vue b/src/views/Validation.vue
@@ -129,7 +129,7 @@
 								compact
 								:name="t('libresign', 'Certificate valid from:')">
 								<template #name>
-									<strong>{{ t('libresign', 'Certificate valid from:')}}</strong>
+									<strong>{{ t('libresign', 'Certificate valid from:') }}</strong>
 									{{ dateFromUnixTimestamp(signer.valid_from) }}
 								</template>
 							</NcListItem>
@@ -138,7 +138,7 @@
 								compact
 								:name="t('libresign', 'Certificate valid to:')">
 								<template #name>
-									<strong>{{ t('libresign', 'Certificate valid to:')}}</strong>
+									<strong>{{ t('libresign', 'Certificate valid to:') }}</strong>
 									{{ dateFromUnixTimestamp(signer.valid_to) }}
 								</template>
 							</NcListItem>
@@ -147,7 +147,7 @@
 								compact
 								:name="t('libresign', 'Subject:')">
 								<template #name>
-									<strong>{{ t('libresign', 'Subject:')}}</strong>
+									<strong>{{ t('libresign', 'Subject:') }}</strong>
 									{{ signer.subject }}
 								</template>
 							</NcListItem>