From fe8e309399d7f8f61e6a1388cf1820f07efc571f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 20 May 2025 13:23:26 +0530
Subject: [PATCH] feat: added password control

---
 frontend/components.d.ts                      |  1 +
 frontend/src/components/Controls/Grid.vue     |  8 +++++
 frontend/src/components/Controls/Password.vue | 32 +++++++++++++++++++
 frontend/src/components/FieldLayout/Field.vue |  8 +++++
 .../components/Settings/ProfileSettings.vue   |  3 +-
 frontend/src/components/SidePanelLayout.vue   | 10 ++++++
 6 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Controls/Password.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index bfacdcf1..e6d532de 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -173,6 +173,7 @@ declare module 'vue' {
     OrganizationsIcon: typeof import('./src/components/Icons/OrganizationsIcon.vue')['default']
     OrganizationsListView: typeof import('./src/components/ListViews/OrganizationsListView.vue')['default']
     OutboundCallIcon: typeof import('./src/components/Icons/OutboundCallIcon.vue')['default']
+    Password: typeof import('./src/components/Controls/Password.vue')['default']
     PauseIcon: typeof import('./src/components/Icons/PauseIcon.vue')['default']
     PhoneIcon: typeof import('./src/components/Icons/PhoneIcon.vue')['default']
     PinIcon: typeof import('./src/components/Icons/PinIcon.vue')['default']
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..6a636039
--- /dev/null
+++ b/frontend/src/components/Controls/Password.vue
@@ -0,0 +1,32 @@
+<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 94b4e67f..f7d1f384 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 { createToast } from '@/utils'
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'