Add copy check

src/app/[orgId]/components/Header.tsx

@@ -93,7 +93,7 @@ export default function Header({ email, orgName, name }: HeaderProps) {
                             </DropdownMenuLabel>
                             <DropdownMenuSeparator />
                             <DropdownMenuGroup>
-                                <DropdownMenuItem>Profile</DropdownMenuItem>
+                                <Link href="/profile"><DropdownMenuItem>Profile</DropdownMenuItem></Link>
                                 <DropdownMenuItem>Log out</DropdownMenuItem>
                             </DropdownMenuGroup>
                         </DropdownMenuContent>

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({
+    method: z.enum(["wg", "newt"]),
-        required_error: "Please select a method.",
-    }),
 });
 
 type AccountFormValues = z.infer<typeof accountFormSchema>;
@@ -75,14 +74,18 @@ const defaultValues: Partial<AccountFormValues> = {
 };
 
 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<AccountFormValues>({
         resolver: zodResolver(accountFormSchema),
         defaultValues,
@@ -124,15 +127,15 @@ export function CreateSiteForm() {
 
     const wgConfig = keypair
         ? `[Interface]
-  Address = 10.0.0.2/24
+Address = 10.0.0.2/24
-  ListenPort = 51820
+ListenPort = 51820
-  PrivateKey = ${keypair.privateKey}
+PrivateKey = ${keypair.privateKey}
 
-  [Peer]
+[Peer]
-  PublicKey = ${keypair.publicKey}
+PublicKey = ${keypair.publicKey}
-  AllowedIPs = 0.0.0.0/0, ::/0
+AllowedIPs = 0.0.0.0/0, ::/0
-  Endpoint = myserver.dyndns.org:51820
+Endpoint = myserver.dyndns.org:51820
-  PersistentKeepalive = 5`
+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 }) => (
-                            <FormItem className="flex flex-col">
+                            <FormItem>
                                 <FormLabel>Method</FormLabel>
-                                <Popover>
+                                <div className="relative w-max">
-                                    <PopoverTrigger asChild>
                                     <FormControl>
-                                            <Button
+                                        <select
-                                                variant="outline"
-                                                role="combobox"
                                             className={cn(
-                                                    "w-[200px] justify-between",
+                                                buttonVariants({ variant: "outline" }),
-                                                    !field.value && "text-muted-foreground"
+                                                "w-[200px] appearance-none font-normal"
                                             )}
+                                            {...field}
                                         >
-                                                {field.value
+                                            <option value="wg">WireGuard</option>
-                                                    ? method.find(
+                                            <option value="newt">Newt</option>
-                                                        (method) => method.value === field.value
+                                        </select>
-                                                    )?.label
-                                                    : "Select method"}
-                                                <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                                            </Button>
                                     </FormControl>
-                                    </PopoverTrigger>
+                                    <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
-                                    <PopoverContent className="w-[200px] p-0">
+                                </div>
-                                        <Command>
-                                            <CommandInput placeholder="Search method..." />
-                                            <CommandList>
-                                                <CommandEmpty>No method found.</CommandEmpty>
-                                                <CommandGroup>
-                                                    {method.map((method) => (
-                                                        <CommandItem
-                                                            value={method.label}
-                                                            key={method.value}
-                                                            onSelect={() => {
-                                                                form.setValue("method", method.value);
-                                                                setMethodValue(method.value);
-                                                            }}
-                                                        >
-                                                            <CheckIcon
-                                                                className={cn(
-                                                                    "mr-2 h-4 w-4",
-                                                                    method.value === field.value
-                                                                        ? "opacity-100"
-                                                                        : "opacity-0"
-                                                                )}
-                                                            />
-                                                            {method.label}
-                                                        </CommandItem>
-                                                    ))}
-                                                </CommandGroup>
-                                            </CommandList>
-                                        </Command>
-                                    </PopoverContent>
-                                </Popover>
                                 <FormDescription>
                                     This is how you will connect your site to Fossorial.
                                 </FormDescription>
@@ -238,18 +205,28 @@ sh get-docker.sh`;
                             </FormItem>
                         )}
                     />
-                    {methodValue === "wg" && !isLoading ? (
+                    {form.watch("method") === "wg" && !isLoading ? (
                         <pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
                             <code className="text-white whitespace-pre-wrap">{wgConfig}</code>
                         </pre>
-                    ) : methodValue === "wg" && isLoading ? (
+                    ) : form.watch("method") === "wg" && isLoading ? (
                         <p>Loading WireGuard configuration...</p>
                     ) : (
                         <pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
                             <code className="text-white whitespace-pre-wrap">{newtConfig}</code>
                         </pre>
                     )}
-                    <Button type="submit">Create Site</Button>
+                    <div className="flex items-center space-x-2">
+                        <Checkbox id="terms" checked={isChecked}
+                            onCheckedChange={handleCheckboxChange} />
+                        <label
+                            htmlFor="terms"
+                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                            I have copied the config
+                        </label>
+                    </div>
+                    <Button type="submit" disabled={!isChecked}>Create Site</Button>
                 </form>
             </Form>
         </>

src/app/[orgId]/sites/[siteId]/layout.tsx

@@ -78,7 +78,7 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
                     <p className="text-muted-foreground">
-                        { params.siteId == "create" ? "Create site..." : "Manage settings on site " + params.siteId }.
+                        { params.siteId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.
                     </p>
                 </div>
                 <Separator className="my-6" />

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 (
     <>
+
+<div className="w-full bg-stone-200 border-b border-stone-300 mb-6 select-none sm:px-0 px-3">
+                <div className="container mx-auto flex flex-col content-between gap-4 pt-2">
+                    <Header
+                        email={"user.email"}
+                        orgName={"Profile"}
+                    />
+                </div>
+            </div>
+
       <div className="md:hidden">
         <Image
           src="/configuration/forms-light.png"