refactor: auto certificate options

1. Add OCSP Must Staple options #292
2. Add LEGO_DISABLE_CNAME_SUPPORT options #407

Author: 0xJacky

api/certificate/issue.go

@@ -117,14 +117,16 @@ func IssueCert(c *gin.Context) {
 	}
 
 	err = certModel.Updates(&model.Cert{
-		Domains:               payload.ServerName,
-		SSLCertificatePath:    payload.GetCertificatePath(),
-		SSLCertificateKeyPath: payload.GetCertificateKeyPath(),
-		AutoCert:              model.AutoCertEnabled,
-		KeyType:               payload.KeyType,
-		ChallengeMethod:       payload.ChallengeMethod,
-		DnsCredentialID:       payload.DNSCredentialID,
-		Resource:              payload.Resource,
+		Domains:                 payload.ServerName,
+		SSLCertificatePath:      payload.GetCertificatePath(),
+		SSLCertificateKeyPath:   payload.GetCertificateKeyPath(),
+		AutoCert:                model.AutoCertEnabled,
+		KeyType:                 payload.KeyType,
+		ChallengeMethod:         payload.ChallengeMethod,
+		DnsCredentialID:         payload.DNSCredentialID,
+		Resource:                payload.Resource,
+		MustStaple:              payload.MustStaple,
+		LegoDisableCNAMESupport: payload.LegoDisableCNAMESupport,
 	})
 
 	if err != nil {

app/src/api/auto_cert.ts

@@ -5,21 +5,27 @@ export interface DNSProvider {
   code?: string
   provider?: string
   configuration: {
-    credentials: {
-      [key: string]: string
-    }
-    additional: {
-      [key: string]: string
-    }
+    credentials: Record<string, string>
+    additional: Record<string, string>
   }
   links?: {
     api: string
     go_client: string
   }
 }
-export interface DnsChallenge extends DNSProvider {
-  dns_credential_id: number | null
-  challenge_method: string
+
+export interface AutoCertOptions {
+  name?: string
+  domains: string[]
+  code?: string
+  dns_credential_id?: number | null
+  challenge_method?: string
+  configuration?: DNSProvider['configuration']
+  key_type: string
+  acme_user_id?: number
+  provider?: string
+  must_staple?: boolean
+  lego_disable_cname_support?: boolean
 }
 
 const auto_cert = {

app/src/views/certificate/ACMEUserSelector.vue

@@ -3,18 +3,19 @@ import type { SelectProps } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import type { AcmeUser } from '@/api/acme_user'
 import acme_user from '@/api/acme_user'
-import type { Cert } from '@/api/cert'
+import type { AutoCertOptions } from '@/api/auto_cert'
 
 const users = ref([]) as Ref<AcmeUser[]>
 
-// This data is provided by the Top StdCurd component,
-// is the object that you are trying to modify it
-// we externalize the dns_credential_id to the parent component,
-// this is used to tell the backend which dns_credential to use
-const data = inject('data') as Ref<Cert>
+const data = defineModel<AutoCertOptions>('options', {
+  default: () => {
+    return {}
+  },
+  required: true,
+})
 
 const id = computed(() => {
-  return data.value.acme_user_id
+  return data.value?.acme_user_id
 })
 
 const user_idx = ref()
@@ -35,7 +36,7 @@ watch(id, init)
 
 watch(current, () => {
   if (mounted.value)
-    data.value.acme_user_id = current.value.id
+    data.value!.acme_user_id = current.value.id
 })
 
 onMounted(async () => {
@@ -84,8 +85,9 @@ const filterOption = (input: string, option: { label: string }) => {
     <AFormItem :label="$gettext('ACME User')">
       <ASelect
         v-model:value="user_idx"
+        :placeholder="$gettext('System Initial User')"
         show-search
-        :options="options"
+        :options
         :filter-option="filterOption"
       />
     </AFormItem>

app/src/views/certificate/CertificateEditor.vue

@@ -52,12 +52,6 @@ function save() {
   })
 }
 
-provide('data', data)
-
-provide('no_server_name', computed(() => {
-  return false
-}))
-
 const log = computed(() => {
   const logs = data.value.log?.split('\n')
 
@@ -134,9 +128,17 @@ const isManaged = computed(() => {
         </AForm>
 
         <template v-if="isManaged">
-          <RenewCert @renewed="init" />
+          <RenewCert
+            :options="{
+              name: data.name,
+              domains: data.domains,
+              key_type: data.key_type,
+            }"
+            @renewed="init"
+          />
 
           <AutoCertStepOne
+            v-model:options="data"
             style="max-width: 600px"
             hide-note
           />

app/src/views/certificate/CertificateList/Certificate.vue

@@ -5,13 +5,6 @@ import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
 import cert from '@/api/cert'
 import WildcardCertificate from '@/views/certificate/WildcardCertificate.vue'
 
-// DO NOT REMOVE THESE LINES
-const no_server_name = computed(() => {
-  return false
-})
-
-provide('no_server_name', no_server_name)
-
 const refWildcard = ref()
 const refTable = ref()
 </script>

app/src/views/certificate/RenewCert.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
-import type { Cert } from '@/api/cert'
+import type { AutoCertOptions } from '@/api/auto_cert'
+
+const props = defineProps<{
+  options: AutoCertOptions
+}>()
 
 const emit = defineEmits<{
   renewed: [void]
@@ -13,12 +16,12 @@ const modalClosable = ref(true)
 
 const refObtainCertLive = ref()
 
-const data = inject('data') as Ref<Cert>
-
 const issueCert = () => {
   modalVisible.value = true
 
-  refObtainCertLive.value.issue_cert(data.value.name, data.value.domains, data.value.key_type).then(() => {
+  const { name, domains, key_type } = props.options
+
+  refObtainCertLive.value.issue_cert(name, domains, key_type).then(() => {
     message.success($gettext('Renew successfully'))
     emit('renewed')
   })
@@ -52,6 +55,7 @@ provide('issuing_cert', issuing_cert)
         ref="refObtainCertLive"
         v-model:modal-closable="modalClosable"
         v-model:modal-visible="modalVisible"
+        :options
       />
     </AModal>
   </div>

app/src/views/certificate/WildcardCertificate.vue

@@ -1,29 +1,27 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import type { Cert } from '@/api/cert'
 import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
-import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
-import { PrivateKeyTypeList } from '@/constants'
+import type { AutoCertOptions } from '@/api/auto_cert'
+import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
 
 const emit = defineEmits<{
   issued: [void]
 }>()
 
 const step = ref(0)
 const visible = ref(false)
-const data = ref({}) as Ref<Cert>
+const data = ref({}) as Ref<AutoCertOptions>
 const issuing_cert = ref(false)
 
-provide('data', data)
 provide('issuing_cert', issuing_cert)
 function open() {
   visible.value = true
   step.value = 0
   data.value = {
     challenge_method: 'dns01',
     key_type: '2048',
-  } as Cert
+  } as AutoCertOptions
 }
 
 defineExpose({
@@ -66,28 +64,22 @@ const issueCert = () => {
       force-render
     >
       <template v-if="step === 0">
-        <DNSChallenge />
-
         <AForm layout="vertical">
           <AFormItem :label="$gettext('Domain')">
             <AInput
               v-model:value="domain"
               addon-before="*."
             />
           </AFormItem>
-
-          <AFormItem :label="$gettext('Key Type')">
-            <ASelect v-model:value="data.key_type">
-              <ASelectOption
-                v-for="t in PrivateKeyTypeList"
-                :key="t.key"
-                :value="t.key"
-              >
-                {{ t.name }}
-              </ASelectOption>
-            </ASelect>
-          </AFormItem>
         </AForm>
+
+        <AutoCertStepOne
+          v-model:options="data"
+          style="max-width: 600px"
+          hide-note
+          force-dns-challenge
+        />
+
         <div
           v-if="step === 0"
           class="flex justify-end"
@@ -106,6 +98,7 @@ const issueCert = () => {
         ref="refObtainCertLive"
         v-model:modal-closable="modalClosable"
         v-model:modal-visible="modalVisible"
+        :options="data"
       />
     </AModal>
   </div>

app/src/views/domain/cert/IssueCert.vue

@@ -2,11 +2,9 @@
 import ObtainCert from '@/views/domain/cert/components/ObtainCert.vue'
 import type { NgxDirective } from '@/api/ngx'
 
-export interface Props {
+defineProps<{
   configName: string
-}
-
-const props = defineProps<Props>()
+}>()
 
 const issuing_cert = ref(false)
 const obtain_cert = ref()
@@ -16,18 +14,16 @@ const enabled = defineModel<boolean>('enabled', {
   default: () => false,
 })
 
-const no_server_name = computed(() => {
+const noServerName = computed(() => {
   if (!directivesMap.value.server_name)
     return true
 
   return directivesMap.value.server_name.length === 0
 })
 
-provide('no_server_name', no_server_name)
-provide('props', props)
 provide('issuing_cert', issuing_cert)
 
-watch(no_server_name, () => {
+watch(noServerName, () => {
   enabled.value = false
 })
 
@@ -45,14 +41,16 @@ async function onchange() {
   <ObtainCert
     ref="obtain_cert"
     :key="update"
+    :no-server-name="noServerName"
+    :config-name="configName"
     @update:auto_cert="r => enabled = r"
   />
   <div class="issue-cert">
     <AFormItem :label="$gettext('Encrypt website with Let\'s Encrypt')">
       <ASwitch
         :loading="issuing_cert"
         :checked="enabled"
-        :disabled="no_server_name"
+        :disabled="noServerName"
         @change="onchange"
       />
     </AFormItem>