mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-19 03:16:40 +00:00
Reintroduce clients conditionally
This commit is contained in:
@@ -11,7 +11,7 @@ import {
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@app/components/ui/card";
|
||||
import { formatAxiosError } from "@app/lib/api";;
|
||||
import { formatAxiosError } from "@app/lib/api";
|
||||
import { createApiClient } from "@app/lib/api";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
@@ -38,6 +38,7 @@ export default function StepperForm() {
|
||||
const [currentStep, setCurrentStep] = useState<Step>("org");
|
||||
const [orgIdTaken, setOrgIdTaken] = useState(false);
|
||||
const t = useTranslations();
|
||||
const { env } = useEnvContext();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
@@ -45,9 +46,9 @@ export default function StepperForm() {
|
||||
const [orgCreated, setOrgCreated] = useState(false);
|
||||
|
||||
const orgSchema = z.object({
|
||||
orgName: z.string().min(1, { message: t('orgNameRequired') }),
|
||||
orgId: z.string().min(1, { message: t('orgIdRequired') }),
|
||||
subnet: z.string().min(1, { message: t('subnetRequired') })
|
||||
orgName: z.string().min(1, { message: t("orgNameRequired") }),
|
||||
orgId: z.string().min(1, { message: t("orgIdRequired") }),
|
||||
subnet: z.string().min(1, { message: t("subnetRequired") })
|
||||
});
|
||||
|
||||
const orgForm = useForm<z.infer<typeof orgSchema>>({
|
||||
@@ -83,21 +84,24 @@ export default function StepperForm() {
|
||||
}
|
||||
};
|
||||
|
||||
const checkOrgIdAvailability = useCallback(async (value: string) => {
|
||||
if (loading || orgCreated) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await api.get(`/org/checkId`, {
|
||||
params: {
|
||||
orgId: value
|
||||
}
|
||||
});
|
||||
setOrgIdTaken(res.status !== 404);
|
||||
} catch (error) {
|
||||
setOrgIdTaken(false);
|
||||
}
|
||||
}, [loading, orgCreated, api]);
|
||||
const checkOrgIdAvailability = useCallback(
|
||||
async (value: string) => {
|
||||
if (loading || orgCreated) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await api.get(`/org/checkId`, {
|
||||
params: {
|
||||
orgId: value
|
||||
}
|
||||
});
|
||||
setOrgIdTaken(res.status !== 404);
|
||||
} catch (error) {
|
||||
setOrgIdTaken(false);
|
||||
}
|
||||
},
|
||||
[loading, orgCreated, api]
|
||||
);
|
||||
|
||||
const debouncedCheckOrgIdAvailability = useCallback(
|
||||
debounce(checkOrgIdAvailability, 300),
|
||||
@@ -135,9 +139,7 @@ export default function StepperForm() {
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setError(
|
||||
formatAxiosError(e, t('orgErrorCreate'))
|
||||
);
|
||||
setError(formatAxiosError(e, t("orgErrorCreate")));
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
@@ -147,10 +149,8 @@ export default function StepperForm() {
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('setupNewOrg')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('setupCreate')}
|
||||
</CardDescription>
|
||||
<CardTitle>{t("setupNewOrg")}</CardTitle>
|
||||
<CardDescription>{t("setupCreate")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<section className="space-y-6">
|
||||
@@ -172,7 +172,7 @@ export default function StepperForm() {
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{t('setupCreateOrg')}
|
||||
{t("setupCreateOrg")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
@@ -192,7 +192,7 @@ export default function StepperForm() {
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{t('siteCreate')}
|
||||
{t("siteCreate")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
@@ -212,7 +212,7 @@ export default function StepperForm() {
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{t('setupCreateResources')}
|
||||
{t("setupCreateResources")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,7 +231,7 @@ export default function StepperForm() {
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('setupOrgName')}
|
||||
{t("setupOrgName")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
@@ -239,8 +239,15 @@ export default function StepperForm() {
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
// Prevent "/" in orgName input
|
||||
const sanitizedValue = e.target.value.replace(/\//g, "-");
|
||||
const orgId = generateId(sanitizedValue);
|
||||
const sanitizedValue =
|
||||
e.target.value.replace(
|
||||
/\//g,
|
||||
"-"
|
||||
);
|
||||
const orgId =
|
||||
generateId(
|
||||
sanitizedValue
|
||||
);
|
||||
orgForm.setValue(
|
||||
"orgId",
|
||||
orgId
|
||||
@@ -253,12 +260,15 @@ export default function StepperForm() {
|
||||
orgId
|
||||
);
|
||||
}}
|
||||
value={field.value.replace(/\//g, "-")}
|
||||
value={field.value.replace(
|
||||
/\//g,
|
||||
"-"
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
{t('orgDisplayName')}
|
||||
{t("orgDisplayName")}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
@@ -269,7 +279,7 @@ export default function StepperForm() {
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('orgId')}
|
||||
{t("orgId")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
@@ -279,39 +289,44 @@ export default function StepperForm() {
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
{t('setupIdentifierMessage')}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={orgForm.control}
|
||||
name="subnet"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Subnet
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="text"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
Network subnet for this organization.
|
||||
A default value has been provided.
|
||||
{t(
|
||||
"setupIdentifierMessage"
|
||||
)}
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{env.flags.enableClients && (
|
||||
<FormField
|
||||
control={orgForm.control}
|
||||
name="subnet"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Subnet
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="text"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<FormDescription>
|
||||
Network subnet for this
|
||||
organization. A default
|
||||
value has been provided.
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{orgIdTaken && !orgCreated ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{t('setupErrorIdentifier')}
|
||||
{t("setupErrorIdentifier")}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
@@ -334,7 +349,7 @@ export default function StepperForm() {
|
||||
orgIdTaken
|
||||
}
|
||||
>
|
||||
{t('setupCreateOrg')}
|
||||
{t("setupCreateOrg")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -360,4 +375,4 @@ function debounce<T extends (...args: any[]) => any>(
|
||||
func(...args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user