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