Replace Switches by Checkboxes in Settings

resources/js/components/FormCheckbox.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="field">
+        <input :id="fieldName" type="checkbox" :name="fieldName" class="is-checkradio is-info" v-model="form[fieldName]">
+        <label :for="fieldName" class="label" v-html="label"></label>
+        <p class="help" v-html="help" v-if="help"></p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormCheckbox',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            help: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/index.js

@@ -5,6 +5,7 @@ import FormWrapper from './FormWrapper'
 import FormField from './FormField'
 import FormSelect from './FormSelect'
 import FormSwitch from './FormSwitch'
+import FormCheckbox from './FormCheckbox'
 import FormButtons from './FormButtons'
 import VueFooter from './Footer'
 
@@ -16,6 +17,7 @@ import VueFooter from './Footer'
     FormField,
     FormSelect,
     FormSwitch,
+    FormCheckbox,
     FormButtons,
     VueFooter,
 ].forEach(Component => {

resources/js/views/settings/Options.vue

@@ -7,9 +7,9 @@
         <form @submit.prevent="handleSubmit" @change="handleSubmit" @keydown="form.onKeydown($event)">
             <form-select :options="langs" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')"  :help="$t('settings.forms.language.help')" />
             <form-select :options="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" />
-            <form-switch :form="form" fieldName="showTokenAsDot" :label="$t('settings.forms.show_token_as_dot.label')" :help="$t('settings.forms.show_token_as_dot.help')" />
-            <form-switch :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" />
-            <form-switch :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" />
+            <form-checkbox :form="form" fieldName="showTokenAsDot" :label="$t('settings.forms.show_token_as_dot.label')" :help="$t('settings.forms.show_token_as_dot.help')" />
+            <form-checkbox :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" />
+            <form-checkbox :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" />
         </form>
     </form-wrapper>
 </template>