One time password

TOTP implementation (incomplete. Token is generated, but not verified.)

packages/src/routes/+error.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div class='error-page'>
-  <h1>Supawiki</h1>
+  <h1>Private facts</h1>
 
   <h2>Oops... Something went wrong!</h2>
 

packages/src/routes/+layout.svelte

@@ -14,13 +14,14 @@
     --font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
     --navbar-height: 3em;
     --theme-background: white;
-    --theme-color: #555555;
+    --theme-color: #444;
   }
 
   .content {
     text-align: center;
     margin: auto;
     height: calc(100vh - 6em);
+    max-width: 60em;
     overflow: clip;
     overflow-y: auto;
   }
@@ -34,7 +35,7 @@
     overflow: clip;
   }
 
-  :global(button){
+  :global(button) {
     margin: 1em;
     width: 10em;
     height: 3em;

packages/src/routes/auth/login/+page.server.js

@@ -0,0 +1,16 @@
+import qrcode from 'qrcode'
+import { totp } from '$lib/utils'
+
+export const load = () => {
+  const { token, seconds, uri } = totp()
+
+  return { token, seconds, uri }
+}
+
+export const actions = {
+  getTotp: async ({ request }) => {
+    const { token, seconds, uri } = totp()
+
+    return { token, seconds, uri }
+  }
+}

packages/src/routes/auth/login/+page.svelte

@@ -1,3 +1,24 @@
+<script>
+  import { onDestroy } from 'svelte'
+
+  let { data, form } = $props()
+
+  let totpForm
+  let count = $state(form?.seconds ?? data.seconds)
+
+  const timer = setInterval(() => count--, 1000)
+
+  onDestroy(() => {
+    clearInterval(timer)
+  })
+
+  $effect(() => {
+    if (count === 0) {
+      totpForm.requestSubmit()
+    }
+  })
+</script>
+
 <svelte:head>
   <title>Login page</title>
   <meta name='description' content='Login page'/>
@@ -5,4 +26,10 @@
 
 <div class='login-content'>
   <h1>Login</h1>
+
+  <p>Token: {form?.token ?? data.token}.</p>
+  <p>Valid for {count}s.</p>
+
+  <form action='?/getTotp' method='post' enctype='form-data' bind:this={totpForm}>
+  </form>
 </div>