From 6aeddde1cdd0c90a6c2a37c5a870a9b0f5f4e2fc Mon Sep 17 00:00:00 2001 From: Justin van der Westhuizen Date: Fri, 25 Apr 2025 07:06:14 +0200 Subject: [PATCH 1/4] Added QR code to wireguard config for easy scanning on mobile phones --- src/app/[orgId]/settings/sites/create/page.tsx | 14 ++++++++++++-- src/components/QRContainer.tsx | 17 +++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 src/components/QRContainer.tsx diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx index f078b9d7..ba46aa59 100644 --- a/src/app/[orgId]/settings/sites/create/page.tsx +++ b/src/app/[orgId]/settings/sites/create/page.tsx @@ -57,6 +57,8 @@ import { BreadcrumbSeparator } from "@app/components/ui/breadcrumb"; import Link from "next/link"; +import QRCode from "react-qr-code"; +import QRContainer from "@app/components/QRContainer"; const createSiteFormSchema = z .object({ @@ -775,8 +777,16 @@ PersistentKeepalive = 5`; - - +
+ + + + +
diff --git a/src/components/QRContainer.tsx b/src/components/QRContainer.tsx new file mode 100644 index 00000000..65912dba --- /dev/null +++ b/src/components/QRContainer.tsx @@ -0,0 +1,17 @@ +"use client"; + +export default function QRContainer({ + children =
, + outline = true +}) { + + return ( +
+
+ {children} +
+
+ ); +} From 8990de561890ee352a765cc911924c3b4774e474 Mon Sep 17 00:00:00 2001 From: Justin van der Westhuizen Date: Fri, 25 Apr 2025 07:38:17 +0200 Subject: [PATCH 2/4] added missing package --- package-lock.json | 18 ++++++++++++++++++ package.json | 1 + 2 files changed, 19 insertions(+) diff --git a/package-lock.json b/package-lock.json index c9e0a334..42ec8283 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,6 +64,7 @@ "react-easy-sort": "^1.6.0", "react-hook-form": "7.54.2", "react-icons": "^5.5.0", + "react-qr-code": "^2.0.15", "rebuild": "0.1.2", "semver": "7.6.3", "tailwind-merge": "2.6.0", @@ -13283,6 +13284,11 @@ "node": ">=6" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/qrcode.react": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz", @@ -14263,6 +14269,18 @@ "integrity": "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==", "license": "MIT" }, + "node_modules/react-qr-code": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz", + "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-remove-scroll": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz", diff --git a/package.json b/package.json index 08cb73aa..eb49eafc 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "react-easy-sort": "^1.6.0", "react-hook-form": "7.54.2", "react-icons": "^5.5.0", + "react-qr-code": "^2.0.15", "rebuild": "0.1.2", "semver": "7.6.3", "tailwind-merge": "2.6.0", From 2a43b3ce4abe540a32470bf075e6fd8274855cef Mon Sep 17 00:00:00 2001 From: Justin van der Westhuizen Date: Fri, 25 Apr 2025 19:46:19 +0200 Subject: [PATCH 3/4] changed qrcode to react-qr-code --- src/app/[orgId]/settings/sites/create/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx index ba46aa59..438d1ae7 100644 --- a/src/app/[orgId]/settings/sites/create/page.tsx +++ b/src/app/[orgId]/settings/sites/create/page.tsx @@ -57,7 +57,7 @@ import { BreadcrumbSeparator } from "@app/components/ui/breadcrumb"; import Link from "next/link"; -import QRCode from "react-qr-code"; +import { QRCodeCanvas } from "qrcode.react"; import QRContainer from "@app/components/QRContainer"; const createSiteFormSchema = z @@ -780,7 +780,7 @@ PersistentKeepalive = 5`;
- Date: Fri, 25 Apr 2025 19:50:14 +0200 Subject: [PATCH 4/4] removed react-qr-code --- package-lock.json | 18 ------------------ package.json | 1 - 2 files changed, 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 42ec8283..c9e0a334 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,6 @@ "react-easy-sort": "^1.6.0", "react-hook-form": "7.54.2", "react-icons": "^5.5.0", - "react-qr-code": "^2.0.15", "rebuild": "0.1.2", "semver": "7.6.3", "tailwind-merge": "2.6.0", @@ -13284,11 +13283,6 @@ "node": ">=6" } }, - "node_modules/qr.js": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", - "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" - }, "node_modules/qrcode.react": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz", @@ -14269,18 +14263,6 @@ "integrity": "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==", "license": "MIT" }, - "node_modules/react-qr-code": { - "version": "2.0.15", - "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz", - "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==", - "dependencies": { - "prop-types": "^15.8.1", - "qr.js": "0.0.0" - }, - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-remove-scroll": { "version": "2.6.3", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz", diff --git a/package.json b/package.json index eb49eafc..08cb73aa 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,6 @@ "react-easy-sort": "^1.6.0", "react-hook-form": "7.54.2", "react-icons": "^5.5.0", - "react-qr-code": "^2.0.15", "rebuild": "0.1.2", "semver": "7.6.3", "tailwind-merge": "2.6.0",