From 959abc1c766a2bbe25ef590126e83f3738f169ec Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Wed, 11 Nov 2020 12:22:22 +0100
Subject: [PATCH 1/2] Add "more settings" menu item to open sidebar settings

Created a new dialog for conversation settings.
It includes the share link settings (aka guest access), the
moderation settings and the SIP settings.

Added notifications after success/error when saving.
Added field disabling logic while saving which provides some visual
feedback.

Refactored various "conversation" computed properties to all use the
same dummy conversation object when the token was not found.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/App.vue                                   |   3 +
 .../ConversationSettingsDialog.vue            |  90 ++++++++
 .../LinkShareSettings.vue                     | 190 +++++++++++++++
 .../ModerationSettings.vue                    | 218 ++++++++++++++++++
 .../ConversationSettings/SipSettings.vue      |  99 ++++++++
 .../Participants/ParticipantsTab.vue          |  11 +-
 src/components/RightSidebar/RightSidebar.vue  |  14 +-
 src/components/TopBar/CallButton.vue          |  12 +-
 src/components/TopBar/TopBar.vue              | 217 ++---------------
 src/store/conversationsStore.js               |  20 +-
 10 files changed, 638 insertions(+), 236 deletions(-)
 create mode 100644 src/components/ConversationSettings/ConversationSettingsDialog.vue
 create mode 100644 src/components/ConversationSettings/LinkShareSettings.vue
 create mode 100644 src/components/ConversationSettings/ModerationSettings.vue
 create mode 100644 src/components/ConversationSettings/SipSettings.vue

diff --git a/src/App.vue b/src/App.vue
index 1796123721f..3114ed0ab22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,6 +34,7 @@
 		<PreventUnload :when="warnLeaving" />
 		<UploadEditor />
 		<SettingsDialog />
+		<ConversationSettingsDialog />
 	</Content>
 </template>
 
@@ -65,6 +66,7 @@ import talkHashCheck from './mixins/talkHashCheck'
 import { generateUrl } from '@nextcloud/router'
 import UploadEditor from './components/UploadEditor'
 import SettingsDialog from './components/SettingsDialog/SettingsDialog'
