feat(api,frontend): add qr code login

2026-08-06 00:23:38 +02:00
parent 9c265af3d3
commit e887dfc5ce
9 changed files with 315 additions and 80 deletions
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { encode } from "uqr";
+
+  const QUIET_ZONE = 2;
+
+  let { value, label }: { value: string; label: string } = $props();
+
+  const code = $derived.by(() => {
+    const qr = encode(value, { ecc: "M", border: 0 });
+    const path = qr.data
+      .flatMap((row, y) =>
+        row.flatMap((filled, x) => (filled ? [`M${x} ${y}h1v1h-1z`] : []))
+      )
+      .join("");
+    return { extent: qr.size + QUIET_ZONE * 2, path };
+  });
+</script>
+
+<svg
+  class="qr"
+  viewBox="0 0 {code.extent} {code.extent}"
+  role="img"
+  aria-label={label}
+>
+  <rect width={code.extent} height={code.extent} fill="var(--qr-bg, #fff)" />
+  <path
+    d={code.path}
+    fill="var(--qr-fg, #000)"
+    transform="translate({QUIET_ZONE} {QUIET_ZONE})"
+  />
+</svg>
+
+<style lang="scss">
+  .qr {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0.75rem;
+  }
+</style>