From 2b6e898eb4ba94c4ad4637c9f4495b113072998a Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Fri, 4 Oct 2024 11:17:27 +0930
Subject: [PATCH 1/2] fix inconsistent image loading

---
 src/2sv/key/Insert.vue             |  4 +++-
 src/2sv/key/Intro.vue              |  6 +++++-
 src/2sv/key/Touch.vue              |  9 +++------
 src/2sv/smartphone/DownloadApp.vue | 18 ++++++++++++++----
 src/App.vue                        |  4 +++-
 src/global/PageNotFound.vue        | 11 ++++++++++-
 6 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/2sv/key/Insert.vue b/src/2sv/key/Insert.vue
index e00059d..c3f32c0 100644
--- a/src/2sv/key/Insert.vue
+++ b/src/2sv/key/Insert.vue
@@ -9,7 +9,7 @@
       </template>
 
       <figure v-if="isSupported" class="pa-4">
-        <v-img contain src="@/assets/insert-usb-security-key.png" alt="A usb key inserted into a usb port." />
+        <v-img contain :src="usbKey" alt="A usb key inserted into a usb port." />
       </figure>
       <p v-else>{{ $vuetify.lang.t('$vuetify.2sv.key.insert.nosupport.info') }}</p>
 
@@ -55,6 +55,7 @@
 import ProfileWizard from '@/profile/ProfileWizard.vue'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
 import { newKeyName, mfa } from '@/global/mfa'
