gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-14 01:34:47 +08:00
Code

fix: 面板设置证书改为抽屉实现 (#823)

Browse Source
This commit is contained in:
ssongliu 2023-04-28 14:48:19 +08:00 committed by GitHub
parent 2c8b19bff2
commit 566a4f3568
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 263 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/init/router/router.go
View File

@ -56,7 +56,6 @@ func Routers() *gin.Engine {
Router.SetFuncMap(template.FuncMap{ Router.SetFuncMap(template.FuncMap{
"Localize": ginI18n.GetMessage, "Localize": ginI18n.GetMessage,
}) })
Router.Use(middleware.JwtAuth())
systemRouter := rou.RouterGroupApp systemRouter := rou.RouterGroupApp
@ -73,7 +72,6 @@ func Routers() *gin.Engine {
PrivateGroup := Router.Group("/api/v1") PrivateGroup := Router.Group("/api/v1")
PrivateGroup.Use(middleware.GlobalLoading()) PrivateGroup.Use(middleware.GlobalLoading())
//PrivateGroup.Use(middleware.SafetyAuth())
{ {
systemRouter.InitBaseRouter(PrivateGroup) systemRouter.InitBaseRouter(PrivateGroup)
systemRouter.InitDashboardRouter(PrivateGroup) systemRouter.InitDashboardRouter(PrivateGroup)

3
frontend/src/lang/modules/en.ts
View File

@ -901,12 +901,13 @@ const message = {
'If the https service is disabled, you need to restart the panel for it to take effect. Do you want to continue?', 'If the https service is disabled, you need to restart the panel for it to take effect. Do you want to continue?',
https: 'Setting up HTTPS protocol access for the panel can enhance the security of panel access.', https: 'Setting up HTTPS protocol access for the panel can enhance the security of panel access.',
certType: 'Certificate type',
selfSigned: 'Self signed', selfSigned: 'Self signed',
selfSignedHelper: selfSignedHelper:
'It is normal for self-signed certificates to be not trusted by browsers and display a security warning as the certificate is not issued by a trusted third party.', 'It is normal for self-signed certificates to be not trusted by browsers and display a security warning as the certificate is not issued by a trusted third party.',
import: 'Import', import: 'Import',
select: 'Select', select: 'Select',
domainOrIP: 'Domain/IP：', domainOrIP: 'Domain or IP：',
timeOut: 'Timeout', timeOut: 'Timeout',
rootCrtDownload: 'Root certificate download', rootCrtDownload: 'Root certificate download',
primaryKey: 'Primary key', primaryKey: 'Primary key',

3
frontend/src/lang/modules/zh.ts
View File

@ -937,11 +937,12 @@ const message = {
sslDisableHelper: '禁用 https 服务，需要重启面板才能生效，是否继续？', sslDisableHelper: '禁用 https 服务，需要重启面板才能生效，是否继续？',
https: '为面板设置 https 协议访问，提升面板访问安全性', https: '为面板设置 https 协议访问，提升面板访问安全性',
certType: '证书类型',
selfSigned: '自签名', selfSigned: '自签名',
selfSignedHelper: '自签证书，不被浏览器信任，显示不安全是正常现象', selfSignedHelper: '自签证书，不被浏览器信任，显示不安全是正常现象',
import: '导入', import: '导入',
select: '选择已有', select: '选择已有',
domainOrIP: '域名/IP：', domainOrIP: '域名或 IP：',
timeOut: '过期时间：', timeOut: '过期时间：',
rootCrtDownload: '根证书下载', rootCrtDownload: '根证书下载',
primaryKey: '密钥', primaryKey: '密钥',

2
frontend/src/views/setting/monitor/index.vue
View File

@ -5,7 +5,7 @@
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px"> <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
<el-row> <el-row>
<el-col :span="1"><br /></el-col> <el-col :span="1"><br /></el-col>
<el-col :span="16"> <el-col :span="12">
<el-form-item <el-form-item
:label="$t('setting.enableMonitor')" :label="$t('setting.enableMonitor')"
:rules="Rules.requiredInput" :rules="Rules.requiredInput"

2
frontend/src/views/setting/panel/index.vue
View File

@ -5,7 +5,7 @@
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px"> <el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
<el-row> <el-row>
<el-col :span="1"><br /></el-col> <el-col :span="1"><br /></el-col>
<el-col :span="16"> <el-col :span="12">
<el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName"> <el-form-item :label="$t('setting.user')" :rules="Rules.userName" prop="userName">
<el-input clearable v-model="form.userName"> <el-input clearable v-model="form.userName">
<template #append> <template #append>

2
frontend/src/views/setting/panel/password/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-drawer v-model="passwordVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="50%"> <el-drawer v-model="passwordVisiable" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
<template #header> <template #header>
<DrawerHeader :header="$t('setting.changePassword')" :back="handleClose" /> <DrawerHeader :header="$t('setting.changePassword')" :back="handleClose" />
</template> </template>

30
frontend/src/views/setting/safe/entrance/index.vue
View File

@ -5,19 +5,23 @@
<DrawerHeader :header="$t('setting.entrance')" :back="handleClose" /> <DrawerHeader :header="$t('setting.entrance')" :back="handleClose" />
</template> </template>
<el-form label-position="top" v-loading="loading"> <el-form label-position="top" v-loading="loading">
<el-form-item :label="$t('setting.entrance')" prop="days"> <el-row type="flex" justify="center">
<el-input clearable v-model="securityEntrance"> <el-col :span="22">
<template #append> <el-form-item :label="$t('setting.entrance')" prop="days">
<el-button @click="random" icon="RefreshRight"></el-button> <el-input clearable v-model="securityEntrance">
</template> <template #append>
</el-input> <el-button @click="random" icon="RefreshRight"></el-button>
<span class="input-help"> </template>
{{ $t('setting.entranceInputHelper') }} </el-input>
</span> <span class="input-help">
<span class="input-error" v-if="codeError"> {{ $t('setting.entranceInputHelper') }}
{{ $t('setting.entranceError') }} </span>
</span> <span class="input-error" v-if="codeError">
</el-form-item> {{ $t('setting.entranceError') }}
</span>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">

80
frontend/src/views/setting/safe/index.vue
View File

@ -5,7 +5,7 @@
<el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px"> <el-form :model="form" ref="panelFormRef" v-loading="loading" label-position="left" label-width="180px">
<el-row> <el-row>
<el-col :span="1"><br /></el-col> <el-col :span="1"><br /></el-col>
<el-col :span="16"> <el-col :span="12">
<el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort"> <el-form-item :label="$t('setting.panelPort')" :rules="Rules.port" prop="serverPort">
<el-input clearable v-model.number="form.serverPort"> <el-input clearable v-model.number="form.serverPort">
<template #append> <template #append>
@ -94,12 +94,17 @@
inactive-value="disable" inactive-value="disable"
/> />
<span class="input-help">{{ $t('setting.https') }}</span> <span class="input-help">{{ $t('setting.https') }}</span>
<SSLSetting <div v-if="form.ssl === 'enable' && sslInfo">
:type="form.sslType" <el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag>
:status="form.ssl" <el-tag style="margin-left: 5px">
v-if="sslShow" {{ $t('setting.timeOut') }} {{ sslInfo.timeout }}
style="width: 100%" </el-tag>
/> <div>
<el-button link type="primary" @click="handleSSL">
{{ $t('commons.button.view') }}
</el-button>
</div>
</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -108,6 +113,7 @@
</LayoutContent> </LayoutContent>
<MfaSetting ref="mfaRef" @search="search" /> <MfaSetting ref="mfaRef" @search="search" />
<SSLSetting ref="sslRef" @search="search" />
<EntranceSetting ref="entranceRef" @search="search" /> <EntranceSetting ref="entranceRef" @search="search" />
<TimeoutSetting ref="timeoutref" @search="search" /> <TimeoutSetting ref="timeoutref" @search="search" />
</div> </div>
@ -121,16 +127,27 @@ import SSLSetting from '@/views/setting/safe/ssl/index.vue';
import MfaSetting from '@/views/setting/safe/mfa/index.vue'; import MfaSetting from '@/views/setting/safe/mfa/index.vue';
import TimeoutSetting from '@/views/setting/safe/timeout/index.vue'; import TimeoutSetting from '@/views/setting/safe/timeout/index.vue';
import EntranceSetting from '@/views/setting/safe/entrance/index.vue'; import EntranceSetting from '@/views/setting/safe/entrance/index.vue';
import { updateSetting, getSettingInfo, updatePort, getSystemAvailable, updateSSL } from '@/api/modules/setting'; import {
updateSetting,
getSettingInfo,
updatePort,
getSystemAvailable,
updateSSL,
loadSSLInfo,
} from '@/api/modules/setting';
import i18n from '@/lang'; import i18n from '@/lang';
import { Rules } from '@/global/form-rules'; import { Rules } from '@/global/form-rules';
import { MsgSuccess } from '@/utils/message'; import { MsgSuccess } from '@/utils/message';
import { Setting } from '@/api/interface/setting';
const loading = ref(false); const loading = ref(false);
const entranceRef = ref(); const entranceRef = ref();
const timeoutref = ref(); const timeoutref = ref();
const mfaRef = ref(); const mfaRef = ref();
const sslRef = ref();
const sslInfo = ref<Setting.SSLInfo>();
const form = reactive({ const form = reactive({
serverPort: 9999, serverPort: 9999,
ssl: 'disable', ssl: 'disable',
@ -143,19 +160,15 @@ const form = reactive({
}); });
type FormInstance = InstanceType<typeof ElForm>; type FormInstance = InstanceType<typeof ElForm>;
const sslShow = ref();
const oldSSLStatus = ref();
const unset = ref(i18n.global.t('setting.unSetting')); const unset = ref(i18n.global.t('setting.unSetting'));
const search = async () => { const search = async () => {
const res = await getSettingInfo(); const res = await getSettingInfo();
form.serverPort = Number(res.data.serverPort); form.serverPort = Number(res.data.serverPort);
form.ssl = res.data.ssl; form.ssl = res.data.ssl;
oldSSLStatus.value = res.data.ssl;
form.sslType = res.data.sslType; form.sslType = res.data.sslType;
if (form.ssl === 'enable') { if (form.ssl === 'enable') {
sslShow.value = true; loadInfo();
} }
form.securityEntrance = res.data.securityEntrance; form.securityEntrance = res.data.securityEntrance;
form.expirationDays = Number(res.data.expirationDays); form.expirationDays = Number(res.data.expirationDays);
@ -227,31 +240,31 @@ const onSavePort = async (formEl: FormInstance | undefined, key: string, val: an
const handleMFA = async () => { const handleMFA = async () => {
if (form.mfaStatus === 'enable') { if (form.mfaStatus === 'enable') {
mfaRef.value.acceptParams(); mfaRef.value.acceptParams();
} else { return;
loading.value = true;
await updateSetting({ key: 'MFAStatus', value: 'disable' })
.then(() => {
loading.value = false;
search();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
})
.catch(() => {
loading.value = false;
});
} }
loading.value = true;
await updateSetting({ key: 'MFAStatus', value: 'disable' })
.then(() => {
loading.value = false;
search();
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
})
.catch(() => {
loading.value = false;
});
}; };
const onChangeEntrance = async () => { const onChangeEntrance = async () => {
entranceRef.value.acceptParams({ securityEntrance: form.securityEntrance }); entranceRef.value.acceptParams({ securityEntrance: form.securityEntrance });
}; };
const handleSSL = async () => { const handleSSL = async () => {
if (form.ssl === 'enable') { if (form.ssl === 'enable') {
sslShow.value = true; let params = {
return; ssl: form.ssl,
} sslType: form.sslType,
if (form.ssl === oldSSLStatus.value) { sslInfo: sslInfo.value,
sslShow.value = false; };
sslRef.value!.acceptParams(params);
return; return;
} }
ElMessageBox.confirm(i18n.global.t('setting.sslDisableHelper'), i18n.global.t('setting.sslDisable'), { ElMessageBox.confirm(i18n.global.t('setting.sslDisableHelper'), i18n.global.t('setting.sslDisable'), {
@ -260,7 +273,6 @@ const handleSSL = async () => {
type: 'info', type: 'info',
}) })
.then(async () => { .then(async () => {
sslShow.value = false;
await updateSSL({ ssl: 'disable', domain: '', sslType: '', key: '', cert: '', sslID: 0 }); await updateSSL({ ssl: 'disable', domain: '', sslType: '', key: '', cert: '', sslID: 0 });
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
let href = window.location.href; let href = window.location.href;
@ -272,6 +284,12 @@ const handleSSL = async () => {
}); });
}; };
const loadInfo = async () => {
await loadSSLInfo().then(async (res) => {
sslInfo.value = res.data;
});
};
const onChangeExpirationTime = async () => { const onChangeExpirationTime = async () => {
timeoutref.value.acceptParams({ expirationDays: form.expirationDays }); timeoutref.value.acceptParams({ expirationDays: form.expirationDays });
}; };

70
frontend/src/views/setting/safe/mfa/index.vue
View File

@ -11,40 +11,44 @@
<DrawerHeader :header="$t('setting.mfa')" :back="handleClose" /> <DrawerHeader :header="$t('setting.mfa')" :back="handleClose" />
</template> </template>
<el-form :model="form" ref="formRef" v-loading="loading" label-position="top"> <el-form :model="form" ref="formRef" v-loading="loading" label-position="top">
<el-form-item :label="$t('setting.mfaHelper1')"> <el-row type="flex" justify="center">
<ul> <el-col :span="22">
<li>Google Authenticator</li> <el-form-item :label="$t('setting.mfaHelper1')">
<li>Microsoft Authenticator</li> <ul>
<li>1Password</li> <li>Google Authenticator</li>
<li>LastPass</li> <li>Microsoft Authenticator</li>
<li>Authenticator</li> <li>1Password</li>
</ul> <li>LastPass</li>
</el-form-item> <li>Authenticator</li>
<el-form-item :label="$t('setting.mfaTypeOption')"> </ul>
<el-radio-group v-model="mode" @change="form.secret = ''"> </el-form-item>
<el-radio label="scan">{{ $t('setting.qrCode') }}</el-radio> <el-form-item :label="$t('setting.mfaTypeOption')">
<el-radio label="input">{{ $t('setting.manualInput') }}</el-radio> <el-radio-group v-model="mode" @change="form.secret = ''">
</el-radio-group> <el-radio label="scan">{{ $t('setting.qrCode') }}</el-radio>
</el-form-item> <el-radio label="input">{{ $t('setting.manualInput') }}</el-radio>
<el-form-item :label="$t('setting.mfaHelper2')" v-if="mode === 'scan'"> </el-radio-group>
<el-image style="width: 120px; height: 120px" :src="qrImage" /> </el-form-item>
</el-form-item> <el-form-item :label="$t('setting.mfaHelper2')" v-if="mode === 'scan'">
<el-form-item <el-image style="width: 120px; height: 120px" :src="qrImage" />
:label="$t('setting.mfaSecret')" </el-form-item>
v-if="mode === 'input'" <el-form-item
prop="secret" :label="$t('setting.mfaSecret')"
:rules="Rules.requiredInput" v-if="mode === 'input'"
> prop="secret"
<el-input v-model="form.secret"></el-input> :rules="Rules.requiredInput"
</el-form-item> >
<el-input v-model="form.secret"></el-input>
</el-form-item>
<el-form-item <el-form-item
:label="mode === 'scan' ? $t('setting.mfaHelper3') : $t('setting.mfaCode')" :label="mode === 'scan' ? $t('setting.mfaHelper3') : $t('setting.mfaCode')"
prop="code" prop="code"
:rules="Rules.requiredInput" :rules="Rules.requiredInput"
> >
<el-input v-model="form.code"></el-input> <el-input v-model="form.code"></el-input>
</el-form-item> </el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">

250
frontend/src/views/setting/safe/ssl/index.vue
View File

@ -1,94 +1,120 @@
<template> <template>
<div> <div>
<el-card> <el-drawer
<el-form ref="formRef" label-position="top" :model="form" :rules="rules"> v-model="drawerVisiable"
<el-radio-group v-model="sslItemType"> :destroy-on-close="true"
<el-radio label="self">{{ $t('setting.selfSigned') }}</el-radio> @close="handleClose"
<el-radio label="select">{{ $t('setting.select') }}</el-radio> :close-on-click-modal="false"
<el-radio label="import">{{ $t('setting.import') }}</el-radio> size="50%"
</el-radio-group> >
<span class="input-help" v-if="sslItemType === 'self'">{{ $t('setting.selfSignedHelper') }}</span> <template #header>
<div v-if="sslInfo.timeout"> <DrawerHeader header="https" :back="handleClose" />
<el-tag>{{ $t('setting.domainOrIP') }} {{ sslInfo.domain }}</el-tag> </template>
<el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ sslInfo.timeout }}</el-tag> <el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
<el-button <el-row type="flex" justify="center">
@click="onDownload" <el-col :span="22">
style="margin-left: 5px" <el-form-item :label="$t('setting.certType')">
v-if="sslItemType === 'self'" <el-radio-group v-model="form.sslType">
type="primary" <el-radio label="self">{{ $t('setting.selfSigned') }}</el-radio>
link <el-radio label="select">{{ $t('setting.select') }}</el-radio>
icon="Download" <el-radio label="import">{{ $t('setting.import') }}</el-radio>
> </el-radio-group>
{{ $t('setting.rootCrtDownload') }} <span class="input-help" v-if="form.sslType === 'self'">
</el-button> {{ $t('setting.selfSignedHelper') }}
</div> </span>
</el-form-item>
<div v-if="sslItemType === 'import'"> <el-form-item v-if="form.timeout">
<el-form-item :label="$t('setting.primaryKey')" prop="key"> <el-tag>{{ $t('setting.domainOrIP') }} {{ form.domain }}</el-tag>
<el-input v-model="form.key" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" /> <el-tag style="margin-left: 5px">{{ $t('setting.timeOut') }} {{ form.timeout }}</el-tag>
</el-form-item> <el-button
<el-form-item class="margintop" :label="$t('setting.certificate')" prop="cert"> @click="onDownload"
<el-input v-model="form.cert" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea" /> style="margin-left: 5px"
</el-form-item> v-if="form.sslType === 'self'"
</div> type="primary"
link
icon="Download"
>
{{ $t('setting.rootCrtDownload') }}
</el-button>
</el-form-item>
<div v-if="sslItemType === 'select'"> <div v-if="form.sslType === 'import'">
<el-form-item :label="$t('setting.certificate')" prop="sslID"> <el-form-item :label="$t('setting.primaryKey')" prop="key">
<el-select v-model="form.sslID" @change="changeSSl(form.sslID)"> <el-input v-model="form.key" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" />
<el-option </el-form-item>
v-for="(item, index) in sslList" <el-form-item class="margintop" :label="$t('setting.certificate')" prop="cert">
:key="index" <el-input v-model="form.cert" :autosize="{ minRows: 5, maxRows: 10 }" type="textarea" />
:label="item.primaryDomain" </el-form-item>
:value="item.id" </div>
></el-option>
</el-select> <div v-if="form.sslType === 'select'">
</el-form-item> <el-form-item :label="$t('setting.certificate')" prop="sslID">
<el-descriptions <el-select v-model="form.sslID" @change="changeSSl(form.sslID)">
class="margintop" <el-option
:column="5" v-for="(item, index) in sslList"
border :key="index"
direction="vertical" :label="item.primaryDomain"
v-if="form.sslID > 0 && itemSSL" :value="item.id"
> ></el-option>
<el-descriptions-item :label="$t('website.primaryDomain')"> </el-select>
{{ itemSSL.primaryDomain }} </el-form-item>
</el-descriptions-item> <el-descriptions
<el-descriptions-item :label="$t('website.otherDomains')"> class="margintop"
{{ itemSSL.domains }} :column="5"
</el-descriptions-item> border
<el-descriptions-item :label="$t('ssl.provider')"> direction="vertical"
{{ getProvider(itemSSL.provider) }} v-if="form.sslID > 0 && itemSSL"
</el-descriptions-item> >
<el-descriptions-item <el-descriptions-item :label="$t('website.primaryDomain')">
:label="$t('ssl.acmeAccount')" {{ itemSSL.primaryDomain }}
v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'" </el-descriptions-item>
> <el-descriptions-item :label="$t('website.otherDomains')">
{{ itemSSL.acmeAccount.email }} {{ itemSSL.domains }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="$t('website.expireDate')"> <el-descriptions-item :label="$t('ssl.provider')">
{{ dateFormatSimple(itemSSL.expireDate) }} {{ getProvider(itemSSL.provider) }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> <el-descriptions-item
</div> :label="$t('ssl.acmeAccount')"
<el-button style="margin-top: 20px" type="primary" @click="onSaveSSL(formRef)"> v-if="itemSSL.acmeAccount?.email && itemSSL.provider !== 'manual'"
{{ $t('commons.button.saveAndEnable') }} >
</el-button> {{ itemSSL.acmeAccount.email }}
</el-descriptions-item>
<el-descriptions-item :label="$t('website.expireDate')">
{{ dateFormatSimple(itemSSL.expireDate) }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-col>
</el-row>
</el-form> </el-form>
</el-card> <template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisiable = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSaveSSL(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Website } from '@/api/interface/website'; import { Website } from '@/api/interface/website';
import { loadSSLInfo } from '@/api/modules/setting';
import { dateFormatSimple, getProvider } from '@/utils/util'; import { dateFormatSimple, getProvider } from '@/utils/util';
import { ListSSL } from '@/api/modules/website'; import { ListSSL } from '@/api/modules/website';
import { nextTick, onMounted, reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import i18n from '@/lang'; import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message'; import { MsgSuccess } from '@/utils/message';
import { updateSSL } from '@/api/modules/setting'; import { updateSSL } from '@/api/modules/setting';
import { DownloadByPath } from '@/api/modules/files'; import { DownloadByPath } from '@/api/modules/files';
import { Rules } from '@/global/form-rules'; import { Rules } from '@/global/form-rules';
import { FormInstance } from 'element-plus'; import { FormInstance } from 'element-plus';
import { Setting } from '@/api/interface/setting';
const loading = ref();
const drawerVisiable = ref();
const form = reactive({ const form = reactive({
ssl: 'enable', ssl: 'enable',
@ -98,6 +124,7 @@ const form = reactive({
cert: '', cert: '',
key: '', key: '',
rootPath: '', rootPath: '',
timeout: '',
}); });
const rules = reactive({ const rules = reactive({
@ -108,36 +135,32 @@ const rules = reactive({
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const props = defineProps({
type: {
type: String,
default: 'self',
},
});
const sslInfo = reactive({
domain: '',
timeout: '',
});
const sslList = ref(); const sslList = ref();
const itemSSL = ref(); const itemSSL = ref();
const sslItemType = ref('self');
const loadInfo = async () => { interface DialogProps {
await loadSSLInfo().then(async (res) => { sslType: string;
sslInfo.domain = res.data.domain || ''; sslInfo?: Setting.SSLInfo;
sslInfo.timeout = res.data.timeout || ''; }
form.cert = res.data.cert; const acceptParams = async (params: DialogProps): Promise<void> => {
form.key = res.data.key; form.sslType = params.sslType;
form.rootPath = res.data.rootPath; form.cert = params.sslInfo?.cert || '';
if (res.data.sslID) { form.key = params.sslInfo?.key || '';
form.sslID = res.data.sslID; form.rootPath = params.sslInfo?.rootPath || '';
const ssls = await ListSSL({}); form.domain = params.sslInfo?.domain || '';
sslList.value = ssls.data || []; form.timeout = params.sslInfo?.timeout || '';
changeSSl(form.sslID);
} if (params.sslInfo?.sslID) {
}); form.sslID = params.sslInfo.sslID;
const ssls = await ListSSL({});
sslList.value = ssls.data || [];
changeSSl(params.sslInfo?.sslID);
} else {
loadSSLs();
}
drawerVisiable.value = true;
}; };
const emit = defineEmits<{ (e: 'search'): void }>();
const loadSSLs = async () => { const loadSSLs = async () => {
const res = await ListSSL({}); const res = await ListSSL({});
@ -163,13 +186,21 @@ const onDownload = async () => {
}; };
const onSaveSSL = async (formEl: FormInstance | undefined) => { const onSaveSSL = async (formEl: FormInstance | undefined) => {
onDownload();
if (!formEl) return; if (!formEl) return;
formEl.validate(async (valid) => { formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;
form.sslType = sslItemType.value; let param = {
ssl: 'enable',
sslType: form.sslType,
domain: '',
sslID: form.sslID,
cert: form.cert,
key: form.key,
};
let href = window.location.href; let href = window.location.href;
form.domain = href.split('//')[1].split(':')[0]; param.domain = href.split('//')[1].split(':')[0];
await updateSSL(form).then(() => { await updateSSL(param).then(() => {
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
let href = window.location.href; let href = window.location.href;
let address = href.split('://')[1]; let address = href.split('://')[1];
@ -178,12 +209,13 @@ const onSaveSSL = async (formEl: FormInstance | undefined) => {
}); });
}; };
onMounted(() => { const handleClose = () => {
nextTick(() => { emit('search');
sslItemType.value = props.type; drawerVisiable.value = false;
loadInfo(); };
});
loadSSLs(); defineExpose({
acceptParams,
}); });
</script> </script>

16
frontend/src/views/setting/safe/timeout/index.vue
View File

@ -5,10 +5,18 @@
<DrawerHeader :header="$t('setting.expirationTime')" :back="handleClose" /> <DrawerHeader :header="$t('setting.expirationTime')" :back="handleClose" />
</template> </template>
<el-form ref="timeoutFormRef" label-position="top" :model="form"> <el-form ref="timeoutFormRef" label-position="top" :model="form">
<el-form-item :label="$t('setting.days')" prop="days" :rules="[Rules.number, checkNumberRange(0, 60)]"> <el-row type="flex" justify="center">
<el-input clearable v-model.number="form.days" /> <el-col :span="22">
<span class="input-help">{{ $t('setting.expirationHelper') }}</span> <el-form-item
</el-form-item> :label="$t('setting.days')"
prop="days"
:rules="[Rules.number, checkNumberRange(0, 60)]"
>
<el-input clearable v-model.number="form.days" />
<span class="input-help">{{ $t('setting.expirationHelper') }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">