enhance: show the info of changed certificates #386

app/src/language/LINGUAS

@@ -1 +1 @@
-es fr_FR ko_KR ru_RU vi_VN zh_CN zh_TW
+en zh_CN zh_TW fr_FR es ru_RU vi_VN ko_KR

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

@@ -2,31 +2,34 @@
 import CertInfo from '@/views/domain/cert/CertInfo.vue'
 import IssueCert from '@/views/domain/cert/IssueCert.vue'
 import ChangeCert from '@/views/domain/cert/components/ChangeCert/ChangeCert.vue'
-import type { CertificateInfo } from '@/api/cert'
+import type { Cert, CertificateInfo } from '@/api/cert'
 
 const props = defineProps<{
   configName: string
-  enabled: boolean
   currentServerIndex: number
   certInfo?: CertificateInfo[]
 }>()
 
-const emit = defineEmits(['update:enabled'])
+const enabled = defineModel<boolean>('enabled', {
+  default: () => false,
+})
+
+const changedCerts: Ref<Cert[]> = ref([])
 
-const enabled = computed({
-  get() {
-    return props.enabled
-  },
-  set(value) {
-    emit('update:enabled', value)
-  },
+// if certInfo update, clear changedCerts
+watch(() => props.certInfo, () => {
+  changedCerts.value = []
 })
+
+function handleCertChange(certs: Cert[]) {
+  changedCerts.value = certs
+}
 </script>
 
 <template>
   <div>
     <h3>
-      {{ $gettext('Certificate Status') }}
+      {{ $ngettext('Certificate Status', 'Certificates Status', certInfo?.length || 1) }}
     </h3>
 
     <ARow
@@ -43,7 +46,26 @@ const enabled = computed({
       </ACol>
     </ARow>
 
-    <ChangeCert />
+    <template v-if="changedCerts.length > 0">
+      <h3>
+        {{ $ngettext('Changed Certificate', 'Changed Certificates', changedCerts?.length || 1) }}
+      </h3>
+      <ARow
+        :gutter="[16, 16]"
+        class="mb-4"
+      >
+        <ACol
+          v-for="(c, index) in changedCerts"
+          :key="index"
+          :xs="24"
+          :sm="12"
+        >
+          <CertInfo :cert="c.certificate_info" />
+        </ACol>
+      </ARow>
+    </template>
+
+    <ChangeCert @change="handleCertChange" />
 
     <IssueCert
       v-model:enabled="enabled"

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

@@ -32,7 +32,7 @@ const isValid = computed(() => dayjs().isAfter(props.cert?.not_before) && dayjs(
       </ATag>
     </template>
     <p>
-      {{ $gettext('Intermediate Certification Authorities: %{issuer}', { issuer: cert.issuer_name }) }}
+      {{ $gettext('Issuer: %{issuer}', { issuer: cert.issuer_name }) }}
     </p>
     <p>
       {{ $gettext('Expired At: %{date}', { date: dayjs(cert.not_after).format('YYYY-MM-DD HH:mm:ss').toString() }) }}

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

@@ -3,25 +3,17 @@ import ObtainCert from '@/views/domain/cert/components/ObtainCert.vue'
 import type { NgxDirective } from '@/api/ngx'
 
 export interface Props {
-  enabled: boolean
   configName: string
 }
 
 const props = defineProps<Props>()
 
-const emit = defineEmits(['update:enabled'])
-
 const issuing_cert = ref(false)
 const obtain_cert = ref()
 const directivesMap = inject('directivesMap') as Ref<Record<string, NgxDirective[]>>
 
-const enabled = computed({
-  get() {
-    return props.enabled
-  },
-  set(value) {
-    emit('update:enabled', value)
-  },
+const enabled = defineModel<boolean>('enabled', {
+  default: () => false,
 })
 
 const no_server_name = computed(() => {
@@ -35,7 +27,9 @@ provide('no_server_name', no_server_name)
 provide('props', props)
 provide('issuing_cert', issuing_cert)
 
-watch(no_server_name, () => emit('update:enabled', false))
+watch(no_server_name, () => {
+  enabled.value = false
+})
 
 const update = ref(0)
 

app/src/views/domain/cert/components/ChangeCert/ChangeCert.vue

@@ -6,6 +6,8 @@ import cert from '@/api/cert'
 import type { NgxDirective } from '@/api/ngx'
 import certColumns from '@/views/certificate/CertificateList/certColumns'
 
+const emit = defineEmits(['change'])
+
 const current_server_directives = inject('current_server_directives') as WritableComputedRef<NgxDirective[]>
 const visible = ref(false)
 
@@ -34,6 +36,10 @@ async function ok() {
   })
 
   visible.value = false
+  emit('change', records.value)
+
+  records.value = []
+  selectedKeys.value = []
 }
 </script>
 

internal/cert/cert_info.go

@@ -17,21 +17,18 @@ type Info struct {
 
 func GetCertInfo(sslCertificatePath string) (info *Info, err error) {
 	certData, err := os.ReadFile(sslCertificatePath)
-
 	if err != nil {
 		err = errors.Wrap(err, "error read certificate")
 		return
 	}
 
 	block, _ := pem.Decode(certData)
-
 	if block == nil || block.Type != "CERTIFICATE" {
 		err = errors.New("certificate decoding error")
 		return
 	}
 
 	cert, err := x509.ParseCertificate(block.Bytes)
-
 	if err != nil {
 		err = errors.Wrap(err, "certificate parsing error")
 		return
@@ -43,6 +40,5 @@ func GetCertInfo(sslCertificatePath string) (info *Info, err error) {
 		NotAfter:    cert.NotAfter,
 		NotBefore:   cert.NotBefore,
 	}
-
 	return
 }