feat: added DNS credentials manager

Author: 0xJacky

frontend/src/language/en/app.po

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import {computed, inject, ref, watch} from 'vue'
+import auto_cert from '@/api/auto_cert'
+import {useGettext} from 'vue3-gettext'
+import {SelectProps} from 'ant-design-vue'
+
+const {$gettext} = useGettext()
+const providers: any = ref([])
+
+const data: any = inject('data')!
+
+const code = computed(() => {
+    return data.code
+})
+
+function init() {
+    providers.value?.forEach((v: any, k: number) => {
+        if (v.code === code.value) {
+            provider_idx.value = k
+        }
+    })
+}
+
+auto_cert.get_dns_providers().then(r => {
+    providers.value = r
+}).then(() => {
+    init()
+})
+
+const provider_idx = ref()
+
+const current: any = computed(() => {
+    return providers.value?.[provider_idx.value]
+})
+
+
+watch(code, init)
+
+watch(current, () => {
+    data.code = current.value.code
+    data.provider = current.value.name
+    auto_cert.get_dns_provider(current.value.code).then(r => {
+        Object.assign(current.value, r)
+    })
+})
+
+const options = computed<SelectProps['options']>(() => {
+    let list: SelectProps['options'] = []
+
+    providers.value.forEach((v: any, k: number) => {
+        list!.push({
+            value: k,
+            label: v.name
+        })
+    })
+
+    return list
+})
+
+const filterOption = (input: string, option: any) => {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+</script>
+
+<template>
+    <a-form layout="vertical">
+        <a-form-item :label="$gettext('DNS Provider')">
+            <a-select v-model:value="provider_idx" show-search :options="options" :filter-option="filterOption"/>
+        </a-form-item>
+        <template v-if="current?.configuration?.credentials">
+            <h4>{{ $gettext('Credentials') }}</h4>
+            <a-form-item :label="k" v-for="(v,k) in current?.configuration?.credentials"
+                         :extra="v" :rules="[{ required: true }]">
+                <a-input v-model:value="data.configuration.credentials[k]"/>
+            </a-form-item>
+        </template>
+        <template v-if="current?.configuration?.additional">
+            <h4>{{ $gettext('Additional') }}</h4>
+            <a-form-item :label="k" v-for="(v,k) in current?.configuration?.additional" :extra="v">
+                <a-input v-model:value="data.configuration.additional[k]"/>
+            </a-form-item>
+        </template>
+    </a-form>
+</template>
+
+<style lang="less" scoped>
+
+</style>

frontend/src/language/messages.pot

@@ -4,7 +4,7 @@ import {datetime} from '@/components/StdDataDisplay/StdTableTransformer'
 import dns_credential from '@/api/dns_credential'
 import StdCurd from '@/components/StdDataDisplay/StdCurd.vue'
 import Template from '@/views/template/Template.vue'
-import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
+import DNSChallenge from './DNSChallenge.vue'
 import {input} from '@/components/StdDataEntry'
 
 const {$gettext, interpolate} = useGettext()

frontend/src/language/translations.json

@@ -40,10 +40,8 @@ const data: Ref = inject('data')!
                 directory to HTTPChallengePort before obtaining the certificate.
             </p>
             <p v-else-if="data.challenge_method==='dns01'" v-translate>
-                Please fill in the API authentication credentials provided by your DNS provider.
-                We will add a TXT record to the DNS records of your domain for ownership verification.
-                Once the verification is complete, the record will be removed.
-                Please note that the time configurations below are all in seconds.
+                Please first add credentials in Certification > DNS Credentials, and then select one of the credentials
+                below to request the API of the DNS provider.
             </p>
         </template>
     </a-alert>