16 files changed, 595 insertions, 661 deletions

diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 094580513..0a9ac46af 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -21,7 +21,7 @@
  -->
 
 <template>
-	<div id="allowed_groups" class="videocalls section">
+	<section id="allowed_groups" class="videocalls section">
 		<h2>{{ t('spreed', 'Limit to groups') }}</h2>
 		<p class="settings-hint">
 			{{ t('spreed', 'When at least one group is selected, only people of the listed groups can be part of conversations.') }}
@@ -33,10 +33,15 @@
 			{{ t('spreed', 'Users that cannot use Talk anymore will still be listed as participants in their previous conversations and also their chat messages will be kept.') }}
 		</p>
 
-		<div class="allowed-groups-settings-content">
-			<NcMultiselect v-model="allowedGroups"
+		<label for="allow_groups_use_talk"
+			class="form__label">
+			{{ t('spreed', 'Limit using Talk') }}
+		</label>
+		<div class="form">
+			<NcSelect v-model="allowedGroups"
+				input-id="allow_groups_use_talk"
 				name="allow_groups_use_talk"
-				class="allowed-groups-select"
+				class="form__select"
 				:options="groups"
 				:placeholder="t('spreed', 'Limit using Talk')"
 				:disabled="loading"
@@ -48,6 +53,7 @@
 				:close-on-select="false"
 				track-by="id"
 				label="displayname"
+				no-wrap
 				@search-change="searchGroup" />
 
 			<NcButton type="primary"
@@ -57,11 +63,15 @@
 			</NcButton>
 		</div>
 
-		<h3>{{ t('spreed', 'Limit creating a public and group conversation') }}</h3>
-		<div class="allowed-groups-settings-content">
-			<NcMultiselect v-model="canStartConversations"
+		<label for="allow_groups_start_conversation"
+			class="form__label">
+			{{ t('spreed', 'Limit creating a public and group conversation') }}
+		</label>
+		<div class="form">
+			<NcSelect v-model="canStartConversations"
+				input-id="allow_groups_start_conversation"
 				name="allow_groups_start_conversation"
-				class="allowed-groups-select"
+				class="form__select"
 				:options="groups"
 				:placeholder="t('spreed', 'Limit creating conversations')"
 				:disabled="loading"
@@ -73,6 +83,7 @@
 				:close-on-select="false"
 				track-by="id"
 				label="displayname"
+				no-wrap
 				@search-change="searchGroup" />
 
 			<NcButton type="primary"
@@ -82,22 +93,28 @@
 			</NcButton>
 		</div>
 
-		<h3>{{ t('spreed', 'Limit starting a call') }}</h3>
-		<div class="allowed-groups-settings-content">
-			<NcMultiselect id="start_calls"
-				v-model="startCalls"
+		<label for="start_calls"
+			class="form__label">
+			{{ t('spreed', 'Limit starting a call') }}
+		</label>
+		<div class="form">
+			<NcSelect v-model="startCalls"
+				input-id="start_calls"
 				name="allow_groups_start_calls"
+				class="form__select"
 				:options="startCallOptions"
 				:placeholder="t('spreed', 'Limit starting calls')"
 				label="label"
 				track-by="value"
+				:clearable="false"
+				no-wrap
 				:disabled="loading || loadingStartCalls"
 				@input="saveStartCalls" />
 		</div>
 		<p>
 			<em>{{ t('spreed', 'When a call has started, everyone with access to the conversation can join the call.') }}</em>
 		</p>
-	</div>
+	</section>
 </template>
 
 <script>
