fix: 系统用户名、密码增加空格校验 (#2604)

Refs #2602

frontend/src/global/form-rules.ts

@@ -1,6 +1,13 @@
 import i18n from '@/lang';
 import { FormItemRule } from 'element-plus';
 
+const checkNoSpace = (rule: any, value: any, callback: any) => {
+    if (value.indexOf(' ') !== -1) {
+        return callback(new Error(i18n.global.t('setting.noSpace')));
+    }
+    callback();
+};
+
 const checkIp = (rule: any, value: any, callback: any) => {
     if (value === '' || typeof value === 'undefined' || value == null) {
         callback(new Error(i18n.global.t('commons.rule.requiredInput')));
@@ -431,6 +438,7 @@ interface CommonRule {
     requiredInput: FormItemRule;
     requiredSelect: FormItemRule;
     requiredSelectBusiness: FormItemRule;
+    noSpace: FormItemRule;
     name: FormItemRule;
     userName: FormItemRule;
     simpleName: FormItemRule;
@@ -484,6 +492,11 @@ export const Rules: CommonRule = {
         message: i18n.global.t('commons.rule.requiredSelect'),
         trigger: 'change',
     },
+    noSpace: {
+        required: true,
+        validator: checkNoSpace,
+        trigger: 'blur',
+    },
     simpleName: {
         required: true,
         validator: checkSimpleName,

frontend/src/lang/modules/en.ts

@@ -1070,6 +1070,7 @@ const message = {
         oldPassword: 'Original password',
         newPassword: 'New password',
         retryPassword: 'Confirm password',
+        noSpace: 'Input information cannot include space characters',
         duplicatePassword: 'The new password cannot be the same as the original password, please re-enter!',
         diskClean: 'Cache Clean',
 

frontend/src/lang/modules/tw.ts

@@ -1023,6 +1023,7 @@ const message = {
         oldPassword: '原密碼',
         newPassword: '新密碼',
         retryPassword: '確認密碼',
+        noSpace: '輸入信息不能包括空格符號',
         duplicatePassword: '新密碼不能與原始密碼一致，請重新輸入！',
         diskClean: '缓存清理',
 

frontend/src/lang/modules/zh.ts

@@ -1024,6 +1024,7 @@ const message = {
         oldPassword: '原密码',
         newPassword: '新密码',
         retryPassword: '确认密码',
+        noSpace: '输入信息不能包含空格符',
         duplicatePassword: '新密码不能与原始密码一致，请重新输入！',
         diskClean: '缓存清理',
 

frontend/src/views/setting/expired.vue

@@ -16,30 +16,22 @@
                         label-position="left"
                         label-width="160px"
                     >
-                        <el-form-item :label="$t('setting.oldPassword')" prop="oldPassword">
-                            <el-input type="password" show-password clearable v-model="passForm.oldPassword" />
+                        <el-form-item :label="$t('setting.oldPassword')" prop="oldPass">
+                            <el-input type="password" show-password clearable v-model.trim="passForm.oldPass" />
                         </el-form-item>
-                        <el-form-item
-                            v-if="settingForm?.complexityVerification === 'disable'"
-                            :label="$t('setting.newPassword')"
-                            prop="newPassword"
-                        >
-                            <el-input type="password" show-password clearable v-model="passForm.newPassword" />
+                        <el-form-item v-if="!isComplexity" :label="$t('setting.newPassword')" prop="newPass">
+                            <el-input type="password" show-password clearable v-model.trim="passForm.newPass" />
                         </el-form-item>
-                        <el-form-item
-                            v-if="settingForm?.complexityVerification === 'enable'"
-                            :label="$t('setting.newPassword')"
-                            prop="newPasswordComplexity"
-                        >
+                        <el-form-item v-if="isComplexity" :label="$t('setting.newPassword')" prop="newPassComplexity">
                             <el-input
                                 type="password"
                                 show-password
                                 clearable
-                                v-model="passForm.newPasswordComplexity"
+                                v-model.trim="passForm.newPassComplexity"
                             />
                         </el-form-item>
-                        <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
-                            <el-input type="password" show-password clearable v-model="passForm.retryPassword" />
+                        <el-form-item :label="$t('setting.retryPassword')" prop="rePass">
+                            <el-input type="password" show-password clearable v-model.trim="passForm.rePass" />
                         </el-form-item>
                         <el-form-item>
                             <el-button type="primary" @click="submitChangePassword(passFormRef)">
@@ -61,30 +53,31 @@ import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
 import router from '@/routers';
 import { MsgError, MsgSuccess } from '@/utils/message';
-let settingForm = ref();
+
+let isComplexity = ref(false);
 
 type FormInstance = InstanceType<typeof ElForm>;
 const passFormRef = ref<FormInstance>();
 const passRules = reactive({
-    oldPassword: [Rules.requiredInput],
-    newPassword: [
+    oldPass: [Rules.noSpace, Rules.requiredInput],
+    newPass: [
         Rules.requiredInput,
+        Rules.noSpace,
         { min: 6, message: i18n.global.t('commons.rule.commonPassword'), trigger: 'blur' },
     ],
-    newPasswordComplexity: [Rules.requiredInput, Rules.password],
-    retryPassword: [Rules.requiredInput, { validator: checkPassword, trigger: 'blur' }],
+    newPassComplexity: [Rules.requiredInput, Rules.noSpace, Rules.password],
+    rePass: [Rules.requiredInput, Rules.noSpace, { validator: checkPasswordSame, trigger: 'blur' }],
 });
 const passForm = reactive({
-    oldPassword: '',
-    newPassword: '',
-    newPasswordComplexity: '',
-    retryPassword: '',
+    oldPass: '',
+    newPass: '',
+    newPassComplexity: '',
+    rePass: '',
 });
 
-function checkPassword(rule: any, value: any, callback: any) {
-    let password =
-        settingForm.value.complexityVerification === 'disable' ? passForm.newPassword : passForm.newPasswordComplexity;
-    if (password !== passForm.retryPassword) {
+function checkPasswordSame(rule: any, value: any, callback: any) {
+    let password = !isComplexity.value ? passForm.newPass : passForm.newPassComplexity;
+    if (password !== passForm.rePass) {
         return callback(new Error(i18n.global.t('commons.rule.rePassword')));
     }
     callback();
@@ -94,22 +87,20 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        let password =
-            settingForm.value.complexityVerification === 'disable'
-                ? passForm.newPassword
-                : passForm.newPasswordComplexity;
-        if (password === passForm.oldPassword) {
+        let password = !isComplexity.value ? passForm.newPass : passForm.newPassComplexity;
+        if (password === passForm.oldPass) {
             MsgError(i18n.global.t('setting.duplicatePassword'));
             return;
         }
-        await handleExpired({ oldPassword: passForm.oldPassword, newPassword: password });
+        await handleExpired({ oldPassword: passForm.oldPass, newPassword: password });
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
         router.push({ name: 'home' });
     });
 };
 const search = async () => {
     const res = await getSettingInfo();
-    settingForm.value = res.data;
+    let settingForm = res.data;
+    isComplexity.value = settingForm?.complexityVerification === 'enable';
 };
 
 onMounted(() => {

frontend/src/views/setting/panel/password/index.vue

@@ -8,14 +8,14 @@
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
                         <el-form-item :label="$t('setting.oldPassword')" prop="oldPassword">
-                            <el-input type="password" show-password clearable v-model="passForm.oldPassword" />
+                            <el-input type="password" show-password clearable v-model.trim="passForm.oldPassword" />
                         </el-form-item>
                         <el-form-item
                             v-if="complexityVerification === 'disable'"
                             :label="$t('setting.newPassword')"
                             prop="newPassword"
                         >
-                            <el-input type="password" show-password clearable v-model="passForm.newPassword" />
+                            <el-input type="password" show-password clearable v-model.trim="passForm.newPassword" />
                         </el-form-item>
                         <el-form-item
                             v-if="complexityVerification === 'enable'"
@@ -26,11 +26,11 @@
                                 type="password"
                                 show-password
                                 clearable
-                                v-model="passForm.newPasswordComplexity"
+                                v-model.trim="passForm.newPasswordComplexity"
                             />
                         </el-form-item>
                         <el-form-item :label="$t('setting.retryPassword')" prop="retryPassword">
-                            <el-input type="password" show-password clearable v-model="passForm.retryPassword" />
+                            <el-input type="password" show-password clearable v-model.trim="passForm.retryPassword" />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -64,14 +64,16 @@ import { logOutApi } from '@/api/modules/auth';
 const globalStore = GlobalStore();
 const passFormRef = ref<FormInstance>();
 const passRules = reactive({
-    oldPassword: [Rules.requiredInput],
+    oldPassword: [Rules.noSpace, Rules.requiredInput],
     newPassword: [
         Rules.requiredInput,
+        Rules.noSpace,
         { min: 6, message: i18n.global.t('commons.rule.commonPassword'), trigger: 'blur' },
     ],
-    newPasswordComplexity: [Rules.requiredInput, Rules.password],
-    retryPassword: [Rules.requiredInput, { validator: checkPassword, trigger: 'blur' }],
+    newPasswordComplexity: [Rules.requiredInput, Rules.noSpace, Rules.password],
+    retryPassword: [Rules.requiredInput, Rules.noSpace, { validator: checkPassword, trigger: 'blur' }],
 });
+
 const loading = ref(false);
 const passwordVisible = ref<boolean>(false);
 const passForm = reactive({

frontend/src/views/setting/panel/username/index.vue

@@ -4,11 +4,18 @@
             <template #header>
                 <DrawerHeader :header="$t('commons.login.username')" :back="handleClose" />
             </template>
-            <el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
+            <el-form
+                ref="formRef"
+                label-position="top"
+                :model="form"
+                @submit.prevent
+                v-loading="loading"
+                :rules="rules"
+            >
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
-                        <el-form-item :label="$t('commons.login.username')" prop="userName" :rules="Rules.userName">
-                            <el-input clearable v-model="form.userName" />
+                        <el-form-item :label="$t('commons.login.username')" prop="userName">
+                            <el-input clearable v-model.trim="form.userName" />
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -46,7 +53,9 @@ const loading = ref();
 const form = reactive({
     userName: '',
 });
-
+const rules = reactive({
+    userName: [Rules.userName, Rules.noSpace],
+});
 const formRef = ref<FormInstance>();
 
 const acceptParams = (params: DialogProps): void => {