feat: add "update the button" when key exchange version is out-of-date

src/components/DataDownloader.vue

@@ -65,6 +65,8 @@
         {{ errorMessage }}
       </v-alert>
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
       <v-dialog v-model="openRetryDownload" persistent max-width="290">
         <v-card>
           <v-card-title class="text-h5">{{ strings?.['retry_download_dialog_title'] }}</v-card-title>
@@ -113,7 +115,9 @@ import {firstAtLeastBlobFromReadableStream} from "@/utils/firstAtLeastBlobFromRe
 import {decideFileName} from "@/piping-ui-utils/decideFileName";
 import {readableBytesString} from "@/utils/readableBytesString";
 import {getReadableStreamWithProgress} from "@/utils/getReadableStreamWithProgress";
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
 
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 const FileSaverAsync = () => import('file-saver').then(p => p.default);
 const swDownloadAsync = () => import("@/sw-download");
 const openPgpUtilsAsync = () => import("@/utils/openpgp-utils");
@@ -178,6 +182,7 @@ const progressPercentage = computed<number | null>(() => {
   }
   return progressSetting.value.loadedBytes / progressSetting.value.totalBytes * 100;
 });
+const showsUpdateAppButton = ref(false);
 
 // NOTE: Automatically download when mounted
 onMounted(async () => {
@@ -207,6 +212,7 @@ onMounted(async () => {
       case "key_exchange_error": {
         const errorCode = keyExchangeRes.error.keyExchangeError;
         updateErrorMessage(() => strings.value?.["key_exchange_error"](errorCode));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.error.keyExchangeError);
         break;
       }
       case "sender_not_verified":

src/components/DataUploader.vue

@@ -109,6 +109,8 @@
                v-html="errorMessage"
                :value="hasError" />
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
     </v-expansion-panel-content>
   </v-expansion-panel>
 
@@ -147,6 +149,9 @@ import {useErrorMessage} from "@/composables/useErrorMessage";
 import {strings} from "@/strings/strings";
 import {ecdsaP384SigningKeyPairPromise} from "@/states/ecdsaP384SigningKeyPairPromise";
 import * as fileType from 'file-type/browser';
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
+
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 
 const props = defineProps<{ composedProps: DataUploaderProps }>();
 
@@ -169,6 +174,7 @@ const isCompressing = ref(false);
 const isNonStreamingEncrypting = ref(false);
 const verificationStep = ref<pipingUiAuth.VerificationStep>({type: 'initial'});
 const pipingUiAuthVerificationCode = ref<string | undefined>();
+const showsUpdateAppButton = ref(false);
 
 const progressPercentage = computed<number | null>(() => {
   if (progressSetting.value.totalBytes === undefined) {
@@ -292,6 +298,7 @@ onMounted(async () => {
       if (keyExchangeRes.type === 'error') {
         verificationStep.value = {type: 'error'};
         updateErrorMessage(() => strings.value?.['key_exchange_error'](keyExchangeRes.keyExchangeError));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.keyExchangeError);
         return;
       }
       const {key, mainPath, verificationCode} = keyExchangeRes;

src/components/DataViewer.vue

@@ -161,6 +161,8 @@
         {{ errorMessage }}
       </v-alert>
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
     </v-expansion-panel-content>
   </v-expansion-panel>
 
@@ -204,6 +206,9 @@ import {getReadableStreamWithProgress} from "@/utils/getReadableStreamWithProgre
 import {strings} from "@/strings/strings";
 import {ecdsaP384SigningKeyPairPromise} from "@/states/ecdsaP384SigningKeyPairPromise";
 import {decideFileName} from "@/piping-ui-utils/decideFileName";
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
+
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 
 // eslint-disable-next-line no-undef
 const props = defineProps<{ composedProps: DataViewerProps }>();
@@ -233,6 +238,7 @@ let blob = new Blob();
 const showsCopied = ref(false);
 const isDecrypting = ref(false);
 const pipingUiAuthVerificationCode = ref<string | undefined>();
+const showsUpdateAppButton = ref(false);
 let topPriorityDataMeta: { fileName: string | undefined, fileExtension: string | undefined } | undefined;
 
 const progressPercentage = computed<number | null>(() => {
@@ -330,6 +336,7 @@ onMounted(async () => {
       case "key_exchange_error": {
         const errorCode = keyExchangeRes.error.keyExchangeError;
         updateErrorMessage(() => strings.value?.["key_exchange_error"](errorCode));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.error.keyExchangeError);
         break;
       }
       case "sender_not_verified":

src/components/UpdateAppButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-btn color="warning" x-large block @click="update()">
+    <v-icon >{{ mdiRefresh }}</v-icon>
+    {{ strings?.['update_the_app'] }}
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import {strings} from "@/strings/strings";
+import {mdiRefresh} from "@mdi/js";
+
+function update() {
+  window.location.reload();
+}
+</script>

src/piping-ui-utils/shouldUpdateApp.ts

@@ -0,0 +1,9 @@
+import * as pipingUiAuth from "@/piping-ui-auth";
+import {KEY_EXCHANGE_VERSION} from "@/piping-ui-auth/KEY_EXCHANGE_VERSION";
+
+export function shouldUpdateApp(keyExchangeError: pipingUiAuth.KeyExchangeError): boolean {
+  if (keyExchangeError.code !== "key_exchange_version_mismatch") {
+    return false;
+  }
+  return KEY_EXCHANGE_VERSION < keyExchangeError.peerVersion;
+}

src/strings/en.ts

@@ -107,6 +107,7 @@ curl https://ppng.io/mypath | gpg</code>
   },
   data_uploader_xhr_upload_error: 'An error occurred while uploading',
   cancel: 'Cancel',
+  update_the_app: 'Update the app',
   view_in_viewer: 'View',
   download_url: 'Download URL',
   waiting_for_sender: 'Waiting for sender...',

src/strings/ja.ts

@@ -106,6 +106,7 @@ curl https://ppng.io/mypath | gpg</code>
     return sanitizeHtmlAllowingATag(`エラーが発生しました。サーバーが0.9.4より低い可能性があります。 <a href="${versionUrl}" target="_blank">${versionUrl}</a> でバージョンの確認できます。`);
   },
   data_uploader_xhr_upload_error: 'アップロード中にエラーが発生しました',
+  update_the_app: 'アプリを更新',
   cancel: 'キャンセル',
   view_in_viewer: '表示',
   decrypting: '復号中...',