Set up the Options view bound to the prefs & settings stores

resources/js_vue3/components/VersionChecker.vue

@@ -0,0 +1,37 @@
+<script setup>
+    import systemService from '@/services/systemService'
+    import { useAppSettingsStore } from '@/stores/appSettings'
+
+    const appSettings = useAppSettingsStore()
+    const isScanning = ref(false)
+    const isUpToDate = ref(null)
+
+    async function getLatestRelease() {
+        isScanning.value = true;
+
+        await systemService.getLastRelease()
+        .then(response => {
+            appSettings.latestRelease = response.data.newRelease
+            isUpToDate.value = response.data.newRelease === false
+        })
+
+        isScanning.value = false;
+    }
+
+</script>
+
+<template>
+    <div class="columns is-mobile is-vcentered">
+        <div class="column is-narrow">
+            <button type="button" :class="isScanning ? 'is-loading' : ''" class="button is-link is-rounded is-small" @click="getLatestRelease">Check now</button>
+        </div>
+        <div class="column">
+            <span v-if="appSettings.latestRelease" class="mt-2 has-text-warning">
+                <span class="release-flag"></span>{{ appSettings.latestRelease }} is available <a class="is-size-7" href="https://github.com/Bubka/2FAuth/releases">View on Github</a>
+            </span>
+            <span v-if="isUpToDate" class="has-text-grey">
+                {{ $t('commons.you_are_up_to_date') }}
+            </span>
+        </div>
+    </div>
+</template>

resources/js_vue3/components/formElements/FormCheckbox.vue

@@ -0,0 +1,44 @@
+<script setup>
+    defineOptions({
+        inheritAttrs: false
+    })
+
+    const props = defineProps({
+        modelValue: Boolean,
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        labelClass: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    const emit = defineEmits(['update:modelValue'])
+    const attrs = useAttrs()
+    const checked = ref(props.modelValue)
+
+    function setCheckbox() {
+        if (attrs['disabled'] == undefined) {
+            emit('update:modelValue', checked)
+        }
+    }
+</script>
+
+<template>
+    <div class="field">
+        <input :id="fieldName" type="checkbox" :name="fieldName" class="is-checkradio is-info" v-model="checked" v-on:change="setCheckbox" v-bind="$attrs"/>
+        <label tabindex="0" :for="fieldName" class="label" :class="labelClass" v-html="$t(label)" v-on:keypress.space.prevent="setCheckbox" />
+        <p class="help" v-html="$t(help)" v-if="help" />
+    </div>
+</template>

resources/js_vue3/components/formElements/FormSelect.vue

@@ -0,0 +1,39 @@
+<script setup>
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        label: {
+            type: String,
+            default: ''
+        },
+        fieldName: {
+            type: String,
+            default: '',
+            required: true
+        },
+        options: {
+            type: Array,
+            required: true
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    const selected = ref(props.modelValue)
+</script>
+
+<template>
+    <div class="field">
+        <label class="label" v-html="$t(label)"></label>
+        <div class="control">
+            <div class="select">
+                <select v-model="selected" v-on:change="$emit('update:modelValue', $event.target.value)">
+                    <option v-for="option in options" :value="option.value">{{ $t(option.text) }}</option>
+                </select>
+            </div>
+        </div>
+        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <p class="help" v-html="$t(help)" v-if="help"></p>
+    </div>
+</template>

resources/js_vue3/components/formElements/FormToggle.vue

@@ -0,0 +1,73 @@
+<script setup>
+    import { useIdGenerator } from '@/composables/helpers'
+    import { UseColorMode } from '@vueuse/components'
+
+    const props = defineProps({
+        modelValue: [String, Number, Boolean],
+        choices: {
+            type: Array,
+            required: true
+        },
+        fieldName: {
+            type: String,
+            required: true
+        },
+        hasOffset: Boolean,
+        isDisabled: Boolean,
+        label: {
+            type: String,
+            default: ''
+        },
+        help: {
+            type: String,
+            default: ''
+        },
+    })
+
+    // defines what events our component emits
+    const emit = defineEmits('update:modelValue')
+
+    function setRadio(event) {
+        emit('update:modelValue', event)
+    }
+    
+</script>
+
+<template>
+    <div class="field" :class="{ 'pt-3': hasOffset }" role="radiogroup"
+        :aria-labelledby="useIdGenerator('label',fieldName).inputId">
+        <label v-if="label" :id="useIdGenerator('label',fieldName).inputId" class="label" v-html="$t(label)" />
+        <div class="is-toggle buttons">
+            <UseColorMode v-slot="{ mode }">
+                <button
+                    v-for="choice in choices"
+                    :key="choice.value"
+                    :id="useIdGenerator('button',fieldName+choice.value).inputId"
+                    role="radio"
+                    type="button"
+                    class="button"
+                    :aria-checked="modelValue===choice.value"
+                    :disabled="isDisabled"
+                    :class="{
+                        'is-link': modelValue===choice.value,
+                        'is-dark': mode==='dark',
+                        'is-multiline': choice.legend,
+                    }"
+                    v-on:click.stop="setRadio(choice.value)"
+                    :title="choice.title? choice.title:''">
+                    <input
+                        :id="useIdGenerator('radio',choice.value).inputId"
+                        type="radio"
+                        class="is-hidden"
+                        :checked="modelValue===choice.value"
+                        :value="choice.value"
+                        :disabled="isDisabled" />
+                    <span v-if="choice.legend" v-html="$t(choice.legend)" class="is-block is-size-7" />
+                    <FontAwesomeIcon :icon="['fas',choice.icon]" v-if="choice.icon" class="mr-2" /> {{ $t(choice.text) }}
+                </button>
+            </UseColorMode>
+        </div>
+        <!-- <FieldError :form="form" :field="fieldName" /> -->
+        <p class="help" v-html="$t(help)" v-if="help" />
+    </div>
+</template>