+import ConversationSettingsDialog from './components/ConversationSettings/ConversationSettingsDialog'
 import '@nextcloud/dialogs/styles/toast.scss'
 
 export default {
@@ -77,6 +79,7 @@ export default {
 		RightSidebar,
 		UploadEditor,
 		SettingsDialog,
+		ConversationSettingsDialog,
 	},
 
 	mixins: [
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
new file mode 100644
index 00000000000..d9bf9baa105
--- /dev/null
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -0,0 +1,90 @@
+<!--
+  - @copyright Copyright (c) 2020 Vincent Petry <vincent@nextcloud.com>
+  -
+  - @author Vincent Petry <vincent@nextcloud.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>
+	<AppSettingsDialog :open.sync="showSettings" :show-navigation="true" first-selected-section="keyboard shortcuts">
+		<AppSettingsSection :title="t('spreed', 'Guests access')"
+			class="app-settings-section">
+			<LinkShareSettings />
+		</AppSettingsSection>
+		<AppSettingsSection
+			v-if="canFullModerate"
+			:title="t('spreed', 'Moderation settings')"
+			class="app-settings-section">
+			<ModerationSettings />
+		</AppSettingsSection>
+	</AppSettingsDialog>
+</template>
+
+<script>
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { PARTICIPANT } from '../../constants'
+import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog'
+import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection'
+import LinkShareSettings from './LinkShareSettings'
+import ModerationSettings from './ModerationSettings'
+
+export default {
+	name: 'ConversationSettingsDialog',
+
+	components: {
+		AppSettingsDialog,
+		AppSettingsSection,
+		LinkShareSettings,
+		ModerationSettings,
+	},
+
+	data() {
+		return {
+			showSettings: false,
+		}
+	},
+
+	computed: {
+		token() {
+			return this.$store.getters.getToken()
+		},
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+		participantType() {
+			return this.conversation.participantType
+		},
+		canFullModerate() {
+			return this.participantType === PARTICIPANT.TYPE.OWNER || this.participantType === PARTICIPANT.TYPE.MODERATOR
+		},
+	},
+
+	mounted() {
+		subscribe('show-conversation-settings', this.handleShowSettings)
+	},
+
+	methods: {
+		handleShowSettings() {
+			this.showSettings = true
+		},
+
+		beforeDestroy() {
+			unsubscribe('show-conversation-settings', this.handleShowSettings)
+		},
+	},
+}
+</script>
diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
new file mode 100644
index 00000000000..45d42c3453e
--- /dev/null
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -0,0 +1,190 @@
+<!--
+  - @copyright Copyright (c) 2020 Vincent Petry <vincent@nextcloud.com>
+  -
+  - @author Vincent Petry <vincent@nextcloud.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>
+	<ul>
+		<h3 class="app-settings-section__hint">
+			{{ t('spreed', 'Allow guests to use a public link connect to join this conversation.') }}
+		</h3>
+		<ActionCheckbox
+			:disabled="isSaving"
+			:checked="isSharedPublicly"
+			@change="toggleGuests">
+			{{ t('spreed', 'Allow guests') }}
+		</ActionCheckbox>
+		<ActionCheckbox
+			v-if="isSharedPublicly"
+			class="share-link-password-checkbox"
+			:disabled="isSaving"
+			:checked="conversation.hasPassword"
+			@check="handlePasswordEnable"
+			@uncheck="handlePasswordDisable">
+			{{ t('spreed', 'Password protection') }}
+		</ActionCheckbox>
+		<ActionInput
+			v-show="showPasswordField"
+			class="share-link-password"
+			icon="icon-password"
+			type="password"
+			:disabled="isSaving"
+			:value.sync="password"
+			autocomplete="new-password"
+			@submit="handleSetNewPassword">
+			{{ t('spreed', 'Enter a password') }}
+		</ActionInput>
+		<ActionButton
+			v-if="isSharedPublicly"
+			:disabled="isSaving"
+			icon="icon-clippy"
+			:close-after-click="true"
+			@click="handleCopyLink">
+			{{ t('spreed', 'Copy public link') }}
+		</ActionButton>
+	</ul>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { CONVERSATION } from '../../constants'
+import {
+	setConversationPassword,
+} from '../../services/conversationsService'
+import { generateUrl } from '@nextcloud/router'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+
+export default {
+	name: 'LinkShareSettings',
+
+	components: {
+		ActionCheckbox,
+		ActionInput,
+		ActionButton,
+	},
+
+	data() {
+		return {
+			// The conversation's password
+			password: '',
+			// Switch for the password-editing operation
+			showPasswordField: false,
+			isSaving: false,
+		}
+	},
+
+	computed: {
+		isSharedPublicly() {
+			return this.conversation.type === CONVERSATION.TYPE.PUBLIC
+		},
+
+		token() {
+			return this.$store.getters.getToken()
+		},
+
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		linkToConversation() {
+			return window.location.protocol + '//' + window.location.host + generateUrl('/call/' + this.token)
+		},
+	},
+
+	methods: {
+		async setConversationPassword(newPassword) {
+			this.isSaving = true
+			try {
+				await setConversationPassword(this.token, newPassword)
+				if (newPassword !== '') {
+					showSuccess(t('spreed', 'Conversation password has been saved'))
+				} else {
+					showSuccess(t('spreed', 'Conversation password has been removed'))
+				}
+			} catch (e) {
+				console.error('Error saving conversation password', e)
+				showError(t('spreed', 'Error occurred while saving conversation password'))
+			}
+			this.isSaving = false
+		},
+
+		async toggleGuests() {
+			const enabled = this.conversation.type !== CONVERSATION.TYPE.PUBLIC
+			this.isSaving = true
+			try {
+				await this.$store.dispatch('toggleGuests', {
+					token: this.token,
+					allowGuests: enabled,
+				})
+
+				if (enabled) {
+					showSuccess(t('spreed', 'You allowed guests'))
+				} else {
+					showSuccess(t('spreed', 'You disallowed guests'))
+				}
+			} catch (e) {
+				if (enabled) {
+					showError(t('spreed', 'Error occurred while allowing guests'))
+				} else {
+					showError(t('spreed', 'Error occurred while disallowing guests'))
+				}
+				console.error('Error toggling guest mode', e)
+			}
+			this.isSaving = false
+		},
+
+		async handlePasswordDisable() {
+			// disable the password protection for the current conversation
+			if (this.conversation.hasPassword) {
+				await this.setConversationPassword('')
+			}
+			this.password = ''
+			this.showPasswordField = false
+		},
+
+		async handlePasswordEnable() {
+			this.showPasswordField = true
+		},
+
+		async handleSetNewPassword() {
+			await this.setConversationPassword(this.password)
+			this.password = ''
+			this.showPasswordField = false
+		},
+
+		async handleCopyLink() {
+			try {
+				await this.$copyText(this.linkToConversation)
+				showSuccess(t('spreed', 'Conversation link copied to clipboard.'))
+			} catch (error) {
+				showError(t('spreed', 'The link could not be copied.'))
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.app-settings-section__hint {
+	color: var(--color-text-lighter);
+	padding: 8px 0;
+}
+</style>
diff --git a/src/components/ConversationSettings/ModerationSettings.vue b/src/components/ConversationSettings/ModerationSettings.vue
new file mode 100644
index 00000000000..6e8dd29ddbe
--- /dev/null
+++ b/src/components/ConversationSettings/ModerationSettings.vue
@@ -0,0 +1,218 @@
+<!--
+  - @copyright Copyright (c) 2020 Vincent Petry <vincent@nextcloud.com>
+  -
+  - @author Vincent Petry <vincent@nextcloud.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>
+	<ul>
+		<h3 class="app-settings-section__hint">
+			{{ t('spreed', 'Locking the conversation prevents anyone to post messages or start calls.') }}
+		</h3>
+		<ActionCheckbox
+			:checked="isReadOnly"
+			:disabled="isReadOnlyStateLoading"
+			@change="toggleReadOnly">
+			{{ t('spreed', 'Lock conversation') }}
+		</ActionCheckbox>
+		<h3 class="app-settings-section__hint">
+			{{ t('spreed', 'Enabling the lobby only allows moderators to post messages.') }}
+		</h3>
+		<ActionCheckbox
+			:disabled="isLobbyStateLoading"
+			:checked="hasLobbyEnabled"
+			@change="toggleLobby">
+			{{ t('spreed', 'Enable lobby') }}
+		</ActionCheckbox>
+		<h3 v-if="hasLobbyEnabled" class="app-settings-section__hint">
+			{{ t('spreed', 'After the time limit the lobby will be automatically disabled.') }}
+		</h3>
+		<ActionInput
+			v-if="hasLobbyEnabled"
+			icon="icon-calendar-dark"
+			type="datetime-local"
+			v-bind="dateTimePickerAttrs"
+			:value="lobbyTimer"
+			:disabled="isLobbyTimerLoading || isLobbyStateLoading"
+			@change="setLobbyTimer">
+			{{ t('spreed', 'Start time (optional)') }}
+		</ActionInput>
+		<SipSettings v-if="canUserEnableSIP" />
+	</ul>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { CONVERSATION, WEBINAR } from '../../constants'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import SipSettings from './SipSettings'
+
+export default {
+	name: 'ModerationSettings',
+
+	components: {
+		ActionCheckbox,
+		ActionInput,
+		SipSettings,
+	},
+
+	data() {
+		return {
+			isReadOnlyStateLoading: false,
+			isLobbyStateLoading: false,
+			isLobbyTimerLoading: false,
+		}
+	},
+
+	computed: {
+		canUserEnableSIP() {
+			return this.conversation.canEnableSIP
+		},
+
+		token() {
+			return this.$store.getters.getToken()
+		},
+
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		isReadOnly() {
+			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
+		},
+
+		hasLobbyEnabled() {
+			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
+		},
+
+		lobbyTimer() {
+			// A timestamp of 0 means that there is no lobby, but it would be
+			// interpreted as the Unix epoch by the DateTimePicker.
+			if (this.conversation.lobbyTimer === 0) {
+				return undefined
+			}
+
+			// PHP timestamp is second-based; JavaScript timestamp is
+			// millisecond based.
+			return new Date(this.conversation.lobbyTimer * 1000)
+		},
+
+		dateTimePickerAttrs() {
+			return {
+				format: 'YYYY-MM-DD HH:mm',
+				firstDayOfWeek: window.firstDay + 1, // Provided by server
+				lang: {
+					days: window.dayNamesShort, // Provided by server
+					months: window.monthNamesShort, // Provided by server
+				},
+				// Do not update the value until the confirm button has been
+				// pressed. Otherwise it would not be possible to set a lobby
+				// for today, because as soon as the day is selected the lobby
+				// timer would be set, but as no time was set at that point the
+				// lobby timer would be set to today at 00:00, which would
+				// disable the lobby due to being in the past.
+				confirm: true,
+			}
+		},
+	},
+
+	methods: {
+		async toggleReadOnly() {
+			const newReadOnly = this.isReadOnly ? CONVERSATION.STATE.READ_WRITE : CONVERSATION.STATE.READ_ONLY
+			this.isReadOnlyStateLoading = true
+			try {
+				await this.$store.dispatch('setReadOnlyState', {
+					token: this.token,
+					readOnly: newReadOnly,
+				})
+				if (newReadOnly) {
+					showSuccess(t('spreed', 'You locked the conversation'))
+				} else {
+					showSuccess(t('spreed', 'You unlocked the conversation'))
+				}
+			} catch (e) {
+				if (newReadOnly) {
+					console.error('Error occurred when locking the conversation', e)
+					showError(t('spreed', 'Error occurred when locking the conversation'))
+				} else {
+					console.error('Error updating read-only state', e)
+					showError(t('spreed', 'Error occurred when unlocking the conversation'))
+				}
+			}
+			this.isReadOnlyStateLoading = false
+		},
+
+		async toggleLobby() {
+			const newLobbyState = this.conversation.lobbyState !== WEBINAR.LOBBY.NON_MODERATORS
+			this.isLobbyStateLoading = true
+			try {
+				await this.$store.dispatch('toggleLobby', {
+					token: this.token,
+					enableLobby: newLobbyState,
+				})
+				if (newLobbyState) {
+					showSuccess(t('spreed', 'You restricted the conversation to moderators'))
+				} else {
+					showSuccess(t('spreed', 'You opened the conversation to everyone'))
+				}
+			} catch (e) {
+				if (newLobbyState) {
+					console.error('Error occurred when restricting the conversation to moderator', e)
+					showError(t('spreed', 'Error occurred when restricting the conversation to moderator'))
+				} else {
+					console.error('Error occurred when opening the conversation to everyone', e)
+					showError(t('spreed', 'Error occurred when opening the conversation to everyone'))
+				}
+			}
+			this.isLobbyStateLoading = false
+		},
+
+		async setLobbyTimer(date) {
+			this.isLobbyTimerLoading = true
+
+			let timestamp = 0
+			if (date) {
+				// PHP timestamp is second-based; JavaScript timestamp is
+				// millisecond based.
+				timestamp = date.getTime() / 1000
+			}
+
+			try {
+				await this.$store.dispatch('setLobbyTimer', {
+					token: this.token,
+					timestamp: timestamp,
+				})
+				showSuccess(t('spreed', 'Start time has been updated'))
+			} catch (e) {
+				console.error('Error occurred while updating start time', e)
+				showError(t('spreed', 'Error occurred while updating start time'))
+			}
+
+			this.isLobbyTimerLoading = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.app-settings-section__hint {
+	color: var(--color-text-lighter);
+	padding: 8px 0;
+}
+</style>
diff --git a/src/components/ConversationSettings/SipSettings.vue b/src/components/ConversationSettings/SipSettings.vue
new file mode 100644
index 00000000000..d6c13ea4954
--- /dev/null
+++ b/src/components/ConversationSettings/SipSettings.vue
@@ -0,0 +1,99 @@
+<!--
+  - @copyright Copyright (c) 2020 Vincent Petry <vincent@nextcloud.com>
+  -
+  - @author Vincent Petry <vincent@nextcloud.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>
+	<ul>
+		<h3 class="app-settings-section__hint">
+			{{ t('spreed', 'Allow participants to join from a phone.') }}
+		</h3>
+		<ActionCheckbox
+			:checked="hasSIPEnabled"
+			:disabled="isSipLoading"
+			@change="toggleSIPEnabled">
+			{{ t('spreed', 'Enable SIP dial-in') }}
+		</ActionCheckbox>
+	</ul>
+</template>
+
+<script>
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { WEBINAR } from '../../constants'
+import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
+
+export default {
+	name: 'SipSettings',
+
+	components: {
+		ActionCheckbox,
+	},
+
+	data() {
+		return {
+			isSipLoading: false,
+		}
+	},
+
+	computed: {
+		token() {
+			return this.$store.getters.getToken()
+		},
+
+		conversation() {
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
+		},
+
+		hasSIPEnabled() {
+			return this.conversation.sipEnabled === WEBINAR.SIP.ENABLED
+		},
+	},
+
+	methods: {
+		async toggleSIPEnabled(checked) {
+			try {
+				await this.$store.dispatch('setSIPEnabled', {
+					token: this.token,
+					state: checked ? WEBINAR.SIP.ENABLED : WEBINAR.SIP.DISABLED,
+				})
+				if (checked) {
+					showSuccess(t('spreed', 'SIP dial-in is now enabled'))
+				} else {
+					showSuccess(t('spreed', 'SIP dial-in is now disabled'))
+				}
+			} catch (e) {
+				// TODO check "precondition failed"
+				if (checked) {
+					console.error('Error occurred when enabling SIP dial-in', e)
+					showError(t('spreed', 'Error occurred when enabling SIP dial-in'))
+				} else {
+					console.error('Error occurred when disabling SIP dial-in', e)
+					showError(t('spreed', 'Error occurred when disabling SIP dial-in'))
+				}
+			}
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.app-settings-section__hint {
+	color: var(--color-text-lighter);
+	padding: 8px 0;
+}
+</style>
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index 24970663212..575b82e1363 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -119,16 +119,7 @@ export default {
 			return this.$store.getters.getToken()
 		},
 		conversation() {
-			if (this.$store.getters.conversation(this.token)) {
-				return this.$store.getters.conversation(this.token)
-			}
-			return {
-				token: '',
-				displayName: '',
-				isFavorite: false,
-				type: CONVERSATION.TYPE.PUBLIC,
-				lobbyState: WEBINAR.LOBBY.NONE,
-			}
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 		isSearching() {
 			return this.searchText !== ''
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index fc1632852e7..354fc3d97d5 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -143,19 +143,7 @@ export default {
 			return this.$store.getters.getToken()
 		},
 		conversation() {
-			if (this.$store.getters.conversation(this.token)) {
-				return this.$store.getters.conversation(this.token)
-			}
-			return {
-				token: '',
-				displayName: '',
-				isFavorite: false,
-				hasPassword: false,
-				type: CONVERSATION.TYPE.PUBLIC,
-				lobbyState: WEBINAR.LOBBY.NONE,
-				lobbyTimer: 0,
-				attendeePin: '',
-			}
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
 		getUserId() {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 4ffe0b7ed14..2d8eb5657e3 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -84,17 +84,7 @@ export default {
 		},
 
 		conversation() {
-			if (this.$store.getters.conversation(this.token)) {
-				return this.$store.getters.conversation(this.token)
-			}
-			return {
-				participantFlags: PARTICIPANT.CALL_FLAG.DISCONNECTED,
-				participantType: PARTICIPANT.TYPE.USER,
-				readOnly: CONVERSATION.STATE.READ_ONLY,
-				hasCall: false,
-				canStartCall: false,
-				lobbyState: WEBINAR.LOBBY.NONE,
-			}
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 
 		isBlockedByLobby() {
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 1955b70b846..edd6c096925 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -81,14 +81,6 @@
 					@click="handleRenameConversation">
 					{{ t('spreed', 'Rename conversation') }}
 				</ActionButton>
-				<ActionSeparator
-					v-if="canFullModerate" />
-				<ActionCheckbox
-					v-if="canFullModerate"
-					:checked="isSharedPublicly"
-					@change="toggleGuests">
-					{{ t('spreed', 'Share link') }}
-				</ActionCheckbox>
 			</template>
 			<ActionButton
 				v-if="!isOneToOneConversation"
@@ -97,56 +89,6 @@
 				@click="handleCopyLink">
 				{{ t('spreed', 'Copy link') }}
 			</ActionButton>
-			<!-- password -->
-			<template
-				v-if="showModerationOptions">
-				<ActionCheckbox
-					v-if="isSharedPublicly"
-					class="share-link-password-checkbox"
-					:checked="isPasswordProtected"
-					@check="handlePasswordEnable"
-					@uncheck="handlePasswordDisable">
-					{{ t('spreed', 'Password protection') }}
-				</ActionCheckbox>
-				<ActionInput
-					v-show="isEditingPassword"
-					class="share-link-password"
-					icon="icon-password"
-					type="password"
-					:value.sync="password"
-					autocomplete="new-password"
-					@submit="handleSetNewPassword">
-					{{ t('spreed', 'Enter a password') }}
-				</ActionInput>
-				<ActionSeparator />
-				<ActionCheckbox
-					:checked="isReadOnly"
-					:disabled="readOnlyStateLoading"
-					@change="toggleReadOnly">
-					{{ t('spreed', 'Lock conversation') }}
-				</ActionCheckbox>
-				<ActionCheckbox
-					:checked="hasLobbyEnabled"
-					@change="toggleLobby">
-					{{ t('spreed', 'Enable lobby') }}
-				</ActionCheckbox>
-				<ActionInput
-					v-if="hasLobbyEnabled"
-					icon="icon-calendar-dark"
-					type="datetime-local"
-					v-bind="dateTimePickerAttrs"
-					:value="lobbyTimer"
-					:disabled="lobbyTimerLoading"
-					@change="setLobbyTimer">
-					{{ t('spreed', 'Start time (optional)') }}
-				</ActionInput>
-				<ActionCheckbox
-					v-if="canUserEnableSIP"
-					:checked="hasSIPEnabled"
-					@change="toggleSIPEnabled">
-					{{ t('spreed', 'Enable SIP dial-in') }}
-				</ActionCheckbox>
-			</template>
 			<template
 				v-if="showModerationOptions && canFullModerate && isInCall">
 				<ActionSeparator />
@@ -157,6 +99,15 @@
 					{{ t('spreed', 'Mute others') }}
 				</ActionButton>
 			</template>
+			<ActionSeparator
+				v-if="showModerationOptions" />
+			<ActionButton
+				v-if="showModerationOptions"
+				icon="icon-settings"
+				:close-after-click="true"
+				@click="showConversationSettings">
+				{{ t('spreed', 'More settings') }}
+			</ActionButton>
 		</Actions>
 		<Actions v-if="showOpenSidebarButton"
 			class="top-bar__button"
@@ -176,16 +127,12 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import CallButton from './CallButton'
 import { EventBus } from '../../services/EventBus'
 import BrowserStorage from '../../services/BrowserStorage'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
-import { CONVERSATION, WEBINAR, PARTICIPANT } from '../../constants'
-import {
-	setConversationPassword,
-} from '../../services/conversationsService'
+import { CONVERSATION, PARTICIPANT } from '../../constants'
 import { generateUrl } from '@nextcloud/router'
 import { callParticipantCollection } from '../../utils/webrtc/index'
+import { emit } from '@nextcloud/event-bus'
 
 export default {
 	name: 'TopBar',
@@ -193,8 +140,6 @@ export default {
 	components: {
 		ActionButton,
 		Actions,
-		ActionCheckbox,
-		ActionInput,
 		ActionLink,
 		CallButton,
 		Popover,
@@ -212,12 +157,6 @@ export default {
 		return {
 			showLayoutHint: false,
 			hintDismissed: false,
-			// The conversation's password
-			password: '',
-			// Switch for the password-editing operation
-			isEditingPassword: false,
-			lobbyTimerLoading: false,
-			readOnlyStateLoading: false,
 		}
 	},
 
@@ -297,29 +236,11 @@ export default {
 		showModerationOptions() {
 			return !this.isOneToOneConversation && this.canModerate
 		},
-		canUserEnableSIP() {
-			return this.conversation.canEnableSIP
-		},
 		token() {
 			return this.$store.getters.getToken()
 		},
-		isSharedPublicly() {
-			return this.conversation.type === CONVERSATION.TYPE.PUBLIC
-		},
 		conversation() {
-			if (this.$store.getters.conversation(this.token)) {
-				return this.$store.getters.conversation(this.token)
-			}
-			return {
-				token: '',
-				displayName: '',
-				isFavorite: false,
-				hasPassword: false,
-				canEnableSIP: false,
-				type: CONVERSATION.TYPE.PUBLIC,
-				lobbyState: WEBINAR.LOBBY.NONE,
-				lobbyTimer: 0,
-			}
+			return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
 		},
 		linkToConversation() {
 			if (this.token !== '') {
@@ -332,47 +253,7 @@ export default {
 			return this.conversation.type === CONVERSATION.TYPE.GROUP
 				|| this.conversation.type === CONVERSATION.TYPE.PUBLIC
 		},
-		hasLobbyEnabled() {
-			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
-		},
-		isReadOnly() {
-			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
-		},
-		isPasswordProtected() {
-			return this.conversation.hasPassword
-		},
-		lobbyTimer() {
-			// A timestamp of 0 means that there is no lobby, but it would be
-			// interpreted as the Unix epoch by the DateTimePicker.
-			if (this.conversation.lobbyTimer === 0) {
-				return undefined
-			}
 
-			// PHP timestamp is second-based; JavaScript timestamp is
-			// millisecond based.
-			return new Date(this.conversation.lobbyTimer * 1000)
-		},
-
-		dateTimePickerAttrs() {
-			return {
-				format: 'YYYY-MM-DD HH:mm',
-				firstDayOfWeek: window.firstDay + 1, // Provided by server
-				lang: {
-					days: window.dayNamesShort, // Provided by server
-					months: window.monthNamesShort, // Provided by server
-				},
-				// Do not update the value until the confirm button has been
-				// pressed. Otherwise it would not be possible to set a lobby
-				// for today, because as soon as the day is selected the lobby
-				// timer would be set, but as no time was set at that point the
-				// lobby timer would be set to today at 00:00, which would
-				// disable the lobby due to being in the past.
-				confirm: true,
-			}
-		},
-		hasSIPEnabled() {
-			return this.conversation.sipEnabled === WEBINAR.SIP.ENABLED
-		},
 		isGrid() {
 			return this.$store.getters.isGrid
 		},
@@ -402,6 +283,10 @@ export default {
 			BrowserStorage.setItem('sidebarOpen', 'true')
 		},
 
+		showConversationSettings() {
+			emit('show-conversation-settings')
+		},
+
 		fullScreenChanged() {
 			this.$store.dispatch(
 				'setIsFullscreen',
@@ -450,77 +335,7 @@ export default {
 			this.$store.dispatch('selectedVideoPeerId', null)
 			this.showLayoutHint = false
 		},
-		async toggleGuests() {
-			await this.$store.dispatch('toggleGuests', {
-				token: this.token,
-				allowGuests: this.conversation.type !== CONVERSATION.TYPE.PUBLIC,
-			})
-		},
-
-		async toggleLobby() {
-			await this.$store.dispatch('toggleLobby', {
-				token: this.token,
-				enableLobby: this.conversation.lobbyState !== WEBINAR.LOBBY.NON_MODERATORS,
-			})
-		},
-
-		async toggleSIPEnabled(checked) {
-			try {
-				await this.$store.dispatch('setSIPEnabled', {
-					token: this.token,
-					state: checked ? WEBINAR.SIP.ENABLED : WEBINAR.SIP.DISABLED,
-				})
-			} catch (e) {
-				// TODO check "precondition failed"
-				// TODO showError()
-				console.error(e)
-			}
-		},
-
-		async setLobbyTimer(date) {
-			this.lobbyTimerLoading = true
 
-			let timestamp = 0
-			if (date) {
-				// PHP timestamp is second-based; JavaScript timestamp is
-				// millisecond based.
-				timestamp = date.getTime() / 1000
-			}
-
-			await this.$store.dispatch('setLobbyTimer', {
-				token: this.token,
-				timestamp: timestamp,
-			})
-
-			this.lobbyTimerLoading = false
-		},
-
-		async toggleReadOnly() {
-			this.readOnlyStateLoading = true
-			await this.$store.dispatch('setReadOnlyState', {
-				token: this.token,
-				readOnly: this.isReadOnly ? CONVERSATION.STATE.READ_WRITE : CONVERSATION.STATE.READ_ONLY,
-			})
-			this.readOnlyStateLoading = false
-		},
-
-		async handlePasswordDisable() {
-			// disable the password protection for the current conversation
-			if (this.conversation.hasPassword) {
-				await setConversationPassword(this.token, '')
-			}
-			this.password = ''
-			this.isEditingPassword = false
-		},
-		async handlePasswordEnable() {
-			this.isEditingPassword = true
-		},
-
-		async handleSetNewPassword() {
-			await setConversationPassword(this.token, this.password)
-			this.password = ''
-			this.isEditingPassword = false
-		},
 		async handleCopyLink() {
 			try {
 				await this.$copyText(this.linkToConversation)
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index 79390792203..ddb556051f3 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -31,7 +31,24 @@ import {
 	setConversationName,
 } from '../services/conversationsService'
 import { getCurrentUser } from '@nextcloud/auth'
-import { CONVERSATION, WEBINAR } from '../constants'
+import { CONVERSATION, WEBINAR, PARTICIPANT } from '../constants'
+
+const DUMMY_CONVERSATION = {
+	token: '',
+	displayName: '',
+	isFavorite: false,
+	hasPassword: false,
+	canEnableSIP: false,
+	type: CONVERSATION.TYPE.PUBLIC,
+	participantFlags: PARTICIPANT.CALL_FLAG.DISCONNECTED,
+	participantType: PARTICIPANT.TYPE.USER,
+	readOnly: CONVERSATION.STATE.READ_ONLY,
+	hasCall: false,
+	canStartCall: false,
+	lobbyState: WEBINAR.LOBBY.NONE,
+	lobbyTimer: 0,
+	attendeePin: '',
+}
 
 const getDefaultState = () => {
 	return {
@@ -55,6 +72,7 @@ const getters = {
 	 * @returns {object} The conversation object
 	 */
 	conversation: state => token => state.conversations[token],
+	dummyConversation: state => Object.assign({}, DUMMY_CONVERSATION),
 }
 
 const mutations = {

From 828af670a6d49811b0faddb569b8a189fc11e2d6 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Fri, 20 Nov 2020 12:46:38 +0100
Subject: [PATCH 2/2] Replace Action components with plain HTML inputs

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../ConversationSettingsDialog.vue            |  42 +++++-
 .../LinkShareSettings.vue                     | 141 +++++++++++-------
 .../ModerationSettings.vue                    | 132 ++++++++++------
 .../ConversationSettings/SipSettings.vue      |  28 ++--
 .../Participants/ParticipantsTab.vue          |   2 +-
 5 files changed, 227 insertions(+), 118 deletions(-)

diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index d9bf9baa105..bc2f8276b1b 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -20,14 +20,19 @@
 -->
 
 <template>
-	<AppSettingsDialog :open.sync="showSettings" :show-navigation="true" first-selected-section="keyboard shortcuts">
-		<AppSettingsSection :title="t('spreed', 'Guests access')"
+	<AppSettingsDialog
+		role="dialog"
+		:aria-label="t('spreed', 'Conversation settings')"
+		:open.sync="showSettings"
+		:show-navigation="false">
+		<AppSettingsSection
+			:title="t('spreed', 'Guests access')"
 			class="app-settings-section">
-			<LinkShareSettings />
+			<LinkShareSettings ref="linkShareSettings" />
 		</AppSettingsSection>
 		<AppSettingsSection
 			v-if="canFullModerate"
-			:title="t('spreed', 'Moderation settings')"
+			:title="t('spreed', 'Meeting settings')"
 			class="app-settings-section">
 			<ModerationSettings />
 		</AppSettingsSection>
@@ -80,6 +85,9 @@ export default {
 	methods: {
 		handleShowSettings() {
 			this.showSettings = true
+			this.$nextTick(() => {
+				this.$refs.linkShareSettings.focus()
+			})
 		},
 
 		beforeDestroy() {
@@ -88,3 +96,29 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+::v-deep button.icon {
+	height: 32px;
+	width: 32px;
+	display: inline-block;
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+::v-deep .app-settings__content {
+	width: 450px;
+}
+
+::v-deep .app-settings-section__hint {
+	color: var(--color-text-lighter);
+	padding: 8px 0;
+}
+
+::v-deep .app-settings-subsection {
+	margin-top: 25px;
+
+	&:first-child {
+		margin-top: 0px;
+	}
+}
+</style>
diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
index 45d42c3453e..0c769888314 100644
--- a/src/components/ConversationSettings/LinkShareSettings.vue
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -20,45 +20,75 @@
 -->
 
 <template>
-	<ul>
-		<h3 class="app-settings-section__hint">
-			{{ t('spreed', 'Allow guests to use a public link connect to join this conversation.') }}
-		</h3>
-		<ActionCheckbox
-			:disabled="isSaving"
-			:checked="isSharedPublicly"
-			@change="toggleGuests">
-			{{ t('spreed', 'Allow guests') }}
-		</ActionCheckbox>
-		<ActionCheckbox
-			v-if="isSharedPublicly"
-			class="share-link-password-checkbox"
-			:disabled="isSaving"
-			:checked="conversation.hasPassword"
-			@check="handlePasswordEnable"
-			@uncheck="handlePasswordDisable">
-			{{ t('spreed', 'Password protection') }}
-		</ActionCheckbox>
-		<ActionInput
-			v-show="showPasswordField"
-			class="share-link-password"
-			icon="icon-password"
-			type="password"
-			:disabled="isSaving"
-			:value.sync="password"
-			autocomplete="new-password"
-			@submit="handleSetNewPassword">
-			{{ t('spreed', 'Enter a password') }}
-		</ActionInput>
-		<ActionButton
-			v-if="isSharedPublicly"
-			:disabled="isSaving"
-			icon="icon-clippy"
-			:close-after-click="true"
-			@click="handleCopyLink">
-			{{ t('spreed', 'Copy public link') }}
-		</ActionButton>
-	</ul>
+	<div>
+		<div class="app-settings-subsection">
+			<div id="link_share_settings_hint" class="app-settings-section__hint">
+				{{ t('spreed', 'Allow guests to use a public link to join this conversation.') }}
+			</div>
+			<div>
+				<input id="link_share_settings_toggle_guests"
+					ref="toggleGuests"
+					aria-describedby="link_share_settings_hint"
+					type="checkbox"
+					class="checkbox"
+					name="link_share_settings_toggle_guests"
+					:checked="isSharedPublicly"
+					:disabled="isSaving"
+					@change="toggleGuests">
+				<label for="link_share_settings_toggle_guests">{{ t('spreed', 'Allow guests') }}</label>
+			</div>
+		</div>
+		<div class="app-settings-subsection">
+			<div id="link_share_settings_password_hint" class="app-settings-section__hint">
+				{{ t('spreed', 'Set a password to restrict who can use the public link.') }}
+			</div>
+			<div v-show="isSharedPublicly">
+				<input id="link_share_settings_toggle_password"
+					ref="togglePassword"
+					aria-describedby="link_share_settings_password_hint"
+					type="checkbox"
+					class="checkbox"
+					:checked="conversation.hasPassword"
+					name="link_share_settings_toggle_password"
+					:disabled="isSaving"
+					@change="togglePassword">
+				<label for="link_share_settings_toggle_password">{{ t('spreed', 'Password protection') }}</label>
+			</div>
+		</div>
+		<div class="app-settings-subsection">
+			<div v-show="showPasswordField">
+				<form
+					:disabled="isSaving"
+					@submit.prevent="handleSetNewPassword">
+					<span class="icon-password" />
+					<input
+						id="link_share_settings_link_password"
+						ref="passwordField"
+						v-model="password"
+						aria-describedby="link_share_settings_password_hint"
+						type="password"
+						class="checkbox"
+						autocomplete="new-password"
+						name="link_share_settings_link_password"
+						:placeholder="t('spreed', 'Enter a password')"
+						:disabled="isSaving">
+					<button
+						id="link_share_settings_link_password_submit"
+						:aria-label="t('spreed', 'Save password')"
+						:disabled="isSaving"
+						type="submit"
+						class="icon icon-confirm-fade" />
+				</form>
+			</div>
+		</div>
+		<div class="app-settings-subsection">
+			<button
+				ref="copyLinkButton"
+				@click.prevent="handleCopyLink">
+				<span class="icon icon-clippy" />{{ t('spreed', 'Copy public link') }}
+			</button>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -68,19 +98,10 @@ import {
 	setConversationPassword,
 } from '../../services/conversationsService'
 import { generateUrl } from '@nextcloud/router'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 
 export default {
 	name: 'LinkShareSettings',
 
-	components: {
-		ActionCheckbox,
-		ActionInput,
-		ActionButton,
-	},
-
 	data() {
 		return {
 			// The conversation's password
@@ -110,6 +131,12 @@ export default {
 	},
 
 	methods: {
+		focus() {
+			this.$nextTick(() => {
+				this.$refs.toggleGuests.focus()
+			})
+		},
+
 		async setConversationPassword(newPassword) {
 			this.isSaving = true
 			try {
@@ -151,6 +178,17 @@ export default {
 			this.isSaving = false
 		},
 
+		async togglePassword() {
+			if (this.$refs.togglePassword.checked) {
+				this.showPasswordField = true
+				this.$refs.passwordField.focus()
+				await this.handlePasswordEnable()
+			} else {
+				this.showPasswordField = false
+				await this.handlePasswordDisable()
+			}
+		},
+
 		async handlePasswordDisable() {
 			// disable the password protection for the current conversation
 			if (this.conversation.hasPassword) {
@@ -177,14 +215,15 @@ export default {
 			} catch (error) {
 				showError(t('spreed', 'The link could not be copied.'))
 			}
+			// workaround for https://github.com/Inndy/vue-clipboard2/issues/105
+			this.$refs.copyLinkButton.focus()
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.app-settings-section__hint {
-	color: var(--color-text-lighter);
-	padding: 8px 0;
+.icon-clippy {
+	margin-right: 10px;
 }
 </style>
diff --git a/src/components/ConversationSettings/ModerationSettings.vue b/src/components/ConversationSettings/ModerationSettings.vue
index 6e8dd29ddbe..e49305e11b1 100644
--- a/src/components/ConversationSettings/ModerationSettings.vue
+++ b/src/components/ConversationSettings/ModerationSettings.vue
@@ -20,55 +20,87 @@
 -->
 
 <template>
-	<ul>
-		<h3 class="app-settings-section__hint">
-			{{ t('spreed', 'Locking the conversation prevents anyone to post messages or start calls.') }}
-		</h3>
-		<ActionCheckbox
-			:checked="isReadOnly"
-			:disabled="isReadOnlyStateLoading"
-			@change="toggleReadOnly">
-			{{ t('spreed', 'Lock conversation') }}
-		</ActionCheckbox>
-		<h3 class="app-settings-section__hint">
-			{{ t('spreed', 'Enabling the lobby only allows moderators to post messages.') }}
-		</h3>
-		<ActionCheckbox
-			:disabled="isLobbyStateLoading"
-			:checked="hasLobbyEnabled"
-			@change="toggleLobby">
-			{{ t('spreed', 'Enable lobby') }}
-		</ActionCheckbox>
-		<h3 v-if="hasLobbyEnabled" class="app-settings-section__hint">
-			{{ t('spreed', 'After the time limit the lobby will be automatically disabled.') }}
-		</h3>
-		<ActionInput
-			v-if="hasLobbyEnabled"
-			icon="icon-calendar-dark"
-			type="datetime-local"
-			v-bind="dateTimePickerAttrs"
-			:value="lobbyTimer"
-			:disabled="isLobbyTimerLoading || isLobbyStateLoading"
-			@change="setLobbyTimer">
-			{{ t('spreed', 'Start time (optional)') }}
-		</ActionInput>
+	<div>
+		<div class="app-settings-subsection">
+			<div id="moderation_settings_lock_conversation_hint" class="app-settings-section__hint">
+				{{ t('spreed', 'Locking the conversation prevents anyone to post messages or start calls.') }}
+			</div>
+			<div>
+				<input id="moderation_settings_lock_conversation_checkbox"
+					aria-describedby="moderation_settings_lock_conversation_hint"
+					type="checkbox"
+					class="checkbox"
+					name="moderation_settings_lock_conversation_checkbox"
+					:checked="isReadOnly"
+					:disabled="isReadOnlyStateLoading"
+					@change="toggleReadOnly">
+				<label for="moderation_settings_lock_conversation_checkbox">{{ t('spreed', 'Lock conversation') }}</label>
+			</div>
+		</div>
+		<div class="app-settings-subsection">
+			<div id="moderation_settings_enable_lobby_hint" class="app-settings-section__hint">
+				{{ t('spreed', 'Enabling the lobby only allows moderators to post messages.') }}
+			</div>
+			<div>
+				<input id="moderation_settings_enable_lobby_checkbox"
+					aria-describedby="moderation_settings_enable_lobby_hint"
+					type="checkbox"
+					class="checkbox"
+					name="moderation_settings_enable_lobby_checkbox"
+					:checked="hasLobbyEnabled"
+					:disabled="isLobbyStateLoading"
+					@change="toggleLobby">
+				<label for="moderation_settings_enable_lobby_checkbox">{{ t('spreed', 'Enable lobby') }}</label>
+			</div>
+		</div>
+		<div class="app-settings-subsection">
+			<div v-if="hasLobbyEnabled" id="moderation_settings_lobby_timer_hint" class="app-settings-section__hint">
+				{{ t('spreed', 'After the time limit the lobby will be automatically disabled.') }}
+			</div>
+			<div v-if="hasLobbyEnabled">
+				<form
+					:disabled="lobbyTimerFieldDisabled"
+					@submit.prevent="saveLobbyTimer">
+					<span class="icon-calendar-dark" />
+					<div>
+						<label for="moderation_settings_lobby_timer_field">{{ t('spreed', 'Meeting start time') }}</label>
+					</div>
+					<div>
+						<DatetimePicker
+							id="moderation_settings_lobby_timer_field"
+							aria-describedby="moderation_settings_lobby_timer_hint"
+							:value="lobbyTimer"
+							:placeholder="t('spreed', 'Start time (optional)')"
+							:disabled="lobbyTimerFieldDisabled"
+							type="datetime"
+							:input-class="['mx-input', { focusable: !lobbyTimerFieldDisabled }]"
+							v-bind="dateTimePickerAttrs"
+							@change="setNewLobbyTimer" />
+						<button
+							id="moderation_settings_lobby_timer_submit"
+							:aria-label="t('spreed', 'Save meeting start time')"
+							:disabled="lobbyTimerFieldDisabled"
+							type="submit"
+							class="icon icon-confirm-fade" />
+					</div>
+				</form>
+			</div>
+		</div>
 		<SipSettings v-if="canUserEnableSIP" />
-	</ul>
+	</div>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION, WEBINAR } from '../../constants'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
-import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker'
 import SipSettings from './SipSettings'
 
 export default {
 	name: 'ModerationSettings',
 
 	components: {
-		ActionCheckbox,
-		ActionInput,
+		DatetimePicker,
 		SipSettings,
 	},
 
@@ -77,6 +109,7 @@ export default {
 			isReadOnlyStateLoading: false,
 			isLobbyStateLoading: false,
 			isLobbyTimerLoading: false,
+			newLobbyTimer: null,
 		}
 	},
 
@@ -101,6 +134,10 @@ export default {
 			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
 		},
 
+		lobbyTimerFieldDisabled() {
+			return this.isLobbyStateLoading || this.isLobbyTimerLoading
+		},
+
 		lobbyTimer() {
 			// A timestamp of 0 means that there is no lobby, but it would be
 			// interpreted as the Unix epoch by the DateTimePicker.
@@ -183,9 +220,7 @@ export default {
 			this.isLobbyStateLoading = false
 		},
 
-		async setLobbyTimer(date) {
-			this.isLobbyTimerLoading = true
-
+		setNewLobbyTimer(date) {
 			let timestamp = 0
 			if (date) {
 				// PHP timestamp is second-based; JavaScript timestamp is
@@ -193,10 +228,16 @@ export default {
 				timestamp = date.getTime() / 1000
 			}
 
+			this.newLobbyTimer = timestamp
+		},
+
+		async saveLobbyTimer() {
+			this.isLobbyTimerLoading = true
+
 			try {
 				await this.$store.dispatch('setLobbyTimer', {
 					token: this.token,
-					timestamp: timestamp,
+					timestamp: this.newLobbyTimer,
 				})
 				showSuccess(t('spreed', 'Start time has been updated'))
 			} catch (e) {
@@ -211,8 +252,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-settings-section__hint {
-	color: var(--color-text-lighter);
-	padding: 8px 0;
+::v-deep .mx-input {
+	margin: 0;
+}
+
+input[type=password] {
+	width: 200px;
 }
 </style>
diff --git a/src/components/ConversationSettings/SipSettings.vue b/src/components/ConversationSettings/SipSettings.vue
index d6c13ea4954..f8c8c14a5ad 100644
--- a/src/components/ConversationSettings/SipSettings.vue
+++ b/src/components/ConversationSettings/SipSettings.vue
@@ -20,31 +20,29 @@
 -->
 
 <template>
-	<ul>
-		<h3 class="app-settings-section__hint">
+	<div class="app-settings-subsection">
+		<div id="sip_settings_hint" class="app-settings-section__hint">
 			{{ t('spreed', 'Allow participants to join from a phone.') }}
-		</h3>
-		<ActionCheckbox
+		</div>
+		<input id="sip_settings_checkbox"
+			aria-describedby="sip_settings_hint"
+			type="checkbox"
+			class="checkbox"
+			name="sip_settings_checkbox"
 			:checked="hasSIPEnabled"
 			:disabled="isSipLoading"
 			@change="toggleSIPEnabled">
-			{{ t('spreed', 'Enable SIP dial-in') }}
-		</ActionCheckbox>
-	</ul>
+		<label for="sip_settings_checkbox">{{ t('spreed', 'Enable SIP dial-in') }}</label>
+	</div>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { WEBINAR } from '../../constants'
-import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 
 export default {
 	name: 'SipSettings',
 
-	components: {
-		ActionCheckbox,
-	},
-
 	data() {
 		return {
 			isSipLoading: false,
@@ -91,9 +89,3 @@ export default {
 	},
 }
 </script>
-<style lang="scss" scoped>
-.app-settings-section__hint {
-	color: var(--color-text-lighter);
-	padding: 8px 0;
-}
-</style>
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index 575b82e1363..7af763b7efb 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -48,7 +48,7 @@ import CurrentParticipants from './CurrentParticipants/CurrentParticipants'
 import SearchBox from '../../LeftSidebar/SearchBox/SearchBox'
 import debounce from 'debounce'
 import { EventBus } from '../../../services/EventBus'
-import { CONVERSATION, PARTICIPANT, WEBINAR } from '../../../constants'
+import { PARTICIPANT } from '../../../constants'
 import { searchPossibleConversations } from '../../../services/conversationsService'
 import {
 	addParticipant,