feat: move user settings to multiple components (#889)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/889 Co-authored-by: konrad <k@knt.li> Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
@ -147,7 +147,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</aside>
|
||||
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank" rel="noreferrer noopener nofollow">
|
||||
<a class="menu-bottom-link" :href="poweredByUrl" target="_blank" rel="noreferrer noopener nofollow">
|
||||
{{ $t('misc.poweredBy') }}
|
||||
</a>
|
||||
</div>
|
||||
@ -160,6 +160,7 @@ import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
||||
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
||||
import draggable from 'vuedraggable'
|
||||
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
|
||||
import {POWERED_BY} from '@/urls'
|
||||
|
||||
import logoUrl from '@/assets/logo-full.svg'
|
||||
|
||||
@ -175,6 +176,7 @@ export default {
|
||||
},
|
||||
listUpdating: {},
|
||||
logoUrl,
|
||||
poweredByUrl: POWERED_BY,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<card :title="$t('user.settings.avatar.title')">
|
||||
<div class="control mb-4">
|
||||
<label class="radio">
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
|
||||
{{ $t('misc.default') }}
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
|
||||
{{ $t('user.settings.avatar.initials') }}
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
|
||||
{{ $t('user.settings.avatar.gravatar') }}
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
|
||||
{{ $t('user.settings.avatar.upload') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<template v-if="avatarProvider === 'upload'">
|
||||
<input
|
||||
@change="cropAvatar"
|
||||
accept="image/*"
|
||||
class="is-hidden"
|
||||
ref="avatarUploadInput"
|
||||
type="file"
|
||||
/>
|
||||
<x-button
|
||||
:loading="avatarService.loading || loading"
|
||||
@click="$refs.avatarUploadInput.click()"
|
||||
v-if="!isCropAvatar">
|
||||
{{ $t('user.settings.avatar.uploadAvatar') }}
|
||||
</x-button>
|
||||
<template v-else>
|
||||
<cropper
|
||||
:src="avatarToCrop"
|
||||
:stencil-props="{aspectRatio: 1}"
|
||||
@ready="() => loading = false"
|
||||
class="mb-4 cropper"
|
||||
ref="cropper"
|
||||
/>
|
||||
<x-button
|
||||
:loading="avatarService.loading || loading"
|
||||
@click="uploadAvatar"
|
||||
>
|
||||
{{ $t('user.settings.avatar.uploadAvatar') }}
|
||||
</x-button>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<div class="mt-2" v-if="avatarProvider !== 'upload'">
|
||||
<x-button
|
||||
:loading="avatarService.loading || loading"
|
||||
@click="updateAvatarStatus()"
|
||||
class="is-fullwidth"
|
||||
>
|
||||
{{ $t('misc.save') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Cropper} from 'vue-advanced-cropper'
|
||||
import 'vue-advanced-cropper/dist/style.css'
|
||||
|
||||
import AvatarService from '../../services/avatar'
|
||||
import AvatarModel from '../../models/avatar'
|
||||
|
||||
export default {
|
||||
name: 'avatar-settings',
|
||||
data() {
|
||||
return {
|
||||
avatarProvider: '',
|
||||
avatarService: new AvatarService(),
|
||||
isCropAvatar: false,
|
||||
avatarToCrop: null,
|
||||
loading: false, // Seperate variable because some things we're doing in browser take a bit
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.avatarStatus()
|
||||
},
|
||||
components: {
|
||||
Cropper,
|
||||
},
|
||||
methods: {
|
||||
async avatarStatus() {
|
||||
const { avatarProvider } = await this.avatarService.get({})
|
||||
this.avatarProvider = avatarProvider
|
||||
},
|
||||
|
||||
async updateAvatarStatus() {
|
||||
const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
|
||||
await this.avatarService.update(avatarStatus)
|
||||
this.$message.success({message: this.$t('user.settings.avatar.statusUpdateSuccess')})
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
},
|
||||
|
||||
async uploadAvatar() {
|
||||
this.loading = true
|
||||
const {canvas} = this.$refs.cropper.getResult()
|
||||
|
||||
if (!canvas) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const blob = await new Promise(resolve => canvas.toBlob(blob => resolve(blob)))
|
||||
await this.avatarService.create(blob)
|
||||
this.$message.success({message: this.$t('user.settings.avatar.setSuccess')})
|
||||
this.$store.commit('auth/reloadAvatar')
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.isCropAvatar = false
|
||||
}
|
||||
},
|
||||
|
||||
cropAvatar() {
|
||||
const avatar = this.$refs.avatarUploadInput.files
|
||||
|
||||
if (avatar.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
const reader = new FileReader()
|
||||
reader.onload = e => {
|
||||
this.avatarToCrop = e.target.result
|
||||
this.isCropAvatar = true
|
||||
}
|
||||
reader.onloadend = () => this.loading = false
|
||||
reader.readAsDataURL(avatar[0])
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cropper {
|
||||
height: 80vh;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.vue-advanced-cropper__background {
|
||||
background: $white;
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +0,0 @@
|
||||
<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: new DataExportService(),
|
||||
password: '',
|
||||
errPasswordRequired: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async requestDataExport() {
|
||||
if (this.password === '') {
|
||||
this.errPasswordRequired = true
|
||||
this.$refs.passwordInput.focus()
|
||||
return
|
||||
}
|
||||
|
||||
await this.dataExportService.request(this.password)
|
||||
this.$message.success({message: this.$t('user.export.success')})
|
||||
this.password = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<card :title="$t('user.deletion.title')" v-if="userDeletionEnabled">
|
||||
<template v-if="deletionScheduledAt !== null">
|
||||
<form @submit.prevent="cancelDeletion()">
|
||||
<p>
|
||||
{{
|
||||
$t('user.deletion.scheduled', {
|
||||
date: formatDateShort(deletionScheduledAt),
|
||||
dateSince: formatDateSince(deletionScheduledAt),
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('user.deletion.scheduledCancelText') }}
|
||||
</p>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPasswordAccountDelete">
|
||||
{{ $t('user.settings.currentPassword') }}
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
:class="{'is-danger': errPasswordRequired}"
|
||||
id="currentPasswordAccountDelete"
|
||||
: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>
|
||||
</form>
|
||||
|
||||
<x-button
|
||||
:loading="accountDeleteService.loading"
|
||||
@click="cancelDeletion()"
|
||||
class="is-fullwidth mt-4">
|
||||
{{ $t('user.deletion.scheduledCancelConfirm') }}
|
||||
</x-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<form @submit.prevent="deleteAccount()">
|
||||
<p>
|
||||
{{ $t('user.deletion.text1') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ $t('user.deletion.text2') }}
|
||||
</p>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPasswordAccountDelete">
|
||||
{{ $t('user.settings.currentPassword') }}
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
:class="{'is-danger': errPasswordRequired}"
|
||||
id="currentPasswordAccountDelete"
|
||||
: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>
|
||||
</form>
|
||||
|
||||
<x-button
|
||||
:loading="accountDeleteService.loading"
|
||||
@click="deleteAccount()"
|
||||
class="is-fullwidth mt-4 is-danger">
|
||||
{{ $t('user.deletion.confirm') }}
|
||||
</x-button>
|
||||
</template>
|
||||
</card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccountDeleteService from '../../../services/accountDelete'
|
||||
import {mapState} from 'vuex'
|
||||
import {parseDateOrNull} from '../../../helpers/parseDateOrNull'
|
||||
|
||||
export default {
|
||||
name: 'user-settings-deletion',
|
||||
data() {
|
||||
return {
|
||||
accountDeleteService: new AccountDeleteService(),
|
||||
password: '',
|
||||
errPasswordRequired: false,
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
userDeletionEnabled: state => state.config.userDeletionEnabled,
|
||||
deletionScheduledAt: state => parseDateOrNull(state.auth.info.deletionScheduledAt),
|
||||
}),
|
||||
methods: {
|
||||
async deleteAccount() {
|
||||
if (this.password === '') {
|
||||
this.errPasswordRequired = true
|
||||
this.$refs.passwordInput.focus()
|
||||
return
|
||||
}
|
||||
|
||||
await this.accountDeleteService.request(this.password)
|
||||
this.$message.success({message: this.$t('user.deletion.requestSuccess')})
|
||||
this.password = ''
|
||||
},
|
||||
|
||||
async cancelDeletion() {
|
||||
if (this.password === '') {
|
||||
this.errPasswordRequired = true
|
||||
this.$refs.passwordInput.focus()
|
||||
return
|
||||
}
|
||||
|
||||
await this.accountDeleteService.cancel(this.password)
|
||||
this.$message.success({message: this.$t('user.deletion.scheduledCancelSuccess')})
|
||||
this.$store.dispatch('auth/refreshUserInfo')
|
||||
this.password = ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user