Show scheduled deletion on home page

src/components/tasks/partials/listSearch.vue

@@ -1,7 +1,6 @@
 <template>
 	<multiselect
 		class="control is-expanded"
-		v-focus
 		:loading="listSerivce.loading"
 		:placeholder="$t('list.search')"
 		@search="findLists"

src/components/user/settings/deletion.vue

@@ -20,6 +20,7 @@
 						type="password"
 						v-model="password"
 						@keyup="() => errPasswordRequired = password === ''"
+						ref="passwordInput"
 					/>
 				</div>
 				<p class="help is-danger" v-if="errPasswordRequired">
@@ -61,6 +62,7 @@ export default {
 		deleteAccount() {
 			if (this.password === '') {
 				this.errPasswordRequired = true
+				this.$refs.passwordInput.focus()
 				return
 			}
 

src/i18n/lang/en.json

@@ -104,7 +104,9 @@
       "confirm": "Delete my account",
       "requestSuccess": "The request was successful. You'll receive an email with further instructions.",
       "passwordRequired": "Please enter your password.",
-      "confirmSuccess": "You've successfully confirmed the deletion of your account. We will delete your account in three days."
+      "confirmSuccess": "You've successfully confirmed the deletion of your account. We will delete your account in three days.",
+      "scheduled": "We will delete your Vikunja account at {date} ({dateSince}).",
+      "scheduledCancel": "To cancel the deletion of your account, click here."
     }
   },
   "list": {

src/views/Home.vue

@@ -3,8 +3,11 @@
 		<h2>
 			{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
 		</h2>
-		<div class="notification is-danger" v-if="deletionScheduledAt">
-			TODO: Text + link to settings {{ formatDate(deletionScheduledAt) }}
+		<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"
@@ -54,6 +57,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',
@@ -121,11 +125,7 @@ export default {
 			},
 			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
 			deletionScheduledAt: state => {
-				if (state.auth.info.deletionScheduledAt === null) {
-					return null
-				}
-				
-				return new Date(state.auth.info.deletionScheduledAt)
+				return parseDateOrNull(state.auth.info.deletionScheduledAt)
 			},
 		}),
 	},

src/views/user/Settings.vue

@@ -246,7 +246,7 @@
 		</card>
 
 		<!-- Account deletion -->
-		<user-settings-deletion/>
+		<user-settings-deletion id="deletion"/>
 
 		<!-- Caldav -->
 		<card v-if="caldavEnabled" :title="$t('user.settings.caldav.title')">
@@ -347,6 +347,7 @@ export default {
 	},
 	mounted() {
 		this.setTitle(this.$t('user.settings.title'))
+		this.anchorHashCheck()
 	},
 	computed: {
 		caldavUrl() {
@@ -457,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>