vikunja-frontend/src/components/user/settings/data-export.vue

<template>
	<card :title="$t('user.export.title')">
		<p>
			{{ $t('user.export.description') }}
		</p>
		<p>
			{{ $t('user.export.descriptionPasswordRequired') }}
		</p>
		<div class="field">
			<label class="label" for="currentPasswordDataExport">
				{{ $t('user.settings.currentPassword') }}
			</label>
			<div class="control">
				<input
					class="input"
					:class="{'is-danger': errPasswordRequired}"
					id="currentPasswordDataExport"
					:placeholder="$t('user.settings.currentPasswordPlaceholder')"
					type="password"
					v-model="password"
					@keyup="() => errPasswordRequired = password === ''"
					ref="passwordInput"
				/>
			</div>
			<p class="help is-danger" v-if="errPasswordRequired">
				{{ $t('user.deletion.passwordRequired') }}
			</p>
		</div>

		<x-button
			:loading="dataExportService.loading"
			@click="requestDataExport()"
			class="is-fullwidth mt-4">
			{{ $t('user.export.request') }}
		</x-button>
	</card>
</template>

<script>
import DataExportService from '../../../services/dataExport'

export default {
	name: 'data-export',
	data() {
		return {
			dataExportService: DataExportService,
			password: '',
			errPasswordRequired: false,
		}
	},
	created() {
		this.dataExportService = new DataExportService()
	},
	methods: {
		requestDataExport() {
			if (this.password === '') {
				this.errPasswordRequired = true
				this.$refs.passwordInput.focus()
				return
			}

			this.dataExportService.request(this.password)
				.then(() => {
					this.$message.success({message: this.$t('user.export.success')})
					this.password = ''
				})
				.catch(e => this.$message.error(e))
		},
	},
}
</script>