replace checkBoxDiv with checkboxRadioSwitch from @nextcloud/vue

Signed-off-by: dartcafe <github@dartcafe.de>

16 files changed, 131 insertions, 148 deletions

diff --git a/src/js/components/Base/CheckBoxDiv.vue b/src/js/components/Base/CheckBoxDiv.vue
deleted file mode 100644
index 36870295..00000000
--- a/src/js/components/Base/CheckBoxDiv.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
-  -
-  - @author René Gieling <github@dartcafe.de>
-  -
-  - @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 lang="html">
-	<div class="checkbox-div">
-		<input :id="id"
-			:checked="value"
-			:disabled="disabled"
-			type="checkbox"
-			class="checkbox"
-			@click="$emit('input', $event.target.checked)">
-		<label :for="id">
-			<slot name="before" />
-			{{ label }}
-		</label>
-	</div>
-</template>
-
-<script>
-const RandId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10)
-
-export default {
-	name: 'CheckBoxDiv',
-	props: {
-		label: {
-			type: String,
-			required: true,
-		},
-		value: {
-			type: [Boolean, Number],
-			required: true,
-		},
-		id: {
-			type: String,
-			default: () => 'cb-' + RandId(),
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-</script>
diff --git a/src/js/components/Configuration/ConfigAccess.vue b/src/js/components/Configuration/ConfigAccess.vue
index 739d177e..234d2bb6 100644
--- a/src/js/components/Configuration/ConfigAccess.vue
+++ b/src/js/components/Configuration/ConfigAccess.vue
@@ -23,23 +23,25 @@
 <template>
 	<div>
 		<RadioGroupDiv v-model="pollAccess" :options="accessOptions" />
-		<CheckBoxDiv v-model="pollImportant"
-			class="indented"
+		<CheckboxRadioSwitch class="indented"
+			:checked.sync="pollImportant"
 			:disabled="pollAccess !== 'public'"
-			:label="t('polls', 'Relevant for all users')" />
+			type="switch">
+			{{ t('polls', 'Relevant for all users') }}
+		</CheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 import RadioGroupDiv from '../Base/RadioGroupDiv'
 
 export default {
 	name: 'ConfigAccess',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		RadioGroupDiv,
 	},
 
diff --git a/src/js/components/Configuration/ConfigAdminAccess.vue b/src/js/components/Configuration/ConfigAdminAccess.vue
index 1104a694..395393b6 100644
--- a/src/js/components/Configuration/ConfigAdminAccess.vue
+++ b/src/js/components/Configuration/ConfigAdminAccess.vue
@@ -21,18 +21,26 @@
   -->
 
 <template>
-	<CheckBoxDiv v-model="adminAccess" :label="t('polls', 'Allow admins to edit this poll')" />
+	<CheckboxRadioSwitch :checked.sync="adminAccess" type="switch">
+		{{ label }}
+	</CheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAdminAccess',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
+	},
+
+	data() {
+		return {
+			label: t('polls', 'Allow admins to edit this poll'),
+		}
 	},
 
 	computed: {
@@ -42,7 +50,7 @@ export default {
 
 		adminAccess: {
 			get() {
-				return this.poll.adminAccess
+				return !!this.poll.adminAccess
 			},
 			set(value) {
 				this.$store.commit('poll/setProperty', { adminAccess: +value })
diff --git a/src/js/components/Configuration/ConfigAllowComment.vue b/src/js/components/Configuration/ConfigAllowComment.vue
index 448c8385..7982d6b1 100644
--- a/src/js/components/Configuration/ConfigAllowComment.vue
+++ b/src/js/components/Configuration/ConfigAllowComment.vue
@@ -21,18 +21,20 @@
   -->
 
 <template>
-	<CheckBoxDiv v-model="allowComment" :label="t('polls', 'Allow Comments')" />
+	<CheckboxRadioSwitch :checked.sync="allowComment" type="switch">
+		{{ t('polls', 'Allow Comments') }}
+	</CheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowComment',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -42,7 +44,7 @@ export default {
 
 		allowComment: {
 			get() {
-				return this.poll.allowComment
+				return !!this.poll.allowComment
 			},
 			set(value) {
 				this.$store.commit('poll/setProperty', { allowComment: +value })
diff --git a/src/js/components/Configuration/ConfigAllowMayBe.vue b/src/js/components/Configuration/ConfigAllowMayBe.vue
index b4930968..62585625 100644
--- a/src/js/components/Configuration/ConfigAllowMayBe.vue
+++ b/src/js/components/Configuration/ConfigAllowMayBe.vue
@@ -21,18 +21,20 @@
   -->
 
 <template>
-	<CheckBoxDiv v-model="allowMaybe" :label="label" />
+	<CheckboxRadioSwitch :checked.sync="allowMaybe" type="switch">
+		{{ label }}
+	</CheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAllowMayBe',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	data() {
@@ -48,7 +50,7 @@ export default {
 
 		allowMaybe: {
 			get() {
-				return this.poll.allowMaybe
+				return !!this.poll.allowMaybe
 			},
 			set(value) {
 				this.$store.commit('poll/setProperty', { allowMaybe: +value })
diff --git a/src/js/components/Configuration/ConfigAnonymous.vue b/src/js/components/Configuration/ConfigAnonymous.vue
index dfef04b3..35c876ff 100644
--- a/src/js/components/Configuration/ConfigAnonymous.vue
+++ b/src/js/components/Configuration/ConfigAnonymous.vue
@@ -21,18 +21,20 @@
   -->
 
 <template>
-	<CheckBoxDiv v-model="anonymous" :label="t('polls', 'Anonymous poll')" />
+	<CheckboxRadioSwitch :checked.sync="anonymous" type="switch">
+		{{ t('polls', 'Anonymous poll') }}
+	</CheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigAnonymous',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -42,7 +44,7 @@ export default {
 
 		anonymous: {
 			get() {
-				return this.poll.anonymous
+				return !!this.poll.anonymous
 			},
 			set(value) {
 				this.$store.commit('poll/setProperty', { anonymous: +value })
diff --git a/src/js/components/Configuration/ConfigClosing.vue b/src/js/components/Configuration/ConfigClosing.vue
index ff05f907..36bd30f3 100644
--- a/src/js/components/Configuration/ConfigClosing.vue
+++ b/src/js/components/Configuration/ConfigClosing.vue
@@ -26,7 +26,9 @@
 			:icon="closed ? 'icon-polls-open' : 'icon-polls-closed'"
 			:title="closed ? t('polls', 'Reopen poll'): t('polls', 'Close poll')"
 			@click="toggleClosed()" />
-		<CheckBoxDiv v-show="!closed" v-model="useExpire" :label="t('polls', 'Poll closing date')" />
+		<CheckboxRadioSwitch v-show="!closed" :checked.sync="useExpire" type="switch">
+			{{ t('polls', 'Poll closing date') }}
+		</CheckboxRadioSwitch>
 		<DatetimePicker v-show="useExpire && !closed" v-model="expire" v-bind="expirationDatePicker" />
 	</div>
 </template>
@@ -34,14 +36,13 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import { DatetimePicker } from '@nextcloud/vue'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { DatetimePicker, CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigClosing',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		DatetimePicker,
 	},
 
@@ -88,7 +89,7 @@ export default {
 
 		useExpire: {
 			get() {
-				return this.poll.expire
+				return !!this.poll.expire
 			},
 			set(value) {
 				if (value) {
diff --git a/src/js/components/Configuration/ConfigOptionLimit.vue b/src/js/components/Configuration/ConfigOptionLimit.vue
index 74e84c76..66afcffd 100644
--- a/src/js/components/Configuration/ConfigOptionLimit.vue
+++ b/src/js/components/Configuration/ConfigOptionLimit.vue
@@ -22,30 +22,34 @@
 
 <template>
 	<div>
-		<CheckBoxDiv v-model="useOptionLimit" :label="t('polls', 'Limit yes votes per option')" />
+		<CheckboxRadioSwitch :checked.sync="useOptionLimit" type="switch">
+			{{ t('polls', 'Limit yes votes per option') }}
+		</CheckboxRadioSwitch>
 		<InputDiv v-if="optionLimit"
 			v-model="optionLimit"
 			class="selectUnit indented"
 			use-num-modifiers
 			@add="optionLimit += 1"
 			@subtract="optionLimit -= 1" />
-		<CheckBoxDiv v-if="optionLimit"
-			v-model="hideBookedUp"
+		<CheckboxRadioSwitch v-if="optionLimit"
 			class="indented"
-			:label="t('polls', 'Hide not available Options')" />
+			:checked.sync="hideBookedUp"
+			type="switch">
+			{{ t('polls', 'Hide not available Options') }}
+		</CheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv'
 
 export default {
 	name: 'ConfigOptionLimit',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Configuration/ConfigProposals.vue b/src/js/components/Configuration/ConfigProposals.vue
index ea19ba76..c71a5b1d 100644
--- a/src/js/components/Configuration/ConfigProposals.vue
+++ b/src/js/components/Configuration/ConfigProposals.vue
@@ -22,9 +22,15 @@
 
 <template>
 	<div>
-		<RadioGroupDiv v-model="allowProposals" :options="proposalsOptions" />
-		<CheckBoxDiv v-show="proposalsAllowed" v-model="pollExpiration" :label="t('polls', 'Proposal closing date')" />
-		<DatetimePicker v-show="pollExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
+		<CheckboxRadioSwitch :checked.sync="allowProposals" type="switch">
+			{{ t('polls', 'Allow Proposals') }}
+		</CheckboxRadioSwitch>
+
+		<CheckboxRadioSwitch v-show="proposalsAllowed" :checked.sync="proposalExpiration" type="switch">
+			{{ t('polls', 'Proposal closing date') }}
+		</CheckboxRadioSwitch>
+
+		<DatetimePicker v-show="proposalExpiration && proposalsAllowed" v-model="pollExpire" v-bind="expirationDatePicker" />
 	</div>
 </template>
 
@@ -34,17 +40,14 @@ import { mapState, mapGetters } from 'vuex'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
-import { DatetimePicker } from '@nextcloud/vue'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
-import RadioGroupDiv from '../Base/RadioGroupDiv'
+import { CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigProposals',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		DatetimePicker,
-		RadioGroupDiv,
 	},
 
 	data() {
@@ -66,10 +69,10 @@ export default {
 		// Add bindings
 		allowProposals: {
 			get() {
-				return this.poll.allowProposals
+				return (this.poll.allowProposals === 'allow')
 			},
 			set(value) {
-				this.writeValue({ allowProposals: value })
+				this.writeValue({ allowProposals: value ? 'allow' : 'disallow' })
 			},
 		},
 
@@ -82,9 +85,9 @@ export default {
 			},
 		},
 
-		pollExpiration: {
+		proposalExpiration: {
 			get() {
-				return this.poll.proposalsExpire
+				return !!this.poll.proposalsExpire
 			},
 			set(value) {
 				if (value) {
diff --git a/src/js/components/Configuration/ConfigUseNo.vue b/src/js/components/Configuration/ConfigUseNo.vue
index 3cfee72f..c01fb11b 100644
--- a/src/js/components/Configuration/ConfigUseNo.vue
+++ b/src/js/components/Configuration/ConfigUseNo.vue
@@ -21,18 +21,20 @@
   -->
 
 <template>
-	<CheckBoxDiv v-model="useNo" :label="label" />
+	<CheckboxRadioSwitch :checked.sync="deleteVoteOnNo" type="switch">
+		{{ label }}
+	</CheckboxRadioSwitch>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ConfigUseNo',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	data() {
@@ -46,7 +48,7 @@ export default {
 			poll: (state) => state.poll,
 		}),
 
-		useNo: {
+		deleteVoteOnNo: {
 			get() {
 				return !this.poll.useNo
 			},
diff --git a/src/js/components/Configuration/ConfigVoteLimit.vue b/src/js/components/Configuration/ConfigVoteLimit.vue
index 4e2a812b..c3358421 100644
--- a/src/js/components/Configuration/ConfigVoteLimit.vue
+++ b/src/js/components/Configuration/ConfigVoteLimit.vue
@@ -22,7 +22,9 @@
 
 <template>
 	<div>
-		<CheckBoxDiv v-model="useVoteLimit" :label="t('polls', 'Limit yes votes per user')" />
+		<CheckboxRadioSwitch :checked.sync="useVoteLimit" type="switch">
+			{{ t('polls', 'Limit yes votes per user') }}
+		</CheckboxRadioSwitch>
 		<InputDiv v-if="voteLimit"
 			v-model="voteLimit"
 			class="selectUnit indented"
@@ -34,14 +36,14 @@
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 import InputDiv from '../Base/InputDiv'
 
 export default {
 	name: 'ConfigVoteLimit',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		InputDiv,
 	},
 
diff --git a/src/js/components/Options/OptionsDateAdd.vue b/src/js/components/Options/OptionsDateAdd.vue
index 68d71425..465e397b 100644
--- a/src/js/components/Options/OptionsDateAdd.vue
+++ b/src/js/components/Options/OptionsDateAdd.vue
@@ -46,7 +46,9 @@
 			</div>
 		</template>
 		<template #header>
-			<CheckBoxDiv v-model="useRange" class="range" :label="t('polls', 'Select range')" />
+			<CheckboxRadioSwitch :checked.sync="useRange" class="range" type="switch">
+				{{ t('polls', 'Select range') }}
+			</CheckboxRadioSwitch>
 			<div class="picker-buttons">
 				<button v-if="useTime" @click="toggleTimePanel">
 					{{ t('polls', showTimePanel ? 'Change date': 'Change time') }}
@@ -64,10 +66,9 @@
 
 <script>
 
-import CheckBoxDiv from '../Base/CheckBoxDiv'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { DatetimePicker } from '@nextcloud/vue'
+import { CheckboxRadioSwitch, DatetimePicker } from '@nextcloud/vue'
 import ButtonDiv from '../Base/ButtonDiv'
 import Spacer from '../Base/Spacer'
 
@@ -75,7 +76,7 @@ export default {
 	name: 'OptionsDateAdd',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 		ButtonDiv,
 		DatetimePicker,
 		Spacer,
diff --git a/src/js/components/Settings/ExpertimantalSettings.vue b/src/js/components/Settings/ExpertimantalSettings.vue
index 1c04c539..b04cf937 100644
--- a/src/js/components/Settings/ExpertimantalSettings.vue
+++ b/src/js/components/Settings/ExpertimantalSettings.vue
@@ -23,7 +23,9 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckBoxDiv v-model="experimental" :label="t('polls', 'Try experimental styles')" />
+			<CheckboxRadioSwitch :checked.sync="experimental" type="switch">
+				{{ t('polls', 'Try experimental styles') }}
+			</CheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Some experimental UI variants. Changes the background color of the main area.') }}
 			</div>
@@ -31,7 +33,9 @@
 
 		<div v-if="experimental">
 			<div class="user_settings">
-				<CheckBoxDiv v-model="useImage" :label="t('polls', 'Use background image')" />
+				<CheckboxRadioSwitch :checked.sync="useImage" type="switch">
+					{{ t('polls', 'Use background image') }}
+				</CheckboxRadioSwitch>
 				<div class="settings_details">
 					{{ t('polls', 'Add a background image to the main area') }}
 					<div>
@@ -44,14 +48,18 @@
 			</div>
 
 			<div class="user_settings">
-				<CheckBoxDiv v-model="glassyNavigation" :label="t('polls', 'Glassy navigation')" />
+				<CheckboxRadioSwitch :checked.sync="glassyNavigation" type="switch">
+					{{ t('polls', 'Glassy navigation') }}
+				</CheckboxRadioSwitch>
 				<div class="settings_details">
 					{{ t('polls', 'Blurs the background of the navigation (Does not work with all browsers).') }}
 				</div>
 			</div>
 
 			<div class="user_settings">
-				<CheckBoxDiv v-model="glassySidebar" :label="t('polls', 'Glassy sidebar')" />
+				<CheckboxRadioSwitch :checked.sync="glassySidebar" type="switch">
+					{{ t('polls', 'Glassy sidebar') }}
+				</CheckboxRadioSwitch>
 				<div class="settings_details">
 					{{ t('polls', 'Blurs the background of the sidebar (Does not work with all browsers).') }}
 				</div>
@@ -63,13 +71,13 @@
 <script>
 
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'ExpertimantalSettings',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -79,18 +87,18 @@ export default {
 		// Add bindings
 		experimental: {
 			get() {
-				return this.settings.experimental
+				return !!this.settings.experimental
 			},
 			set(value) {
-				this.writeValue({ experimental: value })
+				this.writeValue({ experimental: +value })
 			},
 		},
 		useImage: {
 			get() {
-				return this.settings.useImage
+				return !!this.settings.useImage
 			},
 			set(value) {
-				this.writeValue({ useImage: value })
+				this.writeValue({ useImage: +value })
 			},
 		},
 		imageUrl: {
@@ -103,18 +111,18 @@ export default {
 		},
 		glassyNavigation: {
 			get() {
-				return this.settings.glassyNavigation
+				return !!this.settings.glassyNavigation
 			},
 			set(value) {
-				this.writeValue({ glassyNavigation: value })
+				this.writeValue({ glassyNavigation: +value })
 			},
 		},
 		glassySidebar: {
 			get() {
-				return this.settings.glassySidebar
+				return !!this.settings.glassySidebar
 			},
 			set(value) {
-				this.writeValue({ glassySidebar: value })
+				this.writeValue({ glassySidebar: +value })
 			},
 		},
 	},
diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue
index 1c29f014..6024a07d 100644
--- a/src/js/components/Settings/FeatureSettings.vue
+++ b/src/js/components/Settings/FeatureSettings.vue
@@ -23,32 +23,37 @@
 <template>
 	<div>
 		<div class="user_settings">
-			<CheckBoxDiv v-model="calendarPeek" :label="t('polls', 'Use calendar lookup')" />
+			<CheckboxRadioSwitch :checked.sync="calendarPeek" type="switch">
+				{{ t('polls', 'Use calendar lookup') }}
+			</CheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check, if an option in a date poll is conflicting with or near an entry in your calendar.') }}
 				{{ t('polls', 'Opt in to the calendars, which should be checked.') }}
 
 				<div v-for="(calendar) in calendarChoices" :key="calendar.key" class="calendar-item">
-					<CheckBoxDiv v-model="calendar.selected"
-						:label="calendar.name"
-						@input="clickedCalendar(calendar)">
-						<template #before>
-							<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
-						</template>
-					</CheckBoxDiv>
+					<CheckboxRadioSwitch :checked="calendar.selected"
+						type="switch"
+						@update:checked="clickedCalendar(calendar)">
+						<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
+						{{ calendar.name }}
+					</CheckboxRadioSwitch>
 				</div>
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<CheckBoxDiv v-model="defaultViewTextPoll" :label="t('polls', 'Text polls default to list view')" />
+			<CheckboxRadioSwitch :checked.sync="defaultViewTextPoll" type="switch">
+				{{ t('polls', 'Text polls default to list view') }}
+			</CheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }}
 			</div>
 		</div>
 
 		<div class="user_settings">
-			<CheckBoxDiv v-model="defaultViewDatePoll" :label="t('polls', 'Date polls default to list view')" />
+			<CheckboxRadioSwitch :checked.sync="defaultViewDatePoll" type="switch">
+				{{ t('polls', 'Date polls default to list view') }}
+			</CheckboxRadioSwitch>
 			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }}
 			</div>
@@ -59,13 +64,13 @@
 <script>
 
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 
 export default {
 	name: 'FeatureSettings',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -76,7 +81,7 @@ export default {
 		// Add bindings
 		calendarPeek: {
 			get() {
-				return this.settings.calendarPeek
+				return !!this.settings.calendarPeek
 			},
 			set(value) {
 				this.writeValue({ calendarPeek: value })
diff --git a/src/js/components/Subscription/Subscription.vue b/src/js/components/Subscription/Subscription.vue
index 7f793e12..2d26d1e4 100644
--- a/src/js/components/Subscription/Subscription.vue
+++ b/src/js/components/Subscription/Subscription.vue
@@ -22,18 +22,20 @@
 
 <template lang="html">
 	<div class="subscription">
-		<CheckBoxDiv v-model="subscribe" :label="label" />
+		<CheckboxRadioSwitch :checked.sync="subscribe" type="switch">
+			{{ label }}
+		</CheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import CheckBoxDiv from '../Base/CheckBoxDiv'
+import { CheckboxRadioSwitch } from '@nextcloud/vue'
 export default {
 	name: 'Subscription',
 
 	components: {
-		CheckBoxDiv,
+		CheckboxRadioSwitch,
 	},
 
 	computed: {
@@ -52,7 +54,7 @@ export default {
 
 		subscribe: {
 			get() {
-				return this.subscribed
+				return !!this.subscribed
 			},
 			set(value) {
 				this.$store.dispatch('subscription/update', value)
diff --git a/src/js/store/modules/poll.js b/src/js/store/modules/poll.js
index c89aa103..f932f33d 100644
--- a/src/js/store/modules/poll.js
+++ b/src/js/store/modules/poll.js
@@ -53,6 +53,7 @@ const defaultPoll = () => ({
 	adminAccess: 0,
 	important: 0,
 	hideBookedUp: 0,
+	useNo: 1,
 })
 
 const state = defaultPoll()