Use Actions and cleanup code

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

6 files changed, 90 insertions, 60 deletions

diff --git a/src/Admins.vue b/src/Admins.vue
index 822fddb..27ccd5e 100644
--- a/src/Admins.vue
+++ b/src/Admins.vue
@@ -1,28 +1,26 @@
 <template>
 	<div class="who-has-access">
-		<span :class="{hidden: !isLoading}" class="icon icon-loading" />
+		<span :class="{ hidden: !isLoading }" class="icon icon-loading" />
 		<div v-for="admin in admins" :key="admin.id" class="admin-avatar-container">
-			<avatar :user="admin.internal ? admin.id : null"
-				:display-name="admin.displayname" :size="64" :is-no-user="!admin.internal"
-			/>
-			<span v-if="!admin.internal" class="icon icon-close"
-				@click="deleteAdditionalAdmin(admin)"
-			/>
+			<Avatar :user="admin.internal ? admin.id : null"
+				:display-name="admin.displayname" :size="64" :is-no-user="!admin.internal" />
+			<Actions v-if="!admin.internal">
+				<ActionButton icon="icon-close" @click="deleteAdditionalAdmin(admin)" />
+			</Actions>
 		</div>
 
 		<div v-if="isAdmin">
 			<div v-if="!isAdding" class="addAdditionalAdmin"
-				:title="additionalAdminPlaceholderLabel" @click="openNewAdmin"
-			>
+				:title="additionalAdminPlaceholderLabel" @click="openNewAdmin">
 				+
 			</div>
-			<form v-if="isAdding" v-click-outside="closeNewAdmin" class="addAdditionalAdminFormContainer"
-				@submit.prevent="addAdditionalAdmin"
-			>
+			<form v-if="isAdding"
+				v-click-outside="closeNewAdmin"
+				class="addAdditionalAdminFormContainer"
+				@submit.prevent="addAdditionalAdmin">
 				<input v-model="newAdditionalAdminInputField" type="text" maxlength="64"
 					autocomplete="new-password" autocorrect="off" autocapitalize="off"
-					spellcheck="false" :placeholder="additionalAdminPlaceholderLabel"
-				>
+					spellcheck="false" :placeholder="additionalAdminPlaceholderLabel">
 				<input type="submit" value="" class="icon-confirm">
 				<!-- add icon-loading -->
 			</form>
@@ -31,24 +29,35 @@
 </template>
 
 <script>
-import { generateUrl } from 'nextcloud-server/dist/router'
+import ClickOutside from 'vue-click-outside'
 import HttpClient from 'nextcloud-axios'
 import Vue from 'vue'