@@ -108,7 +125,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
@@ -121,8 +138,8 @@ export default {
 	name: 'AllowedGroups',
 
 	components: {
-		NcMultiselect,
 		NcButton,
+		NcSelect,
 	},
 
 	data() {
@@ -157,8 +174,8 @@ export default {
 		const mergedGroups = Array.from(
 			new Set(
 				this.allowedGroups.concat(this.canStartConversations)
-					.map(g => JSON.stringify(g))
-			)
+					.map(g => JSON.stringify(g)),
+			),
 		).map(g => JSON.parse(g))
 
 		this.groups = mergedGroups.sort(function(a, b) {
@@ -244,20 +261,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.allowed-groups-settings-content {
+.form {
 	display: flex;
 	align-items: center;
+	gap: 10px;
 
-	.allowed-groups-select {
+	&__select {
 		width: 300px;
 	}
-	button {
-		margin-left: 10px;
-	}
-}
 
-.multiselect {
-	flex-grow: 1;
-	max-width: 300px;
+	&__label {
+		display: block;
+		margin-top: 10px;
+		padding: 4px 0;
+	}
 }
 </style>
diff --git a/src/components/AdminSettings/CommandVue.vue b/src/components/AdminSettings/CommandVue.vue
deleted file mode 100644
index 038401ed4..000000000
--- a/src/components/AdminSettings/CommandVue.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
- -
- - @author Joas Schilling <coding@schilljs.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
-<template>
-	<Fragment>
-		<div class="name">
-			{{ name }}
-		</div>
-		<div class="command">
-			{{ command }}
-		</div>
-		<div class="script">
-			{{ script }}
-		</div>
-		<div class="response">
-			{{ translatedResponse }}
-		</div>
-		<div class="enabled">
-			{{ translatedEnabled }}
-		</div>
-	</Fragment>
-</template>
-
-<script>
-import { Fragment } from 'vue-frag'
-
-export default {
-	name: 'CommandVue',
-	components: {
-		Fragment,
-	},
-
-	props: {
-		id: {
-			type: Number,
-			default: 0,
-		},
-		name: {
-			type: String,
-			default: '',
-		},
-		command: {
-			type: String,
-			default: '',
-		},
-		script: {
-			type: String,
-			default: '',
-		},
-		response: {
-			type: Number,
-			default: 0,
-		},
-		enabled: {
-			type: Number,
-			default: 0,
-		},
-	},
-
-	computed: {
-		translatedResponse() {
-			switch (this.response) {
-			case 0:
-				return t('spreed', 'None')
-			case 1:
-				return t('spreed', 'User')
-			default:
-				return t('spreed', 'Everyone')
-			}
-		},
-		translatedEnabled() {
-			switch (this.enabled) {
-			case 0:
-				return t('spreed', 'Disabled')
-			case 1:
-				return t('spreed', 'Moderators')
-			case 2:
-				return t('spreed', 'Users')
-			default:
-				return t('spreed', 'Everyone')
-			}
-		},
-	},
-}
-</script>
diff --git a/src/components/AdminSettings/Commands.vue b/src/components/AdminSettings/Commands.vue
index 3f098189f..dd4167d67 100644
--- a/src/components/AdminSettings/Commands.vue
+++ b/src/components/AdminSettings/Commands.vue
@@ -21,12 +21,10 @@
  -->
 
 <template>
-	<div id="chat_commands" class="commands section">
+	<section id="chat_commands" class="commands section">
 		<h2>
 			{{ t('spreed', 'Commands') }}
-			<small>
-				{{ t('spreed', 'Beta') }}
-			</small>
+			<small>{{ t('spreed', 'Beta') }}</small>
 		</h2>
 
 		<!-- eslint-disable-next-line vue/no-v-html -->
@@ -48,23 +46,34 @@
 			<div class="head enabled">
 				{{ t('spreed', 'Enabled for') }}
 			</div>
-			<CommandVue v-for="command in commands" :key="command.id" v-bind="command" />
+
+			<template v-for="command in commands">
+				<div :key="`${command.id}_name`" class="name">
+					{{ command.name }}
+				</div>
+				<div :key="`${command.id}_command`" class="command">
+					{{ command.command }}
+				</div>
+				<div :key="`${command.id}_script`" class="script">
+					{{ command.script }}
+				</div>
+				<div :key="`${command.id}_response`" class="response">
+					{{ translateResponse(command.response) }}
+				</div>
+				<div :key="`${command.id}_enabled`" class="enabled">
+					{{ translateEnabled(command.enabled) }}
+				</div>
+			</template>
 		</div>
-	</div>
+	</section>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import CommandVue from '../../components/AdminSettings/CommandVue.vue'
-
 export default {
 	name: 'Commands',
 
-	components: {
-		CommandVue,
-	},
-
 	data() {
 		return {
 			commands: {},
@@ -82,6 +91,31 @@ export default {
 	mounted() {
 		this.commands = loadState('spreed', 'commands')
 	},
+
+	methods: {
+		translateResponse(response) {
+			switch (response) {
+			case 0:
+				return t('spreed', 'None')
+			case 1:
+				return t('spreed', 'User')
+			default:
+				return t('spreed', 'Everyone')
+			}
+		},
+		translateEnabled(enabled) {
+			switch (enabled) {
+			case 0:
+				return t('spreed', 'Disabled')
+			case 1:
+				return t('spreed', 'Moderators')
+			case 2:
+				return t('spreed', 'Users')
+			default:
+				return t('spreed', 'Everyone')
+			}
+		},
+	},
 }
 </script>
 
@@ -92,12 +126,14 @@ export default {
 		grid-template-columns: minmax(100px, 200px) minmax(100px, 200px)  1fr minmax(100px, 200px)  minmax(100px, 200px);
 		grid-column-gap: 5px;
 		grid-row-gap: 10px;
+
 		.head {
 			padding-bottom: 5px;
 			border-bottom: 1px solid var(--color-border);
 			font-weight: bold;
 		}
 	}
+
 	small {
 		color: var(--color-warning);
 		border: 1px solid var(--color-warning);
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 15477aa20..63492ee49 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -21,23 +21,27 @@
  -->
 
 <template>
-	<div id="general_settings" class="videocalls section">
+	<section id="general_settings" class="videocalls section">
 		<h2>{{ t('spreed', 'General settings') }}</h2>
 
 		<h3>{{ t('spreed', 'Default notification settings') }}</h3>
 
-		<div class="paragraph">
-			<label for="default_group_notification">{{ t('spreed', 'Default group notification') }}</label>
-			<NcMultiselect id="default_group_notification"
-				v-model="defaultGroupNotification"
-				name="default_group_notification"
-				:options="defaultGroupNotificationOptions"
-				:placeholder="t('spreed', 'Default group notification for new groups')"
-				label="label"
-				track-by="value"
-				:disabled="loading || loadingDefaultGroupNotification"
-				@input="saveDefaultGroupNotification" />
-		</div>
+		<label for="default_group_notification_input"
+			class="default-group-notification__label">
+			{{ t('spreed', 'Default group notification') }}
+		</label>
+		<NcSelect v-model="defaultGroupNotification"
+			input-id="default_group_notification_input"
+			class="default-group-notification__select"
+			name="default_group_notification"
+			:options="defaultGroupNotificationOptions"
+			:clearable="false"
+			:placeholder="t('spreed', 'Default group notification for new groups')"
+			label="label"
+			track-by="value"
+			no-wrap
+			:disabled="loading || loadingDefaultGroupNotification"
+			@input="saveDefaultGroupNotification" />
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
@@ -52,14 +56,14 @@
 			@update:checked="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
 		</NcCheckboxRadioSwitch>
-	</div>
+	</section>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 
 const defaultGroupNotificationOptions = [
 	{ value: 1, label: t('spreed', 'All messages') },
@@ -71,7 +75,7 @@ export default {
 
 	components: {
 		NcCheckboxRadioSwitch,
-		NcMultiselect,
+		NcSelect,
 	},
 
 	data() {
@@ -150,20 +154,17 @@ export default {
 
 h3 {
 	margin-top: 24px;
+	font-weight: 600;
 }
 
-div.paragraph {
-	display: flex;
-	align-items: center;
+.default-group-notification {
+	&__select {
+		width: 300px;
+	}
 
-	label {
+	&__label {
 		display: block;
-		margin-right: 10px;
+		padding: 4px 0;
 	}
 }
-
-.multiselect {
-	flex-grow: 1;
-	max-width: 300px;
-}
 </style>
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index a03853f17..6faafb1be 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -21,7 +21,7 @@
  -->
 
 <template>
-	<div v-if="showForm"
+	<section v-if="showForm"
 		id="hosted_signaling_server"
 		class="videocalls section">
 		<h2>
@@ -32,70 +32,77 @@
 			{{ t('spreed', 'Our partner Struktur AG provides a service where a hosted signaling server can be requested. For this you only need to fill out the form below and your Nextcloud will request it. Once the server is set up for you the credentials will be filled automatically. This will overwrite the existing signaling server settings.') }}
 		</p>
 
-		<div v-if="!trialAccount.status">
-			<h4>{{ t('spreed', 'URL of this Nextcloud instance') }}</h4>
-			<input v-model="hostedHPBNextcloudUrl"
-				type="text"
+		<template v-if="!trialAccount.status">
+			<NcTextField v-model="hostedHPBNextcloudUrl"
+				class="form__textfield"
 				name="hosted_hpb_nextcloud_url"
 				placeholder="https://cloud.example.org/"
 				:disabled="loading"
-				:aria-label="t('spreed', 'URL of this Nextcloud instance')">
+				:label="t('spreed', 'URL of this Nextcloud instance')"
+				label-visible />
 
-			<h4>{{ t('spreed', 'Full name of the user requesting the trial') }}</h4>
-			<input v-model="hostedHPBFullName"
-				type="text"
+			<NcTextField v-model="hostedHPBFullName"
+				class="form__textfield"
 				name="full_name"
 				placeholder="Jane Doe"
 				:disabled="loading"
-				:aria-label="t('spreed', 'Name of the user requesting the trial')">
+				:label="t('spreed', 'Full name of the user requesting the trial')"
+				label-visible />
 
-			<h4>{{ t('spreed', 'Email of the user') }}</h4>
-			<input v-model="hostedHPBEmail"
-				type="text"
+			<NcTextField v-model="hostedHPBEmail"
+				class="form__textfield"
 				name="hosted_hpb_email"
 				placeholder="jane@example.org"
 				:disabled="loading"
-				:aria-label="t('spreed', 'Email of the user')">
-
-			<h4>{{ t('spreed', 'Language') }}</h4>
-			<select v-model="hostedHPBLanguage"
+				:label="t('spreed', 'Email of the user')"
+				label-visible />
+
+			<label for="hosted_hpb_language_input" class="form__label">
+				{{ t('spreed', 'Language') }}
+			</label>
+			<NcSelect v-model="hostedHPBLanguage"
+				input-id="hosted_hpb_language_in