데모용 임시 회원가입 구현

src/routes/(fullscreen)/auth/login/+page.svelte

@@ -3,13 +3,21 @@
   import { BottomDiv, Button, FullscreenDiv, TextButton, TextInput } from "$lib/components/atoms";
   import { TitledDiv } from "$lib/components/molecules";
   import { clientKeyStore, masterKeyStore } from "$lib/stores";
-  import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
+  import NicknameModal from "./NicknameModal.svelte";
+  import {
+    requestLogin,
+    requestRegister,
+    requestSessionUpgrade,
+    requestMasterKeyDownload,
+  } from "./service";
 
   let { data } = $props();
 
   let email = $state("");
   let password = $state("");
 
+  let isNicknameModalOpen = $state(false);
+
   const redirect = async (url: string) => {
     return await goto(`${url}?redirect=${encodeURIComponent(data.redirectPath)}`);
   };
@@ -40,6 +48,34 @@
       throw e;
     }
   };
+
+  const register = async (nickname: string) => {
+    // TODO: Validation
+
+    try {
+      if (!(await requestRegister(email, nickname, password)))
+        throw new Error("Failed to register");
+
+      if (!$clientKeyStore) return await redirect("/key/generate");
+
+      if (!(await requestSessionUpgrade($clientKeyStore)))
+        throw new Error("Failed to upgrade session");
+
+      // TODO: Multi-user support
+
+      if (
+        $masterKeyStore ||
+        (await requestMasterKeyDownload($clientKeyStore.decryptKey, $clientKeyStore.verifyKey))
+      ) {
+        await goto(data.redirectPath);
+      } else {
+        await redirect("/client/pending");
+      }
+    } catch (e) {
+      // TODO: Alert
+      throw e;
+    }
+  };
 </script>
 
 <svelte:head>
@@ -60,6 +96,8 @@
   </TitledDiv>
   <BottomDiv class="flex flex-col items-center gap-y-2">
     <Button onclick={login} class="w-full">로그인</Button>
-    <TextButton>계정이 없어요</TextButton>
+    <TextButton onclick={() => (isNicknameModalOpen = true)}>계정이 없어요</TextButton>
   </BottomDiv>
 </FullscreenDiv>
+
+<NicknameModal bind:isOpen={isNicknameModalOpen} onSubmitClick={register} />

src/routes/(fullscreen)/auth/login/NicknameModal.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    onSubmitClick: (nickname: string) => void;
+  }
+
+  let { isOpen = $bindable(), onSubmitClick }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  title="닉네임 설정하기"
+  placeholder="닉네임"
+  submitText="새 계정 만들기"
+  {onSubmitClick}
+/>

src/routes/(fullscreen)/auth/login/service.ts

@@ -1,6 +1,6 @@
 import { callPostApi } from "$lib/hooks";
 import { exportRSAKeyToBase64 } from "$lib/modules/crypto";
-import type { LoginRequest } from "$lib/server/schemas";
+import type { LoginRequest, RegisterRequest } from "$lib/server/schemas";
 import { requestSessionUpgrade as requestSessionUpgradeInternal } from "$lib/services/auth";
 import { requestClientRegistration } from "$lib/services/key";
 import type { ClientKeys } from "$lib/stores";
@@ -12,6 +12,15 @@ export const requestLogin = async (email: string, password: string) => {
   return res.ok;
 };
 
+export const requestRegister = async (email: string, nickname: string, password: string) => {
+  const res = await callPostApi<RegisterRequest>("/api/auth/register", {
+    email,
+    nickname,
+    password,
+  });
+  return res.ok;
+};
+
 export const requestSessionUpgrade = async ({
   encryptKey,
   decryptKey,