minor visual enhancements

server/lib/config.ts

@@ -184,7 +184,8 @@ const configSchema = z.object({
             disable_signup_without_invite: z.boolean().optional(),
             disable_user_create_org: z.boolean().optional(),
             allow_raw_resources: z.boolean().optional(),
-            allow_base_domain_resources: z.boolean().optional()
+            allow_base_domain_resources: z.boolean().optional(),
+            allow_local_sites: z.boolean().optional()
         })
         .optional()
 });

src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx

@@ -7,7 +7,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import { toast } from "@app/hooks/useToast";
@@ -24,11 +24,11 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 
@@ -40,13 +40,13 @@ type CreateRoleFormProps = {
 
 const formSchema = z.object({
     name: z.string({ message: "Name is required" }).max(32),
-    description: z.string().max(255).optional(),
+    description: z.string().max(255).optional()
 });
 
 export default function CreateRoleForm({
     open,
     setOpen,
-    afterCreate,
+    afterCreate
 }: CreateRoleFormProps) {
     const { org } = useOrgContext();
 
@@ -58,8 +58,8 @@ export default function CreateRoleForm({
         resolver: zodResolver(formSchema),
         defaultValues: {
             name: "",
-            description: "",
-        },
+            description: ""
+        }
     });
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
@@ -70,7 +70,7 @@ export default function CreateRoleForm({
                 `/org/${org?.org.orgId}/role`,
                 {
                     name: values.name,
-                    description: values.description,
+                    description: values.description
                 } as CreateRoleBody
             )
             .catch((e) => {
@@ -80,7 +80,7 @@ export default function CreateRoleForm({
                     description: formatAxiosError(
                         e,
                         "An error occurred while creating the role."
-                    ),
+                    )
                 });
             });
 
@@ -88,7 +88,7 @@ export default function CreateRoleForm({
             toast({
                 variant: "default",
                 title: "Role created",
-                description: "The role has been successfully created.",
+                description: "The role has been successfully created."
             });
 
             if (open) {
@@ -135,9 +135,7 @@ export default function CreateRoleForm({
                                         <FormItem>
                                             <FormLabel>Role Name</FormLabel>
                                             <FormControl>
-                                                <Input
-                                                    {...field}
-                                                />
+                                                <Input {...field} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -150,9 +148,7 @@ export default function CreateRoleForm({
                                         <FormItem>
                                             <FormLabel>Description</FormLabel>
                                             <FormControl>
-                                                <Input
-                                                    {...field}
-                                                />
+                                                <Input {...field} />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>
@@ -162,6 +158,9 @@ export default function CreateRoleForm({
                         </Form>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="create-role-form"
@@ -170,9 +169,6 @@ export default function CreateRoleForm({
                         >
                             Create Role
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx

@@ -7,7 +7,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -23,7 +23,7 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { ListRolesResponse } from "@server/routers/role";
@@ -32,10 +32,10 @@ import {
     SelectContent,
     SelectItem,
     SelectTrigger,
-    SelectValue,
+    SelectValue
 } from "@app/components/ui/select";
 import { RoleRow } from "./RolesTable";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 
@@ -47,14 +47,14 @@ type CreateRoleFormProps = {
 };
 
 const formSchema = z.object({
-    newRoleId: z.string({ message: "New role is required" }),
+    newRoleId: z.string({ message: "New role is required" })
 });
 
 export default function DeleteRoleForm({
     open,
     roleToDelete,
     setOpen,
-    afterDelete,
+    afterDelete
 }: CreateRoleFormProps) {
     const { org } = useOrgContext();
 
@@ -66,9 +66,9 @@ export default function DeleteRoleForm({
     useEffect(() => {
         async function fetchRoles() {
             const res = await api
-                .get<AxiosResponse<ListRolesResponse>>(
-                    `/org/${org?.org.orgId}/roles`
-                )
+                .get<
+                    AxiosResponse<ListRolesResponse>
+                >(`/org/${org?.org.orgId}/roles`)
                 .catch((e) => {
                     console.error(e);
                     toast({
@@ -77,7 +77,7 @@ export default function DeleteRoleForm({
                         description: formatAxiosError(
                             e,
                             "An error occurred while fetching the roles"
-                        ),
+                        )
                     });
                 });
 
@@ -96,8 +96,8 @@ export default function DeleteRoleForm({
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
-            newRoleId: "",
-        },
+            newRoleId: ""
+        }
     });
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
@@ -106,8 +106,8 @@ export default function DeleteRoleForm({
         const res = await api
             .delete(`/role/${roleToDelete.roleId}`, {
                 data: {
-                    roleId: values.newRoleId,
-                },
+                    roleId: values.newRoleId
+                }
             })
             .catch((e) => {
                 toast({
@@ -116,7 +116,7 @@ export default function DeleteRoleForm({
                     description: formatAxiosError(
                         e,
                         "An error occurred while removing the role."
-                    ),
+                    )
                 });
             });
 
@@ -124,7 +124,7 @@ export default function DeleteRoleForm({
             toast({
                 variant: "default",
                 title: "Role removed",
-                description: "The role has been successfully removed.",
+                description: "The role has been successfully removed."
             });
 
             if (open) {
@@ -214,6 +214,9 @@ export default function DeleteRoleForm({
                         </div>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="remove-role-form"
@@ -222,9 +225,6 @@ export default function DeleteRoleForm({
                         >
                             Remove Role
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/access/users/InviteUserForm.tsx

@@ -37,7 +37,7 @@ import {
 } from "@app/components/Credenza";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { ListRolesResponse } from "@server/routers/role";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Checkbox } from "@app/components/ui/checkbox";
@@ -194,9 +194,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
                                                 <FormItem>
                                                     <FormLabel>Email</FormLabel>
                                                     <FormControl>
-                                                        <Input
-                                                            {...field}
-                                                        />
+                                                        <Input {...field} />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
@@ -340,6 +338,9 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
                         </div>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="invite-user-form"
@@ -348,9 +349,6 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
                         >
                             Create Invitation
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/access/users/UsersTable.tsx

@@ -185,7 +185,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                             <Link
                                 href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
                             >
-                                <Button variant={"outline"} className="ml-2">
+                                <Button variant={"outlinePrimary"} className="ml-2">
                                     Manage
                                     <ArrowRight className="ml-2 w-4 h-4" />
                                 </Button>

src/app/[orgId]/settings/access/users/[userId]/layout.tsx

@@ -64,7 +64,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
                     </Breadcrumb>
                 </div>
 
-                <div className="space-y-0.5 select-none mb-6">
+                <div className="space-y-0.5 mb-6">
                     <h2 className="text-2xl font-bold tracking-tight">
                         User {user?.email}
                     </h2>

src/app/[orgId]/settings/layout.tsx

@@ -1,6 +1,13 @@
 import { Metadata } from "next";
 import { TopbarNav } from "@app/components/TopbarNav";
-import { Cog, Combine, Link, Settings, Users, Waypoints } from "lucide-react";
+import {
+    Cog,
+    Combine,
+    LinkIcon,
+    Settings,
+    Users,
+    Waypoints
+} from "lucide-react";
 import { Header } from "@app/components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
@@ -11,6 +18,14 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { cache } from "react";
 import { GetOrgUserResponse } from "@server/routers/user";
 import UserProvider from "@app/providers/UserProvider";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator
+} from "@app/components/ui/breadcrumb";
+import Link from "next/link";
 
 export const dynamic = "force-dynamic";
 
@@ -38,7 +53,7 @@ const topNavItems = [
     {
         title: "Shareable Links",
         href: "/{orgId}/settings/share-links",
-        icon: <Link className="h-4 w-4" />
+        icon: <LinkIcon className="h-4 w-4" />
     },
     {
         title: "General",
@@ -95,19 +110,23 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
     return (
         <>
-            <div className="w-full border-b bg-card select-none sm:px-0 px-3 fixed top-0 z-10">
-                <div className="container mx-auto flex flex-col content-between">
-                    <div className="my-4">
-                        <UserProvider user={user}>
-                            <Header orgId={params.orgId} orgs={orgs} />
-                        </UserProvider>
+            <div className="w-full bg-card sm:px-0 px-3 fixed top-0 z-10">
+                <div className="border-b">
+                    <div className="container mx-auto flex flex-col content-between">
+                        <div className="my-4">
+                            <UserProvider user={user}>
+                                <Header orgId={params.orgId} orgs={orgs} />
+                            </UserProvider>
+                        </div>
+                        <TopbarNav items={topNavItems} orgId={params.orgId} />
                     </div>
-                    <TopbarNav items={topNavItems} orgId={params.orgId} />
                 </div>
             </div>
 
-            <div className="container mx-auto sm:px-0 px-3 pt-[165px]">
-                {children}
+            <div className="container mx-auto sm:px-0 px-3 pt-[155px]">
+                <div className="container mx-auto sm:px-0 px-3">
+                    {children}
+                </div>
             </div>
         </>
     );

src/app/[orgId]/settings/resources/CreateResourceForm.tsx

@@ -66,6 +66,7 @@ import CopyTextBox from "@app/components/CopyTextBox";
 import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group";
 import { Label } from "@app/components/ui/label";
 import { ListDomainsResponse } from "@server/routers/domain";
+import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
 
 const createResourceFormSchema = z
     .object({
@@ -140,6 +141,7 @@ export default function CreateResourceForm({
     const [domainType, setDomainType] = useState<"subdomain" | "basedomain">(
         "subdomain"
     );
+    const [loadingPage, setLoadingPage] = useState(true);
 
     const form = useForm<CreateResourceFormValues>({
         resolver: zodResolver(createResourceFormSchema),
@@ -215,8 +217,16 @@ export default function CreateResourceForm({
             }
         };
 
-        fetchSites();
-        fetchDomains();
+        const load = async () => {
+            setLoadingPage(true);
+
+            await fetchSites();
+            await fetchDomains();
+
+            setLoadingPage(false);
+        };
+
+        load();
     }, [open]);
 
     async function onSubmit(data: CreateResourceFormValues) {
@@ -282,236 +292,482 @@ export default function CreateResourceForm({
                         </CredenzaDescription>
                     </CredenzaHeader>
                     <CredenzaBody>
-                        {!showSnippets && (
-                            <Form {...form} key={formKey}>
-                                <form
-                                    onSubmit={form.handleSubmit(onSubmit)}
-                                    className="space-y-4"
-                                    id="create-resource-form"
-                                >
-                                    {!env.flags.allowRawResources || (
-                                        <FormField
-                                            control={form.control}
-                                            name="http"
-                                            render={({ field }) => (
-                                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                                                    <div className="space-y-0.5">
-                                                        <FormLabel className="text-base">
-                                                            HTTP Resource
-                                                        </FormLabel>
-                                                        <FormDescription>
-                                                            Toggle if this is an
-                                                            HTTP resource or a
-                                                            raw TCP/UDP
-                                                            resource.
-                                                        </FormDescription>
-                                                    </div>
-                                                    <FormControl>
-                                                        <Switch
-                                                            checked={
-                                                                field.value
-                                                            }
-                                                            onCheckedChange={
-                                                                field.onChange
-                                                            }
-                                                        />
-                                                    </FormControl>
-                                                </FormItem>
+                        {loadingPage ? (
+                            <LoaderPlaceholder height="500px" />
+                        ) : (
+                            <div>
+                                {!showSnippets && (
+                                    <Form {...form} key={formKey}>
+                                        <form
+                                            onSubmit={form.handleSubmit(
+                                                onSubmit
                                             )}
-                                        />
-                                    )}
-
-                                    <FormField
-                                        control={form.control}
-                                        name="name"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>Name</FormLabel>
-                                                <FormControl>
-                                                    <Input {...field} />
-                                                </FormControl>
-                                                <FormMessage />
-                                                <FormDescription>
-                                                    This is display name for the
-                                                    resource.
-                                                </FormDescription>
-                                            </FormItem>
-                                        )}
-                                    />
-
-                                    {form.watch("http") &&
-                                        env.flags.allowBaseDomainResources && (
-                                            <div>
-                                                <RadioGroup
-                                                    className="flex space-x-4"
-                                                    defaultValue={domainType}
-                                                    onValueChange={(val) => {
-                                                        setDomainType(
-                                                            val as any
-                                                        );
-                                                        form.setValue(
-                                                            "isBaseDomain",
-                                                            val === "basedomain"
-                                                        );
-                                                    }}
-                                                >
-                                                    <div className="flex items-center space-x-2">
-                                                        <RadioGroupItem
-                                                            value="subdomain"
-                                                            id="r1"
-                                                        />
-                                                        <Label htmlFor="r1">
-                                                            Subdomain
-                                                        </Label>
-                                                    </div>
-                                                    <div className="flex items-center space-x-2">
-                                                        <RadioGroupItem
-                                                            value="basedomain"
-                                                            id="r2"
-                                                        />
-                                                        <Label htmlFor="r2">
-                                                            Base Domain
-                                                        </Label>
-                                                    </div>
-                                                </RadioGroup>
-                                            </div>
-                                        )}
-
-                                    {form.watch("http") && (
-                                        <>
-                                            {domainType === "subdomain" ? (
-                                                <div className="w-fill space-y-2">
-                                                    {!env.flags
-                                                        .allowBaseDomainResources && (
-                                                        <FormLabel>
-                                                            Subdomain
-                                                        </FormLabel>
-                                                    )}
-                                                    <div className="flex">
-                                                        <div className="w-full mr-1">
-                                                            <FormField
-                                                                control={
-                                                                    form.control
-                                                                }
-                                                                name="subdomain"
-                                                                render={({
-                                                                    field
-                                                                }) => (
-                                                                    <FormControl>
-                                                                        <Input
-                                                                            {...field}
-                                                                            className="text-right"
-                                                                            placeholder="Enter subdomain"
-                                                                        />
-                                                                    </FormControl>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                        <div className="max-w-1/2">
-                                                            <FormField
-                                                                control={
-                                                                    form.control
-                                                                }
-                                                                name="domainId"
-                                                                render={({
-                                                                    field
-                                                                }) => (
-                                                                    <FormItem>
-                                                                        <Select
-                                                                            onValueChange={
-                                                                                field.onChange
-                                                                            }
-                                                                            value={
-                                                                                field.value
-                                                                            }
-                                                                            defaultValue={
-                                                                                field.value
-                                                                            }
-                                                                        >
-                                                                            <FormControl>
-                                                                                <SelectTrigger>
-                                                                                    <SelectValue />
-                                                                                </SelectTrigger>
-                                                                            </FormControl>
-                                                                            <SelectContent>
-                                                                                {baseDomains.map(
-                                                                                    (
-                                                                                        option
-                                                                                    ) => (
-                                                                                        <SelectItem
-                                                                                            key={
-                                                                                                option.domainId
-                                                                                            }
-                                                                                            value={
-                                                                                                option.domainId
-                                                                                            }
-                                                                                        >
-                                                                                            .
-                                                                                            {
-                                                                                                option.baseDomain
-                                                                                            }
-                                                                                        </SelectItem>
-                                                                                    )
-                                                                                )}
-                                                                            </SelectContent>
-                                                                        </Select>
-                                                                        <FormMessage />
-                                                                    </FormItem>
-                                                                )}
-                                                            />
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            ) : (
+                                            className="space-y-4"
+                                            id="create-resource-form"
+                                        >
+                                            {!env.flags.allowRawResources || (
                                                 <FormField
                                                     control={form.control}
-                                                    name="domainId"
+                                                    name="http"
                                                     render={({ field }) => (
-                                                        <FormItem>
-                                                            <Select
-                                                                onValueChange={
-                                                                    field.onChange
-                                                                }
-                                                                defaultValue={
-                                                                    field.value
-                                                                }
-                                                                {...field}
-                                                            >
-                                                                <FormControl>
-                                                                    <SelectTrigger>
-                                                                        <SelectValue />
-                                                                    </SelectTrigger>
-                                                                </FormControl>
-                                                                <SelectContent>
-                                                                    {baseDomains.map(
-                                                                        (
-                                                                            option
-                                                                        ) => (
-                                                                            <SelectItem
-                                                                                key={
-                                                                                    option.domainId
-                                                                                }
-                                                                                value={
-                                                                                    option.domainId
-                                                                                }
-                                                                            >
-                                                                                {
-                                                                                    option.baseDomain
-                                                                                }
-                                                                            </SelectItem>
-                                                                        )
-                                                                    )}
-                                                                </SelectContent>
-                                                            </Select>
-                                                            <FormMessage />
+                                                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                                                            <div className="space-y-0.5">
+                                                                <FormLabel className="text-base">
+                                                                    HTTP
+                                                                    Resource
+                                                                </FormLabel>
+                                                                <FormDescription>
+                                                                    Toggle if
+                                                                    this is an
+                                                                    HTTP
+                                                                    resource or
+                                                                    a raw
+                                                                    TCP/UDP
+                                                                    resource.
+                                                                </FormDescription>
+                                                            </div>
+                                                            <FormControl>
+                                                                <Switch
+                                                                    checked={
+                                                                        field.value
+                                                                    }
+                                                                    onCheckedChange={
+                                                                        field.onChange
+                                                                    }
+                                                                />
+                                                            </FormControl>
                                                         </FormItem>
                                                     )}
                                                 />
                                             )}
-                                        </>
-                                    )}
 
-                                    {!form.watch("http") && (
+                                            {!form.watch("http") && (
+                                                <Link
+                                                    className="text-sm text-primary flex items-center gap-1"
+                                                    href="https://docs.fossorial.io/Getting%20Started/tcp-udp"
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <span>
+                                                        Learn how to configure
+                                                        TCP/UDP resources
+                                                    </span>
+                                                    <SquareArrowOutUpRight
+                                                        size={14}
+                                                    />
+                                                </Link>
+                                            )}
+
+                                            <FormField
+                                                control={form.control}
+                                                name="name"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            Name
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Input {...field} />
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+
+                                            {form.watch("http") &&
+                                                env.flags
+                                                    .allowBaseDomainResources && (
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="isBaseDomain"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    Domain Type
+                                                                </FormLabel>
+                                                                <Select
+                                                                    value={
+                                                                        domainType
+                                                                    }
+                                                                    onValueChange={(
+                                                                        val
+                                                                    ) =>
+                                                                        setDomainType(
+                                                                            val ===
+                                                                                "basedomain"
+                                                                                ? "basedomain"
+                                                                                : "subdomain"
+                                                                        )
+                                                                    }
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger>
+                                                                            <SelectValue />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        <SelectItem value="subdomain">
+                                                                            Subdomain
+                                                                        </SelectItem>
+                                                                        <SelectItem value="basedomain">
+                                                                            Base
+                                                                            Domain
+                                                                        </SelectItem>
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                )}
+
+                                            {form.watch("http") && (
+                                                <>
+                                                    {domainType ===
+                                                    "subdomain" ? (
+                                                        <div className="w-fill space-y-2">
+                                                            <FormLabel>
+                                                                Subdomain
+                                                            </FormLabel>
+                                                            <div className="flex">
+                                                                <div className="w-1/2 mr-1">
+                                                                    <FormField
+                                                                        control={
+                                                                            form.control
+                                                                        }
+                                                                        name="subdomain"
+                                                                        render={({
+                                                                            field
+                                                                        }) => (
+                                                                            <FormItem>
+                                                                                <FormControl>
+                                                                                    <Input
+                                                                                        {...field}
+                                                                                    />
+                                                                                </FormControl>
+                                                                                <FormMessage />
+                                                                            </FormItem>
+                                                                        )}
+                                                                    />
+                                                                </div>
+                                                                <div className="w-1/2">
+                                                                    <FormField
+                                                                        control={
+                                                                            form.control
+                                                                        }
+                                                                        name="domainId"
+                                                                        render={({
+                                                                            field
+                                                                        }) => (
+                                                                            <FormItem>
+                                                                                <Select
+                                                                                    onValueChange={
+                                                                                        field.onChange
+                                                                                    }
+                                                                                    value={
+                                                                                        field.value
+                                                                                    }
+                                                                                    defaultValue={
+                                                                                        field.value
+                                                                                    }
+                                                                                >
+                                                                                    <FormControl>
+                                                                                        <SelectTrigger>
+                                                                                            <SelectValue />
+                                                                                        </SelectTrigger>
+                                                                                    </FormControl>
+                                                                                    <SelectContent>
+                                                                                        {baseDomains.map(
+                                                                                            (
+                                                                                                option
+                                                                                            ) => (
+                                                                                                <SelectItem
+                                                                                                    key={
+                                                                                                        option.domainId
+                                                                                                    }
+                                                                                                    value={
+                                                                                                        option.domainId
+                                                                                                    }
+                                                                                                >
+                                                                                                    .
+                                                                                                    {
+                                                                                                        option.baseDomain
+                                                                                                    }
+                                                                                                </SelectItem>
+                                                                                            )
+                                                                                        )}
+                                                                                    </SelectContent>
+                                                                                </Select>
+                                                                                <FormMessage />
+                                                                            </FormItem>
+                                                                        )}
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    ) : (
+                                                        <FormField
+                                                            control={
+                                                                form.control
+                                                            }
+                                                            name="domainId"
+                                                            render={({
+                                                                field
+                                                            }) => (
+                                                                <FormItem>
+                                                                    <FormLabel>
+                                                                        Base
+                                                                        Domain
+                                                                    </FormLabel>
+                                                                    <Select
+                                                                        onValueChange={
+                                                                            field.onChange
+                                                                        }
+                                                                        defaultValue={
+                                                                            field.value
+                                                                        }
+                                                                        {...field}
+                                                                    >
+                                                                        <FormControl>
+                                                                            <SelectTrigger>
+                                                                                <SelectValue />
+                                                                            </SelectTrigger>
+                                                                        </FormControl>
+                                                                        <SelectContent>
+                                                                            {baseDomains.map(
+                                                                                (
+                                                                                    option
+                                                                                ) => (
+                                                                                    <SelectItem
+                                                                                        key={
+                                                                                            option.domainId
+                                                                                        }
+                                                                                        value={
+                                                                                            option.domainId
+                                                                                        }
+                                                                                    >
+                                                                                        {
+                                                                                            option.baseDomain
+                                                                                        }
+                                                                                    </SelectItem>
+                                                                                )
+                                                                            )}
+                                                                        </SelectContent>
+                                                                    </Select>
+                                                                    <FormMessage />
+                                                                </FormItem>
+                                                            )}
+                                                        />
+                                                    )}
+                                                </>
+                                            )}
+
+                                            {!form.watch("http") && (
+                                                <>
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="protocol"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    Protocol
+                                                                </FormLabel>
+                                                                <Select
+                                                                    value={
+                                                                        field.value
+                                                                    }
+                                                                    onValueChange={
+                                                                        field.onChange
+                                                                    }
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger>
+                                                                            <SelectValue placeholder="Select a protocol" />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        <SelectItem value="tcp">
+                                                                            TCP
+                                                                        </SelectItem>
+                                                                        <SelectItem value="udp">
+                                                                            UDP
+                                                                        </SelectItem>
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="proxyPort"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    Port Number
+                                                                </FormLabel>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        type="number"
+                                                                        value={
+                                                                            field.value ??
+                                                                            ""
+                                                                        }
+                                                                        onChange={(
+                                                                            e
+                                                                        ) =>
+                                                                            field.onChange(
+                                                                                e
+                                                                                    .target
+                                                                                    .value
+                                                                                    ? parseInt(
+                                                                                          e
+                                                                                              .target
+                                                                                              .value
+                                                                                      )
+                                                                                    : null
+                                                                            )
+                                                                        }
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                                <FormDescription>
+                                                                    The external
+                                                                    port number
+                                                                    to proxy
+                                                                    requests.
+                                                                </FormDescription>
+                                                            </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(
+                                                                            "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="p-0">
+                                                                <Command>
+                                                                    <CommandInput placeholder="Search site" />
+                                                                    <CommandList>
+                                                                        <CommandEmpty>
+                                                                            No
+                                                                            site
+                                                                            found.
+                                                                        </CommandEmpty>
+                                                                        <CommandGroup>
+                                                                            {sites.map(
+                                                                                (
+                                                                                    site
+                                                                                ) => (
+                                                                                    <CommandItem
+                                                                                        value={`${site.siteId}:${site.name}:${site.niceId}`}
+                                                                                        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>
+                                                        <FormMessage />
+                                                        <FormDescription>
+                                                            This site will
+                                                            provide connectivity
+                                                            to the resource.
+                                                        </FormDescription>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </form>
+                                    </Form>
+                                )}
+
+                                {showSnippets && (
+                                    <div>
+                                        <div className="flex items-start space-x-4 mb-6 last:mb-0">
+                                            <div className="flex-grow">
+                                                <h3 className="text-lg font-semibold mb-3">
+                                                    Traefik: Add Entrypoints
+                                                </h3>
+                                                <CopyTextBox
+                                                    text={`entryPoints:
+  ${form.getValues("protocol")}-${form.getValues("proxyPort")}:
+    address: ":${form.getValues("proxyPort")}/${form.getValues("protocol")}"`}
+                                                    wrapText={false}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="flex items-start space-x-4 mb-6 last:mb-0">
+                                            <div className="flex-grow">
+                                                <h3 className="text-lg font-semibold mb-3">
+                                                    Gerbil: Expose Ports in
+                                                    Docker Compose
+                                                </h3>
+                                                <CopyTextBox
+                                                    text={`ports:
+  - ${form.getValues("proxyPort")}:${form.getValues("proxyPort")}${form.getValues("protocol") === "tcp" ? "" : "/" + form.getValues("protocol")}`}
+                                                    wrapText={false}
+                                                />
+                                            </div>
+                                        </div>
+
                                         <Link
                                             className="text-sm text-primary flex items-center gap-1"
                                             href="https://docs.fossorial.io/Getting%20Started/tcp-udp"
@@ -519,233 +775,20 @@ export default function CreateResourceForm({
                                             rel="noopener noreferrer"
                                         >
                                             <span>
-                                                Learn how to configure TCP/UDP
-                                                resources
+                                                Make sure to follow the full
+                                                guide
                                             </span>
                                             <SquareArrowOutUpRight size={14} />
                                         </Link>
-                                    )}
-
-                                    {!form.watch("http") && (
-                                        <>
-                                            <FormField
-                                                control={form.control}
-                                                name="protocol"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            Protocol
-                                                        </FormLabel>
-                                                        <Select
-                                                            value={field.value}
-                                                            onValueChange={
-                                                                field.onChange
-                                                            }
-                                                        >
-                                                            <FormControl>
-                                                                <SelectTrigger>
-                                                                    <SelectValue placeholder="Select a protocol" />
-                                                                </SelectTrigger>
-                                                            </FormControl>
-                                                            <SelectContent>
-                                                                <SelectItem value="tcp">
-                                                                    TCP
-                                                                </SelectItem>
-                                                                <SelectItem value="udp">
-                                                                    UDP
-                                                                </SelectItem>
-                                                            </SelectContent>
-                                                        </Select>
-                                                        <FormMessage />
-                                                        <FormDescription>
-                                                            The protocol to use
-                                                            for the resource.
-                                                        </FormDescription>
-                                                    </FormItem>
-                                                )}
-                                            />
-                                            <FormField
-                                                control={form.control}
-                                                name="proxyPort"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <FormLabel>
-                                                            Port Number
-                                                        </FormLabel>
-                                                        <FormControl>
-                                                            <Input
-                                                                type="number"
-                                                                value={
-                                                                    field.value ??
-                                                                    ""
-                                                                }
-                                                                onChange={(e) =>
-                                                                    field.onChange(
-                                                                        e.target
-                                                                            .value
-                                                                            ? parseInt(
-                                                                                  e
-                                                                                      .target
-                                                                                      .value
-                                                                              )
-                                                                            : null
-                                                                    )
-                                                                }
-                                                            />
-                                                        </FormControl>
-                                                        <FormMessage />
-                                                        <FormDescription>
-                                                            The port number to
-                                                            proxy requests to
-                                                            (required for
-                                                            non-HTTP resources).
-                                                        </FormDescription>
-                                                    </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(
-                                                                    "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="p-0">
-                                                        <Command>
-                                                            <CommandInput placeholder="Search site" />
-                                                            <CommandList>
-                                                                <CommandEmpty>
-                                                                    No site
-                                                                    found.
-                                                                </CommandEmpty>
-                                                                <CommandGroup>
-                                                                    {sites.map(
-                                                                        (
-                                                                            site
-                                                                        ) => (
-                                                                            <CommandItem
-                                                                                value={`${site.siteId}:${site.name}:${site.niceId}`}
-                                                                                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>
-                                                <FormMessage />
-                                                <FormDescription>
-                                                    This site will provide
-                                                    connectivity to the
-                                                    resource.
-                                                </FormDescription>
-                                            </FormItem>
-                                        )}
-                                    />
-                                </form>
-                            </Form>
-                        )}
-
-                        {showSnippets && (
-                            <div>
-                                <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                    <div className="flex-shrink-0 w-8 h-8 bg-muted text-primary-foreground rounded-full flex items-center justify-center font-bold">
-                                        1
                                     </div>
-                                    <div className="flex-grow">
-                                        <h3 className="text-lg font-semibold mb-3">
-                                            Traefik: Add Entrypoints
-                                        </h3>
-                                        <CopyTextBox
-                                            text={`entryPoints:
-  ${form.getValues("protocol")}-${form.getValues("proxyPort")}:
-    address: ":${form.getValues("proxyPort")}/${form.getValues("protocol")}"`}
-                                            wrapText={false}
-                                        />
-                                    </div>
-                                </div>
-
-                                <div className="flex items-start space-x-4 mb-6 last:mb-0">
-                                    <div className="flex-shrink-0 w-8 h-8 bg-muted text-primary-foreground rounded-full flex items-center justify-center font-bold">
-                                        2
-                                    </div>
-                                    <div className="flex-grow">
-                                        <h3 className="text-lg font-semibold mb-3">
-                                            Gerbil: Expose Ports in Docker
-                                            Compose
-                                        </h3>
-                                        <CopyTextBox
-                                            text={`ports:
-  - ${form.getValues("proxyPort")}:${form.getValues("proxyPort")}${form.getValues("protocol") === "tcp" ? "" : "/" + form.getValues("protocol")}`}
-                                            wrapText={false}
-                                        />
-                                    </div>
-                                </div>
-
-                                <Link
-                                    className="text-sm text-primary flex items-center gap-1"
-                                    href="https://docs.fossorial.io/Getting%20Started/tcp-udp"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <span>
-                                        Make sure to follow the full guide
-                                    </span>
-                                    <SquareArrowOutUpRight size={14} />
-                                </Link>
+                                )}
                             </div>
                         )}
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         {!showSnippets && (
                             <Button
                                 type="submit"
@@ -765,10 +808,6 @@ export default function CreateResourceForm({
                                 Go to Resource
                             </Button>
                         )}
-
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -233,7 +233,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
                         <Link
                             href={`/${resourceRow.orgId}/settings/resources/${resourceRow.id}`}
                         >
-                            <Button variant={"outline"} className="ml-2">
+                            <Button variant={"outlinePrimary"} className="ml-2">
                                 Edit
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>

src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx

@@ -8,7 +8,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import { toast } from "@app/hooks/useToast";
@@ -24,22 +24,22 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { Resource } from "@server/db/schema";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const setPasswordFormSchema = z.object({
-    password: z.string().min(4).max(100),
+    password: z.string().min(4).max(100)
 });
 
 type SetPasswordFormValues = z.infer<typeof setPasswordFormSchema>;
 
 const defaultValues: Partial<SetPasswordFormValues> = {
-    password: "",
+    password: ""
 };
 
 type SetPasswordFormProps = {
@@ -53,7 +53,7 @@ export default function SetResourcePasswordForm({
     open,
     setOpen,
     resourceId,
-    onSetPassword,
+    onSetPassword
 }: SetPasswordFormProps) {
     const api = createApiClient(useEnvContext());
 
@@ -61,7 +61,7 @@ export default function SetResourcePasswordForm({
 
     const form = useForm<SetPasswordFormValues>({
         resolver: zodResolver(setPasswordFormSchema),
-        defaultValues,
+        defaultValues
     });
 
     useEffect(() => {
@@ -76,7 +76,7 @@ export default function SetResourcePasswordForm({
         setLoading(true);
 
         api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/password`, {
-            password: data.password,
+            password: data.password
         })
             .catch((e) => {
                 toast({
@@ -85,14 +85,14 @@ export default function SetResourcePasswordForm({
                     description: formatAxiosError(
                         e,
                         "An error occurred while setting the resource password"
-                    ),
+                    )
                 });
             })
             .then(() => {
                 toast({
                     title: "Resource password set",
                     description:
-                        "The resource password has been set successfully",
+                        "The resource password has been set successfully"
                 });
 
                 if (onSetPassword) {
@@ -153,6 +153,9 @@ export default function SetResourcePasswordForm({
                         </Form>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="set-password-form"
@@ -161,9 +164,6 @@ export default function SetResourcePasswordForm({
                         >
                             Enable Password Protection
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx

@@ -8,7 +8,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import { toast } from "@app/hooks/useToast";
@@ -24,27 +24,27 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { Resource } from "@server/db/schema";
 import {
     InputOTP,
     InputOTPGroup,
-    InputOTPSlot,
+    InputOTPSlot
 } from "@app/components/ui/input-otp";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 
 const setPincodeFormSchema = z.object({
-    pincode: z.string().length(6),
+    pincode: z.string().length(6)
 });
 
 type SetPincodeFormValues = z.infer<typeof setPincodeFormSchema>;
 
 const defaultValues: Partial<SetPincodeFormValues> = {
-    pincode: "",
+    pincode: ""
 };
 
 type SetPincodeFormProps = {
@@ -58,7 +58,7 @@ export default function SetResourcePincodeForm({
     open,
     setOpen,
     resourceId,
-    onSetPincode,
+    onSetPincode
 }: SetPincodeFormProps) {
     const [loading, setLoading] = useState(false);
 
@@ -66,7 +66,7 @@ export default function SetResourcePincodeForm({
 
     const form = useForm<SetPincodeFormValues>({
         resolver: zodResolver(setPincodeFormSchema),
-        defaultValues,
+        defaultValues
     });
 
     useEffect(() => {
@@ -81,7 +81,7 @@ export default function SetResourcePincodeForm({
         setLoading(true);
 
         api.post<AxiosResponse<Resource>>(`/resource/${resourceId}/pincode`, {
-            pincode: data.pincode,
+            pincode: data.pincode
         })
             .catch((e) => {
                 toast({
@@ -89,15 +89,15 @@ export default function SetResourcePincodeForm({
                     title: "Error setting resource PIN code",
                     description: formatAxiosError(
                         e,
-                        "An error occurred while setting the resource PIN code",
-                    ),
+                        "An error occurred while setting the resource PIN code"
+                    )
                 });
             })
             .then(() => {
                 toast({
                     title: "Resource PIN code set",
                     description:
-                        "The resource pincode has been set successfully",
+                        "The resource pincode has been set successfully"
                 });
 
                 if (onSetPincode) {
@@ -181,6 +181,9 @@ export default function SetResourcePincodeForm({
                         </Form>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="set-pincode-form"
@@ -189,9 +192,6 @@ export default function SetResourcePincodeForm({
                         >
                             Enable PIN Code Protection
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx

@@ -38,7 +38,8 @@ import {
     SettingsSectionHeader,
     SettingsSectionDescription,
     SettingsSectionBody,
-    SettingsSectionFooter
+    SettingsSectionFooter,
+    SettingsSectionForm
 } from "@app/components/Settings";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { InfoPopup } from "@app/components/ui/info-popup";
@@ -438,6 +439,7 @@ export default function ResourceAuthenticationPage() {
                                                                 setActiveRolesTagIndex
                                                             }
                                                             placeholder="Select a role"
+                                                            size="sm"
                                                             tags={
                                                                 usersRolesForm.getValues()
                                                                     .roles
@@ -466,14 +468,6 @@ export default function ResourceAuthenticationPage() {
                                                                 true
                                                             }
                                                             sortTags={true}
-                                                            styleClasses={{
-                                                                tag: {
-                                                                    body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full"
-                                                                },
-                                                                input: "text-base md:text-sm border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
-                                                                inlineTagsContainer:
-                                                                    "bg-transparent p-2"
-                                                            }}
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
@@ -504,6 +498,7 @@ export default function ResourceAuthenticationPage() {
                                                                 usersRolesForm.getValues()
                                                                     .users
                                                             }
+                                                            size="sm"
                                                             setTags={(
                                                                 newUsers
                                                             ) => {
@@ -528,14 +523,6 @@ export default function ResourceAuthenticationPage() {
                                                                 true
                                                             }
                                                             sortTags={true}
-                                                            styleClasses={{
-                                                                tag: {
-                                                                    body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full"
-                                                                },
-                                                                input: "text-base md:text-sm border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
-                                                                inlineTagsContainer:
-                                                                    "bg-transparent p-2"
-                                                            }}
                                                         />
                                                     </FormControl>
                                                     <FormMessage />
@@ -582,7 +569,7 @@ export default function ResourceAuthenticationPage() {
                                 </span>
                             </div>
                             <Button
-                                variant="outline"
+                                variant="outlinePrimary"
                                 onClick={
                                     authInfo.password
                                         ? removeResourcePassword
@@ -608,7 +595,7 @@ export default function ResourceAuthenticationPage() {
                                 </span>
                             </div>
                             <Button
-                                variant="outline"
+                                variant="outlinePrimary"
                                 onClick={
                                     authInfo.pincode
                                         ? removeResourcePincode
@@ -664,6 +651,7 @@ export default function ResourceAuthenticationPage() {
                                                             activeTagIndex={
                                                                 activeEmailTagIndex
                                                             }
+                                                            size={"sm"}
                                                             validateTag={(
                                                                 tag
                                                             ) => {
@@ -708,14 +696,6 @@ export default function ResourceAuthenticationPage() {
                                                                 false
                                                             }
                                                             sortTags={true}
-                                                            styleClasses={{
-                                                                tag: {
-                                                                    body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full"
-                                                                },
-                                                                input: "text-base md:text-sm border-none bg-transparent text-inherit placeholder:text-inherit shadow-none",
-                                                                inlineTagsContainer:
-                                                                    "bg-transparent p-2"
-                                                            }}
                                                         />
                                                     </FormControl>
                                                     <FormDescription>

src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx

@@ -241,10 +241,7 @@ export default function ReverseProxyTargets(props: {
                     >(`/resource/${params.resourceId}/target`, data);
                     target.targetId = res.data.data.targetId;
                 } else if (target.updated) {
-                    await api.post(
-                        `/target/${target.targetId}`,
-                        data
-                    );
+                    await api.post(`/target/${target.targetId}`, data);
                 }
 
                 setTargets([
@@ -261,9 +258,7 @@ export default function ReverseProxyTargets(props: {
 
             for (const targetId of targetsToRemove) {
                 await api.delete(`/target/${targetId}`);
-                setTargets(
-                    targets.filter((t) => t.targetId !== targetId)
-                );
+                setTargets(targets.filter((t) => t.targetId !== targetId));
             }
 
             toast({
@@ -459,7 +454,8 @@ export default function ReverseProxyTargets(props: {
                             SSL Configuration
                         </SettingsSectionTitle>
                         <SettingsSectionDescription>
-                            Setup SSL to secure your connections with Let's Encrypt certificates
+                            Setup SSL to secure your connections with Let's
+                            Encrypt certificates
                         </SettingsSectionDescription>
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
@@ -490,7 +486,7 @@ export default function ReverseProxyTargets(props: {
                             onSubmit={addTargetForm.handleSubmit(addTarget)}
                             className="space-y-4"
                         >
-                            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 items-end">
                                 {resource.http && (
                                     <FormField
                                         control={addTargetForm.control}
@@ -545,18 +541,6 @@ export default function ReverseProxyTargets(props: {
                                                 <Input id="ip" {...field} />
                                             </FormControl>
                                             <FormMessage />
-                                            {site?.type === "newt" ? (
-                                                <FormDescription>
-                                                    This is the IP or hostname
-                                                    of the target service on
-                                                    your network.
-                                                </FormDescription>
-                                            ) : site?.type === "wireguard" ? (
-                                                <FormDescription>
-                                                    This is the IP of the
-                                                    WireGuard peer.
-                                                </FormDescription>
-                                            ) : null}
                                         </FormItem>
                                     )}
                                 />
@@ -575,26 +559,13 @@ export default function ReverseProxyTargets(props: {
                                                 />
                                             </FormControl>
                                             <FormMessage />
-                                            {site?.type === "newt" ? (
-                                                <FormDescription>
-                                                    This is the port of the
-                                                    target service on your
-                                                    network.
-                                                </FormDescription>
-                                            ) : site?.type === "wireguard" ? (
-                                                <FormDescription>
-                                                    This is the port exposed on
-                                                    an address on the WireGuard
-                                                    network.
-                                                </FormDescription>
-                                            ) : null}
                                         </FormItem>
                                     )}
                                 />
+                                <Button type="submit" variant="outlinePrimary">
+                                    Add Target
+                                </Button>
                             </div>
-                            <Button type="submit" variant="outline">
-                                Add Target
-                            </Button>
                         </form>
                     </Form>
 

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -129,6 +129,7 @@ export default function GeneralForm() {
         ListDomainsResponse["domains"]
     >([]);
 
+    const [loadingPage, setLoadingPage] = useState(true);
     const [domainType, setDomainType] = useState<"subdomain" | "basedomain">(
         resource.isBaseDomain ? "basedomain" : "subdomain"
     );
@@ -184,8 +185,14 @@ export default function GeneralForm() {
             }
         };
 
-        fetchDomains();
-        fetchSites();
+        const load = async () => {
+            await fetchDomains();
+            await fetchSites();
+
+            setLoadingPage(false);
+        };
+
+        load();
     }, []);
 
     async function onSubmit(data: GeneralFormValues) {
@@ -263,391 +270,399 @@ export default function GeneralForm() {
     }
 
     return (
-        <SettingsContainer>
-            <SettingsSection>
-                <SettingsSectionHeader>
-                    <SettingsSectionTitle>
-                        General Settings
-                    </SettingsSectionTitle>
-                    <SettingsSectionDescription>
-                        Configure the general settings for this resource
-                    </SettingsSectionDescription>
-                </SettingsSectionHeader>
+        !loadingPage && (
+            <SettingsContainer>
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            General Settings
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            Configure the general settings for this resource
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
 
-                <SettingsSectionBody>
-                    <SettingsSectionForm>
-                        <Form {...form} key={formKey}>
-                            <form
-                                onSubmit={form.handleSubmit(onSubmit)}
-                                className="space-y-4"
-                                id="general-settings-form"
-                            >
-                                <FormField
-                                    control={form.control}
-                                    name="name"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>Name</FormLabel>
-                                            <FormControl>
-                                                <Input {...field} />
-                                            </FormControl>
-                                            <FormMessage />
-                                            <FormDescription>
-                                                This is the display name of the
-                                                resource.
-                                            </FormDescription>
-                                        </FormItem>
-                                    )}
-                                />
-
-                                {resource.http && (
-                                    <>
-                                        {env.flags.allowBaseDomainResources && (
-                                            <div>
-                                                <RadioGroup
-                                                    className="flex space-x-4"
-                                                    defaultValue={domainType}
-                                                    onValueChange={(val) => {
-                                                        setDomainType(
-                                                            val as any
-                                                        );
-                                                        form.setValue(
-                                                            "isBaseDomain",
-                                                            val === "basedomain"
-                                                        );
-                                                    }}
-                                                >
-                                                    <div className="flex items-center space-x-2">
-                                                        <RadioGroupItem
-                                                            value="subdomain"
-                                                            id="r1"
-                                                        />
-                                                        <Label htmlFor="r1">
-                                                            Subdomain
-                                                        </Label>
-                                                    </div>
-                                                    <div className="flex items-center space-x-2">
-                                                        <RadioGroupItem
-                                                            value="basedomain"
-                                                            id="r2"
-                                                        />
-                                                        <Label htmlFor="r2">
-                                                            Base Domain
-                                                        </Label>
-                                                    </div>
-                                                </RadioGroup>
-                                            </div>
-                                        )}
-
-                                        {domainType === "subdomain" ? (
-                                            <div className="w-fill space-y-2">
-                                                {!env.flags
-                                                    .allowBaseDomainResources && (
-                                                    <FormLabel>
-                                                        Subdomain
-                                                    </FormLabel>
-                                                )}
-                                                <div className="flex">
-                                                    <div className="w-full mr-1">
-                                                        <FormField
-                                                            control={
-                                                                form.control
-                                                            }
-                                                            name="subdomain"
-                                                            render={({
-                                                                field
-                                                            }) => (
-                                                                <FormItem>
-                                                                    <FormControl>
-                                                                        <Input
-                                                                            {...field}
-                                                                            className="text-right"
-                                                                            placeholder="Enter subdomain"
-                                                                        />
-                                                                    </FormControl>
-                                                                    <FormMessage />
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    </div>
-                                                    <div className="max-w-1/2">
-                                                        <FormField
-                                                            control={
-                                                                form.control
-                                                            }
-                                                            name="domainId"
-                                                            render={({
-                                                                field
-                                                            }) => (
-                                                                <FormItem>
-                                                                    <Select
-                                                                        onValueChange={
-                                                                            field.onChange
-                                                                        }
-                                                                        defaultValue={
-                                                                            field.value
-                                                                        }
-                                                                        value={
-                                                                            field.value
-                                                                        }
-                                                                    >
-                                                                        <FormControl>
-                                                                            <SelectTrigger>
-                                                                                <SelectValue />
-                                                                            </SelectTrigger>
-                                                                        </FormControl>
-                                                                        <SelectContent>
-                                                                            {baseDomains.map(
-                                                                                (
-                                                                                    option
-                                                                                ) => (
-                                                                                    <SelectItem
-                                                                                        key={
-                                                                                            option.domainId
-                                                                                        }
-                                                                                        value={
-                                                                                            option.domainId
-                                                                                        }
-                                                                                    >
-                                                                                        .
-                                                                                        {
-                                                                                            option.baseDomain
-                                                                                        }
-                                                                                    </SelectItem>
-                                                                                )
-                                                                            )}
-                                                                        </SelectContent>
-                                                                    </Select>
-                                                                    <FormMessage />
-                                                                </FormItem>
-                                                            )}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        ) : (
-                                            <FormField
-                                                control={form.control}
-                                                name="domainId"
-                                                render={({ field }) => (
-                                                    <FormItem>
-                                                        <Select
-                                                            onValueChange={
-                                                                field.onChange
-                                                            }
-                                                            defaultValue={
-                                                                field.value ||
-                                                                baseDomains[0]
-                                                                    ?.domainId
-                                                            }
-                                                        >
-                                                            <FormControl>
-                                                                <SelectTrigger>
-                                                                    <SelectValue />
-                                                                </SelectTrigger>
-                                                            </FormControl>
-                                                            <SelectContent>
-                                                                {baseDomains.map(
-                                                                    (
-                                                                        option
-                                                                    ) => (
-                                                                        <SelectItem
-                                                                            key={
-                                                                                option.domainId
-                                                                            }
-                                                                            value={
-                                                                                option.domainId
-                                                                            }
-                                                                        >
-                                                                            {
-                                                                                option.baseDomain
-                                                                            }
-                                                                        </SelectItem>
-                                                                    )
-                                                                )}
-                                                            </SelectContent>
-                                                        </Select>
-                                                        <FormMessage />
-                                                    </FormItem>
-                                                )}
-                                            />
-                                        )}
-                                    </>
-                                )}
-
-                                {!resource.http && (
+                    <SettingsSectionBody>
+                        <SettingsSectionForm>
+                            <Form {...form} key={formKey}>
+                                <form
+                                    onSubmit={form.handleSubmit(onSubmit)}
+                                    className="grid grid-cols-1 md:grid-cols-2 gap-4"
+                                    id="general-settings-form"
+                                >
                                     <FormField
                                         control={form.control}
-                                        name="proxyPort"
+                                        name="name"
                                         render={({ field }) => (
                                             <FormItem>
-                                                <FormLabel>
-                                                    Port Number
-                                                </FormLabel>
+                                                <FormLabel>Name</FormLabel>
                                                 <FormControl>
-                                                    <Input
-                                                        type="number"
-                                                        value={
-                                                            field.value ?? ""
-                                                        }
-                                                        onChange={(e) =>
-                                                            field.onChange(
-                                                                e.target.value
-                                                                    ? parseInt(
-                                                                          e
-                                                                              .target
-                                                                              .value
-                                                                      )
-                                                                    : null
-                                                            )
-                                                        }
-                                                    />
+                                                    <Input {...field} />
                                                 </FormControl>
                                                 <FormMessage />
-                                                <FormDescription>
-                                                    This is the port that will
-                                                    be used to access the
-                                                    resource.
-                                                </FormDescription>
                                             </FormItem>
                                         )}
                                     />
-                                )}
-                            </form>
-                        </Form>
-                    </SettingsSectionForm>
-                </SettingsSectionBody>
 
-                <SettingsSectionFooter>
-                    <Button
-                        type="submit"
-                        loading={saveLoading}
-                        disabled={saveLoading}
-                        form="general-settings-form"
-                    >
-                        Save Settings
-                    </Button>
-                </SettingsSectionFooter>
-            </SettingsSection>
+                                    {resource.http && (
+                                        <>
+                                            {env.flags
+                                                .allowBaseDomainResources && (
+                                                <FormField
+                                                    control={form.control}
+                                                    name="isBaseDomain"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormLabel>
+                                                                Domain Type
+                                                            </FormLabel>
+                                                            <Select
+                                                                value={
+                                                                    domainType
+                                                                }
+                                                                onValueChange={(
+                                                                    val
+                                                                ) =>
+                                                                    setDomainType(
+                                                                        val ===
+                                                                            "basedomain"
+                                                                            ? "basedomain"
+                                                                            : "subdomain"
+                                                                    )
+                                                                }
+                                                            >
+                                                                <FormControl>
+                                                                    <SelectTrigger>
+                                                                        <SelectValue />
+                                                                    </SelectTrigger>
+                                                                </FormControl>
+                                                                <SelectContent>
+                                                                    <SelectItem value="subdomain">
+                                                                        Subdomain
+                                                                    </SelectItem>
+                                                                    <SelectItem value="basedomain">
+                                                                        Base
+                                                                        Domain
+                                                                    </SelectItem>
+                                                                </SelectContent>
+                                                            </Select>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            )}
 
-            <SettingsSection>
-                <SettingsSectionHeader>
-                    <SettingsSectionTitle>
-                        Transfer Resource
-                    </SettingsSectionTitle>
-                    <SettingsSectionDescription>
-                        Transfer this resource to a different site
-                    </SettingsSectionDescription>
-                </SettingsSectionHeader>
-
-                <SettingsSectionBody>
-                    <SettingsSectionForm>
-                        <Form {...transferForm}>
-                            <form
-                                onSubmit={transferForm.handleSubmit(onTransfer)}
-                                className="space-y-4"
-                                id="transfer-form"
-                            >
-                                <FormField
-                                    control={transferForm.control}
-                                    name="siteId"
-                                    render={({ field }) => (
-                                        <FormItem>
-                                            <FormLabel>
-                                                Destination Site
-                                            </FormLabel>
-                                            <Popover
-                                                open={open}
-                                                onOpenChange={setOpen}
-                                            >
-                                                <PopoverTrigger asChild>
-                                                    <FormControl>
-                                                        <Button
-                                                            variant="outline"
-                                                            role="combobox"
-                                                            className={cn(
-                                                                "w-full 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-full p-0">
-                                                    <Command>
-                                                        <CommandInput
-                                                            placeholder="Search sites"
-                                                            className="h-9"
-                                                        />
-                                                        <CommandEmpty>
-                                                            No sites found.
-                                                        </CommandEmpty>
-                                                        <CommandGroup>
-                                                            {sites.map(
-                                                                (site) => (
-                                                                    <CommandItem
-                                                                        value={`${site.name}:${site.siteId}`}
-                                                                        key={
-                                                                            site.siteId
-                                                                        }
-                                                                        onSelect={() => {
-                                                                            transferForm.setValue(
-                                                                                "siteId",
-                                                                                site.siteId
-                                                                            );
-                                                                            setOpen(
-                                                                                false
-                                                                            );
-                                                                        }}
-                                                                    >
-                                                                        {
-                                                                            site.name
-                                                                        }
-                                                                        <CheckIcon
-                                                                            className={cn(
-                                                                                "ml-auto h-4 w-4",
-                                                                                site.siteId ===
+                                            <div className="col-span-2">
+                                                {domainType === "subdomain" ? (
+                                                    <div className="w-fill space-y-2">
+                                                        <FormLabel>
+                                                            Subdomain
+                                                        </FormLabel>
+                                                        <div className="flex">
+                                                            <div className="w-1/2 mr-1">
+                                                                <FormField
+                                                                    control={
+                                                                        form.control
+                                                                    }
+                                                                    name="subdomain"
+                                                                    render={({
+                                                                        field
+                                                                    }) => (
+                                                                        <FormItem>
+                                                                            <FormControl>
+                                                                                <Input
+                                                                                    {...field}
+                                                                                />
+                                                                            </FormControl>
+                                                                            <FormMessage />
+                                                                        </FormItem>
+                                                                    )}
+                                                                />
+                                                            </div>
+                                                            <div className="w-1/2">
+                                                                <FormField
+                                                                    control={
+                                                                        form.control
+                                                                    }
+                                                                    name="domainId"
+                                                                    render={({
+                                                                        field
+                                                                    }) => (
+                                                                        <FormItem>
+                                                                            <Select
+                                                                                onValueChange={
+                                                                                    field.onChange
+                                                                                }
+                                                                                defaultValue={
                                                                                     field.value
-                                                                                    ? "opacity-100"
-                                                                                    : "opacity-0"
-                                                                            )}
-                                                                        />
-                                                                    </CommandItem>
-                                                                )
-                                                            )}
-                                                        </CommandGroup>
-                                                    </Command>
-                                                </PopoverContent>
-                                            </Popover>
-                                            <FormMessage />
-                                        </FormItem>
+                                                                                }
+                                                                                value={
+                                                                                    field.value
+                                                                                }
+                                                                            >
+                                                                                <FormControl>
+                                                                                    <SelectTrigger>
+                                                                                        <SelectValue />
+                                                                                    </SelectTrigger>
+                                                                                </FormControl>
+                                                                                <SelectContent>
+                                                                                    {baseDomains.map(
+                                                                                        (
+                                                                                            option
+                                                                                        ) => (
+                                                                                            <SelectItem
+                                                                                                key={
+                                                                                                    option.domainId
+                                                                                                }
+                                                                                                value={
+                                                                                                    option.domainId
+                                                                                                }
+                                                                                            >
+                                                                                                .
+                                                                                                {
+                                                                                                    option.baseDomain
+                                                                                                }
+                                                                                            </SelectItem>
+                                                                                        )
+                                                                                    )}
+                                                                                </SelectContent>
+                                                                            </Select>
+                                                                            <FormMessage />
+                                                                        </FormItem>
+                                                                    )}
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ) : (
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="domainId"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormLabel>
+                                                                    Base Domain
+                                                                </FormLabel>
+                                                                <Select
+                                                                    onValueChange={
+                                                                        field.onChange
+                                                                    }
+                                                                    defaultValue={
+                                                                        field.value ||
+                                                                        baseDomains[0]
+                                                                            ?.domainId
+                                                                    }
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger>
+                                                                            <SelectValue />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        {baseDomains.map(
+                                                                            (
+                                                                                option
+                                                                            ) => (
+                                                                                <SelectItem
+                                                                                    key={
+                                                                                        option.domainId
+                                                                                    }
+                                                                                    value={
+                                                                                        option.domainId
+                                                                                    }
+                                                                                >
+                                                                                    {
+                                                                                        option.baseDomain
+                                                                                    }
+                                                                                </SelectItem>
+                                                                            )
+                                                                        )}
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                )}
+                                            </div>
+                                        </>
                                     )}
-                                />
-                            </form>
-                        </Form>
-                    </SettingsSectionForm>
-                </SettingsSectionBody>
 
-                <SettingsSectionFooter>
-                    <Button
-                        type="submit"
-                        loading={transferLoading}
-                        disabled={transferLoading}
-                        form="transfer-form"
-                    >
-                        Transfer Resource
-                    </Button>
-                </SettingsSectionFooter>
-            </SettingsSection>
-        </SettingsContainer>
+                                    {!resource.http && (
+                                        <FormField
+                                            control={form.control}
+                                            name="proxyPort"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        Port Number
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            type="number"
+                                                            value={
+                                                                field.value ??
+                                                                ""
+                                                            }
+                                                            onChange={(e) =>
+                                                                field.onChange(
+                                                                    e.target
+                                                                        .value
+                                                                        ? parseInt(
+                                                                              e
+                                                                                  .target
+                                                                                  .value
+                                                                          )
+                                                                        : null
+                                                                )
+                                                            }
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                    )}
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+
+                    <SettingsSectionFooter>
+                        <Button
+                            type="submit"
+                            loading={saveLoading}
+                            disabled={saveLoading}
+                            form="general-settings-form"
+                        >
+                            Save Settings
+                        </Button>
+                    </SettingsSectionFooter>
+                </SettingsSection>
+
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            Transfer Resource
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            Transfer this resource to a different site
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        <SettingsSectionForm>
+                            <Form {...transferForm}>
+                                <form
+                                    onSubmit={transferForm.handleSubmit(
+                                        onTransfer
+                                    )}
+                                    className="space-y-4"
+                                    id="transfer-form"
+                                >
+                                    <FormField
+                                        control={transferForm.control}
+                                        name="siteId"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    Destination Site
+                                                </FormLabel>
+                                                <Popover
+                                                    open={open}
+                                                    onOpenChange={setOpen}
+                                                >
+                                                    <PopoverTrigger asChild>
+                                                        <FormControl>
+                                                            <Button
+                                                                variant="outline"
+                                                                role="combobox"
+                                                                className={cn(
+                                                                    "w-full 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-full p-0">
+                                                        <Command>
+                                                            <CommandInput
+                                                                placeholder="Search sites"
+                                                                className="h-9"
+                                                            />
+                                                            <CommandEmpty>
+                                                                No sites found.
+                                                            </CommandEmpty>
+                                                            <CommandGroup>
+                                                                {sites.map(
+                                                                    (site) => (
+                                                                        <CommandItem
+                                                                            value={`${site.name}:${site.siteId}`}
+                                                                            key={
+                                                                                site.siteId
+                                                                            }
+                                                                            onSelect={() => {
+                                                                                transferForm.setValue(
+                                                                                    "siteId",
+                                                                                    site.siteId
+                                                                                );
+                                                                                setOpen(
+                                                                                    false
+                                                                                );
+                                                                            }}
+                                                                        >
+                                                                            {
+                                                                                site.name
+                                                                            }
+                                                                            <CheckIcon
+                                                                                className={cn(
+                                                                                    "ml-auto h-4 w-4",
+                                                                                    site.siteId ===
+                                                                                        field.value
+                                                                                        ? "opacity-100"
+                                                                                        : "opacity-0"
+                                                                                )}
+                                                                            />
+                                                                        </CommandItem>
+                                                                    )
+                                                                )}
+                                                            </CommandGroup>
+                                                        </Command>
+                                                    </PopoverContent>
+                                                </Popover>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+
+                    <SettingsSectionFooter>
+                        <Button
+                            type="submit"
+                            loading={transferLoading}
+                            disabled={transferLoading}
+                            form="transfer-form"
+                        >
+                            Transfer Resource
+                        </Button>
+                    </SettingsSectionFooter>
+                </SettingsSection>
+            </SettingsContainer>
+        )
     );
 }

src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx

@@ -94,7 +94,7 @@ enum RuleAction {
 enum RuleMatch {
     PATH = "Path",
     IP = "IP",
-    CIDR = "IP Range",
+    CIDR = "IP Range"
 }
 
 export default function ResourceRules(props: {
@@ -623,7 +623,7 @@ export default function ResourceRules(props: {
                             onSubmit={addRuleForm.handleSubmit(addRule)}
                             className="space-y-4"
                         >
-                            <div className="grid grid-cols-3 gap-4">
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 items-end">
                                 <FormField
                                     control={addRuleForm.control}
                                     name="action"
@@ -711,14 +711,14 @@ export default function ResourceRules(props: {
                                         </FormItem>
                                     )}
                                 />
+                                <Button
+                                    type="submit"
+                                    variant="outlinePrimary"
+                                    disabled={!rulesEnabled}
+                                >
+                                    Add Rule
+                                </Button>
                             </div>
-                            <Button
-                                type="submit"
-                                variant="outline"
-                                disabled={!rulesEnabled}
-                            >
-                                Add Rule
-                            </Button>
                         </form>
                     </Form>
                     <TableContainer>

src/app/[orgId]/settings/share-links/CreateShareLinkForm.tsx

@@ -152,13 +152,15 @@ export default function CreateShareLinkForm({
 
             if (res?.status === 200) {
                 setResources(
-                    res.data.data.resources.filter((r) => {
-                        return r.http;
-                    }).map((r) => ({
-                        resourceId: r.resourceId,
-                        name: r.name,
-                        resourceUrl: `${r.ssl ? "https://" : "http://"}${r.fullDomain}/`
-                    }))
+                    res.data.data.resources
+                        .filter((r) => {
+                            return r.http;
+                        })
+                        .map((r) => ({
+                            resourceId: r.resourceId,
+                            name: r.name,
+                            resourceUrl: `${r.ssl ? "https://" : "http://"}${r.fullDomain}/`
+                        }))
                 );
             }
         }
@@ -274,7 +276,7 @@ export default function CreateShareLinkForm({
                                             name="resourceId"
                                             render={({ field }) => (
                                                 <FormItem className="flex flex-col">
-                                                    <FormLabel className="mb-2">
+                                                    <FormLabel>
                                                         Resource
                                                     </FormLabel>
                                                     <Popover>
@@ -318,9 +320,7 @@ export default function CreateShareLinkForm({
                                                                                 r
                                                                             ) => (
                                                                                 <CommandItem
-                                                                                    value={
-                                                                                        `${r.name}:${r.resourceId}`
-                                                                                    }
+                                                                                    value={`${r.name}:${r.resourceId}`}
                                                                                     key={
                                                                                         r.resourceId
                                                                                     }
@@ -369,13 +369,11 @@ export default function CreateShareLinkForm({
                                             name="title"
                                             render={({ field }) => (
                                                 <FormItem>
-                                                    <Label>
+                                                    <FormLabel>
                                                         Title (optional)
-                                                    </Label>
+                                                    </FormLabel>
                                                     <FormControl>
-                                                        <Input
-                                                            {...field}
-                                                        />
+                                                        <Input {...field} />
                                                     </FormControl>
                                                     <FormMessage />
                                                 </FormItem>
@@ -383,66 +381,68 @@ export default function CreateShareLinkForm({
                                         />
 
                                         <div className="space-y-4">
-                                            <Label>Expire In</Label>
-                                            <div className="grid grid-cols-2 gap-4 mt-2">
-                                                <FormField
-                                                    control={form.control}
-                                                    name="timeUnit"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <Select
-                                                                onValueChange={
-                                                                    field.onChange
-                                                                }
-                                                                defaultValue={field.value.toString()}
-                                                            >
-                                                                <FormControl>
-                                                                    <SelectTrigger>
-                                                                        <SelectValue placeholder="Select duration" />
-                                                                    </SelectTrigger>
-                                                                </FormControl>
-                                                                <SelectContent>
-                                                                    {timeUnits.map(
-                                                                        (
-                                                                            option
-                                                                        ) => (
-                                                                            <SelectItem
-                                                                                key={
-                                                                                    option.unit
-                                                                                }
-                                                                                value={
-                                                                                    option.unit
-                                                                                }
-                                                                            >
-                                                                                {
-                                                                                    option.name
-                                                                                }
-                                                                            </SelectItem>
-                                                                        )
-                                                                    )}
-                                                                </SelectContent>
-                                                            </Select>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
+                                            <div className="space-y-2">
+                                                <FormLabel>Expire In</FormLabel>
+                                                <div className="grid grid-cols-2 gap-4">
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="timeUnit"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <Select
+                                                                    onValueChange={
+                                                                        field.onChange
+                                                                    }
+                                                                    defaultValue={field.value.toString()}
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger>
+                                                                            <SelectValue placeholder="Select duration" />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        {timeUnits.map(
+                                                                            (
+                                                                                option
+                                                                            ) => (
+                                                                                <SelectItem
+                                                                                    key={
+                                                                                        option.unit
+                                                                                    }
+                                                                                    value={
+                                                                                        option.unit
+                                                                                    }
+                                                                                >
+                                                                                    {
+                                                                                        option.name
+                                                                                    }
+                                                                                </SelectItem>
+                                                                            )
+                                                                        )}
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
 
-                                                <FormField
-                                                    control={form.control}
-                                                    name="timeValue"
-                                                    render={({ field }) => (
-                                                        <FormItem>
-                                                            <FormControl>
-                                                                <Input
-                                                                    type="number"
-                                                                    min={1}
-                                                                    {...field}
-                                                                />
-                                                            </FormControl>
-                                                            <FormMessage />
-                                                        </FormItem>
-                                                    )}
-                                                />
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="timeValue"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        type="number"
+                                                                        min={1}
+                                                                        {...field}
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </div>
                                             </div>
 
                                             <div className="flex items-center space-x-2">
@@ -552,6 +552,9 @@ export default function CreateShareLinkForm({
                         </div>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="button"
                             onClick={form.handleSubmit(onSubmit)}
@@ -560,9 +563,6 @@ export default function CreateShareLinkForm({
                         >
                             Create Link
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/share-links/ShareLinksTable.tsx

@@ -273,7 +273,21 @@ export default function ShareLinksTable({
                 }
                 return "Never";
             }
+        },
+                {
+            id: "delete",
+            cell: ({ row }) => (
+                <div className="flex items-center justify-end space-x-2">
+                    <Button
+                        variant="outlinePrimary"
+                        onClick={() => deleteSharelink(row.original.accessTokenId)}
+                    >
+                        Delete
+                    </Button>
+                </div>
+            )
         }
+
     ];
 
     return (

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

@@ -41,6 +41,7 @@ import Link from "next/link";
 import {
     ArrowUpRight,
     ChevronsUpDown,
+    Loader2,
     SquareArrowOutUpRight
 } from "lucide-react";
 import {
@@ -48,6 +49,7 @@ import {
     CollapsibleContent,
     CollapsibleTrigger
 } from "@app/components/ui/collapsible";
+import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
 
 const createSiteFormSchema = z.object({
     name: z
@@ -97,6 +99,8 @@ export default function CreateSiteForm({
     const [siteDefaults, setSiteDefaults] =
         useState<PickSiteDefaultsResponse | null>(null);
 
+    const [loadingPage, setLoadingPage] = useState(true);
+
     const handleCheckboxChange = (checked: boolean) => {
         // setChecked?.(checked);
         setIsChecked(checked);
@@ -121,27 +125,35 @@ export default function CreateSiteForm({
     useEffect(() => {
         if (!open) return;
 
-        // reset all values
-        setLoading?.(false);
-        setIsLoading(false);
-        form.reset();
-        setChecked?.(false);
-        setKeypair(null);
-        setSiteDefaults(null);
+        const load = async () => {
+            setLoadingPage(true);
+            // reset all values
+            setLoading?.(false);
+            setIsLoading(false);
+            form.reset();
+            setChecked?.(false);
+            setKeypair(null);
+            setSiteDefaults(null);
 
-        const generatedKeypair = generateKeypair();
-        setKeypair(generatedKeypair);
+            const generatedKeypair = generateKeypair();
+            setKeypair(generatedKeypair);
 
-        api.get(`/org/${orgId}/pick-site-defaults`)
-            .catch((e) => {
-                // update the default value of the form to be local method
-                form.setValue("method", "local");
-            })
-            .then((res) => {
-                if (res && res.status === 200) {
-                    setSiteDefaults(res.data.data);
-                }
-            });
+            await api
+                .get(`/org/${orgId}/pick-site-defaults`)
+                .catch((e) => {
+                    // update the default value of the form to be local method
+                    form.setValue("method", "local");
+                })
+                .then((res) => {
+                    if (res && res.status === 200) {
+                        setSiteDefaults(res.data.data);
+                    }
+                });
+
+            setLoadingPage(false);
+        };
+
+        load();
     }, [open]);
 
     async function onSubmit(data: CreateSiteFormValues) {
@@ -257,7 +269,9 @@ PersistentKeepalive = 5`
 
     const newtConfigDockerRun = `docker run -it fosrl/newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
 
-    return (
+    return loadingPage ? (
+        <LoaderPlaceholder height="300px"/>
+    ) : (
         <div className="space-y-4">
             <Form {...form}>
                 <form
@@ -276,8 +290,7 @@ PersistentKeepalive = 5`
                                 </FormControl>
                                 <FormMessage />
                                 <FormDescription>
-                                    This is the the display name for the
-                                    site.
+                                    This is the the display name for the site.
                                 </FormDescription>
                             </FormItem>
                         )}

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

@@ -58,6 +58,9 @@ export default function CreateSiteFormModal({
                         </div>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="create-site-form"
@@ -69,9 +72,6 @@ export default function CreateSiteFormModal({
                         >
                             Create Site
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

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

@@ -268,7 +268,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                         <Link
                             href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
                         >
-                            <Button variant={"outline"} className="ml-2">
+                            <Button variant={"outlinePrimary"} className="ml-2">
                                 Edit
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -68,7 +68,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
             <SiteProvider site={site}>
                 <SidebarSettings sidebarNavItems={sidebarNavItems}>
-                    <div className="mb-8">
+                    <div className="mb-4">
                         <SiteInfoCard />
                     </div>
                     {children}

src/app/globals.css

@@ -22,7 +22,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 20 5.9% 85%;
-    --input: 20 5.9% 85%;
+    --input: 20 5.9% 80%;
     --ring: 24.6 95% 53.1%;
     --radius: 0.75rem;
     --chart-1: 12 76% 61%;
@@ -50,7 +50,7 @@
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 60 9.1% 97.8%;
     --border: 12 6.5% 25.0%;
-    --input: 12 6.5% 25.0%;
+    --input: 12 6.5% 30.0%;
     --ring: 20.5 90.2% 48.2%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;

src/app/layout.tsx

@@ -37,11 +37,11 @@ export default async function RootLayout({
                 >
                     <EnvProvider env={pullEnv()}>
                         {/* Main content */}
-                        <div className="flex-grow">{children}</div>
+                        <div className="flex-grow pb-3 md:pb-0">{children}</div>
 
                         {/* Footer */}
-                        <footer className="w-full mt-12 py-3 mb-6 px-4">
-                            <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600 select-none">
+                        <footer className="hidden md:block w-full mt-12 py-3 mb-6 px-4">
+                            <div className="container mx-auto flex flex-wrap justify-center items-center h-3 space-x-4 text-sm text-neutral-400 dark:text-neutral-600">
                                 <div className="flex items-center space-x-2 whitespace-nowrap">
                                     <span>Pangolin</span>
                                 </div>

src/components/ConfirmDeleteDialog.tsx

@@ -7,7 +7,7 @@ import {
     FormField,
     FormItem,
     FormLabel,
-    FormMessage,
+    FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
 import {
@@ -15,14 +15,14 @@ import {
     SelectContent,
     SelectItem,
     SelectTrigger,
-    SelectValue,
+    SelectValue
 } from "@app/components/ui/select";
 import { useToast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
     InviteUserBody,
     InviteUserResponse,
-    ListUsersResponse,
+    ListUsersResponse
 } from "@server/routers/user";
 import { AxiosResponse } from "axios";
 import React, { useState } from "react";
@@ -37,7 +37,7 @@ import {
     CredenzaDescription,
     CredenzaFooter,
     CredenzaHeader,
-    CredenzaTitle,
+    CredenzaTitle
 } from "@app/components/Credenza";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { Description } from "@radix-ui/react-toast";
@@ -61,7 +61,7 @@ export default function InviteUserForm({
     title,
     onConfirm,
     buttonText,
-    dialog,
+    dialog
 }: InviteUserFormProps) {
     const [loading, setLoading] = useState(false);
 
@@ -69,15 +69,15 @@ export default function InviteUserForm({
 
     const formSchema = z.object({
         string: z.string().refine((val) => val === string, {
-            message: "Invalid confirmation",
-        }),
+            message: "Invalid confirmation"
+        })
     });
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
-            string: "",
-        },
+            string: ""
+        }
     });
 
     function reset() {
@@ -128,6 +128,9 @@ export default function InviteUserForm({
                         </Form>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="confirm-delete-form"
@@ -136,9 +139,6 @@ export default function InviteUserForm({
                         >
                             {buttonText}
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/components/Credenza.tsx

@@ -155,7 +155,7 @@ const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
     // );
 
     return (
-        <div className={cn("px-0 mb-4", className)} {...props}>
+        <div className={cn("px-0 mb-4 space-y-4", className)} {...props}>
             {children}
         </div>
     );

src/components/Disable2FaForm.tsx

@@ -29,10 +29,8 @@ import {
     CredenzaTitle
 } from "@app/components/Credenza";
 import { toast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import { useUserContext } from "@app/hooks/useUserContext";
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import { CheckCircle2 } from "lucide-react";
 
 const disableSchema = z.object({
@@ -152,36 +150,7 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
                                                     Authenticator Code
                                                 </FormLabel>
                                                 <FormControl>
-                                                    <InputOTP
-                                                        maxLength={6}
-                                                        {...field}
-                                                        pattern={
-                                                            REGEXP_ONLY_DIGITS_AND_CHARS
-                                                        }
-                                                    >
-                                                        <InputOTPGroup>
-                                                            <InputOTPSlot
-                                                                index={0}
-                                                            />
-                                                            <InputOTPSlot
-                                                                index={1}
-                                                            />
-                                                            <InputOTPSlot
-                                                                index={2}
-                                                            />
-                                                        </InputOTPGroup>
-                                                        <InputOTPGroup>
-                                                            <InputOTPSlot
-                                                                index={3}
-                                                            />
-                                                            <InputOTPSlot
-                                                                index={4}
-                                                            />
-                                                            <InputOTPSlot
-                                                                index={5}
-                                                            />
-                                                        </InputOTPGroup>
-                                                    </InputOTP>
+                                                    <Input {...field} />
                                                 </FormControl>
                                                 <FormMessage />
                                             </FormItem>
@@ -210,6 +179,9 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
                     )}
                 </CredenzaBody>
                 <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </CredenzaClose>
                     {step === "password" && (
                         <Button
                             type="submit"
@@ -220,9 +192,6 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
                             Disable 2FA
                         </Button>
                     )}
-                    <CredenzaClose asChild>
-                        <Button variant="outline">Close</Button>
-                    </CredenzaClose>
                 </CredenzaFooter>
             </CredenzaContent>
         </Credenza>

src/components/Enable2FaForm.tsx

@@ -36,7 +36,7 @@ import {
     CredenzaTitle
 } from "@app/components/Credenza";
 import { toast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
 import CopyTextBox from "@app/components/CopyTextBox";
 import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
 import { useUserContext } from "@app/hooks/useUserContext";
@@ -222,7 +222,10 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
                                 <QRCodeCanvas value={secretUri} size={200} />
                             </div>
                             <div className="max-w-md mx-auto">
-                                <CopyTextBox text={secretUri} wrapText={false} />
+                                <CopyTextBox
+                                    text={secretUri}
+                                    wrapText={false}
+                                />
                             </div>
 
                             <Form {...confirmForm}>
@@ -279,6 +282,9 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
                     )}
                 </CredenzaBody>
                 <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </CredenzaClose>
                     {(step === 1 || step === 2) && (
                         <Button
                             type="button"
@@ -295,9 +301,6 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
                             Submit
                         </Button>
                     )}
-                    <CredenzaClose asChild>
-                        <Button variant="outline">Close</Button>
-                    </CredenzaClose>
                 </CredenzaFooter>
             </CredenzaContent>
         </Credenza>

src/components/PlaceHolderLoader.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import React from "react";
+import { Loader2 } from "lucide-react"; // Ensure you have lucide-react installed
+
+interface LoaderProps {
+    height?: string;
+}
+
+const LoaderPlaceholder: React.FC<LoaderProps> = ({ height = "100px" }) => {
+    return (
+        <div
+            className="flex items-center justify-center w-full"
+            style={{ height }}
+        >
+            <Loader2 className="animate-spin" />
+        </div>
+    );
+};
+
+export default LoaderPlaceholder;

src/components/Settings.tsx

@@ -7,7 +7,7 @@ export function SettingsSection({ children }: { children: React.ReactNode }) {
 }
 
 export function SettingsSectionHeader({ children }: { children: React.ReactNode }) {
-    return <div className="space-y-0.5 pb-8">{children}</div>
+    return <div className="space-y-0.5 pb-6">{children}</div>
 }
 
 export function SettingsSectionForm({ children }: { children: React.ReactNode }) {

src/components/SettingsSectionTitle.tsx

@@ -11,7 +11,7 @@ export default function SettingsSectionTitle({
 }: SettingsSectionTitleProps) {
     return (
         <div
-            className={`space-y-0.5 select-none ${!size || size === "2xl" ? "mb-8 md:mb-8" : ""}`}
+            className={`space-y-0.5 ${!size || size === "2xl" ? "mb-8 md:mb-8" : ""}`}
         >
             <h2
                 className={`text-${

src/components/tags/tag-input.tsx

@@ -490,7 +490,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                             <div className="w-full">
                                 <div
                                     className={cn(
-                                        `flex flex-row flex-wrap items-center gap-2 p-2 w-full rounded-md border-2 border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
+                                        `flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border-2 border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 bg-transparent`,
                                         styleClasses?.inlineTagsContainer
                                     )}
                                 >
@@ -644,7 +644,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                                 ) : (
                                     <div
                                         className={cn(
-                                            `flex flex-row flex-wrap items-center p-2 gap-2 h-fit w-full bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
+                                            `flex flex-row flex-wrap items-center p-1.5 gap-1.5 h-fit w-full bg-transparent text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
                                             styleClasses?.inlineTagsContainer
                                         )}
                                     >

src/components/tags/tag.tsx

@@ -22,7 +22,7 @@ export const tagVariants = cva(
                     "bg-destructive border-destructive text-destructive-foreground hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50"
             },
             size: {
-                sm: "text-xs h-7",
+                sm: "text-xs h-6",
                 md: "text-sm h-8",
                 lg: "text-base h-9",
                 xl: "text-lg h-10"
@@ -67,7 +67,7 @@ export const tagVariants = cva(
             variant: "default",
             size: "md",
             shape: "default",
-            borderStyle: "default",
+            borderStyle: "none",
             interaction: "nonClickable",
             animation: "fadeIn",
             textStyle: "normal"
@@ -144,7 +144,7 @@ export const Tag: React.FC<TagProps> = ({
                 }}
                 disabled={disabled}
                 className={cn(
-                    `py-1 px-3 h-full hover:bg-transparent`,
+                    `p-1 h-full hover:bg-transparent`,
                     tagClasses?.closeButton
                 )}
             >

src/components/ui/button.tsx

@@ -16,6 +16,8 @@ const buttonVariants = cva(
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
                     "border-2 border-input bg-card hover:bg-accent hover:text-accent-foreground",
+                outlinePrimary:
+                    "border-2 border-primary bg-card hover:bg-primary/10 text-primary",
                 secondary:
                     "bg-secondary border border-input border-2 text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",

src/components/ui/dialog.tsx

@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                "fixed left-[50%] top-[35%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
                 className
             )}
             {...props}

src/components/ui/input-otp.tsx

@@ -41,7 +41,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y-2 border-r-2 border-input text-base md:text-sm transition-all first:rounded-l-md first:border-l-2 last:rounded-r-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className
       )}

src/components/ui/table.tsx

@@ -77,7 +77,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}

src/components/ui/toast.tsx

@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-3 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-3 pr-8 transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {