From 39bbc8c13468f7b0e0d2491ee59626c1493e4015 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 23 Nov 2023 12:43:27 +0100
Subject: [PATCH] Add a Link to Home in footer to exit browsing loop

---
 resources/js_vue3/assets/app.scss               | 2 +-
 resources/js_vue3/layouts/Footer.vue            | 5 +++++
 resources/js_vue3/layouts/Modal.vue             | 4 ++--
 resources/js_vue3/views/Error.vue               | 7 +++----
 resources/js_vue3/views/twofaccounts/QRcode.vue | 4 ++--
 resources/lang/en/commons.php                   | 1 +
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/resources/js_vue3/assets/app.scss b/resources/js_vue3/assets/app.scss
index ff470115..70be65fd 100644
--- a/resources/js_vue3/assets/app.scss
+++ b/resources/js_vue3/assets/app.scss
@@ -991,7 +991,7 @@ footer.main .field.is-grouped {
   margin-bottom: 0.75rem;
 }
 
-.error-message p {
+.error-message > p {
   margin-bottom: 0.5rem;
 }
 
diff --git a/resources/js_vue3/layouts/Footer.vue b/resources/js_vue3/layouts/Footer.vue
index 17b2dc1b..7c16bd8b 100644
--- a/resources/js_vue3/layouts/Footer.vue
+++ b/resources/js_vue3/layouts/Footer.vue
@@ -23,6 +23,7 @@
 
 <template>
     <footer class="main">
+        <!-- action buttons -->
         <div class="columns is-gapless" v-if="showButtons">
             <div class="column has-text-centered">
                 <div class="field is-grouped">
@@ -30,9 +31,13 @@
                 </div>
             </div>
         </div>
+        <!-- sub-links -->
         <div v-if="internalFooterType == 'doneButton'" class="content has-text-centered">
             <button id="lnkExitEdit" class="button is-ghost is-like-text" @click.stop="$emit('doneButtonClicked', true)">{{ $t('commons.done') }}</button>
         </div>
+        <div v-if="internalFooterType == 'modal'" class="content has-text-centered">
+            <router-link id="lnkBackToHome" :to="{ name: 'accounts' }" class="has-text-grey">{{ $t('commons.back_to_home') }}</router-link>
+        </div>
         <div v-else class="content has-text-centered">
             <div v-if="$route.meta.showAbout === true" class="is-size-6">
                 <router-link id="lnkAbout" :to="{ name: 'about' }" class="has-text-grey">
diff --git a/resources/js_vue3/layouts/Modal.vue b/resources/js_vue3/layouts/Modal.vue
index 5d776e48..44672d48 100644
--- a/resources/js_vue3/layouts/Modal.vue
+++ b/resources/js_vue3/layouts/Modal.vue
@@ -40,8 +40,8 @@
                 </div>
             </section>
         </div>
-        <div v-if="props.closable" class="fullscreen-footer">
+        <VueFooter v-if="props.closable" :showButtons="true" :internalFooterType="'modal'">
             <ButtonBackCloseCancel action="close" :useLinkTag="false" @closed="closeModal" />
-        </div>
+        </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/js_vue3/views/Error.vue b/resources/js_vue3/views/Error.vue
index 50db9a50..70c7ccb2 100644
--- a/resources/js_vue3/views/Error.vue
+++ b/resources/js_vue3/views/Error.vue
@@ -33,19 +33,18 @@
 </script>
 
 <template>
-    <div class="error-message">
+    <div>
         <modal v-model="showModal" :closable="props.closable">
             <div class="error-message" v-if="$route.name == '404' || $route.name == 'notFound'">
                 <p class="error-404"></p>
                 <p>{{ $t('errors.resource_not_found') }}</p>
             </div>
-            <div v-else>
+            <div v-else class="error-message" >
                 <p class="error-generic"></p>
                 <p>{{ $t('errors.error_occured') }} </p>
                 <p v-if="errorHandler.message" class="has-text-grey-lighter">{{ errorHandler.message }}</p>
                 <p v-if="errorHandler.originalMessage" class="has-text-grey-lighter">{{ errorHandler.originalMessage }}</p>
-                <p v-if="showDebug && errorHandler.debug" class="is-size-7 is-family-code"><br>{{ errorHandler.debug }}
-                </p>
+                <p v-if="showDebug && errorHandler.debug" class="is-size-7 is-family-code"><br>{{ errorHandler.debug }}</p>
             </div>
         </modal>
     </div>
diff --git a/resources/js_vue3/views/twofaccounts/QRcode.vue b/resources/js_vue3/views/twofaccounts/QRcode.vue
index e5c61e1a..c0025fe8 100644
--- a/resources/js_vue3/views/twofaccounts/QRcode.vue
+++ b/resources/js_vue3/views/twofaccounts/QRcode.vue
@@ -28,8 +28,8 @@
                 <Spinner :isVisible="!qrcode" :type="'raw'" class="is-size-1" />
             </p>
         </div>
-        <div class="fullscreen-footer">
+        <VueFooter :showButtons="true" :internalFooterType="'modal'">
             <ButtonBackCloseCancel :returnTo="{ name: 'accounts' }" action="close" />
-        </div>
+        </VueFooter>
     </div>
 </template>
\ No newline at end of file
diff --git a/resources/lang/en/commons.php b/resources/lang/en/commons.php
index c638861b..13f9c33c 100644
--- a/resources/lang/en/commons.php
+++ b/resources/lang/en/commons.php
@@ -74,4 +74,5 @@ return [
     'close_the_x_page' => 'Close the :pagetitle page',
     'submit' => 'Submit',
     'default' => 'Default',
+    'back_to_home' => 'Back to home',
 ];