+import usbKey from '@/assets/insert-usb-security-key.png'
 
 export default {
   components: {
@@ -67,6 +68,7 @@ export default {
     newKeyName,
     snackbarIsOpen: false,
     snackBarMessage: '',
+    usbKey: usbKey,
   }),
   methods: {
     onOk: function () {
diff --git a/src/2sv/key/Intro.vue b/src/2sv/key/Intro.vue
index 074579c..e5673b9 100644
--- a/src/2sv/key/Intro.vue
+++ b/src/2sv/key/Intro.vue
@@ -10,7 +10,7 @@
       </p>
 
       <figure class="pa-4">
-        <v-img src="@/assets/usb-security-key-examples.png" contain alt="Three sizes of USB keys." />
+        <v-img :src="securityKeys" contain alt="Three sizes of USB keys." />
       </figure>
     </BasePage>
 
@@ -40,10 +40,14 @@
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
+import securityKeys from '@/assets/usb-security-key-examples.png'
 
 export default {
   components: {
     ProfileWizard,
   },
+  data: () => ({
+    securityKeys,
+  }),
 }
 </script>
diff --git a/src/2sv/key/Touch.vue b/src/2sv/key/Touch.vue
index 0412933..514a789 100644
--- a/src/2sv/key/Touch.vue
+++ b/src/2sv/key/Touch.vue
@@ -16,12 +16,7 @@
       </p>
 
       <figure class="pa-4 d-flex flex-column">
-        <v-img
-          v-if="!touched"
-          contained
-          src="@/assets/touch-usb-security-key.png"
-          alt="A finger touching the top of a usb key."
-        />
+        <v-img v-if="!touched" contained :src="usbKey" alt="A finger touching the top of a usb key." />
         <v-icon v-else color="success" x-large>mdi-check</v-icon>
       </figure>
     </BasePage>
@@ -56,6 +51,7 @@
 import ProfileWizard from '@/profile/ProfileWizard.vue'
 import { browserSupportsWebAuthn, startRegistration } from '@simplewebauthn/browser'
 import { add, verifyWebauthn, newKeyName } from '@/global/mfa'
+import usbKey from '@/assets/touch-usb-security-key.png'
 
 let absTimeout
 
@@ -68,6 +64,7 @@ export default {
     touched: false,
     error: false,
     isSupported: browserSupportsWebAuthn(),
+    usbKey,
   }),
   async created() {
     this.create()
diff --git a/src/2sv/smartphone/DownloadApp.vue b/src/2sv/smartphone/DownloadApp.vue
index ff66ef8..b398c2d 100644
--- a/src/2sv/smartphone/DownloadApp.vue
+++ b/src/2sv/smartphone/DownloadApp.vue
@@ -10,8 +10,8 @@
       </p>
 
       <figure class="d-flex align-center justify-center pb-4 my-4">
-        <img v-if="isAuthy" src="@/assets/authy-logo.jpg" />
-        <img v-else src="@/assets/authenticator-logo.jpg" />
+        <img v-if="isAuthy" :src="authy" />
+        <img v-else :src="authenticator" />
 
         <figcaption class="headline ml-4">
           {{ $vuetify.lang.t(`$vuetify.2sv.smartphone.download.appname-${preferredAppName}`) }}
@@ -20,10 +20,10 @@
 
       <figure class="badges d-flex align-center justify-center">
         <a :href="`https://play.google.com/store/apps/details?id=${playStoreId}`" target="_blank" class="pr-4">
-          <img src="@/assets/google-play-badge.png" />
+          <img :src="playBadge" />
         </a>
         <a :href="`https://itunes.apple.com/us/app/${itunesAppUrl}`" target="_blank">
-          <img src="@/assets/app-store-badge.png" />
+          <img :src="appStoreBadge" />
         </a>
       </figure>
     </BasePage>
@@ -44,11 +44,21 @@
 
 <script>
 import ProfileWizard from '@/profile/ProfileWizard.vue'
+import authy from '@/assets/authy-logo.jpg'
+import authenticator from '@/assets/authenticator-logo.jpg'
+import playBadge from '@/assets/google-play-badge.png'
+import appStoreBadge from '@/assets/app-store-badge.png'
 
 export default {
   components: {
     ProfileWizard,
   },
+  data: () => ({
+    authy,
+    authenticator,
+    playBadge,
+    appStoreBadge,
+  }),
   computed: {
     isAuthy: () => import.meta.env.VITE_TOTP_APP_RECOMMENDATION === 'authy',
     preferredAppName: (vm) => (vm.isAuthy ? 'authy' : 'authenticator'),
diff --git a/src/App.vue b/src/App.vue
index 5458612..859f606 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-app-bar app color="primary">
-      <a href="/"><img src="@/assets/logo.png" /></a>
+      <a href="/"><img :src="logo" /></a>
 
       <v-spacer />
 
@@ -49,12 +49,14 @@
 
 <script>
 import HelpButton from './help/HelpButton.vue'
+import logo from '@/assets/logo.png'
 export default {
   components: {
     HelpButton,
   },
   data: () => ({
     message: '',
+    logo,
   }),
   computed: {
     mobile() {
diff --git a/src/global/PageNotFound.vue b/src/global/PageNotFound.vue
index 52bc879..378f631 100644
--- a/src/global/PageNotFound.vue
+++ b/src/global/PageNotFound.vue
@@ -4,6 +4,15 @@
       {{ $vuetify.lang.t('$vuetify.pageNotFound.header') }}
     </template>
 
-    <img src="@/assets/riddler-geeky-world.jpg" />
+    <img :src="questionImage" />
   </BasePage>
 </template>
+
+<script>
+import questionImage from '@/assets/riddler-geeky-world.jpg'
+export default {
+  data: () => ({
+    questionImage,
+  }),
+}
+</script>

From 19aee5673ebb1e19e970f6cbd98a34b3829416ba Mon Sep 17 00:00:00 2001
From: Michael Wilson <michael_wilson@sil.org>
Date: Fri, 4 Oct 2024 11:20:39 +0930
Subject: [PATCH 2/2] bump version

---
 installed-versions.json |  2 +-
 package-lock.json       | 10 +++++-----
 package.json            |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/installed-versions.json b/installed-versions.json
index 178f718..4378a78 100644
--- a/installed-versions.json
+++ b/installed-versions.json
@@ -1,5 +1,5 @@
 {
-  "version": "7.0.0",
+  "version": "7.0.1",
   "name": "idp-profile-ui",
   "dependencies": {
     "@sentry/vue": {
diff --git a/package-lock.json b/package-lock.json
index f8c128a..d1b22d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "idp-profile-ui",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "idp-profile-ui",
-      "version": "7.0.0",
+      "version": "7.0.1",
       "license": "MIT",
       "dependencies": {
         "@sentry/vue": "^7.113.0",
@@ -1611,9 +1611,9 @@
       ]
     },
     "node_modules/readdirp": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
-      "integrity": "sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
       "dev": true,
       "engines": {
         "node": ">= 14.16.0"
diff --git a/package.json b/package.json
index 9a4f97c..12257ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "idp-profile-ui",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "type": "module",
   "engines": {
     "node": ">=18.0.0 <19.0.0"