Merge pull request #32557 from nextcloud/cleanup/dav-admin-settings

Modernize the dav admin settings

apps/dav/src/views/CalDavSettings.vue

@@ -1,20 +1,17 @@
 <template>
-	<div class="section">
-		<h2>{{ $t('dav', 'Calendar server') }}</h2>
+	<SettingsSection :title="$t('dav', 'Calendar server')"
+		:doc-url="userSyncCalendarsDocUrl">
 		<!-- Can use v-html as:
 			- $t passes the translated string through DOMPurify.sanitize,
 			- replacement strings are not user-controlled. -->
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="hint" />
 		<p>
-			<input id="caldavSendInvitations"
-				v-model="sendInvitations"
-				type="checkbox"
-				class="checkbox">
-			<label for="caldavSendInvitations">
+			<CheckboxRadioSwitch id="caldavSendInvitations"
+				:checked.sync="sendInvitations"
+				type="switch">
 				{{ $t('dav', 'Send invitations to attendees') }}
-			</label>
-			<br>
+			</CheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
@@ -22,14 +19,12 @@
 			<em v-html="sendInvitationsHelpText" />
 		</p>
 		<p>
-			<input id="caldavGenerateBirthdayCalendar"
-				v-model="generateBirthdayCalendar"
-				type="checkbox"
+			<CheckboxRadioSwitch id="caldavGenerateBirthdayCalendar"
+				:checked.sync="generateBirthdayCalendar"
+				type="switch"
 				class="checkbox">
-			<label for="caldavGenerateBirthdayCalendar">
 				{{ $t('dav', 'Automatically generate a birthday calendar') }}
-			</label>
-			<br>
+			</CheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Birthday calendars will be generated by a background job.') }}
 			</em>
@@ -39,14 +34,11 @@
 			</em>
 		</p>
 		<p>
-			<input id="caldavSendEventReminders"
-				v-model="sendEventReminders"
-				type="checkbox"
-				class="checkbox">
-			<label for="caldavSendEventReminders">
+			<CheckboxRadioSwitch id="caldavSendEventReminders"
+				:checked.sync="sendEventReminders"
+				type="switch">
 				{{ $t('dav', 'Send notifications for events') }}
-			</label>
-			<br>
+			</CheckboxRadioSwitch>
 			<!-- Can use v-html as:
 				- $t passes the translated string through DOMPurify.sanitize,
 				- replacement strings are not user-controlled. -->
@@ -58,47 +50,47 @@
 			</em>
 		</p>
 		<p class="indented">
-			<input id="caldavSendEventRemindersToSharedGroupMembers"
-				v-model="sendEventRemindersToSharedGroupMembers"
-				type="checkbox"
-				class="checkbox"
+			<CheckboxRadioSwitch id="caldavSendEventRemindersToSharedGroupMembers"
+				:checked.sync="sendEventRemindersToSharedGroupMembers"
+				type="switch"
 				:disabled="!sendEventReminders">
-			<label for="caldavSendEventRemindersToSharedGroupMembers">
 				{{ $t('dav', 'Send reminder notifications to calendar sharees as well' ) }}
-			</label>
-			<br>
+			</CheckboxRadioSwitch>
 			<em>
 				{{ $t('dav', 'Reminders are always sent to organizers and attendees.' ) }}
 			</em>
 		</p>
 		<p class="indented">
-			<input id="caldavSendEventRemindersPush"
-				v-model="sendEventRemindersPush"
-				type="checkbox"
-				class="checkbox"
+			<CheckboxRadioSwitch id="caldavSendEventRemindersPush"
+				:checked.sync="sendEventRemindersPush"
+				type="switch"
 				:disabled="!sendEventReminders">
-			<label for="caldavSendEventRemindersPush">
 				{{ $t('dav', 'Enable notifications for events via push') }}
-			</label>
+			</CheckboxRadioSwitch>
 		</p>
-	</div>
+	</SettingsSection>
 </template>
 
-<style lang="scss" scoped>
-	.indented {
-		padding-left: 28px;
-	}
-</style>
-
 <script>
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 
 const userSyncCalendarsDocUrl = loadState('dav', 'userSyncCalendarsDocUrl', '#')
 
 export default {
 	name: 'CalDavSettings',
+	components: {
+		CheckboxRadioSwitch,
+		SettingsSection,
+	},
+	data() {
+		return {
+			userSyncCalendarsDocUrl,
+		}
+	},
 	computed: {
 		hint() {
 			const translated = this.$t(
@@ -151,3 +143,18 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+	.indented {
+		padding-left: 28px;
+	}
+	/** Use deep selector to affect v-html */
+	* >>> a {
+		text-decoration: underline;
+	}
+	.settings-hint {
+		margin-top: -.2em;
+		margin-bottom: 1em;
+		opacity: .7;
+	}
+</style>