From ad88b4e046bb3eab27c523011bebd83279aaf2b2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 19 May 2025 20:59:18 +0530
Subject: [PATCH] feat: added password control

---
 frappe-ui                                     |  2 +-
 frontend/src/components/Controls/Grid.vue     |  8 +++++
 frontend/src/components/Controls/Password.vue | 35 +++++++++++++++++++
 frontend/src/components/FieldLayout/Field.vue |  8 +++++
 .../components/Settings/ProfileSettings.vue   |  3 +-
 frontend/src/components/SidePanelLayout.vue   | 10 ++++++
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Controls/Password.vue

diff --git a/frappe-ui b/frappe-ui
index 29307e4f..8b615c0e 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 29307e4fffaacdbb3d9c5d95c5270b2f245a5607
+Subproject commit 8b615c0e899d75b99c7d36ec6df97b5d0386b2ca
diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index e08cdd7d..54bc29dc 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/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'
diff --git a/frontend/src/components/Controls/Password.vue b/frontend/src/components/Controls/Password.vue
new file mode 100644
index 00000000..3960fd94
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index 64ba37e7..a190817f 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/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'
diff --git a/frontend/src/components/Settings/ProfileSettings.vue b/frontend/src/components/Settings/ProfileSettings.vue
index 0a37c810..909c0b46 100644
--- a/frontend/src/components/Settings/ProfileSettings.vue
+++ b/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'
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index ef80c599..9b794af9 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/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'