Set Back/Close/Cancel buttons using a component

resources/js_vue3/app.js

@@ -49,6 +49,7 @@ import FormWrapper from '@/layouts/FormWrapper.vue'
 import Footer from '@/layouts/Footer.vue'
 import Modal from '@/layouts/Modal.vue'
 import VueButton           from '@/components/formElements/Button.vue'
+import ButtonBackCloseCancel from '@/components/formElements/ButtonBackCloseCancel.vue'
 import FieldError       from '@/components/formElements/FieldError.vue'
 import FormField        from '@/components/formElements/FormField.vue'
 import FormPasswordField        from '@/components/formElements/FormPasswordField.vue'
@@ -65,6 +66,7 @@ app
     .component('VueFooter', Footer)
     .component('Modal', Modal)
     .component('VueButton', VueButton)
+    .component('ButtonBackCloseCancel', ButtonBackCloseCancel)
     .component('FieldError', FieldError)
     .component('FormField', FormField)
     .component('FormPasswordField', FormPasswordField)

resources/js_vue3/components/DestinationGroupSelector.vue

@@ -62,12 +62,7 @@
             <p class="control">
                 <button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
             </p>
-            <!-- Cancel button -->
+            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <button id="btnCancel" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showDestinationGroupSelector', false)">{{ $t('commons.cancel') }}</button>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </div>
 </template>

resources/js_vue3/components/GroupSwitch.vue

@@ -45,12 +45,7 @@
             </div>
         </div>
         <VueFooter :showButtons="true">
-            <!-- Close Group switch button -->
+            <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showGroupSwitch', false)">{{ $t('commons.close') }}</button>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </div>
 </template>

resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue

@@ -0,0 +1,87 @@
+<script setup>
+    import { useColorMode } from '@vueuse/core'
+
+    const router = useRouter()
+    const route = useRoute()
+    const mode = useColorMode()
+    
+    const props = defineProps({
+        returnTo: {
+            type: String,
+            default: 'accounts'
+        },
+        action: {
+            type: String,
+            default: 'close'
+        },
+        useLinkTag: {
+            type: Boolean,
+            default: true
+        },
+        isText: {
+            type: Boolean,
+            default: false
+        },
+        isCapture: {
+            type: Boolean,
+            default: false
+        },
+    })
+
+    const classes = 'button is-rounded'
+        + (mode.value === 'dark' && ! props.isText && ! props.isCapture ? ' is-dark' : '')
+        + (props.isText ? ' is-text' : '')
+        + (props.isCapture ? ' is-large is-warning' : '')
+</script>
+
+<template>
+    <!-- back / close / cancel button -->
+    <p v-if="useLinkTag" class="control">
+        <RouterLink
+            v-if="action == 'close'"
+            id="btnClose"
+            :to="{ name: returnTo }"
+            :class="classes"
+            tabindex="0"
+            role="button"
+            :aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
+        >
+            {{ $t('commons.close') }}
+        </RouterLink>
+        <RouterLink
+            v-else-if="action == 'back'"
+            id="lnkBack"
+            :to="{ name: returnTo }"
+            :class="classes"
+            :aria-label="$t('commons.close_the_x_page', { pagetitle: $route.meta.title })"
+        >
+            {{ $t('commons.back') }}
+        </RouterLink>
+        <RouterLink
+            v-else-if="action == 'cancel'"
+            id="btnCancel"
+            :to="{ name: returnTo }"
+            :class="classes"
+        >
+            {{ $t('commons.cancel') }}
+        </RouterLink>
+    </p>
+    <p v-else class="control">
+        <button
+            v-if="action == 'close'"
+            id="btnClose"
+            :class="classes"
+            @click="$emit('closed')"
+        >
+            {{ $t('commons.close') }}
+        </button>
+        <button
+            v-if="action == 'cancel'"
+            id="btnCancel"
+            :class="classes"
+            @click="$emit('canceled')"
+        >
+            {{ $t('commons.cancel') }}
+        </button>
+    </p>
+</template>

resources/js_vue3/layouts/Modal.vue

@@ -1,6 +1,4 @@
 <script setup>
-    import { UseColorMode } from '@vueuse/components'
-
     const { notify }  = useNotification()
 
     const props = defineProps({
@@ -45,12 +43,7 @@
             </section>
         </div>
         <div v-if="props.closable" class="fullscreen-footer">
-            <!-- Close button -->
+            <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="closeModal" />
-            <UseColorMode v-slot="{ mode }">
-                <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="closeModal">
-                    {{ $t('commons.close') }}
-                </button>
-            </UseColorMode>
         </div>
     </div>
 </template>

resources/js_vue3/views/About.vue

@@ -128,19 +128,7 @@
         </div>
         <!-- footer -->
         <VueFooter :showButtons="true">
-            <!-- close button -->
+            <ButtonBackCloseCancel action="back" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink
-                        id="lnkBack"
-                        :to="{ name: returnTo }"
-                        :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})"
-                        class="button is-rounded"
-                        :class="{'is-dark' : mode == 'dark'}">
-                        {{ $t('commons.back') }}
-                    </RouterLink>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>

resources/js_vue3/views/Start.vue

@@ -109,14 +109,7 @@
         </div>
         <!-- Footer -->
         <VueFooter :showButtons="true" >
-            <!-- back button -->
+            <ButtonBackCloseCancel action="back" v-if="!twofaccounts.isEmpty" />
-            <p class="control" v-if="! twofaccounts.isEmpty">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink id="lnkBack" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" :to="{ name: 'accounts' }" >
-                        {{ $t('commons.back') }}
-                    </RouterLink>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </div>
 </template>

resources/js_vue3/views/groups/Groups.vue

@@ -68,12 +68,7 @@
         </div>
         <!-- footer -->
         <VueFooter :showButtons="true">
-            <!-- close button -->
+            <ButtonBackCloseCancel action="close" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink id="btnClose" :to="{ name: 'accounts' }" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}">{{ $t('commons.close') }}</RouterLink>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>

resources/js_vue3/views/settings/Account.vue

@@ -3,7 +3,6 @@
     import SettingTabs from '@/layouts/SettingTabs.vue'
     import { useUserStore } from '@/stores/user'
     import { useNotifyStore } from '@/stores/notify'
-    import { UseColorMode } from '@vueuse/components'
 
     const $2fauth = inject('2fauth')
     const user = useUserStore()
@@ -140,21 +139,7 @@
             </FormWrapper>
         </div>
         <VueFooter :showButtons="true">
-            <!-- close button -->
+            <ButtonBackCloseCancel action="close" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink
-                        id="btnClose"
-                        :to="{ name: returnTo }"
-                        class="button is-rounded"
-                        :class="{'is-dark' : mode === 'dark'}"
-                        tabindex="0"
-                        role="button"
-                        :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
-                        {{ $t('commons.close') }}
-                    </RouterLink>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </div>
 </template>

resources/js_vue3/views/settings/OAuth.vue

@@ -156,21 +156,7 @@
                 <Spinner :isVisible="isFetching && tokens.length === 0" />
                 <!-- footer -->
                 <VueFooter :showButtons="true">
-                    <!-- close button -->
+                    <ButtonBackCloseCancel action="close" />
-                    <p class="control">
-                        <UseColorMode v-slot="{ mode }">
-                            <RouterLink
-                                id="btnClose"
-                                :to="{ name: returnTo }"
-                                class="button is-rounded"
-                                :class="{'is-dark' : mode === 'dark'}"
-                                tabindex="0"
-                                role="button"
-                                :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
-                                {{ $t('commons.close') }}
-                            </RouterLink>
-                        </UseColorMode>
-                    </p>
                 </VueFooter>
             </FormWrapper>
         </div>

resources/js_vue3/views/settings/Options.vue

@@ -7,7 +7,6 @@
     import { useGroups } from '@/stores/groups'
     import { useAppSettingsStore } from '@/stores/appSettings'
     import { useNotifyStore } from '@/stores/notify'
-    import { UseColorMode } from '@vueuse/components'
     import VersionChecker from '@/components/VersionChecker.vue'
 
     const $2fauth = inject('2fauth')
@@ -186,21 +185,7 @@
             </FormWrapper>
         </div>
         <VueFooter :showButtons="true">
