mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-19 10:14:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

clean up naming and add /settings/ to path

Browse source
This commit is contained in:
Milo Schwartz 2024-11-02 15:44:48 -04:00
parent c05342dd25
commit 54ba205fc0
No known key found for this signature in database
34 changed files with 523 additions and 784 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/app/[orgId]/resources/[resourceId]/components/ClientLayout.tsx
View file

@ -1,50 +0,0 @@
"use client";
import { SidebarNav } from "@app/components/sidebar-nav";
import { useResourceContext } from "@app/hooks/useResourceContext";
const sidebarNavItems = [
{
title: "General",
href: "/{orgId}/resources/{resourceId}",
},
{
title: "Targets",
href: "/{orgId}/resources/{resourceId}/targets",
},
// {
// title: "Notifications",
// href: "/{orgId}/resources/{resourceId}/notifications",
// },
]
export function ClientLayout({ isCreate, children }: { isCreate: boolean; children: React.ReactNode }) {
const { resource } = useResourceContext();
return (<div className="hidden space-y-6 0 pb-16 md:block">
<div className="space-y-0.5">
<h2 className="text-2xl font-bold tracking-tight">
{isCreate
? "New Resource"
: resource?.name + " Settings"}
</h2>
<p className="text-muted-foreground">
{isCreate
? "Create a new resource"
: "Configure the settings on your resource: " +
resource?.name || ""}
.
</p>
</div>
<div className="flex flex-col space-y-6 lg:flex-row lg:space-x-12 lg:space-y-0">
<aside className="-mx-4 lg:w-1/5">
<SidebarNav
items={sidebarNavItems}
disabled={isCreate}
/>
</aside>
<div className="flex-1 lg:max-w-2xl">
{children}
</div>
</div>
</div>);
}

259
src/app/[orgId]/resources/[resourceId]/components/GeneralForm.tsx
View file

@ -1,259 +0,0 @@
"use client"
import Link from "next/link"
import { zodResolver } from "@hookform/resolvers/zod"
import { useFieldArray, 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 {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { useResourceContext } from "@app/hooks/useResourceContext"
import { ListSitesResponse } from "@server/routers/site"
import { useEffect, useState } from "react"
import { AxiosResponse } from "axios"
import api from "@app/api"
import { useParams } from "next/navigation";
const GeneralFormSchema = z.object({
name: z.string(),
siteId: z.number()
})
type GeneralFormValues = z.infer<typeof GeneralFormSchema>
export function GeneralForm() {
const params = useParams();
const orgId = params.orgId;
const { resource, updateResource } = useResourceContext();
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: resource?.name,
siteId: resource?.siteId
},
mode: "onChange",
})
useEffect(() => {
if (typeof window !== "undefined") {
const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>(`/org/${orgId}/sites/`);
setSites(res.data.data.sites);
};
fetchSites();
}
}, []);
// const { fields, append } = useFieldArray({
// name: "urls",
// control: form.control,
// })
async function onSubmit(data: GeneralFormValues) {
await updateResource({ name: data.name, siteId: data.siteId });
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the resource.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Site</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[350px] justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) => site.siteId === field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>
<CommandEmpty>No site found.</CommandEmpty>
<CommandGroup>
{sites.map((site) => (
<CommandItem
value={site.name}
key={site.siteId}
onSelect={() => {
form.setValue("siteId", site.siteId)
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId === field.value
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This is the site that will be used in the dashboard.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a verified email to display" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="m@example.com">m@example.com</SelectItem>
<SelectItem value="m@google.com">m@google.com</SelectItem>
<SelectItem value="m@support.com">m@support.com</SelectItem>
</SelectContent>
</Select>
<FormDescription>
You can manage verified email addresses in your{" "}
<Link href="/examples/forms">email settings</Link>.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="bio"
render={({ field }) => (
<FormItem>
<FormLabel>Bio</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormDescription>
You can <span>@mention</span> other users and organizations to
link to them.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<div>
{fields.map((field, index) => (
<FormField
control={form.control}
key={field.id}
name={`urls.${index}.value`}
render={({ field }) => (
<FormItem>
<FormLabel className={cn(index !== 0 && "sr-only")}>
URLs
</FormLabel>
<FormDescription className={cn(index !== 0 && "sr-only")}>
Add links to your webresource, blog, or social media profiles.
</FormDescription>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
))}
<Button
type="button"
variant="outline"
size="sm"
className="mt-2"
onClick={() => append({ value: "" })}
>
Add URL
</Button>
</div> */}
<Button type="submit">Update Resource</Button>
</form>
</Form>
)
}

84
src/app/[orgId]/resources/[resourceId]/layout.tsx
View file

@ -1,84 +0,0 @@
import { Metadata } from "next";
import Image from "next/image";
import { Separator } from "@/components/ui/separator";
import { SidebarNav } from "@/components/sidebar-nav";
import ResourceProvider from "@app/providers/ResourceProvider";
import { internal } from "@app/api";
import { GetResourceResponse } from "@server/routers/resource";
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/api/cookies";
import Link from "next/link";
import { ArrowLeft, ChevronLeft } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "@app/hooks/use-toast";
import { ClientLayout } from "./components/ClientLayout";
export const metadata: Metadata = {
title: "Forms",
description: "Advanced form example using react-hook-form and Zod.",
};
interface SettingsLayoutProps {
children: React.ReactNode;
params: Promise<{ resourceId: number | string; orgId: string }>;
}
export default async function SettingsLayout(props: SettingsLayoutProps) {
const params = await props.params;
const {
children
} = props;
let resource = null;
if (params.resourceId !== "create") {
try {
const res = await internal.get<AxiosResponse<GetResourceResponse>>(
`/resource/${params.resourceId}`,
await authCookieHeader(),
);
resource = res.data.data;
} catch {
redirect(`/${params.orgId}/resources`);
}
}
return (
<>
<div className="md:hidden">
<Image
src="/configuration/forms-light.png"
width={1280}
height={791}
alt="Forms"
className="block dark:hidden"
/>
<Image
src="/configuration/forms-dark.png"
width={1280}
height={791}
alt="Forms"
className="hidden dark:block"
/>
</div>
<div className="mb-4">
<Link
href={`/${params.orgId}/resources`}
className="text-primary font-medium"
>
</Link>
</div>
<ResourceProvider resource={resource}>
<ClientLayout
isCreate={params.resourceId === "create"}
>
{children}
</ClientLayout></ResourceProvider>
</>
);
}

0
src/app/[orgId]/components/Header.tsx → src/app/[orgId]/settings/components/Header.tsx
View file

0
src/app/[orgId]/components/TopbarNav.tsx → src/app/[orgId]/settings/components/TopbarNav.tsx
View file

19
src/app/[orgId]/layout.tsx → src/app/[orgId]/settings/layout.tsx
View file

@ -1,51 +1,48 @@
import { Metadata } from "next"; import { Metadata } from "next";
import { TopbarNav } from "./components/TopbarNav"; import { TopbarNav } from "./components/TopbarNav";
import { Cog, Combine, LayoutGrid, Tent, Users, Waypoints } from "lucide-react"; import { Cog, Combine, Users, Waypoints } from "lucide-react";
import Header from "./components/Header"; import Header from "./components/Header";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { cache } from "react";
import { internal } from "@app/api"; import { internal } from "@app/api";
import { AxiosResponse } from "axios"; import { AxiosResponse } from "axios";
import { GetOrgResponse, ListOrgsResponse } from "@server/routers/org"; import { GetOrgResponse, ListOrgsResponse } from "@server/routers/org";
import { authCookieHeader } from "@app/api/cookies"; import { authCookieHeader } from "@app/api/cookies";
export const metadata: Metadata = { export const metadata: Metadata = {
title: `Configuration - Pangolin`, title: `Settings - Pangolin`,
description: "", description: "",
}; };
const topNavItems = [ const topNavItems = [
{ {
title: "Sites", title: "Sites",
href: "/{orgId}/sites", href: "/{orgId}/settings/sites",
icon: <Combine className="h-5 w-5" />, icon: <Combine className="h-5 w-5" />,
}, },
{ {
title: "Resources", title: "Resources",
href: "/{orgId}/resources", href: "/{orgId}/settings/resources",
icon: <Waypoints className="h-5 w-5" />, icon: <Waypoints className="h-5 w-5" />,
}, },
{ {
title: "Users", title: "Users",
href: "/{orgId}/users", href: "/{orgId}/settings/users",
icon: <Users className="h-5 w-5" />, icon: <Users className="h-5 w-5" />,
}, },
{ {
title: "General", title: "General",
href: "/{orgId}/general", href: "/{orgId}/settings/general",
icon: <Cog className="h-5 w-5" />, icon: <Cog className="h-5 w-5" />,
}, },
]; ];
interface ConfigurationLaytoutProps { interface SettingsLayoutProps {
children: React.ReactNode; children: React.ReactNode;
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
} }
export default async function ConfigurationLaytout( export default async function SettingsLayout(props: SettingsLayoutProps) {
props: ConfigurationLaytoutProps
) {
const params = await props.params; const params = await props.params;
const { children } = props; const { children } = props;

4
src/app/[orgId]/page.tsx → src/app/[orgId]/settings/page.tsx
View file

@ -4,9 +4,9 @@ type OrgPageProps = {
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
}; };
export default async function Page(props: OrgPageProps) { export default async function SettingsPage(props: OrgPageProps) {
const params = await props.params; const params = await props.params;
redirect(`/${params.orgId}/sites`); redirect(`/${params.orgId}/settings/sites`);
return <></>; return <></>;
} }

47
src/app/[orgId]/settings/resources/[resourceId]/components/ClientLayout.tsx Normal file
View file

@ -0,0 +1,47 @@
"use client";
import { SidebarNav } from "@app/components/sidebar-nav";
import { useResourceContext } from "@app/hooks/useResourceContext";
const sidebarNavItems = [
{
title: "General",
href: "/{orgId}/settings/resources/{resourceId}",
},
{
title: "Targets",
href: "/{orgId}/settings/resources/{resourceId}/targets",
},
];
export function ClientLayout({
isCreate,
children,
}: {
isCreate: boolean;
children: React.ReactNode;
}) {
const { resource } = useResourceContext();
return (
<div className="hidden space-y-6 0 pb-16 md:block">
<div className="space-y-0.5">
<h2 className="text-2xl font-bold tracking-tight">
{isCreate ? "New Resource" : resource?.name + " Settings"}
</h2>
<p className="text-muted-foreground">
{isCreate
? "Create a new resource"
: "Configure the settings on your resource: " +
resource?.name || ""}
.
</p>
</div>
<div className="flex flex-col space-y-6 lg:flex-row lg:space-x-12 lg:space-y-0">
<aside className="-mx-4 lg:w-1/5">
<SidebarNav items={sidebarNavItems} disabled={isCreate} />
</aside>
<div className="flex-1 lg:max-w-2xl">{children}</div>
</div>
</div>
);
}

104
src/app/[orgId]/resources/[resourceId]/components/CreateResource.tsx → src/app/[orgId]/settings/resources/[resourceId]/components/CreateResource.tsx
View file

@ -1,13 +1,15 @@
"use client" "use client";
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod";
import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons" import {
import { useForm } from "react-hook-form" CaretSortIcon,
import { z } from "zod" CheckIcon,
} from "@radix-ui/react-icons";
import { cn } from "@/lib/utils" import { useForm } from "react-hook-form";
import { toast } from "@/hooks/use-toast" import { z } from "zod";
import { Button, buttonVariants } from "@/components/ui/button" import { cn } from "@/lib/utils";
import { toast } from "@/hooks/use-toast";
import { Button} from "@/components/ui/button";
import { import {
Form, Form,
FormControl, FormControl,
@ -16,14 +18,12 @@ import {
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form" } from "@/components/ui/form";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { api } from "@/api"; import { api } from "@/api";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Checkbox } from "@app/components/ui/checkbox"
import { import {
Command, Command,
CommandEmpty, CommandEmpty,
@ -31,16 +31,15 @@ import {
CommandInput, CommandInput,
CommandItem, CommandItem,
CommandList, CommandList,
} from "@/components/ui/command" } from "@/components/ui/command";
import { import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover" } from "@/components/ui/popover";
import { ListSitesResponse } from "@server/routers/site" import { ListSitesResponse } from "@server/routers/site";
import { AxiosResponse } from "axios" import { AxiosResponse } from "axios";
import CustomDomainInput from "./CustomDomainInput" import CustomDomainInput from "./CustomDomainInput";
const method = [ const method = [
{ label: "Wireguard", value: "wg" }, { label: "Wireguard", value: "wg" },
@ -57,14 +56,14 @@ const accountFormSchema = z.object({
message: "Name must not be longer than 30 characters.", message: "Name must not be longer than 30 characters.",
}), }),
name: z.string(), name: z.string(),
siteId: z.number() siteId: z.number(),
}); });
type AccountFormValues = z.infer<typeof accountFormSchema>; type AccountFormValues = z.infer<typeof accountFormSchema>;
const defaultValues: Partial<AccountFormValues> = { const defaultValues: Partial<AccountFormValues> = {
subdomain: "someanimalherefromapi", subdomain: "someanimalherefromapi",
name: "My Resource" name: "My Resource",
}; };
export function CreateResourceForm() { export function CreateResourceForm() {
@ -83,7 +82,9 @@ export function CreateResourceForm() {
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const fetchSites = async () => { const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>(`/org/${orgId}/sites/`); const res = await api.get<AxiosResponse<ListSitesResponse>>(
`/org/${orgId}/sites/`
);
setSites(res.data.data.sites); setSites(res.data.data.sites);
}; };
fetchSites(); fetchSites();
@ -101,21 +102,24 @@ export function CreateResourceForm() {
}) })
.catch((e) => { .catch((e) => {
toast({ toast({
title: "Error creating resource..." title: "Error creating resource...",
}); });
}); });
if (res && res.status === 201) { if (res && res.status === 201) {
const niceId = res.data.data.niceId; const niceId = res.data.data.niceId;
// navigate to the resource page // navigate to the resource page
router.push(`/${orgId}/resources/${niceId}`); router.push(`/${orgId}/settings/resources/${niceId}`);
} }
} }
return ( return (
<> <>
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"
@ -126,7 +130,8 @@ export function CreateResourceForm() {
<Input placeholder="Your name" {...field} /> <Input placeholder="Your name" {...field} />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
This is the name that will be displayed for this resource. This is the name that will be displayed for
this resource.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -140,35 +145,20 @@ export function CreateResourceForm() {
<FormLabel>Subdomain</FormLabel> <FormLabel>Subdomain</FormLabel>
<FormControl> <FormControl>
{/* <Input placeholder="Your name" {...field} /> */} {/* <Input placeholder="Your name" {...field} /> */}
<CustomDomainInput {...field} <CustomDomainInput
{...field}
domainSuffix={domainSuffix} domainSuffix={domainSuffix}
placeholder="Enter subdomain" placeholder="Enter subdomain"
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
This is the fully qualified domain name that will be used to access the resource. This is the fully qualified domain name that
will be used to access the resource.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
{/* <FormField
control={form.control}
name="subdomain"
render={({ field }) => (
<FormItem>
<FormLabel>Subdomain</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
The subdomain of the resource. This will be used to access resources on the resource.
</FormDescription>
<FormMessage />
</FormItem>
)}
/> */}
<FormField <FormField
control={form.control} control={form.control}
name="siteId" name="siteId"
@ -183,13 +173,16 @@ export function CreateResourceForm() {
role="combobox" role="combobox"
className={cn( className={cn(
"w-[350px] justify-between", "w-[350px] justify-between",
!field.value && "text-muted-foreground" !field.value &&
"text-muted-foreground"
)} )}
> >
{field.value {field.value
? sites.find( ? sites.find(
(site) => site.siteId === field.value (site) =>
)?.name site.siteId ===
field.value
)?.name
: "Select site"} : "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" /> <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button> </Button>
@ -199,20 +192,26 @@ export function CreateResourceForm() {
<Command> <Command>
<CommandInput placeholder="Search site..." /> <CommandInput placeholder="Search site..." />
<CommandList> <CommandList>
<CommandEmpty>No site found.</CommandEmpty> <CommandEmpty>
No site found.
</CommandEmpty>
<CommandGroup> <CommandGroup>
{sites.map((site) => ( {sites.map((site) => (
<CommandItem <CommandItem
value={site.name} value={site.name}
key={site.siteId} key={site.siteId}
onSelect={() => { onSelect={() => {
form.setValue("siteId", site.siteId) form.setValue(
"siteId",
site.siteId
);
}} }}
> >
<CheckIcon <CheckIcon
className={cn( className={cn(
"mr-2 h-4 w-4", "mr-2 h-4 w-4",
site.siteId === field.value site.siteId ===
field.value
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0"
)} )}
@ -226,7 +225,8 @@ export function CreateResourceForm() {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription> <FormDescription>
This is the site that will be used in the dashboard. This is the site that will be used in the
dashboard.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>

2
src/app/[orgId]/resources/[resourceId]/components/CustomDomainInput.tsx → src/app/[orgId]/settings/resources/[resourceId]/components/CustomDomainInput.tsx
View file

@ -16,7 +16,7 @@ export default function CustomDomainInput(
onChange, onChange,
}: CustomDomainInputProps = { }: CustomDomainInputProps = {
domainSuffix: ".example.com", domainSuffix: ".example.com",
}, }
) { ) {
const [value, setValue] = React.useState(""); const [value, setValue] = React.useState("");

174
src/app/[orgId]/settings/resources/[resourceId]/components/GeneralForm.tsx Normal file
View file

@ -0,0 +1,174 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
import { Input } from "@/components/ui/input";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { ListSitesResponse } from "@server/routers/site";
import { useEffect, useState } from "react";
import { AxiosResponse } from "axios";
import api from "@app/api";
import { useParams } from "next/navigation";
import { useForm } from "react-hook-form";
const GeneralFormSchema = z.object({
name: z.string(),
siteId: z.number(),
});
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
export function GeneralForm() {
const params = useParams();
const orgId = params.orgId;
const { resource, updateResource } = useResourceContext();
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: resource?.name,
siteId: resource?.siteId,
},
mode: "onChange",
});
useEffect(() => {
if (typeof window !== "undefined") {
const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>(
`/org/${orgId}/sites/`
);
setSites(res.data.data.sites);
};
fetchSites();
}
}, []);
async function onSubmit(data: GeneralFormValues) {
await updateResource({ name: data.name, siteId: data.siteId });
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the resource.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Site</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[350px] justify-between",
!field.value &&
"text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) =>
site.siteId ===
field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>
<CommandEmpty>
No site found.
</CommandEmpty>
<CommandGroup>
{sites.map((site) => (
<CommandItem
value={site.name}
key={site.siteId}
onSelect={() => {
form.setValue(
"siteId",
site.siteId
);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId ===
field.value
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This is the site that will be used in the
dashboard.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Update Resource</Button>
</form>
</Form>
);
}

51
src/app/[orgId]/settings/resources/[resourceId]/layout.tsx Normal file
View file

@ -0,0 +1,51 @@
import Image from "next/image";
import ResourceProvider from "@app/providers/ResourceProvider";
import { internal } from "@app/api";
import { GetResourceResponse } from "@server/routers/resource";
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { authCookieHeader } from "@app/api/cookies";
import Link from "next/link";
import { ClientLayout } from "./components/ClientLayout";
interface ResourceLayoutProps {
children: React.ReactNode;
params: Promise<{ resourceId: number | string; orgId: string }>;
}
export default async function ResourceLayout(props: ResourceLayoutProps) {
const params = await props.params;
const { children } = props;
let resource = null;
if (params.resourceId !== "create") {
try {
const res = await internal.get<AxiosResponse<GetResourceResponse>>(
`/resource/${params.resourceId}`,
await authCookieHeader()
);
resource = res.data.data;
} catch {
redirect(`/${params.orgId}/settings/resources`);
}
}
return (
<>
<div className="mb-4">
<Link
href={`/${params.orgId}/settings/resources`}
className="text-primary font-medium"
></Link>
</div>
<ResourceProvider resource={resource}>
<ClientLayout isCreate={params.resourceId === "create"}>
{children}
</ClientLayout>
</ResourceProvider>
</>
);
}

8
src/app/[orgId]/resources/[resourceId]/page.tsx → src/app/[orgId]/settings/resources/[resourceId]/page.tsx
View file

@ -3,11 +3,9 @@ import { Separator } from "@/components/ui/separator";
import { CreateResourceForm } from "./components/CreateResource"; import { CreateResourceForm } from "./components/CreateResource";
import { GeneralForm } from "./components/GeneralForm"; import { GeneralForm } from "./components/GeneralForm";
export default async function SettingsPage( export default async function ResourcePage(props: {
props: { params: Promise<{ resourceId: number | string }>;
params: Promise<{ resourceId: number | string }>; }) {
}
) {
const params = await props.params; const params = await props.params;
const isCreate = params.resourceId === "create"; const isCreate = params.resourceId === "create";

0
src/app/[orgId]/resources/[resourceId]/targets/page.tsx → src/app/[orgId]/settings/resources/[resourceId]/targets/page.tsx
View file

4
src/app/[orgId]/resources/components/ResourcesDataTable.tsx → src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
View file

@ -94,7 +94,7 @@ export function ResourcesDataTable<TData, TValue>({
: flexRender( : flexRender(
header.column.columnDef header.column.columnDef
.header, .header,
header.getContext(), header.getContext()
)} )}
</TableHead> </TableHead>
); );
@ -115,7 +115,7 @@ export function ResourcesDataTable<TData, TValue>({
<TableCell key={cell.id}> <TableCell key={cell.id}>
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext(), cell.getContext()
)} )}
</TableCell> </TableCell>
))} ))}

13
src/app/[orgId]/resources/components/ResourcesTable.tsx → src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
View file

@ -74,7 +74,7 @@ export const columns: ColumnDef<ResourceRow>[] = [
.then(() => { .then(() => {
router.refresh(); router.refresh();
}); });
} };
return ( return (
<DropdownMenu> <DropdownMenu>
@ -87,13 +87,18 @@ export const columns: ColumnDef<ResourceRow>[] = [
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem> <DropdownMenuItem>
<Link <Link
href={`/${resourceRow.orgId}/resources/${resourceRow.id}`} href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
> >
View settings View settings
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<button onClick={() => deleteResource(resourceRow.id)} className="text-red-600 hover:text-red-800 hover:underline cursor-pointer">Delete</button> <button
onClick={() => deleteResource(resourceRow.id)}
className="text-red-600 hover:text-red-800 hover:underline cursor-pointer"
>
Delete
</button>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@ -115,7 +120,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
columns={columns} columns={columns}
data={resources} data={resources}
addResource={() => { addResource={() => {
router.push(`/${orgId}/resources/create`); router.push(`/${orgId}/settings/resources/create`);
}} }}
/> />
); );

6
src/app/[orgId]/resources/page.tsx → src/app/[orgId]/settings/resources/page.tsx
View file

@ -8,13 +8,13 @@ type ResourcesPageProps = {
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
}; };
export default async function Page(props: ResourcesPageProps) { export default async function ResourcesPage(props: ResourcesPageProps) {
const params = await props.params; const params = await props.params;
let resources: ListResourcesResponse["resources"] = []; let resources: ListResourcesResponse["resources"] = [];
try { try {
const res = await internal.get<AxiosResponse<ListResourcesResponse>>( const res = await internal.get<AxiosResponse<ListResourcesResponse>>(
`/org/${params.orgId}/resources`, `/org/${params.orgId}/resources`,
await authCookieHeader(), await authCookieHeader()
); );
resources = res.data.data.resources; resources = res.data.data.resources;
} catch (e) { } catch (e) {
@ -45,4 +45,4 @@ export default async function Page(props: ResourcesPageProps) {
<ResourcesTable resources={resourceRows} orgId={params.orgId} /> <ResourcesTable resources={resourceRows} orgId={params.orgId} />
</> </>
); );
} }

14
src/app/[orgId]/sites/[niceId]/components/ClientLayout.tsx → src/app/[orgId]/settings/sites/[niceId]/components/ClientLayout.tsx
View file

@ -6,20 +6,8 @@ import { useSiteContext } from "@app/hooks/useSiteContext";
const sidebarNavItems = [ const sidebarNavItems = [
{ {
title: "General", title: "General",
href: "/{orgId}/sites/{niceId}", href: "/{orgId}/settings/sites/{niceId}",
}, },
// {
// title: "Appearance",
// href: "/{orgId}/sites/{niceId}/appearance",
// },
// {
// title: "Notifications",
// href: "/{orgId}/sites/{niceId}/notifications",
// },
// {
// title: "Display",
// href: "/{orgId}/sites/{niceId}/display",
// },
]; ];
export function ClientLayout({ isCreate, children }: { isCreate: boolean; children: React.ReactNode }) { export function ClientLayout({ isCreate, children }: { isCreate: boolean; children: React.ReactNode }) {

120
src/app/[orgId]/sites/[niceId]/components/CreateSite.tsx → src/app/[orgId]/settings/sites/[niceId]/components/CreateSite.tsx
View file

@ -1,13 +1,12 @@
"use client" "use client";
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod";
import { CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons" import { ChevronDownIcon } from "@radix-ui/react-icons";
import { useForm } from "react-hook-form" import { useForm } from "react-hook-form";
import { z } from "zod" import { z } from "zod";
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils" import { toast } from "@/hooks/use-toast";
import { toast } from "@/hooks/use-toast" import { Button, buttonVariants } from "@/components/ui/button";
import { Button, buttonVariants } from "@/components/ui/button"
import { import {
Form, Form,
FormControl, FormControl,
@ -16,15 +15,15 @@ import {
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form" } from "@/components/ui/form";
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input";
import { generateKeypair } from "./wireguardConfig"; import { generateKeypair } from "./wireguardConfig";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { api } from "@/api"; import { api } from "@/api";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Checkbox } from "@app/components/ui/checkbox" import { Checkbox } from "@app/components/ui/checkbox";
import { PickSiteDefaultsResponse } from "@server/routers/site" import { PickSiteDefaultsResponse } from "@server/routers/site";
const method = [ const method = [
{ label: "Wireguard", value: "wg" }, { label: "Wireguard", value: "wg" },
@ -47,7 +46,7 @@ type AccountFormValues = z.infer<typeof accountFormSchema>;
const defaultValues: Partial<AccountFormValues> = { const defaultValues: Partial<AccountFormValues> = {
name: "", name: "",
method: "wg" method: "wg",
}; };
export function CreateSiteForm() { export function CreateSiteForm() {
@ -55,10 +54,14 @@ export function CreateSiteForm() {
const orgId = params.orgId; const orgId = params.orgId;
const router = useRouter(); const router = useRouter();
const [keypair, setKeypair] = useState<{ publicKey: string; privateKey: string } | null>(null); const [keypair, setKeypair] = useState<{
publicKey: string;
privateKey: string;
} | null>(null);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [isChecked, setIsChecked] = useState(false); const [isChecked, setIsChecked] = useState(false);
const [siteDefaults, setSiteDefaults] = useState<PickSiteDefaultsResponse | null>(null); const [siteDefaults, setSiteDefaults] =
useState<PickSiteDefaultsResponse | null>(null);
const handleCheckboxChange = (checked: boolean) => { const handleCheckboxChange = (checked: boolean) => {
setIsChecked(checked); setIsChecked(checked);
@ -75,17 +78,17 @@ export function CreateSiteForm() {
setKeypair(generatedKeypair); setKeypair(generatedKeypair);
setIsLoading(false); setIsLoading(false);
api api.get(`/org/${orgId}/pickSiteDefaults`)
.get(`/org/${orgId}/pickSiteDefaults`) .catch((e) => {
.catch((e) => { toast({
toast({ title: "Error creating site...",
title: "Error creating site..." });
})
.then((res) => {
if (res && res.status === 200) {
setSiteDefaults(res.data.data);
}
}); });
}).then((res) => {
if (res && res.status === 200) {
setSiteDefaults(res.data.data);
}
});
} }
}, []); }, []);
@ -99,19 +102,20 @@ export function CreateSiteForm() {
}) })
.catch((e) => { .catch((e) => {
toast({ toast({
title: "Error creating site..." title: "Error creating site...",
}); });
}); });
if (res && res.status === 201) { if (res && res.status === 201) {
const niceId = res.data.data.niceId; const niceId = res.data.data.niceId;
// navigate to the site page // navigate to the site page
router.push(`/${orgId}/sites/${niceId}`); router.push(`/${orgId}/settings/sites/${niceId}`);
} }
} }
const wgConfig = keypair && siteDefaults const wgConfig =
? `[Interface] keypair && siteDefaults
? `[Interface]
Address = ${siteDefaults.subnet} Address = ${siteDefaults.subnet}
ListenPort = 51820 ListenPort = 51820
PrivateKey = ${keypair.privateKey} PrivateKey = ${keypair.privateKey}
@ -121,7 +125,7 @@ PublicKey = ${siteDefaults.publicKey}
AllowedIPs = ${siteDefaults.address.split("/")[0]}/32 AllowedIPs = ${siteDefaults.address.split("/")[0]}/32
Endpoint = ${siteDefaults.endpoint}:${siteDefaults.listenPort} Endpoint = ${siteDefaults.endpoint}:${siteDefaults.listenPort}
PersistentKeepalive = 5` PersistentKeepalive = 5`
: ""; : "";
const newtConfig = `curl -fsSL https://get.docker.com -o get-docker.sh const newtConfig = `curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh`; sh get-docker.sh`;
@ -129,7 +133,10 @@ sh get-docker.sh`;
return ( return (
<> <>
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> <form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"
@ -140,28 +147,13 @@ sh get-docker.sh`;
<Input placeholder="Your name" {...field} /> <Input placeholder="Your name" {...field} />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
This is the name that will be displayed for this site. This is the name that will be displayed for
this site.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
{/* <FormField
control={form.control}
name="subdomain"
render={({ field }) => (
<FormItem>
<FormLabel>Subdomain</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
The subdomain of the site. This will be used to access resources on the site.
</FormDescription>
<FormMessage />
</FormItem>
)}
/> */}
<FormField <FormField
control={form.control} control={form.control}
name="method" name="method"
@ -172,19 +164,24 @@ sh get-docker.sh`;
<FormControl> <FormControl>
<select <select
className={cn( className={cn(
buttonVariants({ variant: "outline" }), buttonVariants({
variant: "outline",
}),
"w-[200px] appearance-none font-normal" "w-[200px] appearance-none font-normal"
)} )}
{...field} {...field}
> >
<option value="wg">WireGuard</option> <option value="wg">
WireGuard
</option>
<option value="newt">Newt</option> <option value="newt">Newt</option>
</select> </select>
</FormControl> </FormControl>
<ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" /> <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
</div> </div>
<FormDescription> <FormDescription>
This is how you will connect your site to Fossorial. This is how you will connect your site to
Fossorial.
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -192,18 +189,25 @@ sh get-docker.sh`;
/> />
{form.watch("method") === "wg" && !isLoading ? ( {form.watch("method") === "wg" && !isLoading ? (
<pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto"> <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
<code className="whitespace-pre-wrap font-mono">{wgConfig}</code> <code className="whitespace-pre-wrap font-mono">
{wgConfig}
</code>
</pre> </pre>
) : form.watch("method") === "wg" && isLoading ? ( ) : form.watch("method") === "wg" && isLoading ? (
<p>Loading WireGuard configuration...</p> <p>Loading WireGuard configuration...</p>
) : ( ) : (
<pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto"> <pre className="mt-2 w-full rounded-md bg-muted p-4 overflow-x-auto">
<code className="whitespace-pre-wrap">{newtConfig}</code> <code className="whitespace-pre-wrap">
{newtConfig}
</code>
</pre> </pre>
)} )}
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox id="terms" checked={isChecked} <Checkbox
onCheckedChange={handleCheckboxChange} /> id="terms"
checked={isChecked}
onCheckedChange={handleCheckboxChange}
/>
<label <label
htmlFor="terms" htmlFor="terms"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@ -211,7 +215,9 @@ sh get-docker.sh`;
I have copied the config I have copied the config
</label> </label>
</div> </div>
<Button type="submit" disabled={!isChecked}>Create Site</Button> <Button type="submit" disabled={!isChecked}>
Create Site
</Button>
</form> </form>
</Form> </Form>
</> </>

63
src/app/[orgId]/settings/sites/[niceId]/components/GeneralForm.tsx Normal file
View file

@ -0,0 +1,63 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useSiteContext } from "@app/hooks/useSiteContext";
import { useForm } from "react-hook-form";
const GeneralFormSchema = z.object({
name: z.string(),
});
type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
export function GeneralForm() {
const { site, updateSite } = useSiteContext();
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: site?.name,
},
mode: "onChange",
});
async function onSubmit(data: GeneralFormValues) {
await updateSite({ name: data.name });
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the site.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Update Site</Button>
</form>
</Form>
);
}

12
src/app/[orgId]/settings/sites/[niceId]/components/NewtConfig.tsx Normal file
View file

@ -0,0 +1,12 @@
"use client";
export function NewtConfig() {
const config = `curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh`;
return (
<pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
<code className="text-white whitespace-pre-wrap">{config}</code>
</pre>
);
}

0
src/app/[orgId]/sites/[niceId]/components/wireguardConfig.ts → src/app/[orgId]/settings/sites/[niceId]/components/wireguardConfig.ts
View file

42
src/app/[orgId]/sites/[niceId]/layout.tsx → src/app/[orgId]/settings/sites/[niceId]/layout.tsx
View file

@ -1,5 +1,3 @@
import Image from "next/image";
import SiteProvider from "@app/providers/SiteProvider"; import SiteProvider from "@app/providers/SiteProvider";
import { internal } from "@app/api"; import { internal } from "@app/api";
import { GetSiteResponse } from "@server/routers/site"; import { GetSiteResponse } from "@server/routers/site";
@ -9,11 +7,6 @@ import { authCookieHeader } from "@app/api/cookies";
import Link from "next/link"; import Link from "next/link";
import { ClientLayout } from "./components/ClientLayout"; import { ClientLayout } from "./components/ClientLayout";
// export const metadata: Metadata = {
// title: "Forms",
// description: "Advanced form example using react-hook-form and Zod.",
// };
interface SettingsLayoutProps { interface SettingsLayoutProps {
children: React.ReactNode; children: React.ReactNode;
params: Promise<{ niceId: string; orgId: string }>; params: Promise<{ niceId: string; orgId: string }>;
@ -22,9 +15,7 @@ interface SettingsLayoutProps {
export default async function SettingsLayout(props: SettingsLayoutProps) { export default async function SettingsLayout(props: SettingsLayoutProps) {
const params = await props.params; const params = await props.params;
const { const { children } = props;
children
} = props;
let site = null; let site = null;
@ -32,45 +23,26 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
try { try {
const res = await internal.get<AxiosResponse<GetSiteResponse>>( const res = await internal.get<AxiosResponse<GetSiteResponse>>(
`/org/${params.orgId}/site/${params.niceId}`, `/org/${params.orgId}/site/${params.niceId}`,
await authCookieHeader(), await authCookieHeader()
); );
site = res.data.data; site = res.data.data;
} catch { } catch {
redirect(`/${params.orgId}/sites`); redirect(`/${params.orgId}/settings/sites`);
} }
} }
return ( return (
<> <>
<div className="md:hidden">
<Image
src="/configuration/forms-light.png"
width={1280}
height={791}
alt="Forms"
className="block dark:hidden"
/>
<Image
src="/configuration/forms-dark.png"
width={1280}
height={791}
alt="Forms"
className="hidden dark:block"
/>
</div>
<div className="mb-4"> <div className="mb-4">
<Link <Link
href={`/${params.orgId}/sites`} href={`/${params.orgId}/settings/sites`}
className="text-primary font-medium" className="text-primary font-medium"
> ></Link>
</Link>
</div> </div>
<SiteProvider site={site}> <SiteProvider site={site}>
<ClientLayout <ClientLayout isCreate={params.niceId === "create"}>
isCreate={params.niceId === "create"}> {children}
{children}
</ClientLayout> </ClientLayout>
</SiteProvider> </SiteProvider>
</> </>

8
src/app/[orgId]/sites/[niceId]/page.tsx → src/app/[orgId]/settings/sites/[niceId]/page.tsx
View file

@ -3,11 +3,9 @@ import { Separator } from "@/components/ui/separator";
import { CreateSiteForm } from "./components/CreateSite"; import { CreateSiteForm } from "./components/CreateSite";
import { GeneralForm } from "./components/GeneralForm"; import { GeneralForm } from "./components/GeneralForm";
export default async function SettingsPage( export default async function SitePage(props: {
props: { params: Promise<{ niceId: string }>;
params: Promise<{ niceId: string }>; }) {
}
) {
const params = await props.params; const params = await props.params;
const isCreate = params.niceId === "create"; const isCreate = params.niceId === "create";

2
src/app/[orgId]/sites/components/SitesDataTable.tsx → src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
View file

@ -23,7 +23,7 @@ import {
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../components/DataTablePagination"; import { DataTablePagination } from "../../../../../components/DataTablePagination";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {

4
src/app/[orgId]/sites/components/SitesTable.tsx → src/app/[orgId]/settings/sites/components/SitesTable.tsx
View file

@ -92,7 +92,7 @@ export const columns: ColumnDef<SiteRow>[] = [
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem> <DropdownMenuItem>
<Link <Link
href={`/${siteRow.orgId}/sites/${siteRow.id}`} href={`/${siteRow.orgId}/settings/sites/${siteRow.id}`}
> >
View settings View settings
</Link> </Link>
@ -120,7 +120,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
columns={columns} columns={columns}
data={sites} data={sites}
addSite={() => { addSite={() => {
router.push(`/${orgId}/sites/create`); router.push(`/${orgId}/settings/sites/create`);
}} }}
/> />
); );

4
src/app/[orgId]/sites/page.tsx → src/app/[orgId]/settings/sites/page.tsx
View file

@ -8,13 +8,13 @@ type SitesPageProps = {
params: Promise<{ orgId: string }>; params: Promise<{ orgId: string }>;
}; };
export default async function Page(props: SitesPageProps) { export default async function SitesPage(props: SitesPageProps) {
const params = await props.params; const params = await props.params;
let sites: ListSitesResponse["sites"] = []; let sites: ListSitesResponse["sites"] = [];
try { try {
const res = await internal.get<AxiosResponse<ListSitesResponse>>( const res = await internal.get<AxiosResponse<ListSitesResponse>>(
`/org/${params.orgId}/sites`, `/org/${params.orgId}/sites`,
await authCookieHeader(), await authCookieHeader()
); );
sites = res.data.data.sites; sites = res.data.data.sites;
} catch (e) { } catch (e) {

173
src/app/[orgId]/sites/[niceId]/components/GeneralForm.tsx
View file

@ -1,173 +0,0 @@
"use client"
import Link from "next/link"
import { zodResolver } from "@hookform/resolvers/zod"
import { useFieldArray, 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 {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { useSiteContext } from "@app/hooks/useSiteContext"
const GeneralFormSchema = z.object({
name: z.string()
// email: z
// .string({
// required_error: "Please select an email to display.",
// })
// .email(),
// bio: z.string().max(160).min(4),
// urls: z
// .array(
// z.object({
// value: z.string().url({ message: "Please enter a valid URL." }),
// })
// )
// .optional(),
})
type GeneralFormValues = z.infer<typeof GeneralFormSchema>
export function GeneralForm() {
const { site, updateSite } = useSiteContext();
const form = useForm<GeneralFormValues>({
resolver: zodResolver(GeneralFormSchema),
defaultValues: {
name: site?.name
},
mode: "onChange",
})
// const { fields, append } = useFieldArray({
// name: "urls",
// control: form.control,
// })
async function onSubmit(data: GeneralFormValues) {
await updateSite({ name: data.name });
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the site.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a verified email to display" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="m@example.com">m@example.com</SelectItem>
<SelectItem value="m@google.com">m@google.com</SelectItem>
<SelectItem value="m@support.com">m@support.com</SelectItem>
</SelectContent>
</Select>
<FormDescription>
You can manage verified email addresses in your{" "}
<Link href="/examples/forms">email settings</Link>.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="bio"
render={({ field }) => (
<FormItem>
<FormLabel>Bio</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormDescription>
You can <span>@mention</span> other users and organizations to
link to them.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<div>
{fields.map((field, index) => (
<FormField
control={form.control}
key={field.id}
name={`urls.${index}.value`}
render={({ field }) => (
<FormItem>
<FormLabel className={cn(index !== 0 && "sr-only")}>
URLs
</FormLabel>
<FormDescription className={cn(index !== 0 && "sr-only")}>
Add links to your website, blog, or social media profiles.
</FormDescription>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
))}
<Button
type="button"
variant="outline"
size="sm"
className="mt-2"
onClick={() => append({ value: "" })}
>
Add URL
</Button>
</div> */}
<Button type="submit">Update Site</Button>
</form>
</Form>
)
}

12
src/app/[orgId]/sites/[niceId]/components/NewtConfig.tsx
View file

@ -1,12 +0,0 @@
"use client"
export function NewtConfig() {
const config = `curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh`;
return (
<pre className="mt-2 w-full rounded-md bg-slate-950 p-4 overflow-x-auto">
<code className="text-white whitespace-pre-wrap">{config}</code>
</pre>
);
};

11
src/app/auth/layout.tsx
View file

@ -1,3 +1,10 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: `Auth - Pangolin`,
description: "",
};
type AuthLayoutProps = { type AuthLayoutProps = {
children: React.ReactNode; children: React.ReactNode;
}; };
@ -5,9 +12,7 @@ type AuthLayoutProps = {
export default async function AuthLayout({ children }: AuthLayoutProps) { export default async function AuthLayout({ children }: AuthLayoutProps) {
return ( return (
<> <>
<div className="p-3 md:mt-32"> <div className="p-3 md:mt-32">{children}</div>
{children}
</div>
</> </>
); );
} }

6
src/app/layout.tsx
View file

@ -3,12 +3,6 @@ import "./globals.css";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { ThemeProvider } from "@app/providers/ThemeProvider"; import { ThemeProvider } from "@app/providers/ThemeProvider";
import { ListOrgsResponse } from "@server/routers/org";
import { internal } from "@app/api";
import { AxiosResponse } from "axios";
import { authCookieHeader } from "@app/api/cookies";
import { redirect } from "next/navigation";
import { verifySession } from "@app/lib/auth/verifySession";
export const metadata: Metadata = { export const metadata: Metadata = {
title: `Dashboard - Pangolin`, title: `Dashboard - Pangolin`,

2
src/app/page.tsx
View file

@ -46,7 +46,7 @@ export default async function Page(props: {
{orgs.map((org) => ( {orgs.map((org) => (
<Link <Link
key={org.orgId} key={org.orgId}
href={`/${org.orgId}`} href={`/${org.orgId}/settings`}
className="text-primary underline" className="text-primary underline"
> >
<div className="flex items-center"> <div className="flex items-center">

2
src/app/profile/layout.tsx
View file

@ -3,7 +3,7 @@ import Image from "next/image"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
import { SidebarNav } from "@/components/sidebar-nav" import { SidebarNav } from "@/components/sidebar-nav"
import Header from "../[orgId]/components/Header" import Header from "../[orgId]/settings/components/Header"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Forms", title: "Forms",

7
src/app/setup/layout.tsx
View file

@ -1,3 +1,10 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: `Setup - Pangolin`,
description: "",
};
export default async function SetupLayout({ export default async function SetupLayout({
children, children,
}: { }: {