feat: added password control

frappe-ui

@@ -1 +1 @@
-Subproject commit 29307e4fffaacdbb3d9c5d95c5270b2f245a5607
+Subproject commit 8b615c0e899d75b99c7d36ec6df97b5d0386b2ca

frontend/src/components/Controls/Grid.vue

@@ -216,6 +216,13 @@
                     :options="field.options"
                     @change="(e) => fieldChange(e.target.value, field, row)"
                   />
+                  <Password
+                    v-else-if="field.fieldtype === 'Password'"
+                    variant="outline"
+                    :value="row[field.fieldname]"
+                    :disabled="Boolean(field.read_only)"
+                    @change="fieldChange($event.target.value, field, row)"
+                  />
                   <FormattedInput
                     v-else-if="field.fieldtype === 'Int'"
                     class="[&_input]:text-right"
@@ -325,6 +332,7 @@
 </template>
 
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import GridFieldsEditorModal from '@/components/Controls/GridFieldsEditorModal.vue'
 import GridRowFieldsModal from '@/components/Controls/GridRowFieldsModal.vue'

frontend/src/components/Controls/Password.vue

@@ -0,0 +1,35 @@
+<template>
+  <FormControl
+    :type="show ? 'text' : 'password'"
+    :value="modelValue || value"
+    v-bind="$attrs"
+  >
+    <template #suffix>
+      <Button v-show="showEye" class="!h-4" @click="show = !show">
+        <FeatherIcon :name="show ? 'eye-off' : 'eye'" class="h-3" />
+      </Button>
+    </template>
+  </FormControl>
+</template>
+<script setup>
+import { FormControl } from 'frappe-ui'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  value: {
+    type: [String, Number],
+    default: '',
+  },
+})
+
+const show = ref(false)
+
+const showEye = computed(() => {
+  let v = props.modelValue || props.value
+  return !v?.includes('*')
+})
+</script>

frontend/src/components/FieldLayout/Field.vue

@@ -159,6 +159,13 @@
       :description="field.description"
       @change="fieldChange($event.target.value, field)"
     />
+    <Password
+      v-else-if="field.fieldtype === 'Password'"
+      :value="data[field.fieldname]"
+      :placeholder="getPlaceholder(field)"
+      :description="field.description"
+      @change="fieldChange($event.target.value, field)"
+    />
     <FormattedInput
       v-else-if="field.fieldtype === 'Int'"
       type="text"
@@ -207,6 +214,7 @@
   </div>
 </template>
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'

frontend/src/components/Settings/ProfileSettings.vue

@@ -57,7 +57,7 @@
             v-model="profile.email"
             :disabled="true"
           />
-          <FormControl
+          <Password
             class="w-full"
             label="Set new password"
             v-model="profile.new_password"
@@ -77,6 +77,7 @@
   </div>
 </template>
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
 import { usersStore } from '@/stores/users'
 import { Dialog, Avatar, createResource, ErrorMessage, toast } from 'frappe-ui'

frontend/src/components/SidePanelLayout.vue

@@ -275,6 +275,15 @@
                           "
                           :disabled="Boolean(field.read_only)"
                         />
+                        <Password
+                          v-else-if="field.fieldtype === 'Password'"
+                          class="form-control"
+                          :value="document.doc[field.fieldname]"
+                          :placeholder="field.placeholder"
+                          :debounce="500"
+                          @change.stop="fieldChange($event.target.value, field)"
+                          :disabled="Boolean(field.read_only)"
+                        />
                         <FormattedInput
                           v-else-if="field.fieldtype === 'Int'"
                           class="form-control"
@@ -366,6 +375,7 @@
 </template>
 
 <script setup>
+import Password from '@/components/Controls/Password.vue'
 import FormattedInput from '@/components/Controls/FormattedInput.vue'
 import Section from '@/components/Section.vue'
 import NestedPopover from '@/components/NestedPopover.vue'