diff --git a/src/app/[orgId]/components/Header.tsx b/src/app/[orgId]/components/Header.tsx index 8fcdda1..1a1d38b 100644 --- a/src/app/[orgId]/components/Header.tsx +++ b/src/app/[orgId]/components/Header.tsx @@ -93,7 +93,7 @@ export default function Header({ email, orgName, name }: HeaderProps) { - Profile + Profile Log out diff --git a/src/app/[orgId]/sites/[siteId]/components/create-site.tsx b/src/app/[orgId]/sites/[siteId]/components/create-site.tsx index 4777a79..66b02c0 100644 --- a/src/app/[orgId]/sites/[siteId]/components/create-site.tsx +++ b/src/app/[orgId]/sites/[siteId]/components/create-site.tsx @@ -1,13 +1,13 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" +import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons" import { useForm } from "react-hook-form" import { z } from "zod" import { cn } from "@/lib/utils" import { toast } from "@/hooks/use-toast" -import { Button } from "@/components/ui/button" +import { Button, buttonVariants } from "@/components/ui/button" import { Command, CommandEmpty, @@ -37,6 +37,7 @@ import { api } from "@/api"; import { AxiosResponse } from "axios" import { useParams } from "next/navigation"; import { useRouter } from "next/navigation"; +import { Checkbox } from "@app/components/ui/checkbox" const method = [ { label: "Wireguard", value: "wg" }, @@ -62,9 +63,7 @@ const accountFormSchema = z.object({ .max(30, { message: "Subdomain must not be longer than 30 characters.", }), - method: z.string({ - required_error: "Please select a method.", - }), + method: z.enum(["wg", "newt"]), }); type AccountFormValues = z.infer; @@ -75,14 +74,18 @@ const defaultValues: Partial = { }; export function CreateSiteForm() { - const [methodValue, setMethodValue] = useState("wg"); - const [keypair, setKeypair] = useState<{ publicKey: string; privateKey: string } | null>(null); - const [isLoading, setIsLoading] = useState(true); - const params = useParams(); const orgId = params.orgId; const router = useRouter(); + const [keypair, setKeypair] = useState<{ publicKey: string; privateKey: string } | null>(null); + const [isLoading, setIsLoading] = useState(true); + const [isChecked, setIsChecked] = useState(false); + + const handleCheckboxChange = (checked: boolean) => { + setIsChecked(checked); + }; + const form = useForm({ resolver: zodResolver(accountFormSchema), defaultValues, @@ -124,15 +127,15 @@ export function CreateSiteForm() { const wgConfig = keypair ? `[Interface] - Address = 10.0.0.2/24 - ListenPort = 51820 - PrivateKey = ${keypair.privateKey} - - [Peer] - PublicKey = ${keypair.publicKey} - AllowedIPs = 0.0.0.0/0, ::/0 - Endpoint = myserver.dyndns.org:51820 - PersistentKeepalive = 5` +Address = 10.0.0.2/24 +ListenPort = 51820 +PrivateKey = ${keypair.privateKey} + +[Peer] +PublicKey = ${keypair.publicKey} +AllowedIPs = 0.0.0.0/0, ::/0 +Endpoint = myserver.dyndns.org:51820 +PersistentKeepalive = 5` : ""; const newtConfig = `curl -fsSL https://get.docker.com -o get-docker.sh @@ -178,59 +181,23 @@ sh get-docker.sh`; control={form.control} name="method" render={({ field }) => ( - + Method - - - - - - - - - - - No method found. - - {method.map((method) => ( - { - form.setValue("method", method.value); - setMethodValue(method.value); - }} - > - - {method.label} - - ))} - - - - - +
+ + + + +
This is how you will connect your site to Fossorial. @@ -238,18 +205,28 @@ sh get-docker.sh`;
)} /> - {methodValue === "wg" && !isLoading ? ( + {form.watch("method") === "wg" && !isLoading ? (
                             {wgConfig}
                         
- ) : methodValue === "wg" && isLoading ? ( + ) : form.watch("method") === "wg" && isLoading ? (

Loading WireGuard configuration...

) : (
                             {newtConfig}
                         
)} - +
+ + +
+ diff --git a/src/app/[orgId]/sites/[siteId]/layout.tsx b/src/app/[orgId]/sites/[siteId]/layout.tsx index e161b9a..0297537 100644 --- a/src/app/[orgId]/sites/[siteId]/layout.tsx +++ b/src/app/[orgId]/sites/[siteId]/layout.tsx @@ -78,7 +78,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou

Settings

- { params.siteId == "create" ? "Create site..." : "Manage settings on site " + params.siteId }. + { params.siteId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.

diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx index a220d70..aed0f42 100644 --- a/src/app/profile/layout.tsx +++ b/src/app/profile/layout.tsx @@ -3,6 +3,7 @@ import Image from "next/image" import { Separator } from "@/components/ui/separator" import { SidebarNav } from "@/components/sidebar-nav" +import Header from "../[orgId]/components/Header" export const metadata: Metadata = { title: "Forms", @@ -39,6 +40,16 @@ interface SettingsLayoutProps { export default function SettingsLayout({ children }: SettingsLayoutProps) { return ( <> + +
+
+
+
+
+