From 929a513ad745c3d756d62979a892a03fed198609 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 3 Nov 2023 13:20:40 +0100
Subject: [PATCH] Set Back/Close/Cancel buttons using a component

---
 resources/js_vue3/app.js                      |  2 +
 .../components/DestinationGroupSelector.vue   |  7 +-
 resources/js_vue3/components/GroupSwitch.vue  |  7 +-
 .../formElements/ButtonBackCloseCancel.vue    | 87 +++++++++++++++++++
 resources/js_vue3/layouts/Modal.vue           |  9 +-
 resources/js_vue3/views/About.vue             | 14 +--
 resources/js_vue3/views/Start.vue             |  9 +-
 resources/js_vue3/views/groups/Groups.vue     |  7 +-
 resources/js_vue3/views/settings/Account.vue  | 17 +---
 resources/js_vue3/views/settings/OAuth.vue    | 16 +---
 resources/js_vue3/views/settings/Options.vue  | 17 +---
 resources/js_vue3/views/settings/WebAuthn.vue | 16 +---
 .../js_vue3/views/twofaccounts/Capture.vue    |  5 +-
 .../views/twofaccounts/CreateUpdate.vue       |  8 +-
 .../js_vue3/views/twofaccounts/Import.vue     |  7 +-
 .../js_vue3/views/twofaccounts/QRcode.vue     |  9 +-
 16 files changed, 104 insertions(+), 133 deletions(-)
 create mode 100644 resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue

diff --git a/resources/js_vue3/app.js b/resources/js_vue3/app.js
index 7f8fa48e..b6f023bd 100644
--- a/resources/js_vue3/app.js
+++ b/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)
diff --git a/resources/js_vue3/components/DestinationGroupSelector.vue b/resources/js_vue3/components/DestinationGroupSelector.vue
index c57ad681..69497bb5 100644
--- a/resources/js_vue3/components/DestinationGroupSelector.vue
+++ b/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 -->
-            <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>
+            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/components/GroupSwitch.vue b/resources/js_vue3/components/GroupSwitch.vue
index 609471b6..19568a92 100644
--- a/resources/js_vue3/components/GroupSwitch.vue
+++ b/resources/js_vue3/components/GroupSwitch.vue
@@ -45,12 +45,7 @@
             </div>
         </div>
         <VueFooter :showButtons="true">
-            <!-- Close Group switch button -->
-            <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>
+            <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="$emit('update:showGroupSwitch', false)" />
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue b/resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue
new file mode 100644
index 00000000..a2c1184a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js_vue3/layouts/Modal.vue b/resources/js_vue3/layouts/Modal.vue
index 1010ccbf..b1a07617 100644
--- a/resources/js_vue3/layouts/Modal.vue
+++ b/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 -->
-            <UseColorMode v-slot="{ mode }">
-                <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="closeModal">
-                    {{ $t('commons.close') }}
-                </button>
-            </UseColorMode>
+            <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="closeModal" />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/About.vue b/resources/js_vue3/views/About.vue
index d67d567e..6378eca4 100644
--- a/resources/js_vue3/views/About.vue
+++ b/resources/js_vue3/views/About.vue
@@ -128,19 +128,7 @@
         </div>
         <!-- footer -->
         <VueFooter :showButtons="true">
-            <!-- close button -->
-            <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>
+            <ButtonBackCloseCancel action="back" />
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/Start.vue b/resources/js_vue3/views/Start.vue
index f2ee51a5..3b7bce45 100644
--- a/resources/js_vue3/views/Start.vue
+++ b/resources/js_vue3/views/Start.vue
@@ -109,14 +109,7 @@
         </div>
         <!-- Footer -->
         <VueFooter :showButtons="true" >
-            <!-- back button -->
-            <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>
+            <ButtonBackCloseCancel action="back" v-if="!twofaccounts.isEmpty" />
         </VueFooter>
     </div>
 </template>
diff --git a/resources/js_vue3/views/groups/Groups.vue b/resources/js_vue3/views/groups/Groups.vue
index 73cb9229..3669e089 100644
--- a/resources/js_vue3/views/groups/Groups.vue
+++ b/resources/js_vue3/views/groups/Groups.vue
@@ -68,12 +68,7 @@
         </div>
         <!-- footer -->
         <VueFooter :showButtons="true">
