feat: enhance TLS certificate selection UI in AddDomain component (#4705)

* feat: enhance TLS certificate selection UI in AddDomain component

- Added descriptive FormDescriptions for different TLS certificate options (None, Let's Encrypt, Custom) to improve user understanding of certificate provisioning.
- Updated placeholder text for the custom certificate resolver input field to provide clearer guidance on expected input format.

This update enhances the user experience by providing contextual information directly within the form.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Mauricio Siu
2026-06-29 12:01:26 -06:00
committed by GitHub
parent b4e2d274b1
commit ed0abb2465

View File

@@ -763,6 +763,37 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
<SelectItem value={"custom"}>Custom</SelectItem>
</SelectContent>
</Select>
<FormDescription>
{field.value === "none" && (
<>
<strong>None</strong> serves TLS using any
certificate you created in the{" "}
<Link
href="/dashboard/settings/certificates"
className="text-primary"
>
Certificates
</Link>{" "}
section whose CN/SAN matches this host —
Traefik selects it automatically via SNI.
</>
)}
{field.value === "letsencrypt" && (
<>
<strong>Let's Encrypt</strong> auto-provisions
a certificate automatically for this host.
</>
)}
{field.value === "custom" && (
<>
<strong>Custom</strong> uses a Traefik cert
resolver by name (defined in your static
configuration).
</>
)}
{!field.value &&
"Select a certificate provider to see how TLS will be served for this host."}
</FormDescription>
<FormMessage />
</FormItem>
);
@@ -777,10 +808,19 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
return (
<FormItem>
<FormLabel>Custom Certificate Resolver</FormLabel>
<FormDescription>
Enter the <strong>name</strong> of a Traefik
cert resolver defined in your static
configuration (e.g. <code>letsencrypt</code>)
not certificate or private key content. To use a
certificate you pasted in the Certificates
section, choose <strong>None</strong> instead
and Traefik will match it by SNI.
</FormDescription>
<FormControl>
<Input
className="w-full"
placeholder="Enter your custom certificate resolver"
placeholder="e.g. letsencrypt"
{...field}
value={field.value || ""}
onChange={(e) => {