Loading src/Signup.vue +7 −1 Original line number Diff line number Diff line Loading @@ -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> Loading Loading @@ -60,6 +63,7 @@ export default { showRecoveryEmailForm: false, showSuccessSection: false, language: loadState(APPLICATION_NAME, 'lang'), processingCreation: false, } }, mounted() { Loading Loading @@ -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 Loading @@ -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) Loading src/signup/RecoveryEmailForm.vue +3 −0 Original line number Diff line number Diff line Loading @@ -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> Loading @@ -53,6 +55,7 @@ const APPLICATION_NAME = 'ecloud-accounts' export default { props: { value: Object, processingCreation: Boolean, }, data() { return { Loading src/signup/RegistrationForm.vue +11 −2 Original line number Diff line number Diff line Loading @@ -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> Loading Loading @@ -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: { Loading Loading @@ -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) Loading @@ -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' Loading Loading
src/Signup.vue +7 −1 Original line number Diff line number Diff line Loading @@ -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> Loading Loading @@ -60,6 +63,7 @@ export default { showRecoveryEmailForm: false, showSuccessSection: false, language: loadState(APPLICATION_NAME, 'lang'), processingCreation: false, } }, mounted() { Loading Loading @@ -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 Loading @@ -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) Loading
src/signup/RecoveryEmailForm.vue +3 −0 Original line number Diff line number Diff line Loading @@ -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> Loading @@ -53,6 +55,7 @@ const APPLICATION_NAME = 'ecloud-accounts' export default { props: { value: Object, processingCreation: Boolean, }, data() { return { Loading
src/signup/RegistrationForm.vue +11 −2 Original line number Diff line number Diff line Loading @@ -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> Loading Loading @@ -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: { Loading Loading @@ -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) Loading @@ -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' Loading