Fetch status before opening modal

js/user_migration-admin-settings.js.LICENSE.txt

@@ -16,7 +16,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

js/user_migration-personal-settings.js.LICENSE.txt

@@ -28,7 +28,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

src/admin-settings.js

@@ -3,7 +3,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

src/components/ExportSection.vue

@@ -3,7 +3,7 @@
   -
   - @author Christopher Ng <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -49,16 +49,19 @@
 			</div>
 		</div>
 
-		<Button v-if="status.current !== 'export'"
-			type="secondary"
-			:aria-label="t('user_migration', 'Export your data')"
-			:disabled="status.current === 'import'"
-			@click.stop.prevent="startExport">
-			<template #icon>
-				<PackageDown title="" :size="20" />
-			</template>
-			{{ t('user_migration', 'Export') }}
-		</Button>
+		<div v-if="status.current !== 'export'"
+			class="section__status">
+			<Button type="secondary"
+				:aria-label="t('user_migration', 'Export your data')"
+				:disabled="status.current === 'import'"
+				@click.stop.prevent="startExport">
+				<template #icon>
+					<PackageDown title="" :size="20" />
+				</template>
+				{{ t('user_migration', 'Export') }}
+			</Button>
+			<div v-if="startingExport" class="icon-loading" />
+		</div>
 		<div v-else class="section__status">
 			<Button type="secondary"
 				:aria-label="t('user_migration', 'Show export status')"
@@ -133,6 +136,7 @@ export default {
 	data() {
 		return {
 			modalOpened: false,
+			startingExport: false,
 			selectedMigrators: [],
 		}
 	},
@@ -157,12 +161,16 @@ export default {
 		async startExport() {
 			try {
 				await confirmPassword()
+				this.startingExport = true
 				await axios.post(generateOcsUrl('/apps/{appId}/api/v1/export', { appId: APP_ID }), {
 					migrators: this.selectedMigrators,
 				})
-				this.$emit('refresh-status')
-				this.openModal()
+				this.$emit('refresh-status', () => {
+					this.openModal()
+					this.startingExport = false
+				})
 			} catch (error) {
+				this.startingExport = false
 				const errorMessage = error.message || 'Unknown error'
 				this.logger.error(`Error starting user export: ${errorMessage}`, { error })
 				showError(errorMessage)

src/components/ImportSection.vue

@@ -3,7 +3,7 @@
   -
   - @author Christopher Ng <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -30,16 +30,19 @@
 
 		<!-- TODO use server API -->
 
-		<Button v-if="status.current !== 'import'"
-			type="secondary"
-			:aria-label="t('user_migration', 'Import your data')"
-			:disabled="status.current === 'export'"
-			@click.stop.prevent="pickImportFile">
-			<template #icon>
-				<PackageUp title="" :size="20" />
-			</template>
-			{{ t('user_migration', 'Import') }}
-		</Button>
+		<div v-if="status.current !== 'import'"
+			class="section__status">
+			<Button type="secondary"
+				:aria-label="t('user_migration', 'Import your data')"
+				:disabled="status.current === 'export'"
+				@click.stop.prevent="pickImportFile">
+				<template #icon>
+					<PackageUp title="" :size="20" />
+				</template>
+				{{ t('user_migration', 'Import') }}
+			</Button>
+			<div v-if="startingImport" class="icon-loading" />
+		</div>
 		<div v-else class="section__status">
 			<Button type="secondary"
 				:aria-label="t('user_migration', 'Show import status')"
@@ -76,6 +79,7 @@
 </template>
 
 <script>
+import confirmPassword from '@nextcloud/password-confirmation'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 
 import Button from '@nextcloud/vue/dist/Components/Button'
@@ -114,6 +118,7 @@ export default {
 	data() {
 		return {
 			modalOpened: false,
+			startingImport: false,
 			filePickerError: null,
 		}
 	},
@@ -139,11 +144,17 @@ export default {
 				if (!filePath.startsWith('/')) {
 					throw new Error()
 				}
+
 				try {
+					await confirmPassword()
+					this.startingImport = true
 					// TODO call API to start background job
-					this.$emit('refresh-status')
-					this.openModal()
+					this.$emit('refresh-status', () => {
+						this.openModal()
+						this.startingImport = false
+					})
 				} catch (error) {
+					this.startingImport = false
 					const errorMessage = error.message || 'Unknown error'
 					this.logger.error(`Error starting user import: ${errorMessage}`, { error })
 					showError(errorMessage)

src/logger.js

@@ -3,7 +3,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

src/personal-settings.js

@@ -3,7 +3,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -27,7 +27,9 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import logger from './logger'
 import PersonalSettings from './views/Personal/Settings'
 
-Vue.mixin({ props: { logger }, methods: { t, n } })
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.logger = logger
 
 export default new Vue({
 	el: '#personal-settings',

src/shared/constants.js

@@ -3,7 +3,7 @@
  *
  * @author Christopher Ng <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

src/views/Admin/Settings.vue

@@ -3,7 +3,7 @@
   -
   - @author Christopher Ng <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as

src/views/Personal/Settings.vue

@@ -3,7 +3,7 @@
   -
   - @author Christopher Ng <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -57,9 +57,9 @@ export default {
 		}
 	},
 
-	beforeMount() {
-		this.fetchMigrators()
-		this.fetchStatus()
+	async created() {
+		await this.fetchMigrators()
+		await this.fetchStatus()
 		setInterval(this.fetchStatus, STATUS_POLLING_INTERVAL * 1000)
 	},
 
@@ -86,8 +86,9 @@ export default {
 			}
 		},
 
-		onRefreshStatus() {
-			this.fetchStatus()
+		async onRefreshStatus(callback) {
+			await this.fetchStatus()
+			callback()
 		},
 	},
 }