-            <!-- close button -->
-            <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>
+            <ButtonBackCloseCancel action="close" />
         </VueFooter>
     </ResponsiveWidthWrapper>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/settings/Account.vue b/resources/js_vue3/views/settings/Account.vue
index 885b4724..ec5575c0 100644
--- a/resources/js_vue3/views/settings/Account.vue
+++ b/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 -->
-            <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>
+            <ButtonBackCloseCancel action="close" />
         </VueFooter>
     </div>
 </template>
diff --git a/resources/js_vue3/views/settings/OAuth.vue b/resources/js_vue3/views/settings/OAuth.vue
index dde81d94..d06968f8 100644
--- a/resources/js_vue3/views/settings/OAuth.vue
+++ b/resources/js_vue3/views/settings/OAuth.vue
@@ -156,21 +156,7 @@
                 <Spinner :isVisible="isFetching && tokens.length === 0" />
                 <!-- footer -->
                 <VueFooter :showButtons="true">
-                    <!-- close button -->
-                    <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>
+                    <ButtonBackCloseCancel action="close" />
                 </VueFooter>
             </FormWrapper>
         </div>
diff --git a/resources/js_vue3/views/settings/Options.vue b/resources/js_vue3/views/settings/Options.vue
index 9ccbbfa6..e7011107 100644
--- a/resources/js_vue3/views/settings/Options.vue
+++ b/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 -->
-            <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>
+            <ButtonBackCloseCancel action="close" />
         </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/settings/WebAuthn.vue b/resources/js_vue3/views/settings/WebAuthn.vue
index eb1ade7b..12cfbeed 100644
--- a/resources/js_vue3/views/settings/WebAuthn.vue
+++ b/resources/js_vue3/views/settings/WebAuthn.vue
@@ -166,21 +166,7 @@
                 </form>
                 <!-- footer -->
                 <VueFooter :showButtons="true">
-                    <!-- close button -->
-                    <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>
+                    <ButtonBackCloseCancel action="close" />
                 </VueFooter>
             </FormWrapper>
         </div>
diff --git a/resources/js_vue3/views/twofaccounts/Capture.vue b/resources/js_vue3/views/twofaccounts/Capture.vue
index 4c0f82c0..3f50cee2 100644
--- a/resources/js_vue3/views/twofaccounts/Capture.vue
+++ b/resources/js_vue3/views/twofaccounts/Capture.vue
@@ -168,10 +168,7 @@
             </div>
         </div>
         <div class="fullscreen-footer">
-            <!-- Cancel button -->
-            <button id="btnCancel" class="button is-large is-warning is-rounded" @click="exitStream()">
-                {{ $t('commons.cancel') }}
-            </button>
+            <ButtonBackCloseCancel action="cancel" :isCapture="true" :useLinkTag="false" @canceled="exitStream()" />
         </div>
     </div>
 </template>
diff --git a/resources/js_vue3/views/twofaccounts/CreateUpdate.vue b/resources/js_vue3/views/twofaccounts/CreateUpdate.vue
index 6ca42607..ad1367e0 100644
--- a/resources/js_vue3/views/twofaccounts/CreateUpdate.vue
+++ b/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">
-                                <button id="btnCancel" type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
-                            </div>
+                            <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
                         </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">
-                        <button id="btnCancel" type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
-                    </p>
+                    <ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="cancelCreation" />
                 </VueFooter>
             </form>
             <!-- modal -->
diff --git a/resources/js_vue3/views/twofaccounts/Import.vue b/resources/js_vue3/views/twofaccounts/Import.vue
index 9131314e..dca2d93f 100644
--- a/resources/js_vue3/views/twofaccounts/Import.vue
+++ b/resources/js_vue3/views/twofaccounts/Import.vue
@@ -376,12 +376,7 @@
                         </span> -->
                     </button>
                 </p>
-                <!-- close button -->
-                <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>
+                <ButtonBackCloseCancel :action="importableCount > 0 ? 'cancel' : 'close'" />
             </VueFooter>
         </ResponsiveWidthWrapper>
         <!-- modal -->
diff --git a/resources/js_vue3/views/twofaccounts/QRcode.vue b/resources/js_vue3/views/twofaccounts/QRcode.vue
index ad762eeb..dee53cd9 100644
--- a/resources/js_vue3/views/twofaccounts/QRcode.vue
+++ b/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 -->
-            <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>
+            <ButtonBackCloseCancel action="close" />
         </div>
     </div>
 </template>
\ No newline at end of file