Files
arkvault/src/routes/(fullscreen)/client/pending/+page.svelte
2025-01-02 03:08:11 +09:00

65 lines
1.9 KiB
Svelte

<script lang="ts">
import { goto } from "$app/navigation";
import { TitleDiv } from "$lib/components/divs";
import { clientKeyStore, masterKeyStore } from "$lib/stores";
import { generateEncryptKeyFingerprint, requestMasterKeyDownload } from "./service";
import IconFingerprint from "~icons/material-symbols/fingerprint";
let { data } = $props();
let fingerprint = $derived(
$clientKeyStore ? generateEncryptKeyFingerprint($clientKeyStore.encryptKey) : undefined,
);
$effect(() => {
if ($masterKeyStore) {
goto(data.redirectPath);
} else if ($clientKeyStore) {
requestMasterKeyDownload($clientKeyStore.decryptKey, $clientKeyStore.verifyKey).then(
async (ok) => {
if (ok) {
return await goto(data.redirectPath);
}
},
);
}
});
</script>
<svelte:head>
<title>승인을 기다리고 있어요.</title>
</svelte:head>
<TitleDiv>
<div class="flex flex-col gap-y-2">
<h1 class="text-3xl font-bold">승인을 기다리고 있어요.</h1>
<p>
회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
</p>
</div>
<div class="my-4 flex flex-col gap-y-2">
<div>
<IconFingerprint class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
</div>
<div class="rounded-2xl bg-gray-100 p-4">
<p class="text-center text-2xl font-medium text-gray-800">
{#if !fingerprint}
지문 생성하는 중...
{:else}
{#await fingerprint}
지문 생성하는 중...
{:then fingerprint}
{fingerprint}
{/await}
{/if}
</p>
</div>
<p class="text-center">
암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
지문이 일치하는지 확인 후 승인해 주세요.
</p>
</div>
</TitleDiv>