feat: add demo mode warning message

Resolves https://kolaente.dev/vikunja/frontend/issues/2453

src/App.vue

@@ -15,6 +15,7 @@
 			<AddToHomeScreen/>
 			<UpdateNotification/>
 			<Notification/>
+			<DemoMode/>
 		</Teleport>
 	</ready>
 </template>
@@ -45,6 +46,7 @@ import {useBaseStore} from '@/stores/base'
 import {useColorScheme} from '@/composables/useColorScheme'
 import {useBodyClass} from '@/composables/useBodyClass'
 import AddToHomeScreen from '@/components/home/AddToHomeScreen.vue'
+import DemoMode from '@/components/home/DemoMode.vue'
 
 const baseStore = useBaseStore()
 const authStore = useAuthStore()

src/components/home/DemoMode.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+import {useConfigStore} from '@/stores/config'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const configStore = useConfigStore()
+const hide = ref(false)
+const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
+</script>
+
+<template>
+	<div
+		v-if="enabled"
+		class="demo-mode-banner"
+	>
+		<p>
+			{{ $t('demo.title') }}
+			<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
+		</p>
+		<BaseButton @click="() => hide = true" class="hide-button">
+			<icon icon="times"/>
+		</BaseButton>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.demo-mode-banner {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: var(--danger);
+	z-index: 100;
+	padding: .5rem;
+	text-align: center;
+	
+	&, strong {
+		color: hsl(220, 13%, 91%) !important; // --grey-200 in light mode, hardcoded because the color should not change
+	}
+}
+
+.hide-button {
+	padding: .25rem .5rem;
+	cursor: pointer;
+	position: absolute;
+	right: .5rem;
+	top: .25rem;
+}
+</style>

src/i18n/lang/en.json

@@ -11,6 +11,11 @@
       "import": "Import your data into Vikunja"
     }
   },
+  "demo": {
+    "title": "This instance is in demo mode. Do not use this for real data!",
+    "everythingWillBeDeleted": "Everything will be deleted in regular intervals!",
+    "accountWillBeDeleted": "Your account will be deleted, including all projects, tasks and attachments you might create."
+  },
   "404": {
     "title": "Not found",
     "text": "The page you requested does not exist."

src/stores/config.ts

@@ -26,6 +26,7 @@ export interface ConfigState {
 	caldavEnabled: boolean,
 	userDeletionEnabled: boolean,
 	taskCommentsEnabled: boolean,
+	demoModeEnabled: boolean,
 	auth: {
 		local: {
 			enabled: boolean,
@@ -58,6 +59,7 @@ export const useConfigStore = defineStore('config', () => {
 		caldavEnabled: false,
 		userDeletionEnabled: true,
 		taskCommentsEnabled: true,
+		demoModeEnabled: false,
 		auth: {
 			local: {
 				enabled: true,

src/views/user/Register.vue

@@ -58,6 +58,17 @@
 			>
 				{{ $t('user.auth.createAccount') }}
 			</x-button>
+			
+			<message
+				v-if="configStore.demoModeEnabled"
+				variant="warning"
+				class="mt-4"
+			>
+				{{ $t('demo.title') }}
+				{{ $t('demo.accountWillBeDeleted') }}<br/>
+				<strong class="is-uppercase">{{ $t('demo.everythingWillBeDeleted') }}</strong>
+			</message>
+			
 			<p class="mt-2">
 				{{ $t('user.auth.alreadyHaveAnAccount') }}
 				<router-link :to="{ name: 'user.login' }">
@@ -78,8 +89,10 @@ import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/password.vue'
 
 import {useAuthStore} from '@/stores/auth'
+import {useConfigStore} from '@/stores/config'
 
 const authStore = useAuthStore()
+const configStore = useConfigStore()
 
 // FIXME: use the `beforeEnter` hook of vue-router
 // Check if the user is already logged in, if so, redirect them to the homepage