키 가져오기 기능 추가

src/routes/(fullscreen)/key/generate/+page.svelte

@@ -4,18 +4,27 @@
   import { BottomDiv, Button, FullscreenDiv, TextButton } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { gotoStateful } from "$lib/hooks";
+  import { storeClientKeys } from "$lib/modules/key";
   import { clientKeyStore } from "$lib/stores";
+  import ForceLoginModal from "./ForceLoginModal.svelte";
   import Order from "./Order.svelte";
   import {
     generateClientKeys,
     generateInitialMasterKey,
     generateInitialHmacSecret,
+    importClientKeys,
+    requestClientRegistrationAndSessionUpgrade,
+    requestInitialMasterKeyAndHmacSecretRegistration,
   } from "./service";
 
   import IconKey from "~icons/material-symbols/key";
 
   let { data } = $props();
 
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  let isForceLoginModalOpen = $state(false);
+
   // TODO: Update
   const orders = [
     {
@@ -51,6 +60,53 @@
     });
   };
 
+  const importKeys = async () => {
+    const file = fileInput?.files?.[0];
+    if (!file) return;
+
+    if (await importClientKeys(await file.text())) {
+      await upgradeSession(false);
+    } else {
+      // TODO: Error Handling
+    }
+
+    fileInput!.value = "";
+  };
+
+  const upgradeSession = async (force: boolean) => {
+    const [upgradeRes, upgradeError] = await requestClientRegistrationAndSessionUpgrade(
+      $clientKeyStore!,
+      force,
+    );
+    if (!force && upgradeError === "Already logged in") {
+      isForceLoginModalOpen = true;
+      return;
+    } else if (!upgradeRes) {
+      // TODO: Error Handling
+      return;
+    }
+
+    const { masterKey, masterKeyWrapped } = await generateInitialMasterKey(
+      $clientKeyStore!.encryptKey,
+    );
+    const { hmacSecretWrapped } = await generateInitialHmacSecret(masterKey);
+
+    await storeClientKeys($clientKeyStore!);
+
+    if (
+      !(await requestInitialMasterKeyAndHmacSecretRegistration(
+        masterKeyWrapped,
+        hmacSecretWrapped,
+        $clientKeyStore!.signKey,
+      ))
+    ) {
+      // TODO: Error Handling
+      return;
+    }
+
+    await goto("/client/pending?redirect=" + encodeURIComponent(data.redirectPath));
+  };
+
   onMount(async () => {
     if ($clientKeyStore) {
       await goto(data.redirectPath, { replaceState: true });
@@ -62,6 +118,14 @@
   <title>암호 키 생성하기</title>
 </svelte:head>
 
+<input
+  bind:this={fileInput}
+  onchange={importKeys}
+  type="file"
+  accept="application/json"
+  class="hidden"
+/>
+
 <FullscreenDiv>
   <TitledDiv childrenClass="space-y-4">
     {#snippet title()}
@@ -83,6 +147,8 @@
   </TitledDiv>
   <BottomDiv class="flex flex-col items-center gap-y-2">
     <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
-    <TextButton>키를 갖고 있어요</TextButton>
+    <TextButton onclick={() => fileInput?.click()}>키를 갖고 있어요</TextButton>
   </BottomDiv>
 </FullscreenDiv>
+
+<ForceLoginModal bind:isOpen={isForceLoginModalOpen} onLoginClick={() => upgradeSession(true)} />