From c08b1be3cb71138647cf54e6a1be3acc76fc2daa Mon Sep 17 00:00:00 2001
From: Jamie Curnow <jc@jc21.com>
Date: Mon, 27 Oct 2025 19:42:58 +1000
Subject: [PATCH] Use code edit for dns provider config dialog

---
 .../src/components/Form/DNSProviderFields.tsx  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Form/DNSProviderFields.tsx b/frontend/src/components/Form/DNSProviderFields.tsx
index fc01e8be..f323942e 100644
--- a/frontend/src/components/Form/DNSProviderFields.tsx
+++ b/frontend/src/components/Form/DNSProviderFields.tsx
@@ -1,4 +1,5 @@
 import { IconAlertTriangle } from "@tabler/icons-react";
+import CodeEditor from "@uiw/react-textarea-code-editor";
 import { Field, useFormikContext } from "formik";
 import { useState } from "react";
 import Select, { type ActionMeta } from "react-select";
@@ -74,11 +75,20 @@ export function DNSProviderFields({ showBoundaryBox = false }: Props) {
 								<label htmlFor="dnsProviderCredentials" className="form-label">
 									<T id="certificates.dns.credentials" />
 								</label>
-								<textarea
+								<CodeEditor
+									language="bash"
 									id="dnsProviderCredentials"
-									className="form-control textareaMono"
-									rows={3}
-									spellCheck={false}
+									padding={15}
+									data-color-mode="dark"
+									minHeight={130}
+									indentWidth={2}
+									style={{
+										fontFamily:
+											"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+										borderRadius: "0.3rem",
+										minHeight: "130px",
+										backgroundColor: "var(--tblr-bg-surface-dark)",
+									}}
 									value={v.meta.dnsProviderCredentials || ""}
 									{...field}
 								/>