Merge branch 'dev/loader-fix-slow' into 'main' (cd21f4fb) · Commits · e / infra / ecloud / nextcloud-apps / Ecloud Accounts

src/DeleteShopAccountSetting.vue

+78 −53

Original line number	Diff line number	Diff line
		<template>
		<div>
		<SettingsSection v-if="shopUsers.length > 0" :name="t(appName, 'Options')">
		<div>
		<p>
		@@ -58,6 +59,10 @@
		</form>
		</div>
		</SettingsSection>
		<div v-if="loading" id="delete-my-account-loader" class="spinner-container">
		<NcLoadingIcon :size="40" />
		</div>
		</div>
		</template>

		<script>
		@@ -67,6 +72,7 @@ import Axios from '@nextcloud/axios'
		import { generateUrl } from '@nextcloud/router'
		import { showError } from '@nextcloud/dialogs'
		import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
		import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'

		const APPLICATION_NAME = 'ecloud-accounts'

		@@ -75,6 +81,7 @@ export default {
		components: {
		SettingsSection,
		CheckboxRadioSwitch,
		NcLoadingIcon,
		},
		data() {
		return {
		@@ -86,6 +93,7 @@ export default {
		showError: false,
		allowDelete: true,
		ordersDescription: '',
		loading: true,
		}
		},
		computed: {
		@@ -172,6 +180,7 @@ export default {
		this.allowDelete = false
		}
		}
		this.loading = false
		this.disableOrEnableDeleteAccount()
		},
		async updateDeleteShopPreference() {
		@@ -211,6 +220,9 @@ export default {
		if (document.activeElement === event.target) {
		return
		}
		if (!this.shopEmailPostDelete \|\| this.shopEmailPostDelete.trim() === '') {
		return
		}
		if (this.shopEmailPostDelete === this.userEmail) {
		showError(
		t(
		@@ -283,4 +295,17 @@ input#shop-alternate-email:disabled {
		#delete-account-settings .checkbox-radio-switch--disabled .checkbox-radio-switch__label:hover{
		background-color: unset;
		}
		.spinner-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		margin-top: 50px;
		}

		#delete-my-account-loader {
		margin-left: auto;
		margin-right: auto;
		width: 40px;
		}
		</style>

src/delete-account-listeners.js

+10 −0

Original line number	Diff line number	Diff line
		@@ -4,16 +4,23 @@ document.addEventListener('DOMContentLoaded', function() {
		const checkboxSpanSelector = '#delete-account-settings span.checkbox-radio-switch'
		const disabledClass = 'checkbox-radio-switch--disabled'
		const deleteAccountSectionId = '#delete-account-settings-section'
		const deleteMyAccountLoader = document.querySelector('#delete-my-account-loader')
		// Disable initially
		document.querySelector(checkboxSelector).disabled = true
		document.querySelector(buttonSelector).disabled = true
		document.querySelector(checkboxSpanSelector).classList.add(disabledClass)

		const elem = document.getElementById('body-settings')
		if (deleteMyAccountLoader) {
		deleteMyAccountLoader.style.display = 'block'
		}
		elem.addEventListener('disable-delete-account', function() {
		document.querySelector(checkboxSelector).disabled = true
		document.querySelector(buttonSelector).disabled = true
		document.querySelector(checkboxSpanSelector).classList.add(disabledClass)
		if (deleteMyAccountLoader) {
		deleteMyAccountLoader.style.display = 'block'
		}
		document.querySelector(deleteAccountSectionId).style.visibility = 'hidden'
		})

		@@ -22,6 +29,9 @@ document.addEventListener('DOMContentLoaded', function() {
		const enableDeleteAccount = document.querySelector(checkboxSelector).checked
		document.querySelector(buttonSelector).disabled = !enableDeleteAccount
		document.querySelector(checkboxSpanSelector).classList.remove(disabledClass)
		if (deleteMyAccountLoader) {
		deleteMyAccountLoader.style.display = 'none'
		}
		document.querySelector(deleteAccountSectionId).style.visibility = 'visible'
		})
		})