feat: 修改证书交互逻辑

apps/minio/versions/RELEASE.2022-08-13T21-54-44Z/docker-compose.yml

@@ -5,7 +5,7 @@ services:
       container_name: 1panel_minio
       ports:
         - ${PANEL_APP_PORT_HTTP}:9000
-        - "9001:9001"
+        - ${API_ROOT}:9001
       restart: always
       command: server /data --console-address ":9001"
       environment:

backend/app/service/website.go

@@ -490,7 +490,22 @@ func (w WebsiteService) OpWebsiteHTTPS(ctx context.Context, req request.WebsiteH
 		websiteSSL model.WebsiteSSL
 	)
 	res.Enable = req.Enable
-	if req.Enable {
+
+	if !req.Enable {
+		website.Protocol = constant.ProtocolHTTP
+		website.WebsiteSSLID = 0
+		if err := deleteListenAndServerName(website, []int{443}, []string{}); err != nil {
+			return response.WebsiteHTTPS{}, err
+		}
+		if err := deleteNginxConfig(constant.NginxScopeServer, getKeysFromStaticFile(dto.SSL), &website); err != nil {
+			return response.WebsiteHTTPS{}, err
+		}
+		if err := websiteRepo.Save(ctx, &website); err != nil {
+			return response.WebsiteHTTPS{}, err
+		}
+		return res, nil
+	}
+
 	if req.Type == constant.SSLExisted {
 		websiteSSL, err = websiteSSLRepo.GetFirst(commonRepo.WithByID(req.WebsiteSSLID))
 		if err != nil {
@@ -533,16 +548,6 @@ func (w WebsiteService) OpWebsiteHTTPS(ctx context.Context, req request.WebsiteH
 		return response.WebsiteHTTPS{}, err
 	}
 	website.HttpConfig = req.HttpConfig
-	} else {
-		website.Protocol = constant.ProtocolHTTP
-		website.WebsiteSSLID = 0
-		if err := deleteListenAndServerName(website, []int{443}, []string{}); err != nil {
-			return response.WebsiteHTTPS{}, err
-		}
-		if err := deleteNginxConfig(constant.NginxScopeServer, getKeysFromStaticFile(dto.SSL), &website); err != nil {
-			return response.WebsiteHTTPS{}, err
-		}
-	}
 
 	if websiteSSL.ID == 0 {
 		if err := websiteSSLRepo.Create(ctx, &websiteSSL); err != nil {

frontend/src/lang/modules/zh.ts

@@ -925,12 +925,15 @@ export default {
         manualSSL: '手动导入证书',
         select: '选择',
         selectSSL: '选择证书',
-        privateKey: '密钥代码(pem格式)',
+        privateKey: '密钥(KEY)',
-        certificate: '密钥代码(pem格式)',
+        certificate: '证书(PEM格式)',
         HTTPConfig: 'HTTP选项',
         HTTPSOnly: '禁止HTTTP',
         HTTPToHTTPS: '访问HTTP自动跳转到HTTPS',
         HTTPAlso: 'HTTP可直接访问',
+        sslConfig: 'SSL 选项',
+        disbaleHTTTPS: '禁用 HTTPS',
+        disbaleHTTTPSHelper: '禁用 HTTPS会删除证书相关配置，是否继续',
     },
     nginx: {
         serverNamesHashBucketSizeHelper: '服务器名字的hash表大小',

frontend/src/views/website/website/config/basic/https/index.vue

@@ -9,11 +9,10 @@
                 :rules="rules"
                 :loading="loading"
             >
-                <el-form-item prop="enable">
+                <el-form-item prop="enable" :label="$t('website.enableHTTPS')">
-                    <el-checkbox v-model="form.enable">
+                    <el-switch v-model="form.enable" @change="changeEnable"></el-switch>
-                        {{ $t('website.enableHTTPS') }}
-                    </el-checkbox>
                 </el-form-item>
+                <div v-if="form.enable">
                     <el-form-item :label="$t('website.HTTPConfig')" prop="httpConfig">
                         <el-select v-model="form.httpConfig" style="width: 240px">
                             <el-option :label="$t('website.HTTPToHTTPS')" :value="'HTTPToHTTPS'"></el-option>
@@ -21,14 +20,19 @@
                             <el-option :label="$t('website.HTTPSOnly')" :value="'HTTPSOnly'"></el-option>
                         </el-select>
                     </el-form-item>
-                <el-form-item :label="$t('website.ssl')" prop="type">
+                    <el-form-item :label="$t('website.sslConfig')" prop="type">
                         <el-select v-model="form.type" @change="changeType(form.type)">
                             <el-option :label="$t('website.oldSSL')" :value="'existed'"></el-option>
                             <el-option :label="$t('website.manualSSL')" :value="'manual'"></el-option>
                             <!-- <el-option :label="'自动生成证书'" :value="'auto'"></el-option> -->
                         </el-select>
                     </el-form-item>
-                <el-form-item :label="$t('website.select')" prop="websiteSSLId" v-if="form.type === 'existed'">
+                    <el-form-item
+                        :label="$t('website.ssl')"
+                        prop="websiteSSLId"
+                        v-if="form.type === 'existed'"
+                        :hide-required-asterisk="true"
+                    >
                         <el-select
                             v-model="form.websiteSSLId"
                             :placeholder="$t('website.selectSSL')"
@@ -68,6 +72,7 @@
                             {{ $t('commons.button.save') }}
                         </el-button>
                     </el-form-item>
+                </div>
             </el-form>
         </el-col>
     </el-row>
@@ -75,7 +80,7 @@
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
 import { GetHTTPSConfig, ListSSL, UpdateHTTPSConfig } from '@/api/modules/website';
-import { ElMessage, FormInstance } from 'element-plus';
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { computed, onMounted, reactive, ref } from 'vue';
 import { dateFromat } from '@/utils/util';
 import i18n from '@/lang';
@@ -110,6 +115,7 @@ let rules = ref({
     websiteSSLId: [Rules.requiredSelect],
     httpConfig: [Rules.requiredSelect],
 });
+const resData = ref();
 
 const listSSL = () => {
     ListSSL({}).then((res) => {
@@ -134,11 +140,13 @@ const changeType = (type: string) => {
 
 const get = () => {
     GetHTTPSConfig(id.value).then((res) => {
-        console.log(res);
         if (res.data) {
+            resData.value = res.data;
             form.enable = res.data.enable;
+            if (res.data.httpConfig != '') {
                 form.httpConfig = res.data.httpConfig;
             }
+        }
         if (res.data?.SSL && res.data?.SSL.id > 0) {
             form.websiteSSLId = res.data.SSL.id;
             websiteSSL.value = res.data.SSL;
@@ -164,6 +172,33 @@ const submit = async (formEl: FormInstance | undefined) => {
     });
 };
 
+const changeEnable = (enable: boolean) => {
+    if (resData.value.enable && !enable) {
+        ElMessageBox.confirm(i18n.global.t('website.disbaleHTTTPSHelper'), i18n.global.t('website.disbaleHTTTPS'), {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'error',
+            closeOnClickModal: false,
+            beforeClose: async (action, instance, done) => {
+                if (action !== 'confirm') {
+                    form.enable = true;
+                    done();
+                } else {
+                    instance.confirmButtonLoading = true;
+                    instance.cancelButtonLoading = true;
+                    form.enable = false;
+                    form.websiteId = id.value;
+                    UpdateHTTPSConfig(form).then(() => {
+                        done();
+                        ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                        get();
+                    });
+                }
+            },
+        }).then(() => {});
+    }
+};
+
 onMounted(() => {
     get();
 });