-import ClickOutside from 'vue-click-outside'
+
+import Actions from 'nextcloud-vue/dist/Components/Actions'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+import { generateUrl } from 'nextcloud-server/dist/router'
 
 export default {
 	name: 'Admins',
+	components: {
+		Actions,
+		ActionButton,
+		Avatar
+	},
 	directives: {
 		ClickOutside
 	},
-	data: () => ({
-		admins: [],
-		newAdditionalAdminInputField: '',
-		isAdmin: false,
-		isLoading: true,
-		isAdding: false,
-		isSavingChanges: false
-	}),
+	data() {
+		return {
+			admins: [],
+			newAdditionalAdminInputField: '',
+			isAdmin: false,
+			isLoading: true,
+			isAdding: false,
+			isSavingChanges: false
+		}
+	},
 	computed: {
 		additionalAdminPlaceholderLabel() {
 			return t('privacy', 'Add external admin')
diff --git a/src/Encryption.vue b/src/Encryption.vue
index 98c62ca..d76ad1e 100644
--- a/src/Encryption.vue
+++ b/src/Encryption.vue
@@ -2,13 +2,14 @@
 	<div class="who-has-access">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p v-show="!isEditing" v-html="label" />
-		<span v-show="isAdmin && !isEditing" class="icon icon-rename" @click="openEditFullDiskEncryptionForm" />
+		<Actions v-if="isAdmin && !isEditing">
+			<ActionButton icon="icon-rename" @click="openEditFullDiskEncryptionForm" />
+		</Actions>
 		<div v-if="isEditing" v-click-outside="cancelEditFullDiskEncryptionForm">
 			<form>
 				<input id="fullDiskEncryptionEnabledCheckbox" v-model="fullDiskEncryptionEnabled"
 					:disabled="isSavingChanges" type="checkbox" name="fullDiskEncryptionEnabledCheckbox"
-					class="checkbox" @change="saveFullDiskEncryptionForm"
-				>
+					class="checkbox" @change="saveFullDiskEncryptionForm">
 				<label for="fullDiskEncryptionEnabledCheckbox">
 					{{ checkboxLabel }}
 				</label>
@@ -18,22 +19,32 @@
 </template>
 
 <script>
-import { generateUrl } from 'nextcloud-server/dist/router'
 import HttpClient from 'nextcloud-axios'
 import ClickOutside from 'vue-click-outside'
 
+import { generateUrl } from 'nextcloud-server/dist/router'
+
+import Actions from 'nextcloud-vue/dist/Components/Actions'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
+
 export default {
 	name: 'Encryption',
+	components: {
+		Actions,
+		ActionButton
+	},
 	directives: {
 		ClickOutside
 	},
-	data: () => ({
-		fullDiskEncryptionEnabled: false,
-		serverSideEncryptionEnabled: false,
-		isAdmin: true,
-		isEditing: false,
-		isSavingChanges: false
-	}),
+	data() {
+		return {
+			fullDiskEncryptionEnabled: false,
+			serverSideEncryptionEnabled: false,
+			isAdmin: true,
+			isEditing: false,
+			isSavingChanges: false
+		}
+	},
 	computed: {
 		label() {
 			if (!this.serverSideEncryptionEnabled && !this.fullDiskEncryptionEnabled) {
diff --git a/src/Location.vue b/src/Location.vue
index acfe7f7..a67e929 100644
--- a/src/Location.vue
+++ b/src/Location.vue
@@ -4,18 +4,19 @@
 		<p v-show="!isEditingLocation && !isLoading">
 			<span v-show="country">{{ label }}<strong>{{ country }}.</strong></span>
 			<span v-show="!country">{{ labelForNoCountry }}</span>
-			<span v-show="isAdmin" class="icon icon-rename" @click="editLocation" />
+			<Actions v-if="isAdmin">
+				<ActionButton icon="icon-rename" @click="editLocation" />
+			</Actions>
 		</p>
 		<div v-show="isEditingLocation && !isLoading" class="multiselect-container">
-			<multiselect
+			<Multiselect
 				:disabled="isSavingChanges"
 				:options="options"
 				:searchable="true"
 				track-by="code"
 				label="label"
 				:placeholder="placeholderLabel"
-				@input="onChange"
-			/>
+				@input="onChange" />
 			<span v-show="isSavingChanges" class="icon icon-loading" />
 		</div>
 		<Map v-show="!isLoading" />
@@ -28,6 +29,8 @@ import HttpClient from 'nextcloud-axios'
 import { generateUrl } from 'nextcloud-server/dist/router'
 
 import Multiselect from 'nextcloud-vue/dist/Components/Multiselect'
+import Actions from 'nextcloud-vue/dist/Components/Actions'
+import ActionButton from 'nextcloud-vue/dist/Components/ActionButton'
 import {
 	getCountryList,
 	getNameForCountryCode
@@ -36,16 +39,20 @@ import {
 export default {
 	name: 'Location',
 	components: {
+		ActionButton,
+		Actions,
 		Map,
 		Multiselect
 	},
-	data: () => ({
-		selectedCountry: 'de',
-		isAdmin: false,
-		isEditingLocation: false,
-		isLoading: true,
-		isSavingChanges: false,
-	}),
+	data() {
+		return {
+			selectedCountry: 'de',
+			isAdmin: false,
+			isEditingLocation: false,
+			isLoading: true,
+			isSavingChanges: false
+		}
+	},
 	computed: {
 		label() {
 			return t('privacy', 'Your data is located in: ')
@@ -108,6 +115,6 @@ export default {
 				this.isSavingChanges = false
 			})
 		}
-	},
+	}
 }
 </script>
diff --git a/src/Shares.vue b/src/Shares.vue
index c371f6b..5693a28 100644
--- a/src/Shares.vue
+++ b/src/Shares.vue
@@ -4,24 +4,30 @@
 		<span :class="{hidden: !isEmptyList}">
 			{{ emptyLabel }}
 		</span>
-		<avatar v-for="uid in uniqueShareUIDs" :key="uid" :user="uid"
-			:display-name="uidDisplaynameMap[uid]" :size="64"
-		/>
+		<Avatar v-for="uid in uniqueShareUIDs" :key="uid" :user="uid"
+			:display-name="uidDisplaynameMap[uid]" :size="64" />
 	</div>
 </template>
 
 <script>
-import { generateOcsUrl } from 'nextcloud-server/dist/router'
 import HttpClient from 'nextcloud-axios'
 import Vue from 'vue'
 
+import { generateOcsUrl } from 'nextcloud-server/dist/router'
+import Avatar from 'nextcloud-vue/dist/Components/Avatar'
+
 export default {
 	name: 'Shares',
-	data: () => ({
-		uniqueShareUIDs: [],
-		uidDisplaynameMap: {},
-		isLoading: true
-	}),
+	components: {
+		Avatar
+	},
+	data() {
+		return {
+			uniqueShareUIDs: [],
+			uidDisplaynameMap: {},
+			isLoading: true
+		}
+	},
 	computed: {
 		isEmptyList() {
 			return this.isLoading === false && this.uniqueShareUIDs.length === 0
diff --git a/src/main.js b/src/main.js
index c965076..51aa547 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,14 +20,11 @@
  */
 import '@babel/polyfill'
 import Vue from 'vue'
-import Avatar from 'nextcloud-vue/dist/Components/Avatar'
 import Admins from './Admins.vue'
 import Location from './Location.vue'
 import Encryption from './Encryption.vue'
 import Shares from './Shares.vue'
 
-Vue.component('Avatar', Avatar)
-
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
diff --git a/src/nameProvider.js b/src/nameProvider.js
index 8a2ee46..e811207 100644
--- a/src/nameProvider.js
+++ b/src/nameProvider.js
@@ -172,7 +172,7 @@ const list = [
 	{ code: 'ye', label: t('privacy', 'Yemen') },
 	{ code: 'za', label: t('privacy', 'South Africa') },
 	{ code: 'zm', label: t('privacy', 'Zambia') },
-	{ code: 'zw', label: t('privacy', 'Zimbabwe') },
+	{ code: 'zw', label: t('privacy', 'Zimbabwe') }
 ]
 
 export function getCountryList() {