lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-04-15 13:32:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 支持短信验证码登录

Browse Source
This commit is contained in:
xiaojunnuo
2024-11-28 17:36:45 +08:00
parent 5a20242111
commit 387bcc5fa4
28 changed files with 950 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/certd-client/src/api/modules/api.basic.ts
View File

@@ -25,6 +25,12 @@ export type PlusInfo = {
};
export type SysPublicSetting = {
registerEnabled?: boolean;
usernameRegisterEnabled?: boolean;
mobileRegisterEnabled?: boolean;
emailRegisterEnabled?: boolean;
passwordLoginEnabled?: boolean;
smsLoginEnabled?: boolean;
limitUserPipelineCount?: number;
managerOtherUserPipeline?: boolean;
icpNo?: string;
@@ -35,6 +41,10 @@ export type SysPrivateSetting = {
httpsProxy?: string;
dnsResultOrder?: string;
commonCnameEnabled?: boolean;
sms?: {
type?: string;
config?: any;
};
};
export type SysInstallInfo = {
siteId: string;
@@ -73,3 +83,19 @@ export async function bindUrl(data: any): Promise<any> {
data
});
}
export async function sendSmsCode(data: any): Promise<any> {
return await request({
url: "/basic/code/sendSmsCode",
method: "post",
data
});
}
export async function sendEmailCode(data: any): Promise<any> {
return await request({
url: "/basic/code/sendEmailCode",
method: "post",
data
});
}

16
packages/ui/certd-client/src/api/modules/api.user.ts
View File

@@ -14,6 +14,13 @@ export interface LoginReq {
password: string;
}
export interface SmsLoginReq {
mobile: string;
phoneCode: string;
smsCode: string;
randomStr: string;
}
export interface UserInfoRes {
id: string | number;
username: string;
@@ -52,6 +59,15 @@ export async function login(data: LoginReq): Promise<LoginRes> {
});
}
export async function loginBySms(data: SmsLoginReq): Promise<LoginRes> {
//如果开启了登录与权限模块，则真实登录
return await request({
url: "/loginBySms",
method: "post",
data
});
}
export async function mine(): Promise<UserInfoRes> {
if (env.PM_ENABLED === "false") {
//没有开启权限模块，模拟登录

15
packages/ui/certd-client/src/store/modules/user.ts
View File

@@ -4,7 +4,7 @@ import router from "../../router";
import { LocalStorage } from "/src/utils/util.storage";
// @ts-ignore
import * as UserApi from "/src/api/modules/api.user";
import { RegisterReq } from "/src/api/modules/api.user";
import { RegisterReq, SmsLoginReq } from "/src/api/modules/api.user";
// @ts-ignore
import { LoginReq, UserInfoRes } from "/@/api/modules/api.user";
import { message, Modal, notification } from "ant-design-vue";
@@ -63,15 +63,20 @@ export const useUserStore = defineStore({
/**
* @description: login
*/
async login(params: LoginReq): Promise<any> {
async login(loginType: string, params: LoginReq | SmsLoginReq): Promise<any> {
try {
const data = await UserApi.login(params);
const { token, expire } = data;
let loginRes: any = null;
if (loginType === "sms") {
loginRes = await UserApi.loginBySms(params as SmsLoginReq);
} else {
loginRes = await UserApi.login(params as LoginReq);
}
const { token, expire } = loginRes;
// save token
this.setToken(token, expire);
// get user info
return await this.onLoginSuccess(data);
return await this.onLoginSuccess(loginRes);
} catch (error) {
return null;
}

3
packages/ui/certd-client/src/style/common.less
View File

@@ -246,7 +246,8 @@ h1, h2, h3, h4, h5, h6 {
.helper {
color: #aeaeae;
font-size: 12px;
margin-top:3px;
margin-bottom:3px;
&.error{
color: #ff4d4f;
}

171
packages/ui/certd-client/src/views/framework/login/index.vue
View File

@@ -5,71 +5,68 @@
class="user-layout-login"
name="custom-validation"
:model="formState"
:rules="rules"
v-bind="layout"
@finish="handleFinish"
@finish-failed="handleFinishFailed"
>
<!-- <div class="login-title">登录</div>-->
<a-tabs :active-key="formState.loginType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
<a-tab-pane key="password" tab="用户名密码登录">
<a-alert v-if="isLoginError" type="error" show-icon style="margin-bottom: 24px" message="用户名或密码错误" />
<!-- <div class="login-title">登录</div>-->
<a-form-item required has-feedback name="username">
<a-input v-model:value="formState.username" placeholder="请输入用户名" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:phone-portrait-outline" data-inline="false"></span>
</template>
</a-input>
</a-form-item>
<a-form-item has-feedback name="password">
<a-input-password v-model:value="formState.password" placeholder="请输入密码" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:lock-closed-outline" data-inline="false"></span>
</template>
</a-input-password>
</a-form-item>
<a-tabs v-model:active-key="formState.loginType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
<a-tab-pane key="password" tab="密码登录" :disabled="sysPublicSettings.passwordLoginEnabled !== true">
<template v-if="formState.loginType === 'password'">
<!-- <div class="login-title">登录</div>-->
<a-form-item required has-feedback name="username" :rules="rules.username">
<a-input v-model:value="formState.username" placeholder="请输入用户名/邮箱/手机号" autocomplete="off">
<template #prefix>
<fs-icon icon="ion:phone-portrait-outline"></fs-icon>
</template>
</a-input>
</a-form-item>
<a-form-item has-feedback name="password" :rules="rules.password">
<a-input-password v-model:value="formState.password" placeholder="请输入密码" autocomplete="off">
<template #prefix>
<fs-icon icon="ion:lock-closed-outline"></fs-icon>
</template>
</a-input-password>
</a-form-item>
</template>
</a-tab-pane>
<a-tab-pane key="smsCode" tab="短信验证码登录" :disabled="true" title="暂不支持">
<a-form-item required has-feedback name="mobile">
<a-input v-model:value="formState.mobile" placeholder="请输入手机号" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:phone-portrait-outline" data-inline="false"></span>
</template>
</a-input>
</a-form-item>
<a-form-item has-feedback name="imgCode">
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-input v-model:value="formState.imgCode" placeholder="请输入图片验证码" size="large" autocomplete="off">
<a-tab-pane key="sms" tab="短信验证码登录" :disabled="sysPublicSettings.smsLoginEnabled !== true">
<template v-if="formState.loginType === 'sms'">
<a-form-item has-feedback name="mobile" :rules="rules.mobile">
<a-input v-model:value="formState.mobile" placeholder="请输入手机号" autocomplete="off">
<template #prefix>
<fs-icon icon="ion:phone-portrait-outline"></fs-icon>
</template>
</a-input>
</a-form-item>
<a-form-item has-feedback name="imgCode">
<div class="flex">
<a-input v-model:value="formState.imgCode" placeholder="请输入图片验证码" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:image-outline" data-inline="false"></span>
<fs-icon icon="ion:image-outline"></fs-icon>
</template>
</a-input>
</a-col>
<a-col class="gutter-row" :span="8">
<img class="image-code" :src="imageCodeUrl" @click="resetImageCode" />
</a-col>
</a-row>
</a-form-item>
<div class="input-right">
<img class="image-code" :src="imageCodeUrl" @click="resetImageCode" />
</div>
</div>
</a-form-item>
<a-form-item name="smsCode">
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-input v-model:value="formState.smsCode" size="large" placeholder="短信验证码">
<a-form-item name="smsCode" :rules="rules.smsCode">
<div class="flex">
<a-input v-model:value="formState.smsCode" placeholder="短信验证码">
<template #prefix>
<span class="iconify" data-icon="ion:mail-outline" data-inline="false"></span>
<fs-icon icon="ion:mail-outline"></fs-icon>
</template>
</a-input>
</a-col>
<a-col class="gutter-row" :span="8">
<a-button class="getCaptcha" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
{{ smsTime <= 0 ? "发送" : smsTime + " s" }}
</a-button>
</a-col>
</a-row>
</a-form-item>
<div class="input-right">
<a-button class="getCaptcha" type="primary" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
{{ smsTime <= 0 ? "发送" : smsTime + " s" }}
</a-button>
</div>
</div>
</a-form-item>
</template>
</a-tab-pane>
</a-tabs>
<a-form-item>
@@ -87,6 +84,9 @@ import { defineComponent, reactive, ref, toRaw, computed } from "vue";
import { useUserStore } from "/src/store/modules/user";
import { useSettingStore } from "/@/store/modules/settings";
import { utils } from "@fast-crud/fast-crud";
import * as api from "/src/api/modules/api.basic";
import { nanoid } from "nanoid";
import { notification } from "ant-design-vue";
export default defineComponent({
name: "LoginPage",
setup() {
@@ -96,39 +96,37 @@ export default defineComponent({
const formRef = ref();
const formState = reactive({
username: "",
phoneCode: "86",
mobile: "",
password: "",
loginType: "password", //password
imgCode: "",
smsCode: ""
smsCode: "",
randomStr: ""
});
const rules = {
mobile: [
{
required: true,
trigger: "change",
message: "请输入登录手机号"
message: "请输入手机号"
}
],
username: [
{
required: true,
trigger: "change",
message: "请输入用户名"
}
],
password: [
{
required: true,
trigger: "change",
message: "请输入登录密码"
}
],
smsCode: [
{
required: true,
trigger: "change",
message: "请输入短信验证码"
}
]
@@ -146,7 +144,8 @@ export default defineComponent({
utils.logger.log(values, formState);
loading.value = true;
try {
const userInfo = await userStore.login(toRaw(formState));
const loginType = formState.loginType;
await userStore.login(loginType, toRaw(formState));
} finally {
loading.value = false;
}
@@ -164,8 +163,9 @@ export default defineComponent({
const imageCodeUrl = ref();
function resetImageCode() {
let url = "/basic/code";
imageCodeUrl.value = url + "?t=" + new Date().getTime();
formState.randomStr = nanoid(10);
let url = "/api/basic/code/captcha";
imageCodeUrl.value = url + "?randomStr=" + formState.randomStr;
}
resetImageCode();
@@ -176,8 +176,25 @@ export default defineComponent({
}
return !!formState.smsCode;
});
function sendSmsCode() {
//api.sendSmsCode();
async function sendSmsCode() {
if (!formState.mobile) {
notification.error({ message: "请输入手机号" });
return;
}
if (!formState.imgCode) {
notification.error({ message: "请输入图片验证码" });
return;
}
await api.sendSmsCode({
phoneCode: formState.phoneCode,
mobile: formState.mobile,
imgCode: formState.imgCode,
randomStr: formState.randomStr
});
smsTime.value = 60;
setInterval(() => {
smsTime.value--;
}, 1000);
}
const sysPublicSettings = settingStore.getSysPublic;
return {
@@ -207,9 +224,9 @@ export default defineComponent({
//margin: 20px !important;
margin-bottom: 100px;
.user-layout-login {
label {
font-size: 14px;
}
//label {
// font-size: 14px;
//}
.login-title {
color: @primary-color;
@@ -220,9 +237,15 @@ export default defineComponent({
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
.image-code {
height: 34px;
}
.input-right {
width: 160px;
margin-left: 10px;
}
.forge-password {
font-size: 14px;
}
@@ -230,7 +253,6 @@ export default defineComponent({
button.login-button {
padding: 0 15px;
font-size: 16px;
height: 40px;
width: 100%;
}
@@ -238,7 +260,7 @@ export default defineComponent({
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
line-height: 22px;
//line-height: 22px;
.item-icon {
font-size: 24px;
@@ -257,8 +279,17 @@ export default defineComponent({
float: right;
}
}
.iconify {
.fs-icon {
color: rgba(0, 0, 0, 0.45);
margin-right: 4px;
}
.ant-input-affix-wrapper {
line-height: 1.8 !important;
font-size: 14px !important;
> * {
line-height: 1.8 !important;
font-size: 14px !important;
}
}
}
}

89
packages/ui/certd-client/src/views/framework/register/index.vue
View File

@@ -11,16 +11,63 @@
@finish="handleFinish"
@finish-failed="handleFinishFailed"
>
<a-tabs :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
<a-tab-pane key="register" tab="用户注册"> </a-tab-pane>
</a-tabs>
<a-form-item required has-feedback name="username" label="用户名">
<a-input v-model:value="formState.username" placeholder="用户名" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:person" data-inline="false"></span>
<a-tabs v-model:value="registerType" :tab-bar-style="{ textAlign: 'center', borderBottom: 'unset' }">
<a-tab-pane key="username" tab="用户名注册">
<template v-if="registerType === 'username'">
<a-form-item required has-feedback name="username" label="用户名">
<a-input v-model:value="formState.username" placeholder="用户名" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:person" data-inline="false"></span>
</template>
</a-input>
</a-form-item>
</template>
</a-input>
</a-form-item>
</a-tab-pane>
<a-tab-pane key="email" tab="邮箱注册">
<template v-if="registerType === 'email'">
<a-form-item required has-feedback name="email" label="邮箱">
<a-input v-model:value="formState.email" placeholder="邮箱" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:person" data-inline="false"></span>
</template>
</a-input>
</a-form-item>
<a-form-item has-feedback name="imgCode">
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-input v-model:value="formState.imgCode" placeholder="请输入图片验证码" size="large" autocomplete="off">
<template #prefix>
<span class="iconify" data-icon="ion:image-outline" data-inline="false"></span>
</template>
</a-input>
</a-col>
<a-col class="gutter-row" :span="8">
<img class="image-code" :src="imageCodeUrl" @click="resetImageCode" />
</a-col>
</a-row>
</a-form-item>
<a-form-item name="smsCode">
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-input v-model:value="formState.validateCode" size="large" placeholder="邮箱验证码">
<template #prefix>
<span class="iconify" data-icon="ion:mail-outline" data-inline="false"></span>
</template>
</a-input>
</a-col>
<a-col class="gutter-row" :span="8">
<a-button class="getCaptcha" tabindex="-1" :disabled="smsSendBtnDisabled" @click="sendSmsCode">
{{ smsTime <= 0 ? "发送" : smsTime + " s" }}
</a-button>
</a-col>
</a-row>
</a-form-item>
</template>
</a-tab-pane>
</a-tabs>
<a-form-item has-feedback name="password" label="密码">
<a-input-password v-model:value="formState.password" placeholder="密码" size="large" autocomplete="off">
<template #prefix>
@@ -35,7 +82,6 @@
</template>
</a-input-password>
</a-form-item>
<a-form-item>
<a-button type="primary" size="large" html-type="submit" class="login-button">注册</a-button>
</a-form-item>
@@ -53,9 +99,13 @@ import { utils } from "@fast-crud/fast-crud";
export default defineComponent({
name: "RegisterPage",
setup() {
const registerType = ref("email");
const userStore = useUserStore();
const formRef = ref();
const formState: any = reactive({
mobile: "",
phoneCode: "",
email: "",
username: "",
password: "",
confirmPassword: ""
@@ -69,6 +119,13 @@ export default defineComponent({
message: "请输入用户名"
}
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱"
}
],
password: [
{
required: true,
@@ -110,14 +167,24 @@ export default defineComponent({
formRef.value.resetFields();
};
const imageCodeUrl = ref();
function resetImageCode() {
let url = "/basic/code";
imageCodeUrl.value = url + "?t=" + new Date().getTime();
}
resetImageCode();
return {
resetImageCode,
imageCodeUrl,
formState,
formRef,
rules,
layout,
handleFinishFailed,
handleFinish,
resetForm
resetForm,
registerType
};
}
});

178
packages/ui/certd-client/src/views/sys/settings/index.vue
View File

@@ -1,162 +1,29 @@
<template>
<fs-page class="page-sys-settings">
<template #header>
<div class="title">系统设置</div>
</template>
<div class="sys-settings-form settings-form">
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finish-failed="onFinishFailed"
>
<a-form-item label="开启自助注册" :name="['public', 'registerEnabled']">
<a-switch v-model:checked="formState.public.registerEnabled" />
</a-form-item>
<a-form-item label="限制用户流水线数量" :name="['public', 'limitUserPipelineCount']">
<a-input-number v-model:value="formState.public.limitUserPipelineCount" />
<div class="helper">0为不限制</div>
</a-form-item>
<a-form-item label="管理其他用户流水线" :name="['public', 'managerOtherUserPipeline']">
<a-switch v-model:checked="formState.public.managerOtherUserPipeline" />
</a-form-item>
<a-form-item label="ICP备案号" :name="['public', 'icpNo']">
<a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
</a-form-item>
<a-form-item label="HTTP代理" :name="['private', 'httpProxy']" :rules="urlRules">
<a-input v-model:value="formState.private.httpProxy" placeholder="http://192.168.1.2:18010/" />
<div class="helper">当某些网站被墙时可以配置</div>
</a-form-item>
<a-form-item label="HTTPS代理" :name="['private', 'httpsProxy']" :rules="urlRules">
<div class="flex">
<a-input v-model:value="formState.private.httpsProxy" placeholder="http://192.168.1.2:18010/" />
<a-button class="ml-5" type="primary" :loading="testProxyLoading" title="保存后，再点击测试" @click="testProxy">测试</a-button>
</div>
<div class="helper">一般这两个代理填一样的，保存后再测试</div>
</a-form-item>
<a-form-item label="双栈网络" :name="['private', 'dnsResultOrder']">
<a-select v-model:value="formState.private.dnsResultOrder">
<a-select-option value="verbatim">默认</a-select-option>
<a-select-option value="ipv4first">IPV4优先</a-select-option>
<a-select-option value="ipv6first">IPV6优先</a-select-option>
</a-select>
<div class="helper">如果选择IPv6优先，需要在docker-compose.yaml中启用ipv6</div>
</a-form-item>
<a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
<a-switch v-model:checked="formState.private.commonCnameEnabled" />
<div class="helper">
是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>
<!-- <template #header>-->
<!-- <div class="title">系统设置</div>-->
<!-- </template>-->
<div class="sys-settings-body">
<a-tabs type="card" class="sys-settings-tabs">
<a-tab-pane key="site" tab="基本设置">
<SettingBase />
</a-tab-pane>
<a-tab-pane key="register" tab="注册设置">
<SettingRegister />
</a-tab-pane>
</a-tabs>
</div>
</fs-page>
</template>
<script setup lang="tsx">
import { reactive, ref } from "vue";
import * as api from "./api";
import { SysSettings } from "./api";
import { notification } from "ant-design-vue";
import { useSettingStore } from "/@/store/modules/settings";
import { merge } from "lodash-es";
import { util } from "/@/utils";
import NotificationSelector from "/src/views/certd/notification/notification-selector/index.vue";
import SettingBase from "/@/views/sys/settings/tabs/base.vue";
import SettingRegister from "/@/views/sys/settings/tabs/register.vue";
defineOptions({
name: "SysSettings"
});
const formState = reactive<Partial<SysSettings>>({
public: {
registerEnabled: false,
limitUserPipelineCount: 0,
managerOtherUserPipeline: false,
icpNo: ""
},
private: {}
});
const urlRules = ref({
type: "url",
message: "请输入正确的URL"
});
async function loadSysSettings() {
const data: any = await api.SysSettingsGet();
merge(formState, data);
}
const saveLoading = ref(false);
loadSysSettings();
const settingsStore = useSettingStore();
const onFinish = async (form: any) => {
try {
saveLoading.value = true;
await api.SysSettingsSave(form);
await settingsStore.loadSysSettings();
notification.success({
message: "保存成功"
});
} finally {
saveLoading.value = false;
}
};
const onFinishFailed = (errorInfo: any) => {
// console.log("Failed:", errorInfo);
};
async function stopOtherUserTimer() {
await api.stopOtherUserTimer();
notification.success({
message: "停止成功"
});
}
const testProxyLoading = ref(false);
async function testProxy() {
testProxyLoading.value = true;
try {
const res = await api.TestProxy();
let success = true;
if (res.google !== true || res.baidu !== true) {
success = false;
}
const content = () => {
return (
<div>
<div>Google: {res.google === true ? "成功" : util.maxLength(res.google)}</div>
<div>Baidu: {res.baidu === true ? "成功" : util.maxLength(res.google)}</div>
</div>
);
};
if (!success) {
notification.error({
message: "测试失败",
description: content
});
return;
}
notification.success({
message: "测试完成",
description: content
});
} finally {
testProxyLoading.value = false;
}
}
</script>
<style lang="less">
@@ -165,5 +32,20 @@ async function testProxy() {
width: 500px;
margin: 20px;
}
.sys-settings-body {
height: 100%;
padding-top: 20px;
padding-left: 20px;
.sys-settings-tabs {
height: 100%;
display: flex;
flex-direction: column;
.ant-tabs-content-holder {
flex: 1;
overflow: auto;
}
}
}
}
</style>

145
packages/ui/certd-client/src/views/sys/settings/tabs/base.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div class="sys-settings-form sys-settings-base">
<a-form
:model="formState"
name="basic"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 16 }"
autocomplete="off"
@finish="onFinish"
@finish-failed="onFinishFailed"
>
<a-form-item label="ICP备案号" :name="['public', 'icpNo']">
<a-input v-model:value="formState.public.icpNo" placeholder="粤ICP备xxxxxxx号" />
</a-form-item>
<a-form-item label="HTTP代理" :name="['private', 'httpProxy']" :rules="urlRules">
<a-input v-model:value="formState.private.httpProxy" placeholder="http://192.168.1.2:18010/" />
<div class="helper">当某些网站被墙时可以配置</div>
</a-form-item>
<a-form-item label="HTTPS代理" :name="['private', 'httpsProxy']" :rules="urlRules">
<div class="flex">
<a-input v-model:value="formState.private.httpsProxy" placeholder="http://192.168.1.2:18010/" />
<a-button class="ml-5" type="primary" :loading="testProxyLoading" title="保存后，再点击测试" @click="testProxy">测试</a-button>
</div>
<div class="helper">一般这两个代理填一样的，保存后再测试</div>
</a-form-item>
<a-form-item label="双栈网络" :name="['private', 'dnsResultOrder']">
<a-select v-model:value="formState.private.dnsResultOrder">
<a-select-option value="verbatim">默认</a-select-option>
<a-select-option value="ipv4first">IPV4优先</a-select-option>
<a-select-option value="ipv6first">IPV6优先</a-select-option>
</a-select>
<div class="helper">如果选择IPv6优先，需要在docker-compose.yaml中启用ipv6</div>
</a-form-item>
<a-form-item label="启用公共CNAME服务" :name="['private', 'commonCnameEnabled']">
<a-switch v-model:checked="formState.private.commonCnameEnabled" />
<div class="helper">
是否可以使用公共CNAME服务，如果禁用，且没有设置<router-link to="/sys/cname/provider">自定义CNAME服务</router-link>，则无法使用CNAME代理方式申请证书
</div>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup lang="tsx">
import { reactive, ref } from "vue";
import { SysSettings } from "/@/views/sys/settings/api";
import * as api from "/@/views/sys/settings/api";
import { merge } from "lodash-es";
import { useSettingStore } from "/@/store/modules/settings";
import { notification } from "ant-design-vue";
import { util } from "/@/utils";
defineOptions({
name: "SettingBase"
});
const formState = reactive<Partial<SysSettings>>({
public: {
icpNo: ""
},
private: {}
});
const urlRules = ref({
type: "url",
message: "请输入正确的URL"
});
async function loadSysSettings() {
const data: any = await api.SysSettingsGet();
merge(formState, data);
}
const saveLoading = ref(false);
loadSysSettings();
const settingsStore = useSettingStore();
const onFinish = async (form: any) => {
try {
saveLoading.value = true;
await api.SysSettingsSave(form);
await settingsStore.loadSysSettings();
notification.success({
message: "保存成功"
});
} finally {
saveLoading.value = false;
}
};
const onFinishFailed = (errorInfo: any) => {
// console.log("Failed:", errorInfo);
};
async function stopOtherUserTimer() {
await api.stopOtherUserTimer();
notification.success({
message: "停止成功"
});
}
const testProxyLoading = ref(false);
async function testProxy() {
testProxyLoading.value = true;
try {
const res = await api.TestProxy();
let success = true;
if (res.google !== true || res.baidu !== true) {
success = false;
}
const content = () => {
return (
<div>
<div>Google: {res.google === true ? "成功" : util.maxLength(res.google)}</div>
<div>Baidu: {res.baidu === true ? "成功" : util.maxLength(res.google)}</div>
</div>
);
};
if (!success) {
notification.error({
message: "测试失败",
description: content
});
return;
}
notification.success({
message: "测试完成",
description: content
});
} finally {
testProxyLoading.value = false;
}
}
</script>
<style lang="less">
.sys-settings-base {
}
</style>

109
packages/ui/certd-client/src/views/sys/settings/tabs/register.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="sys-settings-form sys-settings-register">
<a-form :model="formState" name="register" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish">
<a-form-item label="开启自助注册" :name="['public', 'registerEnabled']">
<a-switch v-model:checked="formState.public.registerEnabled" />
</a-form-item>
<a-form-item label="限制用户流水线数量" :name="['public', 'limitUserPipelineCount']">
<a-input-number v-model:value="formState.public.limitUserPipelineCount" />
<div class="helper">0为不限制</div>
</a-form-item>
<a-form-item label="管理其他用户流水线" :name="['public', 'managerOtherUserPipeline']">
<a-switch v-model:checked="formState.public.managerOtherUserPipeline" />
</a-form-item>
<template v-if="formState.public.registerEnabled">
<a-form-item label="开启用户名注册" :name="['public', 'usernameRegisterEnabled']">
<a-switch v-model:checked="formState.public.usernameRegisterEnabled" />
</a-form-item>
<a-form-item label="开启邮箱注册" :name="['public', 'emailRegisterEnabled']">
<a-switch v-model:checked="formState.public.emailRegisterEnabled" />
<div class="helper">需要<router-link to="/sys/settings/email">设置邮箱服务器</router-link></div>
</a-form-item>
<a-form-item label="开启密码登录" :name="['public', 'passwordLoginEnabled']">
<a-switch v-model:checked="formState.public.passwordLoginEnabled" />
</a-form-item>
<a-form-item label="开启手机号登录、注册" :name="['public', 'smsLoginEnabled']">
<a-switch v-model:checked="formState.public.smsLoginEnabled" />
</a-form-item>
<template v-if="formState.public.smsLoginEnabled">
<a-form-item label="短信提供商" :name="['private', 'sms', 'type']">
<a-select v-model:value="formState.private.sms.type">
<a-select-option value="aliyun">阿里云</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="阿里云授权" :name="['private', 'sms', 'config', 'accessId']">
<access-selector v-model="formState.private.sms.config.accessId" />
</a-form-item>
<a-form-item label="短信签名" :name="['private', 'sms', 'config', 'signName']">
<a-input v-model:value="formState.private.sms.config.signName" />
</a-form-item>
<a-form-item label="验证码模版ID" :name="['private', 'sms', 'config', 'codeTemplateId']">
<a-input v-model:value="formState.private.sms.config.codeTemplateId" />
<div class="helper">需要配置一个变量为{code}的验证码模版</div>
</a-form-item>
</template>
</template>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button :loading="saveLoading" type="primary" html-type="submit">保存</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup lang="tsx">
import { reactive, ref } from "vue";
import { SysSettings } from "/@/views/sys/settings/api";
import * as api from "/@/views/sys/settings/api";
import { merge } from "lodash-es";
import { useSettingStore } from "/@/store/modules/settings";
import { notification } from "ant-design-vue";
import { util } from "/@/utils";
import AccessSelector from "/@/views/certd/access/access-selector/index.vue";
defineOptions({
name: "SettingRegister"
});
const formState = reactive<Partial<SysSettings>>({
public: {
registerEnabled: false
},
private: {
sms: {
type: "aliyun",
config: {}
}
}
});
async function loadSysSettings() {
const data: any = await api.SysSettingsGet();
merge(formState, data);
}
const saveLoading = ref(false);
loadSysSettings();
const settingsStore = useSettingStore();
const onFinish = async (form: any) => {
try {
saveLoading.value = true;
await api.SysSettingsSave(form);
await settingsStore.loadSysSettings();
notification.success({
message: "保存成功"
});
} finally {
saveLoading.value = false;
}
};
</script>
<style lang="less">
.sys-settings-site {
}
</style>