Add config to hide default passwords or force password change at first login #1355

frontend/src/views/login/InitialPwdDialog.vue

@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import { reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { AuthApi } from '@/api/login'
+
+const props = defineProps({
+  modelValue: { type: Boolean, required: true },
+  account: { type: String, required: true },
+  oldPwd: { type: String, required: true },
+})
+const emits = defineEmits(['update:modelValue', 'pwdSaved'])
+
+const { t } = useI18n()
+const pwdRef = ref()
+const pwdForm = reactive({
+  pwd: '',
+  new_pwd: '',
+  confirm_pwd: '',
+})
+const PWD_REGEX =
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+\-={}|:"<>?`\[\];',./])[A-Za-z\d~!@#$%^&*()_+\-={}|:"<>?`\[\];',./]{8,20}$/
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error(t('common.please_input', { msg: t('user.upgrade_pwd.new_pwd') })))
+  } else {
+    if (!PWD_REGEX.test(value)) {
+      callback(new Error(t('user.upgrade_pwd.pwd_format_error')))
+      return
+    }
+    if (pwdForm.confirm_pwd !== '') {
+      if (!pwdRef.value) return
+      pwdRef.value.validateField('confirm_pwd')
+    }
+    callback()
+  }
+}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const validatePass2 = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error(t('common.please_input', { msg: t('user.upgrade_pwd.confirm_pwd') })))
+  } else if (!PWD_REGEX.test(value)) {
+    callback(new Error(t('user.upgrade_pwd.pwd_format_error')))
+  } else if (value !== pwdForm.new_pwd) {
+    callback(new Error(t('user.upgrade_pwd.two_pwd_not_match')))
+  } else {
+    callback()
+  }
+}
+const rules = {
+  pwd: [
+    {
+      required: true,
+      message: t('common.please_input', { msg: t('user.upgrade_pwd.old_pwd') }),
+      trigger: 'blur',
+    },
+  ],
+  new_pwd: [{ validator: validatePass, trigger: 'blur' }],
+  confirm_pwd: [{ validator: validatePass2, trigger: 'blur' }],
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      pwdForm.pwd = props.oldPwd
+      pwdForm.new_pwd = ''
+      pwdForm.confirm_pwd = ''
+    }
+  }
+)
+
+const closeHandler = () => {
+  emits('update:modelValue', false)
+}
+
+const submit = () => {
+  pwdRef.value.validate((res: any) => {
+    if (res) {
+      AuthApi.changePwd({
+        account: props.account,
+        pwd: pwdForm.pwd,
+        new_pwd: pwdForm.new_pwd,
+      }).then(() => {
+        ElMessage({
+          type: 'success',
+          message: t('login.force_change_pwd_success'),
+        })
+        emits('pwdSaved', pwdForm.new_pwd)
+        closeHandler()
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="t('login.force_change_pwd_title')"
+    width="480"
+    append-to-body
+    @update:model-value="(val: boolean) => emits('update:modelValue', val)"
+    @close="closeHandler"
+  >
+    <div class="initial-pwd-tips">{{ t('login.force_change_pwd_tips') }}</div>
+    <el-form
+      ref="pwdRef"
+      :rules="rules"
+      label-position="top"
+      :model="pwdForm"
+      style="width: 100%"
+      @submit.prevent
+    >
+      <el-form-item prop="pwd" :label="t('user.upgrade_pwd.old_pwd')">
+        <el-input
+          v-model="pwdForm.pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.old_pwd') })"
+          type="password"
+          show-password
+          clearable
+        />
+      </el-form-item>
+      <el-form-item prop="new_pwd" :label="t('user.upgrade_pwd.new_pwd')">
+        <el-input
+          v-model="pwdForm.new_pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.new_pwd') })"
+          type="password"
+          show-password
+          clearable
+        />
+      </el-form-item>
+      <el-form-item prop="confirm_pwd" :label="t('user.upgrade_pwd.confirm_pwd')">
+        <el-input
+          v-model="pwdForm.confirm_pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.confirm_pwd') })"
+          type="password"
+          show-password
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button secondary @click="closeHandler">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit">{{ t('common.save') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+.initial-pwd-tips {
+  margin-bottom: 16px;
+  color: var(--ed-color-warning, #e6a23c);
+  font-size: 14px;
+  line-height: 22px;
+}
+</style>

frontend/src/views/login/index.vue

@@ -71,6 +71,12 @@
             jsname="L2NvbXBvbmVudC9sb2dpbi9IYW5kbGVy"
             @switch-tab="switchTab"
           />
+          <InitialPwdDialog
+            v-model="initPwdDialogVisible"
+            :account="loginForm.username"
+            :old-pwd="loginForm.password"
+            @pwd-saved="onInitPwdSaved"
+          />
         </div>
       </div>
     </div>
@@ -88,6 +94,7 @@ import login_image from '@/assets/embedded/login_image.png'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import loginImage from '@/assets/blue/login-image_blue.png'
 import Handler from './xpack/Handler.vue'
+import InitialPwdDialog from './InitialPwdDialog.vue'
 import { toLoginSuccess } from '@/utils/utils'
 import elementResizeDetectorMaker from 'element-resize-detector'
 
@@ -134,12 +141,20 @@ const loginFormRef = ref()
 const submitForm = () => {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
-      userStore.login(loginForm.value).then(() => {
+      userStore.login(loginForm.value).then((res: any) => {
+        if (res?.need_change_pwd) {
+          initPwdDialogVisible.value = true
+          return
+        }
         toLoginSuccess(router)
       })
     }
   })
 }
+const initPwdDialogVisible = ref(false)
+const onInitPwdSaved = (newPwd: string) => {
+  loginForm.value.password = newPwd
+}
 const switchTab = (name: string) => {
   activeName.value = name || 'simple'
 }

frontend/src/views/system/parameter/xpack/PlatformParam.vue

@@ -63,11 +63,11 @@
     </div>
   </div>
 
-  <div v-if="anyPlatformEnable" class="card">
+  <div v-if="xpackValid" class="card">
     <div class="card-title">
       {{ t('parameter.login_settings') }}
     </div>
-    <div class="card-item" style="width: 100%">
+    <div v-if="anyPlatformEnable" class="card-item" style="width: 100%">
       <div class="label">
         {{ t('parameter.default_login') }}
       </div>
@@ -79,6 +79,20 @@
         </el-radio-group>
       </div>
     </div>
+
+    <div class="card-item" style="width: 100%">
+      <div class="label">{{ t('parameter.disable_initial_password') }}</div>
+      <div class="value">
+        <el-switch v-model="formData['login.initial_pwd_disabled']" />
+      </div>
+    </div>
+
+    <div class="card-item" style="width: 100%">
+      <div class="label">{{ t('parameter.hide_initial_password') }}</div>
+      <div class="value">
+        <el-switch v-model="formData['login.initial_pwd_hidden']" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -97,6 +111,8 @@ const defaultForm = reactive<Record<string, any>>({
   'platform.oid': 1,
   'platform.rid': 1,
   'login.default_login': 0,
+  'login.initial_pwd_disabled': false,
+  'login.initial_pwd_hidden': false,
 })
 
 const loginTypeOptions = shallowRef<any[]>([{ value: 0, label: t('login.account_login') }])

frontend/src/views/system/user/User.vue

@@ -203,7 +203,7 @@
                     </span>
                     <span class="header-span">{{ t('datasource.the_original_one') }}</span>
                   </div>
-                  <div class="confirm-content">
+                  <div v-if="showInitPwd" class="confirm-content">
                     <span>{{ defaultPwd }}</span>
                     <el-button style="margin-left: 4px" text @click="copyText">{{
                       t('datasource.copy')
@@ -284,7 +284,7 @@
     size="600px"
     :before-close="onFormClose"
   >
-    <div style="margin-bottom: 12px" class="down-template">
+    <div v-if="showInitPwd" style="margin-bottom: 12px" class="down-template">
       <span class="icon-span">
         <el-icon>
           <Icon name="icon_warning_filled"><icon_warning_filled class="svg-icon" /></Icon>
@@ -584,6 +584,7 @@ import { request } from '@/utils/request'
 import { workspaceList } from '@/api/workspace'
 import { variablesApi } from '@/api/variables'
 import { formatTimestamp } from '@/utils/date'
+import { formatArg } from '@/utils/utils'
 import { ClickOutside as vClickOutside } from 'element-plus-secondary'
 import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
 import { useClipboard } from '@vueuse/core'
@@ -1291,6 +1292,21 @@ const loadDefaultPwd = () => {
     }
   })
 }
+const showInitPwd = ref(true)
+const loadInitPwdHidden = () => {
+  request
+    .get('/system/parameter/login')
+    .then((res: any) => {
+      const argObj: Record<string, string> = {}
+      ;(res || []).forEach((item: any) => {
+        argObj[item.pkey] = item.pval
+      })
+      showInitPwd.value = !formatArg(argObj['login.initial_pwd_hidden'])
+    })
+    .catch(() => {
+      showInitPwd.value = true
+    })
+}
 const formatUserOrigin = (origin?: number) => {
   if (!origin) {
     return t('user.local_creation')
@@ -1327,6 +1343,7 @@ onMounted(() => {
   handleCurrentChange(1)
 
   loadDefaultPwd()
+  loadInitPwdHidden()
 })
 const downErrorExcel = (dataKey: any) => {
   userApi.errorRecord(dataKey).then((res: any) => {