Move TURN and STUN to Vue components

Signed-off-by: Joas Schilling <coding@schilljs.com>

5 files changed, 159 insertions, 40 deletions

diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index 9ab2729fe..27bd4b8d7 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -32,16 +32,29 @@
 			:disabled="loading"
 			:aria-label="t('spreed', 'STUN server URL')"
 			@input="update">
-		<span v-show="!isValidServer" class="icon icon-error" />
-		<a v-show="!loading"
-			v-tooltip.auto="t('spreed', 'Delete this server')"
-			class="icon icon-delete"
-			@click="removeServer" />
+		<Button v-show="!isValidServer"
+			type="tertiary-no-background"
+			:aria-label="t('spreed', 'The server address is invalid')">
+			<template #icon>
+				<AlertCircle />
+			</template>
+		</Button>
+		<Button v-show="!loading"
+			type="tertiary-no-background"
+			:aria-label="t('spreed', 'Delete this server')"
+			@click="removeServer">
+			<template #icon>
+				<Delete />
+			</template>
+		</Button>
 	</div>
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
+import Delete from 'vue-material-design-icons/Delete'
 
 export default {
 	name: 'StunServer',
@@ -50,6 +63,12 @@ export default {
 		tooltip: Tooltip,
 	},
 
+	components: {
+		Button,
+		AlertCircle,
+		Delete,
+	},
+
 	props: {
 		server: {
 			type: String,
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 1b9d3bb23..f583dacb4 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -21,17 +21,19 @@
  -->
 
 <template>
-	<div id="stun_server" class="videocalls section">
+	<div id="stun_server" class="videocalls section stun-server">
 		<h2>
 			{{ t('spreed', 'STUN servers') }}
-			<span v-if="saved" class="icon icon-checkmark-color" :title="t('spreed', 'Saved')" />
-			<a v-else-if="!loading"
-				v-tooltip.auto="t('spreed', 'Add a new server')"
-				class="icon icon-add"
+
+			<Button v-if="!loading"
+				class="stun-server__add-icon"
+				type="tertiary-no-background"
+				:aria-label="t('spreed', 'Add a new STUN server')"
 				@click="newServer">
-				<span class="hidden-visually">{{ t('spreed', 'Add a new server') }}</span>
-			</a>
-			<span v-else class="icon icon-loading-small" />
+				<template #icon>
+					<Plus />
+				</template>
+			</Button>
 		</h2>
 
 		<p class="settings-hint">
@@ -54,9 +56,12 @@
 
 <script>
 import StunServer from '../../components/AdminSettings/StunServer.vue'
+import Button from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import Plus from 'vue-material-design-icons/Plus'
 import debounce from 'debounce'
 import { loadState } from '@nextcloud/initial-state'
+import { showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'StunServers',
@@ -66,7 +71,9 @@ export default {
 	},
 
 	components: {
+		Button,
 		StunServer,
+		Plus,
 	},
 
 	data() {
@@ -126,6 +133,7 @@ export default {
 
 			OCP.AppConfig.setValue('spreed', 'stun_servers', JSON.stringify(servers), {
 				success() {
+					showSuccess(t('spreed', 'STUN settings saved'))
 					self.loading = false
 					self.toggleSave()
 				},
@@ -143,16 +151,19 @@ export default {
 </script>
 
 <style lang="scss">
-.turn-server {
-	height: 44px;
-	display: flex;
-	align-items: center;
+.stun-server {
+	h2 {
+		height: 44px;
+		display: flex;
+		align-items: center;
+	}
+
+	&__add-icon {
+		display: inline-block;
+		width: 44px;
+		height: 44px;
+		vertical-align: middle;
+	}
 }
 
-.icon {
-	display: inline-block;
-	width: 44px;
-	height: 44px;
-	vertical-align: middle;
-}
 </style>
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 366b65ddd..1f4d2c636 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -73,23 +73,38 @@
 			</option>
 		</select>
 
-		<a v-show="!loading"
-			v-tooltip.auto="testResult"
-			class="icon"
-			:class="testIconClasses"
-			@click="testServer" />
-		<a v-show="!loading"
-			v-tooltip.auto="t('spreed', 'Delete this server')"
-			class="icon icon-delete"
-			@click="removeServer" />
+		<Button v-show="!loading"
+			type="tertiary-no-background"
+			:aria-label="testResult"
+			@click="testServer">
+			<template #icon>
+				<span v-if="testing" class="icon icon-loading-small" />
+				<AlertCircle v-else-if="testingError" />
+				<Check v-else-if="testingSuccess" />
+				<CategoryMonitoring v-else />
+			</template>
+		</Button>
+		<Button v-show="!loading"
+			type="tertiary-no-background"
+			:aria-label="t('spreed', 'Delete this server')"
+			@click="removeServer">
+			<template #icon>
+				<Delete />
+			</template>
+		</Button>
 	</div>
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import AlertCircle from 'vue-material-design-icons/AlertCircle'
+import Check from 'vue-material-design-icons/Check'
+import Delete from 'vue-material-design-icons/Delete'
 import hmacSHA1 from 'crypto-js/hmac-sha1'
 import Base64 from 'crypto-js/enc-base64'
 import debounce from 'debounce'
+import CategoryMonitoring from '../missingMaterialDesignIcons/CategoryMonitoring.vue'
 
 export default {
 	name: 'TurnServer',
@@ -98,6 +113,14 @@ export default {
 		tooltip: Tooltip,
 	},
 
+	components: {
+		Button,
+		AlertCircle,
+		CategoryMonitoring,
+		Check,
+		Delete,
+	},
+
 	props: {
 		schemes: {
 			type: String,
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 537aba5bd..bcf9f5539 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -21,17 +21,19 @@
  -->
 
 <template>
-	<div id="turn_server" class="videocalls section">
+	<div id="turn_server" class="videocalls section turn-server">
 		<h2>
 			{{ t('spreed', 'TURN servers') }}
-			<span v-if="saved" class="icon icon-checkmark-color" :title="t('spreed', 'Saved')" />
-			<a v-else-if="!loading"
-				v-tooltip.auto="t('spreed', 'Add a new server')"
-				class="icon icon-add"
+
+			<Button v-if="!loading"
+				class="turn-server__add-icon"
+				type="tertiary-no-background"
+				:aria-label="t('spreed', 'Add a new TURN server')"
 				@click="newServer">
-				<span class="hidden-visually">{{ t('spreed', 'Add a new server') }}</span>
-			</a>
-			<span v-else class="icon icon-loading-small" />
+				<template #icon>
+					<Plus />
+				</template>
+			</Button>
 		</h2>
 
 		<!-- eslint-disable-next-line vue/no-v-html -->
@@ -58,9 +60,12 @@
 </template>
 
 <script>
+import Button from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import { loadState } from '@nextcloud/initial-state'
+import Plus from 'vue-material-design-icons/Plus'
+import { showSuccess } from '@nextcloud/dialogs'
 import debounce from 'debounce'
 
 export default {
@@ -71,7 +76,9 @@ export default {
 	},
 
 	components: {
+		Button,
 		TurnServer,
+		Plus,
 	},
 
 	data() {
@@ -142,6 +149,7 @@ export default {
 			this.loading = true
 			OCP.AppConfig.setValue('spreed', 'turn_servers', JSON.stringify(servers), {
 				success() {
+					showSuccess(t('spreed', 'TURN settings saved'))
 					self.loading = false
 					self.toggleSave()
 				},
@@ -149,6 +157,7 @@ export default {
 		},
 
 		toggleSave() {
+
 			this.saved = true
 			setTimeout(() => {
 				this.saved = false
@@ -157,3 +166,21 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss">
+.turn-server {
+	h2 {
+		height: 44px;
+		display: flex;
+		align-items: center;
+	}
+
+	&__add-icon {
+		display: inline-block;
+		width: 44px;
+		height: 44px;
+		vertical-align: middle;
+	}
+}
+
+</style>
diff --git a/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue b/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue
new file mode 100644
index 000000000..aa6c34b5b
--- /dev/null
+++ b/src/components/missingMaterialDesignIcons/CategoryMonitoring.vue
@@ -0,0 +1,39 @@
+<template>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon category-monitoring-icon"
+		role="img"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg :width="size"
+			:height="size"
+			viewBox="0 0 16 16">
+			<path d="m1 8h4l1.5-4.0935 3 8.1875 1.5-4.094h4"
+				:stroke="fillColor"
+				fill="none"
+				stroke-miterlimit="4"
+				stroke-width="2" />
+		</svg>
+
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'CategoryMonitoring',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+		size: {
+			type: Number,
+			default: 24,
+		},
+	},
+}
+</script>