feat: add qrcode generation

Author: christophwitzko

webui/app/(dashboard)/peers/generate-peer.tsx

@@ -44,6 +44,7 @@ import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "sonner";
+import QRCode from "qrcode";
 
 const generatePeerFormSchema = z.object({
   allowedIP: z.string().ip({ version: "v4" }),
@@ -126,6 +127,12 @@ export function GeneratePeer() {
     [hub.data, generatedPeer],
   );
 
+  useEffect(() => {
+    if (showQR && canvasRef.current) {
+      QRCode.toCanvas(canvasRef.current, peerConfig, {}).catch(console.error);
+    }
+  }, [showQR, peerConfig]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

webui/bun.lockb

@@ -27,6 +27,7 @@
     "next-themes": "^0.2.1",
     "p-memoize": "^7.1.1",
     "pretty-bytes": "^6.1.1",
+    "qrcode": "^1.5.3",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.0",
@@ -40,6 +41,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",