refactor: Password input constractor

ui/src/components/dynamics-form/constructor/data.ts

@@ -4,6 +4,10 @@ const input_type_list = [
     label: t('dynamicsForm.input_type_list.TextInput'),
     value: 'TextInput'
   },
+  {
+    label: t('dynamicsForm.input_type_list.PasswordInput'),
+    value: 'PasswordInput'
+  },
   {
     label: t('dynamicsForm.input_type_list.Slider'),
     value: 'Slider'

ui/src/components/dynamics-form/constructor/items/PasswordInputConstructor.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
+    <el-row class="w-full">
+      <el-col :span="11">
+        <el-form-item
+          :rules="[
+            {
+              required: true,
+              message: $t('dynamicsForm.TextInput.length.minRequired'),
+              trigger: 'change'
+            }
+          ]"
+          prop="minlength"
+        >
+          <el-input-number
+            style="width: 100%"
+            :min="1"
+            :step="1"
+            step-strictly
+            v-model="formValue.minlength"
+            controls-position="right"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span>-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item
+          :rules="[
+            {
+              required: true,
+              message: $t('dynamicsForm.TextInput.length.maxRequired'),
+              trigger: 'change'
+            }
+          ]"
+          prop="maxlength"
+        >
+          <el-input-number
+            style="width: 100%"
+            :min="formValue.minlength > formValue.maxlength ? formValue.minlength : 1"
+            step-strictly
+            :step="1"
+            v-model="formValue.maxlength"
+            controls-position="right"
+          />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form-item>
+
+  <el-form-item
+    class="defaultValueItem"
+    :required="formValue.required"
+    prop="default_value"
+    :label="$t('dynamicsForm.default.label')"
+    :rules="
+      formValue.required ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }, ...rules] : rules
+    "
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox
+        v-model="formValue.show_default_value"
+        :label="$t('dynamicsForm.default.show')"
+      />
+    </div>
+
+    <el-input
+      v-model="formValue.default_value"
+      :maxlength="formValue.maxlength"
+      :minlength="formValue.minlength"
+      :placeholder="$t('dynamicsForm.default.placeholder')"
+      show-word-limit
+      type="password"
+      show-password
+    />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import { t } from '@/locales'
+
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+watch(
+  () => formValue.value.minlength,
+  () => {
+    if (formValue.value.minlength > formValue.value.maxlength) {
+      formValue.value.maxlength = formValue.value.minlength
+    }
+  }
+)
+const getData = () => {
+  return {
+    input_type: 'PasswordInput',
+    attrs: {
+      maxlength: formValue.value.maxlength,
+      minlength: formValue.value.minlength,
+      'show-word-limit': true,
+      type: 'password',
+      'show-password': true
+    },
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
+    props_info: {
+      rules: formValue.value.required
+        ? [
+          {
+            required: true,
+            message: `${formValue.value.label} ${t('dynamicsForm.default.requiredMessage')}`
+          },
+          {
+            min: formValue.value.minlength,
+            max: formValue.value.maxlength,
+            message: `${formValue.value.label}${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
+            trigger: 'blur'
+          }
+        ]
+        : [
+          {
+            min: formValue.value.minlength,
+            max: formValue.value.maxlength,
+            message: `${formValue.value.label}${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
+            trigger: 'blur'
+          }
+        ]
+    }
+  }
+}
+const rander = (form_data: any) => {
+  const attrs = form_data.attrs || {}
+  formValue.value.minlength = attrs.minlength
+  formValue.value.maxlength = attrs.maxlength
+  formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
+  formValue.value.show_password = attrs['show-password']
+}
+const rangeRules = [
+  {
+    required: true,
+    validator: (rule: any, value: any, callback: any) => {
+      if (!formValue.value.minlength) {
+        callback(new Error(t('dynamicsForm.TextInput.length.requiredMessage4')))
+      }
+      if (!formValue.value.maxlength) {
+        callback(new Error(t('dynamicsForm.TextInput.length.requiredMessage4')))
+      }
+      return true
+    },
+    message: `${formValue.value.label} ${t('dynamicsForm.default.requiredMessage')}`
+  }
+]
+const rules = computed(() => [
+  {
+    min: formValue.value.minlength,
+    max: formValue.value.maxlength,
+    message: `${t('dynamicsForm.TextInput.length.requiredMessage1')} ${formValue.value.minlength} ${t('dynamicsForm.TextInput.length.requiredMessage2')} ${formValue.value.maxlength} ${t('dynamicsForm.TextInput.length.requiredMessage3')}`,
+    trigger: 'blur'
+  }
+])
+
+defineExpose({ getData, rander })
+onMounted(() => {
+  formValue.value.minlength = 0
+  formValue.value.maxlength = 20
+  formValue.value.default_value = ''
+  formValue.value.show_password = true
+
+  if (formValue.value.show_default_value === undefined) {
+    formValue.value.show_default_value = true
+  }
+})
+</script>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>

ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue

@@ -1,11 +1,4 @@
 <template>
-  <el-form-item
-    class="defaultValueItem"
-    prop="show_password"
-    :label="$t('dynamicsForm.TextInput.showPassword')"
-  >
-    <el-switch v-model="formValue.show_password" />
-  </el-form-item>
   <el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
     <el-row class="w-full">
       <el-col :span="11">
@@ -77,8 +70,7 @@
       :minlength="formValue.minlength"
       :placeholder="$t('dynamicsForm.default.placeholder')"
       show-word-limit
-      :type="formValue.show_password ? 'password' : 'text'"
+      type="text"
-      :show-password="formValue.show_password"
     />
   </el-form-item>
 </template>
@@ -111,9 +103,7 @@ const getData = () => {
     attrs: {
       maxlength: formValue.value.maxlength,
       minlength: formValue.value.minlength,
-      'show-word-limit': true,
+      'show-word-limit': true
-      type: formValue.value.show_password ? 'password' : 'text',
-      'show-password': formValue.value.show_password
     },
     default_value: formValue.value.default_value,
     show_default_value: formValue.value.show_default_value,
@@ -145,7 +135,6 @@ const rander = (form_data: any) => {
   formValue.value.maxlength = attrs.maxlength
   formValue.value.default_value = form_data.default_value
   formValue.value.show_default_value = form_data.show_default_value
-  formValue.value.show_password = attrs['show-password']
 }
 const rangeRules = [
   {
@@ -176,8 +165,7 @@ onMounted(() => {
   formValue.value.minlength = 0
   formValue.value.maxlength = 20
   formValue.value.default_value = ''
-  formValue.value.show_password = false
+  // console.log(formValue.value.show_default_value)
-
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }

ui/src/locales/lang/en-US/dynamics-form.ts

@@ -1,6 +1,7 @@
 export default {
   input_type_list: {
     TextInput: 'Input',
+    PasswordInput: 'Password',
     Slider: 'Slider',
     SwitchInput: 'Switch',
     SingleSelect: 'Single Select',
@@ -96,7 +97,6 @@ export default {
       requiredMessage2: 'and',
       requiredMessage3: 'characters',
       requiredMessage4: 'Text length is a required parameter'
-    },
+    }
-    showPassword: 'Show Password'
   }
 }

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -1,6 +1,7 @@
 export default {
   input_type_list: {
     TextInput: '文本框',
+    PasswordInput: '密码框',
     Slider: '滑块',
     SwitchInput: '开关',
     SingleSelect: '单选框',
@@ -96,7 +97,6 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '个字符',
       requiredMessage4: '文本长度为必填参数'
-    },
+    }
-    showPassword: '密文显示'
   }
 }

ui/src/locales/lang/zh-Hant/dynamics-form.ts

@@ -1,6 +1,7 @@
 export default {
   input_type_list: {
     TextInput: '文字框',
+    PasswordInput: '密文框',
     Slider: '滑桿',
     SwitchInput: '開關',
     SingleSelect: '單選框',
@@ -96,7 +97,6 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '個字元',
       requiredMessage4: '文字長度為必填參數'
-    },
+    }
-    showPassword: '密文顯示'
   }
 }

ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue

@@ -123,6 +123,7 @@ const currentRow = computed(() => {
 const currentIndex = ref(null)
 const inputTypeList = ref([
   { label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
   { label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
   { label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
   { label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },

ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue

@@ -49,6 +49,9 @@
         <el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
           $t('dynamicsForm.input_type_list.TextInput')
         }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
+          $t('dynamicsForm.input_type_list.PasswordInput')
+        }}</el-tag>
         <el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
           $t('dynamicsForm.input_type_list.Slider')
         }}</el-tag>
@@ -169,6 +172,9 @@ function refreshFieldTitle(data: any) {
 }
 
 const getDefaultValue = (row: any) => {
+  if(row.input_type === 'PasswordInput') {
+    return '******'
+  }
   if (row.default_value) {
     const default_value = row.option_list
       ?.filter((v: any) => row.default_value.indexOf(v.value) > -1)