Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 1e042f68 authored by Akhil's avatar Akhil 🙂
Browse files

Disable buttons during API call to avoid interaction

parent f94abf4c

src/Signup.vue

+7 −1
Original line number Diff line number Diff line
@@ -10,7 +10,10 @@ 
					v-model="formData"

					:language="language"

					@form-submitted="submitCaptchaForm" />

				<RecoveryEmailForm v-if="showRecoveryEmailForm" v-model="formData" @form-submitted="submitRecoveryEmailForm" />

				<RecoveryEmailForm v-if="showRecoveryEmailForm"

					v-model="formData"

					:processing-creation="processingCreation"

					@form-submitted="submitRecoveryEmailForm" />

				<SuccessSection v-if="showSuccessSection" v-model="formData" />

			</div>

		</section>
@@ -60,6 +63,7 @@ export default { 
			showRecoveryEmailForm: false,

			showSuccessSection: false,

			language: loadState(APPLICATION_NAME, 'lang'),

			processingCreation: false,

		}

	},

	mounted() {
@@ -102,6 +106,7 @@ export default { 
		async submitForm(data) {

			try {

				const url = generateUrl(`/apps/${this.appName}/accounts/create`)

				this.processingCreation = true

				await Axios.post(url, data)



				// If the execution reaches here, the response status is in the 2xx range
@@ -110,6 +115,7 @@ export default { 
				this.showRecoveryEmailForm = false

				this.showSuccessSection = true

			} catch (error) {

				this.processingCreation = false

				const genericErrorMessage = 'An error occurred while creating your account!'

				// Handle network errors and unexpected response structures here

				let errorMessage = error.response ? t(this.appName, error.response.data.message) : t(this.appName, error.message)

src/signup/RecoveryEmailForm.vue

+3 −0
Original line number Diff line number Diff line
@@ -35,12 +35,14 @@ 
			<button :wide="true"

				class="btn-primary w-50 mx-10"

				type="primary"

				:disabled="processingCreation"

				@click.prevent="submitRecoveryEmailForm(true)">

				{{ t(appName,'Set My Recovery Email Now') }}

			</button>

			<button :wide="true"

				class="btn-default w-50 mx-10"

				type="primary"

				:disabled="processingCreation"

				@click.prevent="submitRecoveryEmailForm(false)">

				{{ t(appName,'Later') }}

			</button>
@@ -53,6 +55,7 @@ const APPLICATION_NAME = 'ecloud-accounts' 
export default {

	props: {

		value: Object,

		processingCreation: Boolean,

	},

	data() {

		return {

src/signup/RegistrationForm.vue

+11 −2
Original line number Diff line number Diff line
@@ -150,8 +150,14 @@ 
			<div id="groups" class="aliases-info">

				<button :wide="true"

					class="btn-primary"

					type="primary">

					type="primary"

					:disabled="processing">

					<template v-if="!processing">

						{{ t(appName,'Create My Account') }}

					</template>

					<template v-else>

						...

					</template>

				</button>

			</div>

		</form>
@@ -199,6 +205,7 @@ export default { 
				{ message: t(this.appName, 'Incorrect password length: Required length is 8 to 32'), regex: /.{8,32}/ },

			],

			isUsernameAvailable: false,

			processing: false,

		}

	},

	computed: {
@@ -285,6 +292,7 @@ export default { 
			}

		},

		async submitRegistrationForm() {

			this.processing = true

			this.validateForm(['displayname', 'username', 'password', 'repassword', 'termsandservices'])

			await this.checkUsername()

			const isFormValid = Object.values(this.validation).every(value => !value)
@@ -292,6 +300,7 @@ export default { 
			if (isFormValid) {

				this.$emit('form-submitted', { isFormValid })

			}

			this.processing = false

		},

		onLanguageChange() {

			window.location.href = window.location.origin + '/apps/' + APPLICATION_NAME + '/accounts/' + this.formData.selectedLanguage + '/signup'