Merge branch 'dev' into auth-providers-clients

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -228,11 +228,11 @@ export default function CreateSiteForm({
                 mbIn:
                     data.type == "wireguard" || data.type == "newt"
                         ? "0 MB"
-                        : "--",
+                        : "-",
                 mbOut:
                     data.type == "wireguard" || data.type == "newt"
                         ? "0 MB"
-                        : "--",
+                        : "-",
                 orgId: orgId as string,
                 type: data.type as any,
                 online: false

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -164,7 +164,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                         );
                     }
                 } else {
-                    return <span>--</span>;
+                    return <span>-</span>;
                 }
             }
         },

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -134,7 +134,7 @@ export default function GeneralPage() {
                         loading={loading}
                         disabled={loading}
                     >
-                        Save Settings
+                        Save General Settings
                     </Button>
                 </SettingsSectionFooter>
             </SettingsSection>

src/app/[orgId]/settings/sites/create/page.tsx

@@ -29,14 +29,29 @@ import { InfoIcon, Terminal } from "lucide-react";
 import { Button } from "@app/components/ui/button";
 import CopyTextBox from "@app/components/CopyTextBox";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { InfoSection, InfoSectionContent, InfoSections, InfoSectionTitle } from "@app/components/InfoSection";
-import { FaApple, FaCubes, FaDocker, FaFreebsd, FaWindows } from "react-icons/fa";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    InfoSectionTitle
+} from "@app/components/InfoSection";
+import {
+    FaApple,
+    FaCubes,
+    FaDocker,
+    FaFreebsd,
+    FaWindows
+} from "react-icons/fa";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { generateKeypair } from "../[niceId]/wireguardConfig";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { CreateSiteBody, CreateSiteResponse, PickSiteDefaultsResponse } from "@server/routers/site";
+import {
+    CreateSiteBody,
+    CreateSiteResponse,
+    PickSiteDefaultsResponse
+} from "@server/routers/site";
 import { toast } from "@app/hooks/useToast";
 import { AxiosResponse } from "axios";
 import { useParams, useRouter } from "next/navigation";
@@ -48,6 +63,7 @@ import {
     BreadcrumbSeparator
 } from "@app/components/ui/breadcrumb";
 import Link from "next/link";
+import { QRCodeCanvas } from "qrcode.react";
 
 const createSiteFormSchema = z
     .object({
@@ -102,7 +118,7 @@ const platforms = [
     "freebsd"
 ] as const;
 
-type Platform = typeof platforms[number];
+type Platform = (typeof platforms)[number];
 
 export default function Page() {
     const { env } = useEnvContext();
@@ -769,7 +785,9 @@ WantedBy=default.target`
 
                                         <div>
                                             <p className="font-bold mb-3">
-                                                {["docker", "podman"].includes(platform)
+                                                {["docker", "podman"].includes(
+                                                    platform
+                                                )
                                                     ? "Method"
                                                     : "Architecture"}
                                             </p>
@@ -827,8 +845,20 @@ WantedBy=default.target`
                                     </SettingsSectionDescription>
                                 </SettingsSectionHeader>
                                 <SettingsSectionBody>
-                                    <CopyTextBox text={wgConfig} />
-
+                                    <div className="flex items-center gap-4">
+                                        <CopyTextBox text={wgConfig} />
+                                        <div
+                                            className={`relative w-fit border rounded-md`}
+                                        >
+                                            <div className="bg-white p-6 rounded-md">
+                                                <QRCodeCanvas
+                                                    value={wgConfig}
+                                                    size={168}
+                                                    className="mx-auto"
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
                                     <Alert variant="neutral">
                                         <InfoIcon className="h-4 w-4" />
                                         <AlertTitle className="font-semibold">

src/app/[orgId]/settings/sites/page.tsx

@@ -25,7 +25,7 @@ export default async function SitesPage(props: SitesPageProps) {
 
     function formatSize(mb: number, type: string): string {
         if (type === "local") {
-            return "--"; // because we are not able to track the data use in a local site right now
+            return "-"; // because we are not able to track the data use in a local site right now
         }
         if (mb >= 1024 * 1024) {
             return `${(mb / (1024 * 1024)).toFixed(2)} TB`;