Add translation strings for sharing components

src/components/sharing/linkSharing.vue

@@ -1,72 +1,76 @@
 <template>
 	<div>
 		<p class="has-text-weight-bold">
-			Share Links
+			{{ $t('list.share.links.title') }}
 			<span
-
 				class="is-size-7"
-				v-tooltip="'Share Links allow you to easily share a list with other users who don\'t have an account on Vikunja.'">
+				v-tooltip="$t('list.share.links.explanation')">
-				What is a share link?
+				{{ $t('list.share.links.what') }}
 			</span>
 		</p>
 
 		<div class="sharables-list">
-
 			<x-button
 				v-if="!(linkShares.length === 0 || showNewForm)"
 				@click="showNewForm = true"
 				icon="plus"
 				class="mb-4">
-				Create a new link share
+				{{ $t('list.share.links.create') }}
 			</x-button>
 
 			<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
 				<div class="field">
 					<label class="label" for="linkShareRight">
-						Right
+						{{ $t('list.share.right.title') }}
 					</label>
 					<div class="control">
 						<div class="select">
 							<select v-model="selectedRight" id="linkShareRight">
-								<option :value="rights.READ">Read only</option>
+								<option :value="rights.READ">
-								<option :value="rights.READ_WRITE">
+									{{ $t('list.share.right.read') }}
-									Read & write
+								</option>
+								<option :value="rights.READ_WRITE">
+									{{ $t('list.share.right.readWrite') }}
+								</option>
+								<option :value="rights.ADMIN">
+									{{ $t('list.share.right.admin') }}
 								</option>
-								<option :value="rights.ADMIN">Admin</option>
 							</select>
 						</div>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="linkShareName">
-						Name (optional)
+						{{ $t('list.share.links.name') }}
 					</label>
 					<div class="control">
 						<input
 							id="linkShareName"
 							class="input"
-							placeholder="e.g. Lorem Ipsum"
+							:placeholder="$t('list.share.links.namePlaceholder')"
-							v-tooltip="'All actions done by this link share will show up with the name.'"
+							v-tooltip="$t('list.share.links.nameExplanation')"
 							v-model="name"
 						/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="linkSharePassword">
-						Password (optional)
+						{{ $t('list.share.links.password') }}
 					</label>
 					<div class="control">
 						<input
 							id="linkSharePassword"
 							type="password"
 							class="input"
-							placeholder="e.g. ••••••••••••"
+							:placeholder="$t('user.auth.passwortPlaceholder')"
-							v-tooltip="'When authenticating, the user will be required to enter this password.'"
+							v-tooltip="$t('list.share.links.passwordExplanation')"
 							v-model="password"
 						/>
 					</div>
 				</div>
-				<x-button @click="add" icon="plus">Share</x-button>
+				<x-button @click="add" icon="plus">
+					{{ $t('list.share.share') }}
+				</x-button>
 			</div>
 
 			<table
@@ -75,11 +79,11 @@
 			>
 				<thead>
 				<tr>
-					<th>Link</th>
+					<th>{{ $t('list.share.attributes.link') }}</th>
-					<th>Name</th>
+					<th>{{ $t('list.share.attributes.name') }}</th>
-					<th>Shared&nbsp;by</th>
+					<th>{{ $t('list.share.attributes.sharedBy') }}</th>
-					<th>Right</th>
+					<th>{{ $t('list.share.attributes.right') }}</th>
-					<th>Delete</th>
+					<th>{{ $t('list.share.attributes.delete') }}</th>
 				</tr>
 				</thead>
 				<tbody>
@@ -98,7 +102,7 @@
 								<x-button
 									@click="copy(getShareLink(s.hash))"
 									:shadow="false"
-									v-tooltip="'Copy to clipboard'"
+									v-tooltip="$t('misc.copy')"
 								>
 									<span class="icon">
 										<icon icon="paste"/>
@@ -111,7 +115,7 @@
 						<template v-if="s.name !== ''">
 							{{ s.name }}
 						</template>
-						<i v-else>No name set</i>
+						<i v-else>{{ $t('list.share.links.noName') }}</i>
 					</td>
 					<td>
 						{{ s.sharedBy.getDisplayName() }}
@@ -121,19 +125,19 @@
 							<span class="icon is-small">
 								<icon icon="lock"/>
 							</span>&nbsp;
-							Admin
+							{{ $t('list.share.right.admin') }}
 						</template>
 						<template v-else-if="s.right === rights.READ_WRITE">
 							<span class="icon is-small">
 								<icon icon="pen"/>
 							</span>&nbsp;
-							Write
+							{{ $t('list.share.right.readWrite') }}
 						</template>
 						<template v-else>
 							<span class="icon is-small">
 								<icon icon="users"/>
 							</span>&nbsp;
-							Read-only
+							{{ $t('list.share.right.read') }}
 						</template>
 					</td>
 					<td class="actions">
@@ -159,12 +163,9 @@
 				@submit="remove()"
 				v-if="showDeleteModal"
 			>
-				<span slot="header">Remove a link share</span>
+				<span slot="header">{{ $t('list.share.links.remove') }}</span>
 				<p slot="text">
-					Are you sure you want to remove this link share?<br/>
+					{{ $t('list.share.links.removeText') }}
-					It will no longer be possible to access this list with this link
-					share.<br/>
-					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
 		</transition>
@@ -249,7 +250,7 @@ export default {
 					this.password = ''
 					this.showNewForm = false
 					this.success(
-						{message: 'The link share was successfully created'},
+						{message: this.$t('list.share.links.createSuccess')},
 						this
 					)
 					this.load()
@@ -267,7 +268,7 @@ export default {
 				.delete(linkshare)
 				.then(() => {
 					this.success(
-						{message: 'The link share was successfully deleted'},
+						{message: this.$t('list.share.links.deleteSuccess')},
 						this
 					)
 					this.load()

src/components/sharing/userTeam.vue

@@ -1,6 +1,8 @@
 <template>
 	<div>
-		<p class="has-text-weight-bold">Shared with these {{ shareType }}s</p>
+		<p class="has-text-weight-bold">
+			{{ $t('list.share.userTeam.shared', {type: shareTypeNames}) }}
+		</p>
 		<div v-if="userIsAdmin">
 			<div class="field has-addons">
 				<p
@@ -9,7 +11,7 @@
 				>
 					<multiselect
 						:loading="searchService.loading"
-						placeholder="Type to search..."
+						:placeholder="$t('misc.searchPlaceholder')"
 						@search="find"
 						:search-results="found"
 						:label="searchLabel"
@@ -17,7 +19,7 @@
 					/>
 				</p>
 				<p class="control">
-					<x-button @click="add()"> Share</x-button>
+					<x-button @click="add()">{{ $t('list.share.share') }}</x-button>
 				</p>
 			</div>
 		</div>
@@ -29,7 +31,7 @@
 					<td>{{ s.getDisplayName() }}</td>
 					<td>
 						<template v-if="s.id === userInfo.id">
-							<b class="is-success">You</b>
+							<b class="is-success">{{ $t('list.share.userTeam.you') }}</b>
 						</template>
 					</td>
 				</template>
@@ -50,19 +52,19 @@
 							<span class="icon is-small">
 								<icon icon="lock"/>
 							</span>
-						Admin
+						{{ $t('list.share.right.admin') }}
 					</template>
 					<template v-else-if="s.right === rights.READ_WRITE">
 							<span class="icon is-small">
 								<icon icon="pen"/>
 							</span>
-						Write
+						{{ $t('list.share.right.readWrite') }}
 					</template>
 					<template v-else>
 							<span class="icon is-small">
 								<icon icon="users"/>
 							</span>
-						Read-only
+						{{ $t('list.share.right.read') }}
 					</template>
 				</td>
 				<td class="actions" v-if="userIsAdmin">
@@ -76,19 +78,19 @@
 								:selected="s.right === rights.READ"
 								:value="rights.READ"
 							>
-								Read only
+								{{ $t('list.share.right.read') }}
 							</option>
 							<option
 								:selected="s.right === rights.READ_WRITE"
 								:value="rights.READ_WRITE"
 							>
-								Read & write
+								{{ $t('list.share.right.readWrite') }}
 							</option>
 							<option
 								:selected="s.right === rights.ADMIN"
 								:value="rights.ADMIN"
 							>
-								Admin
+								{{ $t('list.share.right.admin') }}
 							</option>
 						</select>
 					</div>
@@ -108,7 +110,7 @@
 		</table>
 
 		<nothing v-else>
-			Not shared with any {{ shareType }} yet.
+			{{ $t('list.share.userTeam.notShared', {type: shareTypeNames}) }}
 		</nothing>
 
 		<transition name="modal">
@@ -117,13 +119,11 @@
 				@submit="deleteSharable()"
 				v-if="showDeleteModal"
 			>
-			<span slot="header"
+			<span slot="header">
-			>Remove a {{ shareType }} from the {{ typeString }}</span
+				{{ $t('list.share.userTeam.removeHeader', {type: shareTypeName, sharable: sharableName}) }}
-			>
+			</span>
 				<p slot="text">
-					Are you sure you want to remove this {{ shareType }} from the
+					{{ $t('list.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}
-					{{ typeString }}?<br/>
-					<b>This CANNOT BE UNDONE!</b>
 				</p>
 			</modal>
 		</transition>
@@ -131,8 +131,6 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
-
 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
 import UserListModel from '../../models/userList'
@@ -192,9 +190,44 @@ export default {
 		Nothing,
 		Multiselect,
 	},
-	computed: mapState({
+	computed: {
-		userInfo: (state) => state.auth.info,
+		userInfo() {
-	}),
+			return this.$store.state.auth.info
+		},
+		shareTypeNames() {
+			if (this.shareType === 'user') {
+				return this.$tc('list.share.userTeam.typeUser', 2)
+			}
+
+			if (this.shareType === 'team') {
+				return this.$tc('list.share.userTeam.typeTeam', 2)
+			}
+
+			return ''
+		},
+		shareTypeName() {
+			if (this.shareType === 'user') {
+				return this.$tc('list.share.userTeam.typeUser', 1)
+			}
+
+			if (this.shareType === 'team') {
+				return this.$tc('list.share.userTeam.typeTeam', 1)
+			}
+
+			return ''
+		},
+		sharableName() {
+			if (this.type === 'list') {
+				return this.$t('list.list.title')
+			}
+
+			if (this.shareType === 'namespace') {
+				return this.$t('namespace.namespace')
+			}
+
+			return ''
+		},
+	},
 	created() {
 		if (this.shareType === 'user') {
 			this.searchService = new UserService()
@@ -271,7 +304,7 @@ export default {
 							this.sharables.splice(i, 1)
 						}
 					}
-					this.success({message: `The ${this.shareType} was successfully deleted from the ${this.typeString}.`}, this)
+					this.success({message: this.$t('list.share.userTeam.removeSuccess', {type: this.shareTypeName, sharable: this.sharableName})}, this)
 				})
 				.catch((e) => {
 					this.error(e, this)
@@ -295,15 +328,7 @@ export default {
 			this.stuffService
 				.create(this.stuffModel)
 				.then(() => {
-					this.success(
+					this.success({message: this.$t('list.share.userTeam.addedSuccess', {type: this.shareTypeName})}, this)
-						{
-							message:
-								'The ' +
-								this.shareType +
-								' was successfully added.',
-						},
-						this
-					)
 					this.load()
 				})
 				.catch((e) => {
@@ -340,15 +365,7 @@ export default {
 							this.$set(this.sharables[i], 'right', r.right)
 						}
 					}
-					this.success(
+					this.success({message: this.$t('list.share.userTeam.updatedSuccess', {type: this.shareTypeName})}, this)
-						{
-							message:
-								'The ' +
-								this.shareType +
-								' right was successfully updated.',
-						},
-						this
-					)
 				})
 				.catch((e) => {
 					this.error(e, this)

src/i18n/en.json

@@ -140,7 +140,49 @@
     },
     "share": {
       "header": "Share this list",
-      "title": "Share \"{list}\""
+      "title": "Share \"{list}\"",
+      "share": "Share",
+      "links": {
+        "title": "Share Links",
+        "what": "What is a share link?",
+        "explanation": "Share Links allow you to easily share a list with other users who don't have an account on Vikunja.",
+        "create": "Create a new link share",
+        "name": "Name (optional)",
+        "namePlaceholder": "e.g. Lorem Ipsum",
+        "nameExplanation": "All actions done by this link share will show up with the name.",
+        "password": "Password (optional)",
+        "passwordExplanation": "When authenticating, the user will be required to enter this password.",
+        "noName": "No name set",
+        "remove": "Remove a link share",
+        "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
+        "createSuccess": "The link share was successfully created.",
+        "deleteSuccess": "The link share was successfully deleted"
+      },
+      "userTeam": {
+        "typeUser": "user | users",
+        "typeTeam": "team | teams",
+        "shared": "Shared with these {type}",
+        "you": "You",
+        "notShared": "Not shared with any {type} yet.",
+        "removeHeader": "Remove a {type} from the {sharable}",
+        "removeText": "Are you sure you want to remove this {sharable} from the {type}? This cannot be undone!",
+        "removeSuccess": "The {sharable} was successfully removed from the {type}.",
+        "addedSuccess": "The {type} was successfully added.",
+        "updatedSuccess": "The {type} was successfully added."
+      },
+      "right": {
+        "title": "Right",
+        "read": "Read only",
+        "readWrite": "Read & write",
+        "admin": "Admin"
+      },
+      "attributes": {
+        "link": "Link",
+        "name": "Name",
+        "sharedBy": "Shared by",
+        "right": "Right",
+        "delete": "Delete"
+      }
     },
     "list": {
       "title": "List",
@@ -188,6 +230,7 @@
   },
   "namespace": {
     "title": "Namespaces & Lists",
+    "namespace": "Namespace",
     "showArchived": "Show Archived",
     "noneAvailable": "You don't have any namespaces right now.",
     "unarchive": "Un-Archive",
@@ -328,6 +371,7 @@
     "disable": "Disable",
     "copy": "Copy to clipboard",
     "search": "Search",
+    "searchPlaceholder": "Type to search...",
     "previous": "Previous",
     "next": "Next",
     "poweredBy": "Powered by Vikunja",