Updated QR scanner call

- Searched for all other (outdated) calls to QR scanner dialog and updated them
- Fixed vite HTML spec warning

src/components/ImageMethodDialog.vue

@@ -242,12 +242,12 @@
             <p class="mb-2">
               Before you can upload a photo, a friend needs to register you.
             </p>
-            <router-link
+            <button
-              :to="{ name: 'contact-qr' }"
               class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+              @click="handleQRCodeClick"
             >
               Share Your Info
-            </router-link>
+            </button>
           </div>
         </template>
       </div>
@@ -260,6 +260,7 @@ import axios from "axios";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import VuePictureCropper, { cropper } from "vue-picture-cropper";
+import { Capacitor } from "@capacitor/core";
 import {
   DEFAULT_IMAGE_API_SERVER,
   NotificationIface,
@@ -709,6 +710,14 @@ export default class ImageMethodDialog extends Vue {
   toggleDiagnostics() {
     this.showDiagnostics = !this.showDiagnostics;
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>
 

src/views/AccountViewView.vue

@@ -44,12 +44,12 @@
       <div v-if="givenName">
         <h2 class="text-xl font-semibold mb-2">
           <span class="whitespace-nowrap">
-            <router-link
+            <button
-              :to="{ name: 'contact-qr' }"
+              class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
-              class="bg-slate-500 text-white px-1.5 py-1 rounded-md"
+              @click="handleQRCodeClick"
             >
-              <font-awesome icon="qrcode" class="fa-fw text-xl"></font-awesome>
+              <font-awesome icon="qrcode" class="fa-fw text-xl" />
-            </router-link>
+            </button>
           </span>
           {{ givenName }}
           <router-link :to="{ name: 'new-edit-account' }">
@@ -206,12 +206,12 @@
         Before you can publicly announce a new project or time commitment, a
         friend needs to register you.
       </p>
-      <router-link
+      <button
-        :to="{ name: 'contact-qr' }"
         class="inline-block text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+        @click="handleQRCodeClick"
       >
         Share Your Info
-      </router-link>
+    </button>
     </div>
 
     <section
@@ -991,6 +991,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import { Capacitor } from "@capacitor/core";
 
 import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
@@ -2224,5 +2225,13 @@ export default class AccountViewView extends Vue {
       this.savingProfile = false;
     }
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>

src/views/HelpView.vue

@@ -215,7 +215,7 @@
           Use these instructions.
         </a>
         To start scanning, go to the
-        <router-link class="text-blue-500" to="/contact-qr">contact-scanning page.</router-link>
+        <span class="text-blue-500 cursor-pointer" @click="handleQRCodeClick">contact-scanning page.</span>
       </p>
       <p>
         If they are not nearby to scan QR codes, you each can tap on the QR code
@@ -502,27 +502,27 @@
         then don't use it.
         <br />
         As for data & privacy:
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            If using notifications, a server stores push token data. That can be revoked at any time
-            by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
-          </li>
-          <li>
-            If sending images, a server stores them, too. They can be removed by editing the claim
-            and deleting them.
-          </li>
-          <li>
-            If sending other partner system data (eg. to Trustroots) a public key and message
-            data are stored on a server. Those can be removed via direct personal request.
-          </li>
-          <li>
-            For all other claim data,
-            <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
-              the Endorser Service has this Privacy Policy.
-            </a>
-          </li>
-        </ul>
       </p>
+      <ul class="list-disc list-outside ml-4">
+        <li>
+          If using notifications, a server stores push token data. That can be revoked at any time
+          by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
+        </li>
+        <li>
+          If sending images, a server stores them, too. They can be removed by editing the claim
+          and deleting them.
+        </li>
+        <li>
+          If sending other partner system data (eg. to Trustroots) a public key and message
+          data are stored on a server. Those can be removed via direct personal request.
+        </li>
+        <li>
+          For all other claim data,
+          <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
+            the Endorser Service has this Privacy Policy.
+          </a>
+        </li>
+      </ul>
 
       <h2 class="text-xl font-semibold">How can I contribute?</h2>
       <p>
@@ -576,6 +576,7 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { Capacitor } from "@capacitor/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "../components/QuickNav.vue";
@@ -632,5 +633,13 @@ export default class HelpView extends Vue {
     }
     this.$router.push({ name: "home" });
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>

src/views/HomeView.vue

@@ -298,6 +298,7 @@ Raymer * @version 1.0.0 */
 import { UAParser } from "ua-parser-js";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
+import { Capacitor } from "@capacitor/core";
 
 //import App from "../App.vue";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -1765,7 +1766,7 @@ export default class HomeView extends Vue {
         this.$router.push({ name: "onboard-meeting-list" });
       },
       onOption2: () => {
-        this.$router.push({ name: "contact-qr" });
+        this.handleQRCodeClick();
       },
       onOption3: () => {
         this.$router.push({ name: "share-my-contact-info" });
@@ -1872,5 +1873,13 @@ export default class HomeView extends Vue {
       -1,
     );
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>

src/views/ProjectsView.vue

@@ -268,6 +268,7 @@
 import { AxiosRequestConfig } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
+import { Capacitor } from "@capacitor/core";
 
 import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
@@ -559,7 +560,7 @@ export default class ProjectsView extends Vue {
           this.$router.push({ name: "share-my-contact-info" });
         },
         onYes: async () => {
-          this.$router.push({ name: "contact-qr" });
+          this.handleQRCodeClick();
         },
         noText: "we will share another way",
         yesText: "we are nearby with cameras",
@@ -603,5 +604,13 @@ export default class ProjectsView extends Vue {
       "hover:border-slate-400": !this.showProjects,
     };
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>