mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-07 19:34:52 +02:00
bug fixes to smooth out multi domain inputs forms
This commit is contained in:
miloschwartz
parent
e49fb646b0
commit
c877bb1187
4 changed files with 111 additions and 57 deletions
|
|
@ -31,7 +31,10 @@ const createResourceParamsSchema = z
|
||||||
const createHttpResourceSchema = z
|
const createHttpResourceSchema = z
|
||||||
.object({
|
.object({
|
||||||
name: z.string().min(1).max(255),
|
name: z.string().min(1).max(255),
|
||||||
subdomain: z.string().optional(),
|
subdomain: z
|
||||||
|
.string()
|
||||||
|
.optional()
|
||||||
|
.transform((val) => val?.toLowerCase()),
|
||||||
isBaseDomain: z.boolean().optional(),
|
isBaseDomain: z.boolean().optional(),
|
||||||
siteId: z.number(),
|
siteId: z.number(),
|
||||||
http: z.boolean(),
|
http: z.boolean(),
|
||||||
|
|
@ -128,7 +131,7 @@ export async function createResource(
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!req.body?.http) {
|
if (typeof req.body.http !== "boolean") {
|
||||||
return next(
|
return next(
|
||||||
createHttpError(HttpCode.BAD_REQUEST, "http field is required")
|
createHttpError(HttpCode.BAD_REQUEST, "http field is required")
|
||||||
);
|
);
|
||||||
|
|
@ -233,6 +236,7 @@ async function createHttpResource(
|
||||||
.values({
|
.values({
|
||||||
siteId,
|
siteId,
|
||||||
fullDomain,
|
fullDomain,
|
||||||
|
domainId,
|
||||||
orgId,
|
orgId,
|
||||||
name,
|
name,
|
||||||
subdomain,
|
subdomain,
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,9 @@ const updateResourceParamsSchema = z
|
||||||
const updateHttpResourceBodySchema = z
|
const updateHttpResourceBodySchema = z
|
||||||
.object({
|
.object({
|
||||||
name: z.string().min(1).max(255).optional(),
|
name: z.string().min(1).max(255).optional(),
|
||||||
subdomain: subdomainSchema.optional(),
|
subdomain: subdomainSchema
|
||||||
|
.optional()
|
||||||
|
.transform((val) => val?.toLowerCase()),
|
||||||
ssl: z.boolean().optional(),
|
ssl: z.boolean().optional(),
|
||||||
sso: z.boolean().optional(),
|
sso: z.boolean().optional(),
|
||||||
blockAccess: z.boolean().optional(),
|
blockAccess: z.boolean().optional(),
|
||||||
|
|
|
||||||
|
|
@ -119,6 +119,7 @@ export default function CreateResourceForm({
|
||||||
open,
|
open,
|
||||||
setOpen
|
setOpen
|
||||||
}: CreateResourceFormProps) {
|
}: CreateResourceFormProps) {
|
||||||
|
const [formKey, setFormKey] = useState(0);
|
||||||
const api = createApiClient(useEnvContext());
|
const api = createApiClient(useEnvContext());
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
@ -209,6 +210,7 @@ export default function CreateResourceForm({
|
||||||
setBaseDomains(domains);
|
setBaseDomains(domains);
|
||||||
if (domains.length) {
|
if (domains.length) {
|
||||||
form.setValue("domainId", domains[0].domainId);
|
form.setValue("domainId", domains[0].domainId);
|
||||||
|
setFormKey((k) => k + 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -229,7 +231,7 @@ export default function CreateResourceForm({
|
||||||
protocol: data.protocol,
|
protocol: data.protocol,
|
||||||
proxyPort: data.http ? undefined : data.proxyPort,
|
proxyPort: data.http ? undefined : data.proxyPort,
|
||||||
siteId: data.siteId,
|
siteId: data.siteId,
|
||||||
isBaseDomain: data.isBaseDomain
|
isBaseDomain: data.http ? undefined : data.isBaseDomain
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
|
|
@ -281,7 +283,7 @@ export default function CreateResourceForm({
|
||||||
</CredenzaHeader>
|
</CredenzaHeader>
|
||||||
<CredenzaBody>
|
<CredenzaBody>
|
||||||
{!showSnippets && (
|
{!showSnippets && (
|
||||||
<Form {...form}>
|
<Form {...form} key={formKey}>
|
||||||
<form
|
<form
|
||||||
onSubmit={form.handleSubmit(onSubmit)}
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
className="space-y-4"
|
className="space-y-4"
|
||||||
|
|
@ -322,7 +324,8 @@ export default function CreateResourceForm({
|
||||||
<FormDescription>
|
<FormDescription>
|
||||||
Toggle if this is an
|
Toggle if this is an
|
||||||
HTTP resource or a
|
HTTP resource or a
|
||||||
raw TCP/UDP resource.
|
raw TCP/UDP
|
||||||
|
resource.
|
||||||
</FormDescription>
|
</FormDescription>
|
||||||
</div>
|
</div>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
|
@ -381,49 +384,88 @@ export default function CreateResourceForm({
|
||||||
{form.watch("http") && (
|
{form.watch("http") && (
|
||||||
<>
|
<>
|
||||||
{domainType === "subdomain" ? (
|
{domainType === "subdomain" ? (
|
||||||
<FormField
|
<div className="w-fill space-y-2">
|
||||||
control={form.control}
|
{!env.flags
|
||||||
name="subdomain"
|
.allowBaseDomainResources && (
|
||||||
render={({ field }) => (
|
<FormLabel>
|
||||||
<FormItem>
|
Subdomain
|
||||||
{!env.flags
|
</FormLabel>
|
||||||
.allowBaseDomainResources && (
|
|
||||||
<FormLabel>
|
|
||||||
Subdomain
|
|
||||||
</FormLabel>
|
|
||||||
)}
|
|
||||||
{domainType ===
|
|
||||||
"subdomain" && (
|
|
||||||
<FormControl>
|
|
||||||
<CustomDomainInput
|
|
||||||
value={
|
|
||||||
field.value ??
|
|
||||||
""
|
|
||||||
}
|
|
||||||
domainOptions={
|
|
||||||
baseDomains
|
|
||||||
}
|
|
||||||
placeholder="Subdomain"
|
|
||||||
onChange={(
|
|
||||||
value,
|
|
||||||
selectedDomainId
|
|
||||||
) => {
|
|
||||||
form.setValue(
|
|
||||||
"subdomain",
|
|
||||||
value
|
|
||||||
);
|
|
||||||
form.setValue(
|
|
||||||
"domainId",
|
|
||||||
selectedDomainId
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
)}
|
||||||
/>
|
<div className="flex">
|
||||||
|
<div className="w-1/2 mr-1">
|
||||||
|
<FormField
|
||||||
|
control={
|
||||||
|
form.control
|
||||||
|
}
|
||||||
|
name="subdomain"
|
||||||
|
render={({
|
||||||
|
field
|
||||||
|
}) => (
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
className="text-right"
|
||||||
|
placeholder="Subdomain"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</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
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
|
|
@ -435,9 +477,9 @@ export default function CreateResourceForm({
|
||||||
field.onChange
|
field.onChange
|
||||||
}
|
}
|
||||||
defaultValue={
|
defaultValue={
|
||||||
baseDomains[0]
|
field.value
|
||||||
?.domainId
|
|
||||||
}
|
}
|
||||||
|
{...field}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
|
|
|
||||||
|
|
@ -108,6 +108,7 @@ type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
|
||||||
type TransferFormValues = z.infer<typeof TransferFormSchema>;
|
type TransferFormValues = z.infer<typeof TransferFormSchema>;
|
||||||
|
|
||||||
export default function GeneralForm() {
|
export default function GeneralForm() {
|
||||||
|
const [formKey, setFormKey] = useState(0);
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const { resource, updateResource } = useResourceContext();
|
const { resource, updateResource } = useResourceContext();
|
||||||
const { org } = useOrgContext();
|
const { org } = useOrgContext();
|
||||||
|
|
@ -178,6 +179,7 @@ export default function GeneralForm() {
|
||||||
if (res?.status === 200) {
|
if (res?.status === 200) {
|
||||||
const domains = res.data.data.domains;
|
const domains = res.data.data.domains;
|
||||||
setBaseDomains(domains);
|
setBaseDomains(domains);
|
||||||
|
setFormKey((key) => key + 1);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -191,10 +193,10 @@ export default function GeneralForm() {
|
||||||
const res = await api
|
const res = await api
|
||||||
.post(`resource/${resource?.resourceId}`, {
|
.post(`resource/${resource?.resourceId}`, {
|
||||||
name: data.name,
|
name: data.name,
|
||||||
subdomain: data.subdomain,
|
subdomain: data.http ? data.subdomain : undefined,
|
||||||
proxyPort: data.proxyPort,
|
proxyPort: data.proxyPort,
|
||||||
isBaseDomain: data.isBaseDomain,
|
isBaseDomain: data.http ? data.isBaseDomain : undefined,
|
||||||
domainId: data.domainId
|
domainId: data.http ? data.domainId : undefined
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
toast({
|
toast({
|
||||||
|
|
@ -219,6 +221,8 @@ export default function GeneralForm() {
|
||||||
proxyPort: data.proxyPort,
|
proxyPort: data.proxyPort,
|
||||||
isBaseDomain: data.isBaseDomain
|
isBaseDomain: data.isBaseDomain
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.refresh();
|
||||||
}
|
}
|
||||||
setSaveLoading(false);
|
setSaveLoading(false);
|
||||||
}
|
}
|
||||||
|
|
@ -265,7 +269,7 @@ export default function GeneralForm() {
|
||||||
|
|
||||||
<SettingsSectionBody>
|
<SettingsSectionBody>
|
||||||
<SettingsSectionForm>
|
<SettingsSectionForm>
|
||||||
<Form {...form}>
|
<Form {...form} key={formKey}>
|
||||||
<form
|
<form
|
||||||
onSubmit={form.handleSubmit(onSubmit)}
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
className="space-y-4"
|
className="space-y-4"
|
||||||
|
|
@ -350,6 +354,7 @@ export default function GeneralForm() {
|
||||||
<Input
|
<Input
|
||||||
{...field}
|
{...field}
|
||||||
className="text-right"
|
className="text-right"
|
||||||
|
placeholder="Subdomain"
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
)}
|
)}
|
||||||
|
|
@ -370,9 +375,10 @@ export default function GeneralForm() {
|
||||||
field.onChange
|
field.onChange
|
||||||
}
|
}
|
||||||
defaultValue={
|
defaultValue={
|
||||||
field.value ||
|
field.value
|
||||||
baseDomains[0]
|
}
|
||||||
?.domainId
|
value={
|
||||||
|
field.value
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue