From 4d8ba3072369a3d29251d0dad820701f4ddb01b1 Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Tue, 4 Mar 2025 16:54:36 +0530
Subject: [PATCH 1/5] fix loading

---
 css/ecloud-accounts-userregistration.css |   1 +
 src/DeleteShopAccountSetting.vue         | 128 +++++++++++++----------
 src/delete-account-listeners.js          |  10 ++
 3 files changed, 86 insertions(+), 53 deletions(-)
 create mode 100644 css/ecloud-accounts-userregistration.css

diff --git a/css/ecloud-accounts-userregistration.css b/css/ecloud-accounts-userregistration.css
new file mode 100644
index 00000000..f3b67749
--- /dev/null
+++ b/css/ecloud-accounts-userregistration.css
@@ -0,0 +1 @@
+html{background:var(--color-main-background)}#body-login .warning-messsage{width:100% !important}#body-login .v-align{align-items:flex-start !important;justify-content:flex-start !important}.v-align header{width:100% !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important}#header{padding-left:5% !important}.v-align main{width:50% !important;margin:0 auto}#registrationForm .password-group #password{height:62px;margin-left:0;background-color:#fff;color:#000;border:1px solid #e6e8e9}@media only screen and (max-width: 768px){.v-align main{width:100% !important}#body-login .v-align{padding:2vh 0vh !important;max-height:fit-content !important}}#fields-password .Password__strength-meter{margin-bottom:0}#fields-password .Password__strength-meter:before{left:0}#fields-password .Password__strength-meter:after{right:0}#fields-password .Password__strength-meter:after,#fields-password .Password__strength-meter:before{width:100%}
diff --git a/src/DeleteShopAccountSetting.vue b/src/DeleteShopAccountSetting.vue
index 6c1f1ebb..2960b387 100644
--- a/src/DeleteShopAccountSetting.vue
+++ b/src/DeleteShopAccountSetting.vue
@@ -1,63 +1,68 @@
 <template>
-	<SettingsSection v-if="shopUsers.length > 0" :name="t(appName, 'Options')">
-		<div>
-			<p>
-				{{
-					t(appName, 'We are going to proceed with your cloud account suppression.')
-				}}
-				<span v-if="!hasActiveSubscription">
+	<div>
+		<SettingsSection v-if="shopUsers.length > 0" :name="t(appName, 'Options')">
+			<div>
+				<p>
 					{{
-						t(appName, 'Check the box below if you also want to delete the associated shop account(s).')
+						t(appName, 'We are going to proceed with your cloud account suppression.')
 					}}
-				</span>
-			</p>
+					<span v-if="!hasActiveSubscription">
+						{{
+							t(appName, 'Check the box below if you also want to delete the associated shop account(s).')
+						}}
+					</span>
+				</p>
 
-			<p><span v-if="orderCount > 0" v-html="ordersDescription" /></p>
-			<p v-if="hasActiveSubscription">
-				<b>
-					{{
-						t(appName, 'A subscription is active in this account. Please cancel it or let it expire before deleting your account.')
-					}}
-				</b>
-			</p>
+				<p><span v-if="orderCount > 0" v-html="ordersDescription" /></p>
+				<p v-if="hasActiveSubscription">
+					<b>
+						{{
+							t(appName, 'A subscription is active in this account. Please cancel it or let it expire before deleting your account.')
+						}}
+					</b>
+				</p>
 
