Fix HTML validations with Multiselect

* Error: Bad value for attribute name on element input: Must not be empty.
* Error: No p element in scope but a p end tag seen.

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

2 files changed, 13 insertions, 9 deletions

diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 4a5aeb568..204cd4495 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -33,8 +33,9 @@
 			{{ 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>
 
-		<p class="allowed-groups-settings-content">
+		<div class="allowed-groups-settings-content">
 			<Multiselect v-model="allowedGroups"
+				name="allow_groups_use_talk"
 				class="allowed-groups-select"
 				:options="groups"
 				:placeholder="t('spreed', 'Limit using Talk')"
@@ -54,11 +55,12 @@
 				@click="saveAllowedGroups">
 				{{ saveLabelAllowedGroups }}
 			</Button>
-		</p>
+		</div>
 
 		<h3>{{ t('spreed', 'Limit creating a public and group conversation') }}</h3>
-		<p class="allowed-groups-settings-content">
+		<div class="allowed-groups-settings-content">
 			<Multiselect v-model="canStartConversations"
+				name="allow_groups_start_conversation"
 				class="allowed-groups-select"
 				:options="groups"
 				:placeholder="t('spreed', 'Limit creating conversations')"
@@ -78,19 +80,20 @@
 				@click="saveStartConversationsGroups">
 				{{ saveLabelStartConversations }}
 			</Button>
-		</p>
+		</div>
 
 		<h3>{{ t('spreed', 'Limit starting a call') }}</h3>
-		<p>
+		<div class="allowed-groups-settings-content">
 			<Multiselect id="start_calls"
 				v-model="startCalls"
+				name="allow_groups_start_calls"
 				:options="startCallOptions"
 				:placeholder="t('spreed', 'Limit starting calls')"
 				label="label"
 				track-by="value"
 				:disabled="loading || loadingStartCalls"
 				@input="saveStartCalls" />
-		</p>
+		</div>
 		<p>
 			<em>{{ t('spreed', 'When a call has started, everyone with access to the conversation can join the call.') }}</em>
 		</p>
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 0ed9d9df9..84a6b8add 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -26,17 +26,18 @@
 
 		<h3>{{ t('spreed', 'Default notification settings') }}</h3>
 
-		<p>
+		<div class="paragraph">
 			<label for="default_group_notification">{{ t('spreed', 'Default group notification') }}</label>
 			<Multiselect 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" />
-		</p>
+		</div>
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
@@ -143,7 +144,7 @@ h3 {
 	margin-top: 24px;
 }
 
-p {
+div.paragraph {
 	display: flex;
 	align-items: center;