add each form control it's own form field/item/control

This commit is contained in:
Pallavi Kumari
2025-10-21 16:10:23 +05:30
parent 70aeaf7b5d
commit 5a571f19e1

View File

@@ -263,7 +263,7 @@ export default function CreateDomainForm({
<AlertTitle>{t("internationaldomaindetected")}</AlertTitle> <AlertTitle>{t("internationaldomaindetected")}</AlertTitle>
<AlertDescription> <AlertDescription>
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
<p>{t("willbestoredas")} <code className="font-mono px-1 py-0.5 rounded">{punycodePreview}</code></p> <p>{t("willbestoredas")} <code className="font-mono px-1 py-0.5 rounded">{punycodePreview}</code></p>
</div> </div>
</AlertDescription> </AlertDescription>
</Alert> </Alert>
@@ -274,76 +274,91 @@ export default function CreateDomainForm({
)} )}
/> />
{domainType === "wildcard" && ( {domainType === "wildcard" && (
<FormField <>
control={form.control} <FormField
name="certResolver" control={form.control}
render={({ field }) => ( name="certResolver"
<FormItem> render={({ field }) => (
<FormLabel>{t("certResolver")}</FormLabel> <FormItem>
<FormControl> <FormLabel>{t("certResolver")}</FormLabel>
<Select <FormControl>
value={ <Select
field.value === null ? "default" : value={
(field.value === "" || (field.value && field.value !== "default")) ? "custom" : field.value === null ? "default" :
"default" (field.value === "" || (field.value && field.value !== "default")) ? "custom" :
} "default"
onValueChange={(val) => {
if (val === "default") {
field.onChange(null);
} else if (val === "custom") {
field.onChange("");
} else {
field.onChange(val);
} }
}} onValueChange={(val) => {
> if (val === "default") {
<SelectTrigger> field.onChange(null);
<SelectValue placeholder={t("selectCertResolver")} /> } else if (val === "custom") {
</SelectTrigger> field.onChange("");
<SelectContent> } else {
{certResolverOptions.map((opt) => ( field.onChange(val);
<SelectItem key={opt.id} value={opt.id}> }
{opt.title} }}
</SelectItem> >
))} <SelectTrigger>
</SelectContent> <SelectValue placeholder={t("selectCertResolver")} />
</Select> </SelectTrigger>
</FormControl> <SelectContent>
<FormMessage /> {certResolverOptions.map((opt) => (
{field.value !== null && field.value !== "default" && ( <SelectItem key={opt.id} value={opt.id}>
<div className="space-y-2 mt-2"> {opt.title}
<FormControl> </SelectItem>
<Input ))}
placeholder={t("enterCustomResolver")} </SelectContent>
value={field.value || ""} </Select>
onChange={(e) => field.onChange(e.target.value)} </FormControl>
/> <FormMessage />
</FormControl> </FormItem>
<FormField )}
control={form.control} />
name="preferWildcardCert" {form.watch("certResolver") !== null &&
render={({ field: checkboxField }) => ( form.watch("certResolver") !== "default" && (
<FormItem className="flex flex-row items-center space-x-3 space-y-0"> <FormField
<FormControl> control={form.control}
<CheckboxWithLabel name="certResolver"
label={t("preferWildcardCert")} render={({ field }) => (
checked={checkboxField.value} <FormItem>
onCheckedChange={checkboxField.onChange} <FormLabel>{t("customResolver")}</FormLabel>
/> <FormControl>
</FormControl> <Input
placeholder={t("enterCustomResolver")}
value={field.value || ""}
onChange={(e) => field.onChange(e.target.value)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
{form.watch("certResolver") !== null &&
form.watch("certResolver") !== "default" && (
<FormField
control={form.control}
name="preferWildcardCert"
render={({ field: checkboxField }) => (
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
<FormControl>
<CheckboxWithLabel
label={t("preferWildcardCert")}
checked={checkboxField.value}
onCheckedChange={checkboxField.onChange}
/>
</FormControl>
{/* <div className="space-y-1 leading-none"> {/* <div className="space-y-1 leading-none">
<FormLabel> <FormLabel>
{t("preferWildcardCert")} {t("preferWildcardCert")}
</FormLabel> </FormLabel>
</div> */} </div> */}
</FormItem> </FormItem>
)} )}
/> />
</div> )}
)} </>
</FormItem>
)}
/>
)} )}
</form> </form>
</Form> </Form>
@@ -646,18 +661,18 @@ export default function CreateDomainForm({
</div> </div>
{build != "oss" && env.flags.usePangolinDns && ( {build != "oss" && env.flags.usePangolinDns && (
<Alert variant="destructive"> <Alert variant="destructive">
<AlertTriangle className="h-4 w-4" /> <AlertTriangle className="h-4 w-4" />
<AlertTitle className="font-semibold"> <AlertTitle className="font-semibold">
{t("createDomainSaveTheseRecords")} {t("createDomainSaveTheseRecords")}
</AlertTitle> </AlertTitle>
<AlertDescription> <AlertDescription>
{t( {t(
"createDomainSaveTheseRecordsDescription" "createDomainSaveTheseRecordsDescription"
)} )}
</AlertDescription> </AlertDescription>
</Alert> </Alert>
)} )}
<Alert variant="info"> <Alert variant="info">
<AlertTriangle className="h-4 w-4" /> <AlertTriangle className="h-4 w-4" />