env context and refactor api support different ports

This commit is contained in:
Milo Schwartz
2024-12-12 22:46:58 -05:00
parent d79760dad9
commit d3d2fe398b
35 changed files with 287 additions and 135 deletions

View File

@@ -1,6 +1,5 @@
"use client";
import api from "@app/api";
import { Button } from "@app/components/ui/button";
import {
Form,
@@ -30,6 +29,8 @@ import {
import { formatAxiosError } from "@app/lib/utils";
import { AxiosResponse } from "axios";
import { Resource } from "@server/db/schema";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const setPasswordFormSchema = z.object({
password: z.string().min(4).max(100),
@@ -56,6 +57,8 @@ export default function SetResourcePasswordForm({
}: SetPasswordFormProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [loading, setLoading] = useState(false);
const form = useForm<SetPasswordFormValues>({

View File

@@ -1,6 +1,5 @@
"use client";
import api from "@app/api";
import { Button } from "@app/components/ui/button";
import {
Form,
@@ -35,6 +34,8 @@ import {
InputOTPGroup,
InputOTPSlot,
} from "@app/components/ui/input-otp";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const setPincodeFormSchema = z.object({
pincode: z.string().length(6),
@@ -63,6 +64,8 @@ export default function SetResourcePincodeForm({
const [loading, setLoading] = useState(false);
const api = createApiClient(useEnvContext());
const form = useForm<SetPincodeFormValues>({
resolver: zodResolver(setPincodeFormSchema),
defaultValues,

View File

@@ -1,7 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import api from "@app/api";
import { ListRolesResponse } from "@server/routers/role";
import { useToast } from "@app/hooks/useToast";
import { useOrgContext } from "@app/hooks/useOrgContext";
@@ -36,6 +35,8 @@ import { Binary, Key, ShieldCheck } from "lucide-react";
import SetResourcePasswordForm from "./components/SetResourcePasswordForm";
import { Separator } from "@app/components/ui/separator";
import SetResourcePincodeForm from "./components/SetResourcePincodeForm";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const UsersRolesFormSchema = z.object({
roles: z.array(
@@ -58,6 +59,8 @@ export default function ResourceAuthenticationPage() {
const { resource, updateResource, authInfo, updateAuthInfo } =
useResourceContext();
const api = createApiClient(useEnvContext());
const [pageLoading, setPageLoading] = useState(true);
const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(

View File

@@ -12,7 +12,6 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import api from "@app/api";
import { AxiosResponse } from "axios";
import { ListTargetsResponse } from "@server/routers/target/listTargets";
import { useForm } from "react-hook-form";
@@ -49,9 +48,9 @@ import { useToast } from "@app/hooks/useToast";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { useResourceContext } from "@app/hooks/useResourceContext";
import { ArrayElement } from "@server/types/ArrayElement";
import { Dot } from "lucide-react";
import { formatAxiosError } from "@app/lib/utils";
import { Separator } from "@radix-ui/react-separator";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { createApiClient } from "@app/api";
const addTargetSchema = z.object({
ip: z.string().ip(),
@@ -83,6 +82,8 @@ export default function ReverseProxyTargets(props: {
const { toast } = useToast();
const { resource, updateResource } = useResourceContext();
const api = createApiClient(useEnvContext());
const [targets, setTargets] = useState<LocalTarget[]>([]);
const [targetsToRemove, setTargetsToRemove] = useState<number[]>([]);
const [sslEnabled, setSslEnabled] = useState(resource.ssl);

View File

@@ -33,7 +33,6 @@ import { useResourceContext } from "@app/hooks/useResourceContext";
import { ListSitesResponse } from "@server/routers/site";
import { useEffect, useState } from "react";
import { AxiosResponse } from "axios";
import api from "@app/api";
import { useParams, useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { GetResourceAuthInfoResponse } from "@server/routers/resource";
@@ -43,6 +42,8 @@ import { useOrgContext } from "@app/hooks/useOrgContext";
import CustomDomainInput from "../components/CustomDomainInput";
import ResourceInfoBox from "../components/ResourceInfoBox";
import { subdomainSchema } from "@server/schemas/subdomainSchema";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const GeneralFormSchema = z.object({
name: z.string(),
@@ -61,6 +62,8 @@ export default function GeneralForm() {
const orgId = params.orgId;
const api = createApiClient(useEnvContext());
const [sites, setSites] = useState<ListSitesResponse["sites"]>([]);
const [saveLoading, setSaveLoading] = useState(false);
const [domainSuffix, setDomainSuffix] = useState(org.org.domain);

View File

@@ -1,6 +1,5 @@
"use client";
import api from "@app/api";
import { Button, buttonVariants } from "@app/components/ui/button";
import {
Form,
@@ -9,7 +8,7 @@ import {
FormField,
FormItem,
FormLabel,
FormMessage,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { useToast } from "@app/hooks/useToast";
@@ -25,7 +24,7 @@ import {
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle,
CredenzaTitle
} from "@app/components/Credenza";
import { useParams, useRouter } from "next/navigation";
import { ListSitesResponse } from "@server/routers/site";
@@ -34,7 +33,7 @@ import { CheckIcon } from "lucide-react";
import {
Popover,
PopoverContent,
PopoverTrigger,
PopoverTrigger
} from "@app/components/ui/popover";
import {
Command,
@@ -42,7 +41,7 @@ import {
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandList
} from "@app/components/ui/command";
import { CaretSortIcon } from "@radix-ui/react-icons";
import CustomDomainInput from "../[resourceId]/components/CustomDomainInput";
@@ -50,11 +49,13 @@ import { Axios, AxiosResponse } from "axios";
import { Resource } from "@server/db/schema";
import { useOrgContext } from "@app/hooks/useOrgContext";
import { subdomainSchema } from "@server/schemas/subdomainSchema";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const accountFormSchema = z.object({
subdomain: subdomainSchema,
name: z.string(),
siteId: z.number(),
siteId: z.number()
});
type AccountFormValues = z.infer<typeof accountFormSchema>;
@@ -66,10 +67,12 @@ type CreateResourceFormProps = {
export default function CreateResourceForm({
open,
setOpen,
setOpen
}: CreateResourceFormProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [loading, setLoading] = useState(false);
const params = useParams();
@@ -85,8 +88,8 @@ export default function CreateResourceForm({
resolver: zodResolver(accountFormSchema),
defaultValues: {
subdomain: "",
name: "My Resource",
},
name: "My Resource"
}
});
useEffect(() => {
@@ -96,7 +99,7 @@ export default function CreateResourceForm({
const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListSitesResponse>>(
`/org/${orgId}/sites/`,
`/org/${orgId}/sites/`
);
setSites(res.data.data.sites);
@@ -116,9 +119,9 @@ export default function CreateResourceForm({
`/org/${orgId}/site/${data.siteId}/resource/`,
{
name: data.name,
subdomain: data.subdomain,
subdomain: data.subdomain
// subdomain: data.subdomain,
},
}
)
.catch((e) => {
toast({
@@ -126,8 +129,8 @@ export default function CreateResourceForm({
title: "Error creating resource",
description: formatAxiosError(
e,
"An error occurred when creating the resource",
),
"An error occurred when creating the resource"
)
});
});
@@ -198,7 +201,7 @@ export default function CreateResourceForm({
onChange={(value) =>
form.setValue(
"subdomain",
value,
value
)
}
/>
@@ -227,14 +230,14 @@ export default function CreateResourceForm({
className={cn(
"w-[350px] justify-between",
!field.value &&
"text-muted-foreground",
"text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) =>
site.siteId ===
field.value,
field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -261,7 +264,7 @@ export default function CreateResourceForm({
onSelect={() => {
form.setValue(
"siteId",
site.siteId,
site.siteId
);
}}
>
@@ -271,14 +274,14 @@ export default function CreateResourceForm({
site.siteId ===
field.value
? "opacity-100"
: "opacity-0",
: "opacity-0"
)}
/>
{
site.name
}
</CommandItem>
),
)
)}
</CommandGroup>
</CommandList>

View File

@@ -21,13 +21,14 @@ import {
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import api from "@app/api";
import CreateResourceForm from "./CreateResourceForm";
import { useState } from "react";
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
import { set } from "zod";
import { formatAxiosError } from "@app/lib/utils";
import { useToast } from "@app/hooks/useToast";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
export type ResourceRow = {
id: number;
@@ -49,6 +50,8 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
const { toast } = useToast();
const api = createApiClient(useEnvContext());
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedResource, setSelectedResource] =