-			<form @submit.prevent>
-				<div v-if="!onlyUser && !onlyAdmin" id="delete-shop-account-settings">
-					<div class="delete-shop-input">
-						<CheckboxRadioSwitch id="shop-accounts_confirm"
-							:checked.sync="deleteShopAccount"
-							:disabled="hasActiveSubscription || !allowDelete"
-							@update:checked="updateDeleteShopPreference">
-							{{
-								t(
-									appName,
-									"I also want to delete my shop account"
-								)
-							}}
-						</CheckboxRadioSwitch>
-					</div>
-					<div v-if="!deleteShopAccount" class="delete-shop-input">
-						<label for="shop-alternate-email">
-							{{
-								t(
-									appName,
-									"If you want to keep your shop account please validate or modify the email address below. This email address will become your new login to the shop."
-								)
-							}}
-						</label>
-						<input id="shop-alternate-email"
-							v-model="shopEmailPostDelete"
-							type="email"
-							name="shop-alternate-email"
-							:placeholder="t(appName, 'Email Address')"
-							class="form-control"
-							:disabled="hasActiveSubscription || !allowDelete"
-							@blur="updateEmailPostDelete($event)">
+				<form @submit.prevent>
+					<div v-if="!onlyUser && !onlyAdmin" id="delete-shop-account-settings">
+						<div class="delete-shop-input">
+							<CheckboxRadioSwitch id="shop-accounts_confirm"
+								:checked.sync="deleteShopAccount"
+								:disabled="hasActiveSubscription || !allowDelete"
+								@update:checked="updateDeleteShopPreference">
+								{{
+									t(
+										appName,
+										"I also want to delete my shop account"
+									)
+								}}
+							</CheckboxRadioSwitch>
+						</div>
+						<div v-if="!deleteShopAccount" class="delete-shop-input">
+							<label for="shop-alternate-email">
+								{{
+									t(
+										appName,
+										"If you want to keep your shop account please validate or modify the email address below. This email address will become your new login to the shop."
+									)
+								}}
+							</label>
+							<input id="shop-alternate-email"
+								v-model="shopEmailPostDelete"
+								type="email"
+								name="shop-alternate-email"
+								:placeholder="t(appName, 'Email Address')"
+								class="form-control"
+								:disabled="hasActiveSubscription || !allowDelete"
+								@blur="updateEmailPostDelete($event)">
+						</div>
 					</div>
-				</div>
-			</form>
+				</form>
+			</div>
+		</SettingsSection>
+		<div v-if="loading" id="delete-my-account-loader" class="spinner-container">
+			<NcLoadingIcon :size="40" />
 		</div>
-	</SettingsSection>
+	</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() {
@@ -283,4 +292,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>
diff --git a/src/delete-account-listeners.js b/src/delete-account-listeners.js
index f5461b73..99bb0aa0 100644
--- a/src/delete-account-listeners.js
+++ b/src/delete-account-listeners.js
@@ -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'
 	})
 })
-- 
GitLab


From 5b1558f7c841138f5e7ccefae585ce1a62093eb9 Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Tue, 4 Mar 2025 16:57:28 +0530
Subject: [PATCH 2/5] remove loading

---
 css/ecloud-accounts-userregistration.css | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 css/ecloud-accounts-userregistration.css

diff --git a/css/ecloud-accounts-userregistration.css b/css/ecloud-accounts-userregistration.css
deleted file mode 100644
index f3b67749..00000000
--- a/css/ecloud-accounts-userregistration.css
+++ /dev/null
@@ -1 +0,0 @@
-html{background:var(--color-main-background)}#body-login .warning-messsage{width:100% !important}#body-login .v-align{align-items:flex-start !important;justify-content:flex-start !important}.v-align header{width:100% !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important}#header{padding-left:5% !important}.v-align main{width:50% !important;margin:0 auto}#registrationForm .password-group #password{height:62px;margin-left:0;background-color:#fff;color:#000;border:1px solid #e6e8e9}@media only screen and (max-width: 768px){.v-align main{width:100% !important}#body-login .v-align{padding:2vh 0vh !important;max-height:fit-content !important}}#fields-password .Password__strength-meter{margin-bottom:0}#fields-password .Password__strength-meter:before{left:0}#fields-password .Password__strength-meter:after{right:0}#fields-password .Password__strength-meter:after,#fields-password .Password__strength-meter:before{width:100%}
-- 
GitLab


From f56adf8207cdfa828f3eead8b1c2668fbdeff3d2 Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Thu, 6 Mar 2025 13:09:56 +0530
Subject: [PATCH 3/5] empty email check

---
 src/DeleteShopAccountSetting.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/DeleteShopAccountSetting.vue b/src/DeleteShopAccountSetting.vue
index 2960b387..e139322d 100644
--- a/src/DeleteShopAccountSetting.vue
+++ b/src/DeleteShopAccountSetting.vue
@@ -220,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(
-- 
GitLab


From 3de0811f817e960bb79f8ebfa99a3b19b06624ac Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Thu, 6 Mar 2025 14:21:14 +0530
Subject: [PATCH 4/5] lint fix

---
 css/ecloud-accounts-userregistration.css | 1 +
 src/DeleteShopAccountSetting.vue         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 css/ecloud-accounts-userregistration.css

diff --git a/css/ecloud-accounts-userregistration.css b/css/ecloud-accounts-userregistration.css
new file mode 100644
index 00000000..f3b67749
--- /dev/null
+++ b/css/ecloud-accounts-userregistration.css
@@ -0,0 +1 @@
+html{background:var(--color-main-background)}#body-login .warning-messsage{width:100% !important}#body-login .v-align{align-items:flex-start !important;justify-content:flex-start !important}.v-align header{width:100% !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important}#header{padding-left:5% !important}.v-align main{width:50% !important;margin:0 auto}#registrationForm .password-group #password{height:62px;margin-left:0;background-color:#fff;color:#000;border:1px solid #e6e8e9}@media only screen and (max-width: 768px){.v-align main{width:100% !important}#body-login .v-align{padding:2vh 0vh !important;max-height:fit-content !important}}#fields-password .Password__strength-meter{margin-bottom:0}#fields-password .Password__strength-meter:before{left:0}#fields-password .Password__strength-meter:after{right:0}#fields-password .Password__strength-meter:after,#fields-password .Password__strength-meter:before{width:100%}
diff --git a/src/DeleteShopAccountSetting.vue b/src/DeleteShopAccountSetting.vue
index e139322d..da7a5a7e 100644
--- a/src/DeleteShopAccountSetting.vue
+++ b/src/DeleteShopAccountSetting.vue
@@ -221,7 +221,7 @@ export default {
 				return
 			}
 			if (!this.shopEmailPostDelete || this.shopEmailPostDelete.trim() === '') {
-				return;
+				return
 			}
 			if (this.shopEmailPostDelete === this.userEmail) {
 				showError(
-- 
GitLab


From 0b8c37884181e3aed1023940c3b08548f3466560 Mon Sep 17 00:00:00 2001
From: Avinash Gusain <avinashg@e.email>
Date: Thu, 6 Mar 2025 14:25:09 +0530
Subject: [PATCH 5/5] Removed css/ folder from repository

---
 css/ecloud-accounts-userregistration.css | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 css/ecloud-accounts-userregistration.css

diff --git a/css/ecloud-accounts-userregistration.css b/css/ecloud-accounts-userregistration.css
deleted file mode 100644
index f3b67749..00000000
--- a/css/ecloud-accounts-userregistration.css
+++ /dev/null
@@ -1 +0,0 @@
-html{background:var(--color-main-background)}#body-login .warning-messsage{width:100% !important}#body-login .v-align{align-items:flex-start !important;justify-content:flex-start !important}.v-align header{width:100% !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important}#header{padding-left:5% !important}.v-align main{width:50% !important;margin:0 auto}#registrationForm .password-group #password{height:62px;margin-left:0;background-color:#fff;color:#000;border:1px solid #e6e8e9}@media only screen and (max-width: 768px){.v-align main{width:100% !important}#body-login .v-align{padding:2vh 0vh !important;max-height:fit-content !important}}#fields-password .Password__strength-meter{margin-bottom:0}#fields-password .Password__strength-meter:before{left:0}#fields-password .Password__strength-meter:after{right:0}#fields-password .Password__strength-meter:after,#fields-password .Password__strength-meter:before{width:100%}
-- 
GitLab