feat: update password modal

frontend/components.d.ts

@@ -40,6 +40,7 @@ declare module 'vue' {
     CallUI: typeof import('./src/components/Telephony/CallUI.vue')['default']
     CameraIcon: typeof import('./src/components/Icons/CameraIcon.vue')['default']
     CertificateIcon: typeof import('./src/components/Icons/CertificateIcon.vue')['default']
+    ChangePasswordModal: typeof import('./src/components/Modals/ChangePasswordModal.vue')['default']
     CheckCircleIcon: typeof import('./src/components/Icons/CheckCircleIcon.vue')['default']
     CheckIcon: typeof import('./src/components/Icons/CheckIcon.vue')['default']
     CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']

frontend/src/components/Modals/ChangePasswordModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <Dialog v-model="show" :options="{ title: __('Change Password') }">
+    <template #body-content>
+      <Password
+        v-model="newPassword"
+        :label="__('New Password')"
+        class="mb-4"
+      />
+      <Password v-model="confirmPassword" :label="__('Confirm Password')" />
+    </template>
+    <template #actions>
+      <div class="flex justify-between items-center">
+        <div>
+          <ErrorMessage :message="error" />
+        </div>
+        <Button
+          variant="solid"
+          :label="__('Update')"
+          :disabled="
+            !newPassword || !confirmPassword || newPassword !== confirmPassword
+          "
+          :loading="updatePassword.loading"
+          @click="updatePassword.submit()"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+<script setup>
+import Password from '@/components/Controls/Password.vue'
+import { usersStore } from '@/stores/users'
+import { Dialog, toast, createResource } from 'frappe-ui'
+import { ref } from 'vue'
+
+const show = defineModel()
+
+const { getUser } = usersStore()
+
+const newPassword = ref('')
+const confirmPassword = ref('')
+
+const error = ref('')
+
+const updatePassword = createResource({
+  url: 'frappe.client.set_value',
+  makeParams() {
+    return {
+      doctype: 'User',
+      name: getUser().name,
+      fieldname: 'new_password',
+      value: newPassword.value,
+    }
+  },
+  onSuccess: () => {
+    toast.success(__('Password updated successfully'))
+    show.value = false
+    newPassword.value = ''
+    confirmPassword.value = ''
+    error.value = ''
+  },
+  onError: (err) => {
+    error.value = err.messages[0] || __('Failed to update password')
+  },
+})
+</script>

frontend/src/components/Settings/ProfileSettings.vue

@@ -16,8 +16,13 @@
           </div>
         </div>
         <Button
-          :label="__('Edit profile photo')"
+          :label="__('Change Password')"
-          @click="showEditProfilePhotoModal = true"
+          icon-left="lock"
+          @click="showChangePasswordModal = true"
+        />
+        <ChangePasswordModal
+          v-if="showChangePasswordModal"
+          v-model="showChangePasswordModal"
         />
         <Dialog
           :options="{ title: __('Edit profile photo') }"
@@ -50,19 +55,6 @@
             v-model="profile.last_name"
           />
         </div>
-        <div class="flex justify-between gap-4">
-          <FormControl
-            class="w-full"
-            label="Email"
-            v-model="profile.email"
-            :disabled="true"
-          />
-          <Password
-            class="w-full"
-            label="Set new password"
-            v-model="profile.new_password"
-          />
-        </div>
       </div>
     </div>
     <div class="flex justify-between flex-row-reverse">
@@ -77,7 +69,7 @@
   </div>
 </template>
 <script setup>
-import Password from '@/components/Controls/Password.vue'
+import ChangePasswordModal from '@/components/Modals/ChangePasswordModal.vue'
 import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
 import { usersStore } from '@/stores/users'
 import { Dialog, Avatar, createResource, ErrorMessage, toast } from 'frappe-ui'
@@ -90,6 +82,7 @@ const { updateOnboardingStep } = useOnboarding('frappecrm')
 const user = computed(() => getUser() || {})
 
 const showEditProfilePhotoModal = ref(false)
+const showChangePasswordModal = ref(false)
 
 const profile = ref({})
 const loading = ref(false)