feat: Implement PIN management using session storage

app/pages/index.vue

@@ -83,6 +83,7 @@ import {
   startSendSession,
   store,
   updateAliasState,
+  setPinState,
 } from "@/services/store";
 import { getAgentInfoString } from "~/utils/userAgent";
 import { protocolVersion } from "~/services/webrtc";
@@ -108,6 +109,20 @@ const { t } = useI18n();
 
 const { open: openFileDialog, onChange } = useFileDialog();
 
+const minDelayFinished = ref(false);
+
+const webCryptoSupported = ref(true);
+
+const targetId = ref("");
+
+const promptAndSavePin = async (): Promise<string | null> => {
+  const pin = prompt(t("index.enterPin"));
+  if (pin !== null) {
+    setPinState(pin);
+  }
+  return pin;
+};
+
 onChange(async (files) => {
   if (!files) return;
 
@@ -118,17 +133,10 @@ onChange(async (files) => {
   await startSendSession({
     files,
     targetId: targetId.value,
-    onPin: async () => {
-      return prompt(t("index.enterPin"));
-    },
+    onPin: promptAndSavePin,
   });
 });
 
-const minDelayFinished = ref(false);
-const webCryptoSupported = ref(true);
-
-const targetId = ref("");
-
 const selectPeer = (id: string) => {
   targetId.value = id;
   openFileDialog();
@@ -160,7 +168,7 @@ const updateAlias = async () => {
 const updatePIN = async () => {
   const pin = prompt(t("index.enterPin"));
   if (typeof pin === "string") {
-    store.pin = pin ? pin : null;
+    setPinState(pin ? pin : null);
   }
 };
 
@@ -198,9 +206,7 @@ onMounted(async () => {
   await setupConnection({
     url: runtimeConfig.public.signalingUrl,
     info,
-    onPin: async () => {
-      return prompt(t("index.enterPin"));
-    },
+    onPin: promptAndSavePin,
   });
 });
 </script>

app/services/store.ts

@@ -42,8 +42,7 @@ export const store = reactive({
   key: null as CryptoKeyPair | null,
 
   /// PIN code used before receiving or sending files
-  pin: null as string | null,
-
+  pin: sessionStorage.getItem("transfer_pin") ?? null,
   // Signaling connection to the server
   signaling: null as SignalingConnection | null,
 
@@ -130,6 +129,20 @@ async function connectionLoop(url: string) {
     }
   }
 }
+watch(
+  () => store.pin,
+  (newPin) => {
+    if (newPin) {
+      sessionStorage.setItem("transfer_pin", newPin);
+    } else {
+      sessionStorage.removeItem("transfer_pin");
+    }
+  },
+  { immediate: false }
+);
+export function setPinState(pin: string | null) {
+  store.pin = (pin && pin.trim() !== "") ? pin : null;
+}
 
 export function updateAliasState(alias: string) {
   store._proposingClient!.alias = alias;