WIP - Make DNS Provider selection more user friendly

[Monviech]

Every DNS Provider will get a partial view, which is loaded based on the select picker of the DNS Providers.

That enables the front end to display the right names for every field the DNS Provider needs, as well as showing customized help text to the right github links for any of them.

The fields in the backend can be shared between all providers, and leftovers in invisible fields arent loaded anyway due to template logic.

e.g. dnsprovidercloudflareForm dnsproviderazureForm etc...

They're loaded like this: general.volt

<!-- Tab Content -->
<div class="tab-content content-box">
    <!-- General Tab -->
    <div id="generalTab" class="tab-pane fade in active">
        {{ partial("layout_partials/base_form", ['fields': generalForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
    </div>
    <!-- DNS Provider Tab -->
    <div id="dnsProviderTab" class="tab-pane fade">
        <!-- Default DNS Provider Form -->
        {{ partial("layout_partials/base_form", ['fields': dnsproviderForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
        <!-- Cloudflare DNS Provider Form -->
        <div id="dnsProviderCloudflareForm" style="display: none;">
            {{ partial("layout_partials/base_form", ['fields': dnsprovidercloudflareForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
        </div>
        <!-- Azure DNS Provider Form -->
        <div id="dnsProviderAzureForm" style="display: none;">
            {{ partial("layout_partials/base_form", ['fields': dnsproviderazureForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
        </div>
    </div>
    <!-- Dynamic DNS Tab -->
    <div id="dynamicDnsTab" class="tab-pane fade">
        {{ partial("layout_partials/base_form", ['fields': dynamicdnsForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
    </div>
    <!-- Log Settings Tab -->
    <div id="logSettingsTab" class="tab-pane fade">
        {{ partial("layout_partials/base_form", ['fields': logsettingsForm, 'action': '/ui/caddy/general', 'id': 'frm_GeneralSettings']) }}
    </div>
</div>

The javascript to select them:

            // Listen for changes on the TlsDnsProvider dropdown
            tlsDnsProviderSelect.on('change', function() {
                var selectedProvider = $(this).val();
                // Hide both forms initially
                $('#dnsProviderCloudflareForm').hide();
                $('#dnsProviderAzureForm').hide();

                // Determine which DNS Provider form to show based on the selected value
                if(selectedProvider === "cloudflare") {
                    $('#dnsProviderCloudflareForm').show();
                } else if(selectedProvider === "azure") {
                    $('#dnsProviderAzureForm').show();
                }
            }).trigger('change'); // Trigger change to set initial visibility

[Monviech]

No the fields cant be shared. For maintainability and seperation if concerns, every DNS Provider needs its own keys in the model. Otherwise unexpected things happen while saving the form.

The template and forms also needs adjustement for this change.

This will also be a breaking change, since DNS Provider Data has to be resubmitted after this change.

(I feel like I opened Pandoras Box with this change, lol, thought it would be straightforward. But its better for the future.)

[Monviech]

No, this is the wrong way to do it. The old way was way more simple, efficient, and it just worked.

This was a big sink of time for no benefit. I'll close this.