-
-
-
+
-
- {children}
+
>
);
diff --git a/src/app/[orgId]/settings/resources/CreateResourceForm.tsx b/src/app/[orgId]/settings/resources/CreateResourceForm.tsx
index d27f8831..9bb3ecde 100644
--- a/src/app/[orgId]/settings/resources/CreateResourceForm.tsx
+++ b/src/app/[orgId]/settings/resources/CreateResourceForm.tsx
@@ -65,10 +65,14 @@ import { SquareArrowOutUpRight } from "lucide-react";
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";
+import { StrategySelect } from "@app/components/StrategySelect";
const createResourceFormSchema = z
.object({
subdomain: z.string().optional(),
+ domainId: z.string().min(1).optional(),
name: z.string().min(1).max(255),
siteId: z.number(),
http: z.boolean(),
@@ -117,6 +121,7 @@ export default function CreateResourceForm({
open,
setOpen
}: CreateResourceFormProps) {
+ const [formKey, setFormKey] = useState(0);
const api = createApiClient(useEnvContext());
const [loading, setLoading] = useState(false);
@@ -129,17 +134,21 @@ export default function CreateResourceForm({
const { env } = useEnvContext();
const [sites, setSites] = useState
([]);
- const [domainSuffix, setDomainSuffix] = useState(org.org.domain);
+ const [baseDomains, setBaseDomains] = useState<
+ { domainId: string; baseDomain: string }[]
+ >([]);
const [showSnippets, setShowSnippets] = useState(false);
const [resourceId, setResourceId] = useState(null);
const [domainType, setDomainType] = useState<"subdomain" | "basedomain">(
"subdomain"
);
+ const [loadingPage, setLoadingPage] = useState(true);
const form = useForm({
resolver: zodResolver(createResourceFormSchema),
defaultValues: {
subdomain: "",
+ domainId: "",
name: "",
http: true,
protocol: "tcp"
@@ -161,17 +170,65 @@ export default function CreateResourceForm({
reset();
const fetchSites = async () => {
- const res = await api.get>(
- `/org/${orgId}/sites/`
- );
- setSites(res.data.data.sites);
+ const res = await api
+ .get>(`/org/${orgId}/sites/`)
+ .catch((e) => {
+ toast({
+ variant: "destructive",
+ title: "Error fetching sites",
+ description: formatAxiosError(
+ e,
+ "An error occurred when fetching the sites"
+ )
+ });
+ });
- if (res.data.data.sites.length > 0) {
- form.setValue("siteId", res.data.data.sites[0].siteId);
+ if (res?.status === 200) {
+ setSites(res.data.data.sites);
+
+ if (res.data.data.sites.length > 0) {
+ form.setValue("siteId", res.data.data.sites[0].siteId);
+ }
}
};
- fetchSites();
+ const fetchDomains = async () => {
+ const res = await api
+ .get<
+ AxiosResponse
+ >(`/org/${orgId}/domains/`)
+ .catch((e) => {
+ toast({
+ variant: "destructive",
+ title: "Error fetching domains",
+ description: formatAxiosError(
+ e,
+ "An error occurred when fetching the domains"
+ )
+ });
+ });
+
+ if (res?.status === 200) {
+ const domains = res.data.data.domains;
+ setBaseDomains(domains);
+ if (domains.length) {
+ form.setValue("domainId", domains[0].domainId);
+ setFormKey((k) => k + 1);
+ }
+ }
+ };
+
+ const load = async () => {
+ setLoadingPage(true);
+
+ await fetchSites();
+ await fetchDomains();
+ await new Promise((r) => setTimeout(r, 200));
+
+ setLoadingPage(false);
+ };
+
+ load();
}, [open]);
async function onSubmit(data: CreateResourceFormValues) {
@@ -181,11 +238,12 @@ export default function CreateResourceForm({
{
name: data.name,
subdomain: data.http ? data.subdomain : undefined,
+ domainId: data.http ? data.domainId : undefined,
http: data.http,
protocol: data.protocol,
proxyPort: data.http ? undefined : data.proxyPort,
siteId: data.siteId,
- isBaseDomain: data.isBaseDomain
+ isBaseDomain: data.http ? data.isBaseDomain : undefined
}
)
.catch((e) => {
@@ -207,6 +265,7 @@ export default function CreateResourceForm({
goToResource(id);
} else {
setShowSnippets(true);
+ router.refresh();
}
}
}
@@ -216,6 +275,21 @@ export default function CreateResourceForm({
router.push(`/${orgId}/settings/resources/${id || resourceId}`);
}
+ const launchOptions = [
+ {
+ id: "http",
+ title: "HTTPS Resource",
+ description:
+ "Proxy requests to your app over HTTPS using a subdomain or base domain."
+ },
+ {
+ id: "raw",
+ title: "Raw TCP/UDP Resource",
+ description:
+ "Proxy requests to your app over TCP/UDP using a port number."
+ }
+ ];
+
return (
<>
- {!showSnippets && (
-
+
+ Close
+
Enable Password Protection
-
- Close
-
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
index 704d3f44..9d89d3bd 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
+++ b/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;
const defaultValues: Partial = {
- 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({
resolver: zodResolver(setPincodeFormSchema),
- defaultValues,
+ defaultValues
});
useEffect(() => {
@@ -81,7 +81,7 @@ export default function SetResourcePincodeForm({
setLoading(true);
api.post>(`/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) {
@@ -167,13 +167,13 @@ export default function SetResourcePincodeForm({
+
Users will be able to access
this resource by entering this
PIN code. It must be at least 6
digits long.
-
)}
/>
@@ -181,6 +181,9 @@ export default function SetResourcePincodeForm({
+
+ Close
+
Enable PIN Code Protection
-
- Close
-
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
index df5376f9..8f8e584c 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
@@ -8,14 +8,12 @@ import { useResourceContext } from "@app/hooks/useResourceContext";
import { AxiosResponse } from "axios";
import { formatAxiosError } from "@app/lib/api";
import {
- GetResourceAuthInfoResponse,
GetResourceWhitelistResponse,
ListResourceRolesResponse,
ListResourceUsersResponse
} from "@server/routers/resource";
import { Button } from "@app/components/ui/button";
import { set, z } from "zod";
-import { Tag } from "emblor";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
@@ -27,12 +25,8 @@ import {
FormLabel,
FormMessage
} from "@app/components/ui/form";
-import { TagInput } from "emblor";
-// import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { ListUsersResponse } from "@server/routers/user";
-import { Switch } from "@app/components/ui/switch";
-import { Label } from "@app/components/ui/label";
-import { Binary, Key, ShieldCheck } from "lucide-react";
+import { Binary, Key } from "lucide-react";
import SetResourcePasswordForm from "./SetResourcePasswordForm";
import SetResourcePincodeForm from "./SetResourcePincodeForm";
import { createApiClient } from "@app/lib/api";
@@ -44,11 +38,12 @@ import {
SettingsSectionHeader,
SettingsSectionDescription,
SettingsSectionBody,
- SettingsSectionForm,
- SettingsSectionFooter
+ SettingsSectionFooter,
+ SettingsSectionForm
} from "@app/components/Settings";
import { SwitchInput } from "@app/components/SwitchInput";
import { InfoPopup } from "@app/components/ui/info-popup";
+import { Tag, TagInput } from "@app/components/tags/tag-input";
import { useRouter } from "next/navigation";
const UsersRolesFormSchema = z.object({
@@ -413,7 +408,7 @@ export default function ResourceAuthenticationPage() {
setSsoEnabled(val)}
/>
@@ -435,7 +430,6 @@ export default function ResourceAuthenticationPage() {
Roles
- {/* @ts-ignore */}
+
- These roles will be able
- to access this resource.
Admins can always access
this resource.
-
)}
/>
@@ -500,7 +485,6 @@ export default function ResourceAuthenticationPage() {
Users
- {/* @ts-ignore */}
{
@@ -538,25 +523,8 @@ 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"
- }}
/>
-
- Users added here will be
- able to access this
- resource. A user will
- always have access to a
- resource if they have a
- role that has access to
- it.
-
)}
@@ -601,7 +569,7 @@ export default function ResourceAuthenticationPage() {