env context and refactor api support different ports

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

@@ -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>({

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

@@ -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,

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

@@ -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 }[]>(

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

@@ -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);

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

@@ -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);