Add translations (#562)

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

src/components/misc/api-config.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="api-config">
 		<div v-if="configureApi">
-			<label class="label" for="api-url">Vikunja URL</label>
+			<label class="label" for="api-url">{{ $t('apiConfig.url') }}</label>
 			<div class="field has-addons">
 				<div class="control is-expanded">
 					<input
 						class="input"
 						id="api-url"
-						placeholder="eg. https://localhost:3456"
+						:placeholder="$t('apiConfig.urlPlaceholder')"
 						required
 						type="url"
 						v-focus
@@ -17,16 +17,17 @@
 				</div>
 				<div class="control">
 					<x-button @click="setApiUrl" :disabled="apiUrl === ''">
-						Change
+						{{ $t('apiConfig.change') }}
 					</x-button>
 				</div>
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			Sign in to your Vikunja account on
-			<span v-tooltip="apiUrl"> {{ apiDomain() }} </span>
+			<i18n path="apiConfig.signInOn">
+				<span class="url" v-tooltip="apiUrl"> {{ apiDomain() }} </span>
+			</i18n>
 			<br />
-			<a @click="() => (configureApi = true)">change</a>
+			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
 		</div>
 
 		<div
@@ -178,14 +179,14 @@ export default {
 				.catch(() => {
 					// Still not found, url is still invalid
 					this.successMsg = ''
-					this.errorMsg = `Could not find or use Vikunja installation at "${this.apiDomain()}".`
+					this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain()})
 					window.API_URL = oldUrl
 				})
 				.then((r) => {
 					if (typeof r !== 'undefined') {
 						// Set it + save it to local storage to save us the hoops
 						this.errorMsg = ''
-						this.successMsg = `Using Vikunja installation at "${this.apiDomain()}".`
+						this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain()})
 						localStorage.setItem('API_URL', window.API_URL)
 						this.configureApi = false
 						this.apiUrl = window.API_URL

src/components/misc/create-edit.vue

@@ -26,7 +26,7 @@
 					type="secondary"
 					@click.prevent.stop="$router.back()"
 				>
-					Cancel
+					{{ $t('misc.cancel') }}
 				</x-button>
 				<x-button
 					type="primary"
@@ -52,7 +52,9 @@ export default {
 		},
 		primaryLabel: {
 			type: String,
-			default: 'Create',
+			default() {
+				return this.$t('misc.create')
+			},
 		},
 		primaryIcon: {
 			type: String,

src/components/misc/error.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="notification is-danger">
-		Loading failed, please <a @click="() => location.reload()">try again</a>.
-		If the error persists, please <a href="https://vikunja.io/contact/">contact us</a>.
+		<i18n path="loadingError.failed">
+			<a @click="() => location.reload()">{{ $t('loadingError.tryAgain') }}</a>
+			<a href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</a>
+		</i18n>
 	</div>
 </template>
 

src/components/misc/keyboard-shortcuts.vue

@@ -2,56 +2,56 @@
 	<div class="modal-mask keyboard-shortcuts-modal">
 		<div @click.self="close()" class="modal-container">
 			<div class="modal-content">
-				<card class="has-background-white has-no-shadow" title="Available Keyboard Shortcuts">
+				<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
 					<div class="message is-primary">
 						<div class="message-body">
-							These shortcuts work on all pages.
+							{{ $t('keyboardShortcuts.allPages') }}
 						</div>
 					</div>
 					<p>
-						<strong>Toggle The Menu</strong>
+						<strong>{{ $t('keyboardShortcuts.toggleMenu') }}</strong>
 						<shortcut :keys="['ctrl', 'e']"/>
 					</p>
 					<p>
-						<strong>Open the search/quick action bar</strong>
+						<strong>{{ $t('keyboardShortcuts.quickSearch') }}</strong>
 						<shortcut :keys="['ctrl', 'k']"/>
 					</p>
-					<h3>Kanban</h3>
+					<h3>{{ $t('list.kanban.title') }}</h3>
 					<div class="message is-primary" v-if="$route.name === 'list.kanban'">
 						<div class="message-body">
-							These shortcuts work only on the current page.
+							{{ $t('keyboardShortcuts.currentPageOnly') }}
 						</div>
 					</div>
 					<p>
-						<strong>Mark a task as done</strong>
+						<strong>{{ $t('keyboardShortcuts.task.done') }}</strong>
 						<shortcut :keys="['ctrl', 'click']"/>
 					</p>
-					<h3>Task Page</h3>
+					<h3>{{ $t('keyboardShortcuts.task.title') }}</h3>
 					<div
 						class="message is-primary"
 						v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
 						<div class="message-body">
-							These shortcuts work only on the current page.
+							{{ $t('keyboardShortcuts.currentPageOnly') }}
 						</div>
 					</div>
 					<p>
-						<strong>Assign this task to a user</strong>
+						<strong>{{ $t('keyboardShortcuts.task.assign') }}</strong>
 						<shortcut :keys="['a']"/>
 					</p>
 					<p>
-						<strong>Add labels to this task</strong>
+						<strong>{{ $t('keyboardShortcuts.task.labels') }}</strong>
 						<shortcut :keys="['l']"/>
 					</p>
 					<p>
-						<strong>Change the due date of this task</strong>
+						<strong>{{ $t('keyboardShortcuts.task.dueDate') }}</strong>
 						<shortcut :keys="['d']"/>
 					</p>
 					<p>
-						<strong>Add an attachment to this task</strong>
+						<strong>{{ $t('keyboardShortcuts.task.attachment') }}</strong>
 						<shortcut :keys="['f']"/>
 					</p>
 					<p>
-						<strong>Modify related tasks of this task</strong>
+						<strong>{{ $t('keyboardShortcuts.task.related') }}</strong>
 						<shortcut :keys="['r']"/>
 					</p>
 				</card>

src/components/misc/legal.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="legal-links">
-		<a :href="imprintUrl" target="_blank" v-if="imprintUrl">Imprint</a>
+		<a :href="imprintUrl" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">Privacy policy</a>
+		<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
 	</div>
 </template>
 

src/components/misc/subscription.vue

@@ -54,16 +54,19 @@ export default {
 	},
 	computed: {
 		tooltipText() {
-			if(this.disabled) {
-				return `You can't unsubscribe here because you are subscribed to this ${this.entity} through its ${this.subscription.entity}.`
+			if (this.disabled) {
+				return this.$t('task.subscription.subscribedThroughParent', {
+					entity: this.entity,
+					parent: this.subscription.entity
+				})
 			}
 
 			return this.subscription !== null ?
-				`You are currently subscribed to this ${this.entity} and will receive notifications for changes.` :
-				`You are not subscribed to this ${this.entity} and won't receive notifications for changes.`
+				this.$t('task.subscription.subscribed', {entity: this.entity}) :
+				this.$t('task.subscription.notSubscribed', {entity: this.entity})
 		},
 		buttonText() {
-			return this.subscription !== null ? 'Unsubscribe' : 'Subscribe'
+			return this.subscription !== null ? this.$t('task.subscription.unsubscribe') : this.$t('task.subscription.subscribe')
 		},
 		icon() {
 			return this.subscription !== null ? ['far', 'bell-slash'] : 'bell'
@@ -78,7 +81,7 @@ export default {
 	},
 	methods: {
 		changeSubscription() {
-			if(this.disabled) {
+			if (this.disabled) {
 				return
 			}
 
@@ -96,7 +99,7 @@ export default {
 			this.subscriptionService.create(subscription)
 				.then(() => {
 					this.$emit('change', subscription)
-					this.success({message: `You are now subscribed to this ${this.entity}`})
+					this.success({message: this.$t('task.subscription.subscribeSuccess', {entity: this.entity})})
 				})
 				.catch(e => {
 					this.error(e)
@@ -110,7 +113,7 @@ export default {
 			this.subscriptionService.delete(subscription)
 				.then(() => {
 					this.$emit('change', null)
-					this.success({message: `You are now unsubscribed to this ${this.entity}`})
+					this.success({message: this.$t('task.subscription.unsubscribeSuccess', {entity: this.entity})})
 				})
 				.catch(e => {
 					this.error(e)