User account deletion (#651)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/651
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/views/Home.vue

@@ -3,6 +3,17 @@
 		<h2>
 			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
+		<div class="notification is-danger" v-if="deletionScheduledAt !== null">
+			{{
+				$t('user.deletion.scheduled', {
+					date: formatDateShort(deletionScheduledAt),
+					dateSince: formatDateSince(deletionScheduledAt),
+				})
+			}}
+			<router-link :to="{name: 'user.settings', hash: '#deletion'}">
+				{{ $t('user.deletion.scheduledCancel') }}
+			</router-link>
+		</div>
 		<add-task
 			:listId="defaultListId"
 			@taskAdded="updateTaskList"
@@ -51,6 +62,7 @@ import {getHistory} from '../modules/listHistory'
 import ListCard from '@/components/list/partials/list-card.vue'
 import AddTask from '../components/tasks/add-task.vue'
 import {LOADING, LOADING_MODULE} from '../store/mutation-types'
+import {parseDateOrNull} from '../helpers/parseDateOrNull'
 
 export default {
 	name: 'Home',
@@ -117,6 +129,7 @@ export default {
 				return state.namespaces.namespaces[0].lists.length > 0
 			},
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
+			deletionScheduledAt: state => parseDateOrNull(state.auth.info.deletionScheduledAt),
 		}),
 	},
 	methods: {

src/views/user/Settings.vue

@@ -245,6 +245,9 @@
 			</x-button>
 		</card>
 
+		<!-- Account deletion -->
+		<user-settings-deletion id="deletion"/>
+
 		<!-- Caldav -->
 		<card v-if="caldavEnabled" :title="$t('user.settings.caldav.title')">
 			<p>
@@ -289,6 +292,7 @@ import {mapState} from 'vuex'
 import AvatarSettings from '../../components/user/avatar-settings.vue'
 import copy from 'copy-to-clipboard'
 import ListSearch from '@/components/tasks/partials/listSearch.vue'
+import UserSettingsDeletion from '../../components/user/settings/deletion'
 
 export default {
 	name: 'Settings',
@@ -318,6 +322,7 @@ export default {
 		}
 	},
 	components: {
+		UserSettingsDeletion,
 		ListSearch,
 		AvatarSettings,
 	},
@@ -342,6 +347,7 @@ export default {
 	},
 	mounted() {
 		this.setTitle(this.$t('user.settings.title'))
+		this.anchorHashCheck()
 	},
 	computed: {
 		caldavUrl() {
@@ -452,6 +458,14 @@ export default {
 		copy(text) {
 			copy(text)
 		},
+		anchorHashCheck() {
+			if (window.location.hash === this.$route.hash) {
+				const el = document.getElementById(this.$route.hash.slice(1))
+				if (el) {
+					window.scrollTo(0, el.offsetTop)
+				}
+			}
+		},
 	},
 }
 </script>