feat: Add DNS provider documentation and enhance provider form with new fields

- Created a comprehensive documentation file for DNS provider types, including RFC 2136, Webhook, and Script providers, detailing their use cases, configurations, and security notes.
- Updated the DNSProviderForm component to handle new field types including select and textarea for better user input management.
- Enhanced the DNS provider schemas to include new fields for script execution, webhook authentication, and RFC 2136 configurations, improving flexibility and usability.

frontend/src/components/DNSProviderForm.tsx

@@ -17,6 +17,7 @@ import {
   SelectValue,
   Checkbox,
   Alert,
+  Textarea,
 } from './ui'
 import { useDNSProviderTypes, useDNSProviderMutations, type DNSProvider } from '../hooks/useDNSProviders'
 import type { DNSProviderRequest, DNSProviderTypeInfo } from '../api/dnsProviders'
@@ -233,18 +234,68 @@ export default function DNSProviderForm({
                   )}
                 </div>
 
-                {selectedProviderInfo.fields?.map((field) => (
-                  <Input
-                    key={field.name}
-                    label={field.label}
-                    type={field.type}
-                    value={credentials[field.name] || ''}
-                    onChange={(e) => handleCredentialChange(field.name, e.target.value)}
-                    placeholder={field.default}
-                    helperText={field.hint}
-                    required={field.required && !provider} // Don't require when editing (preserve existing)
-                  />
-                ))}
+                {selectedProviderInfo.fields?.map((field) => {
+                  // Handle select field type
+                  if (field.type === 'select' && field.options) {
+                    return (
+                      <div key={field.name} className="space-y-1.5">
+                        <Label htmlFor={`field-${field.name}`}>{field.label}</Label>
+                        <Select
+                          value={credentials[field.name] || field.default || ''}
+                          onValueChange={(value) => handleCredentialChange(field.name, value)}
+                        >
+                          <SelectTrigger id={`field-${field.name}`}>
+                            <SelectValue placeholder={field.placeholder || `Select ${field.label}`} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {field.options.map((option) => (
+                              <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {field.hint && (
+                          <p className="text-sm text-content-muted">{field.hint}</p>
+                        )}
+                      </div>
+                    )
+                  }
+
+                  // Handle textarea field type
+                  if (field.type === 'textarea') {
+                    return (
+                      <div key={field.name} className="space-y-1.5">
+                        <Label htmlFor={`field-${field.name}`}>{field.label}</Label>
+                        <Textarea
+                          id={`field-${field.name}`}
+                          value={credentials[field.name] || ''}
+                          onChange={(e) => handleCredentialChange(field.name, e.target.value)}
+                          placeholder={field.placeholder || field.default}
+                          required={field.required && !provider}
+                          rows={4}
+                        />
+                        {field.hint && (
+                          <p className="text-sm text-content-muted">{field.hint}</p>
+                        )}
+                      </div>
+                    )
+                  }
+
+                  // Default: text or password input fields
+                  return (
+                    <Input
+                      key={field.name}
+                      label={field.label}
+                      type={field.type}
+                      value={credentials[field.name] || ''}
+                      onChange={(e) => handleCredentialChange(field.name, e.target.value)}
+                      placeholder={field.placeholder || field.default}
+                      helperText={field.hint}
+                      required={field.required && !provider}
+                    />
+                  )
+                })}
               </div>
 
               {/* Test Connection */}