fix(entities-plugins): encrypted fields in credential forms (#1668)

packages/core/forms/src/components/fields/FieldInput.vue

@@ -17,7 +17,7 @@
       :placeholder="schema.placeholder"
       :readonly="schema.readonly"
       :required="schema.required"
-      :type="displayInputType"
+      :type="inputType"
       :width="schema.width"
       @blur="onBlur"
       @update:model-value="onInput"
@@ -26,15 +26,15 @@
         v-if="schema.inputType === 'password'"
         #after
       >
-        <VisibilityOffIcon
-          v-if="eyeOpen"
+        <VisibilityIcon
+          v-if="masked"
           role="button"
-          @click="() => { eyeOpen = !eyeOpen }"
+          @click="toggleMasked"
         />
-        <VisibilityIcon
+        <VisibilityOffIcon
           v-else
           role="button"
-          @click="() => { eyeOpen = !eyeOpen }"
+          @click="toggleMasked"
         />
       </template>
     </KInput>
@@ -102,14 +102,7 @@ const emit = defineEmits<{
 }>()
 
 const propsRefs = toRefs(props)
-const eyeOpen = ref(false)
-
-const displayInputType = computed(() => {
-  if (inputType.value === 'password') {
-    return eyeOpen.value ? 'text' : 'password'
-  }
-  return inputType.value
-})
+const masked = ref(true)
 
 const autofillSlot = inject<AutofillSlot | undefined>(AUTOFILL_SLOT, undefined)
 
@@ -129,9 +122,22 @@ defineExpose({
 const inputType = computed((): string => {
   const iType = props.schema?.inputType.toLowerCase()
 
-  // 'string' maps to 'text' input type
-  // 'datetime' maps to 'datetime-local'
-  return iType === 'string' ? 'text' : iType === 'datetime' ? 'datetime-local' : iType || 'text'
+  switch (iType) {
+    // 'string' maps to 'text' input type
+    case 'string':
+      return 'text'
+
+    // 'datetime' maps to 'datetime-local'
+    case 'datetime':
+      return 'datetime-local'
+
+    // 'password' fields are masked by default, but can be toggled by the user
+    case 'password':
+      return masked.value ? 'password' : 'text'
+
+    default:
+      return iType || 'text'
+  }
 })
 
 const DATETIME_FORMATS = {
@@ -196,6 +202,10 @@ const onBlur = (): void => {
   }
 }
 
+const toggleMasked = () => {
+  masked.value = !masked.value
+}
+
 onMounted((): void => {
   // Set up debounced functions for formatting dates and numbers
   switch (inputType.value) {

packages/entities/entities-plugins/src/definitions/schemas/BasicAuth.ts

@@ -8,7 +8,7 @@ export const basicAuthSchema: BasicAuthFieldSchema = {
 
     {
       password: {
-        inputType: 'text',
+        inputType: 'password',
       },
     },
   ],

packages/entities/entities-plugins/src/definitions/schemas/KeyAuthEnc.ts

@@ -5,7 +5,7 @@ export default {
         submitWhenNull: false,
         hint: `You can optionally set your own unique key to authenticate the
                client. If missing, it will be generated for you.`,
-        inputType: 'text',
+        inputType: 'password',
         encrypted: true,
       },
     },

packages/entities/entities-plugins/src/definitions/schemas/OAuth2.ts

@@ -18,7 +18,7 @@ export default {
         submitWhenNull: false,
         hint: `You can optionally set your own unique client_secret. If missing,
                it will be generated for you.`,
-        inputType: 'text',
+        inputType: 'password',
         encrypted: true,
       },
     },