-            <!-- Close button -->
+            <ButtonBackCloseCancel action="close" />
-            <p class="control">
-                <UseColorMode v-slot="{ mode }">
-                    <RouterLink
-                        id="btnClose"
-                        :to="{ name: returnTo }"
-                        class="button is-rounded"
-                        :class="{'is-dark' : mode === 'dark'}"
-                        tabindex="0"
-                        role="button"
-                        :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
-                        {{ $t('commons.close') }}
-                    </RouterLink>
-                </UseColorMode>
-            </p>
         </VueFooter>
     </div>
 </template>

resources/js_vue3/views/settings/WebAuthn.vue

@@ -166,21 +166,7 @@
                 </form>
                 <!-- footer -->
                 <VueFooter :showButtons="true">
-                    <!-- close button -->
+                    <ButtonBackCloseCancel action="close" />
-                    <p class="control">
-                        <UseColorMode v-slot="{ mode }">
-                            <RouterLink
-                                id="btnClose"
-                                :to="{ name: returnTo }"
-                                class="button is-rounded"
-                                :class="{'is-dark' : mode === 'dark'}"
-                                tabindex="0"
-                                role="button"
-                                :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
-                                {{ $t('commons.close') }}
-                            </RouterLink>
-                        </UseColorMode>
-                    </p>
                 </VueFooter>
             </FormWrapper>
         </div>

resources/js_vue3/views/twofaccounts/Capture.vue

@@ -168,10 +168,7 @@
             </div>
         </div>
         <div class="fullscreen-footer">
-            <!-- Cancel button -->
+            <ButtonBackCloseCancel action="cancel" :isCapture="true" :useLinkTag="false" @canceled="exitStream()" />
-            <button id="btnCancel" class="button is-large is-warning is-rounded" @click="exitStream()">
-                {{ $t('commons.cancel') }}
-            </button>
         </div>
     </div>
 </template>

resources/js_vue3/views/twofaccounts/CreateUpdate.vue

@@ -399,9 +399,7 @@
                             <div class="control">
                                 <VueButton :isLoading="form.isBusy" >{{ $t('commons.save') }}</VueButton>
                             </div>
-                            <div class="control">
+                            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
-                                <button id="btnCancel" type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -498,9 +496,7 @@
                     <p class="control" v-if="form.otp_type && form.secret">
                         <button id="btnPreview" type="button" class="button is-success is-rounded" @click="previewOTP">{{ $t('twofaccounts.forms.test') }}</button>
                     </p>
-                    <p class="control">
+                    <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
-                        <button id="btnCancel" type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
-                    </p>
                 </VueFooter>
             </form>
             <!-- modal -->

resources/js_vue3/views/twofaccounts/Import.vue

@@ -376,12 +376,7 @@
                         </span> -->
                     </button>
                 </p>
-                <!-- close button -->
+                <ButtonBackCloseCancel :action="importableCount > 0 ? 'cancel' : 'close'" />
-                <p class="control">
-                    <UseColorMode v-slot="{ mode }">
-                        <RouterLink :id="importableCount > 0 ? 'btnCancel' : 'btnClose'" :to="{ name: 'accounts' }" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" v-html="importableCount > 0 ? $t('commons.cancel') : $t('commons.close')"></RouterLink>
-                    </UseColorMode>
-                </p>
             </VueFooter>
         </ResponsiveWidthWrapper>
         <!-- modal -->

resources/js_vue3/views/twofaccounts/QRcode.vue

@@ -1,7 +1,6 @@
 <script setup>
     import twofaccountService from '@/services/twofaccountService'
     import Spinner from '@/components/Spinner.vue'
-    import { UseColorMode } from '@vueuse/components'
 
     const router = useRouter()
     const route = useRoute()
@@ -18,7 +17,6 @@
         const { data } = await twofaccountService.getQrcode(route.params.twofaccountId)
         qrcode.value = data.qrcode
     }
-
 </script>
 
 <template>
@@ -31,12 +29,7 @@
             </p>
         </div>
         <div class="fullscreen-footer">
-            <!-- Close button -->
+            <ButtonBackCloseCancel action="close" />
-            <UseColorMode v-slot="{ mode }">
-                <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="router.push({ name: 'accounts' });">
-                    {{ $t('commons.close') }}
-                </button>
-            </UseColorMode>
         </div>
     </div>
 </template>