Use code edit for dns provider config dialog

Author: jc21

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}
 								/>