fix

resources/js/views/pages/account-settings/AccountSettingsSecurity.vue

@@ -1,14 +1,16 @@
 <script setup>
 import sittingGirlWithLaptopDark from '@images/illustrations/sitting-girl-with-laptop-dark.png';
 import sittingGirlWithLaptopLight from '@images/illustrations/sitting-girl-with-laptop-light.png';
-
+import { useStore } from 'vuex';
+const store = useStore();
+const refVForm = ref(null)
 const isCurrentPasswordVisible = ref(false)
 const isNewPasswordVisible = ref(false)
 const isConfirmPasswordVisible = ref(false)
 const currentPassword = ref('')
 const newPassword = ref('')
 const confirmPassword = ref('')
-
+ const passwordConfirmationTarget = computed(() => newPassword.value);
 const passwordRequirements = [
   'Minimum 8 characters long - the more, the better',
   'At least one lowercase character',
@@ -117,7 +119,28 @@ const recentDevices = [
     },
   },
 ]
-
+const save = async () => {
+  const { valid } = await refVForm.value.validate()
+  console.log(valid)
+  if (valid) {
+    try {
+         
+            await store.dispatch('adminPasswordUpadate',{
+              password: currentPassword.value,
+              new_password :  newPassword.value,
+              confirm_password :  confirmPassword.value,
+            })
+           
+          
+        } catch (error) {
+          console.error(error)
+        }
+   
+  currentPassword.value = null
+  newPassword.value = null
+  confirmPassword.value = null
+  }
+}
 const sittingGirlImg = useGenerateImageVariant(sittingGirlWithLaptopLight, sittingGirlWithLaptopDark)
 const isOneTimePasswordDialogVisible = ref(false)
 </script>
@@ -130,7 +153,7 @@ const isOneTimePasswordDialogVisible = ref(false)
         <VCardItem class="pb-6">
           <VCardTitle>Change Password</VCardTitle>
         </VCardItem>
-        <VForm>
+        <VForm ref="refVForm">
           <VCardText class="pt-0">
             <!-- 👉 Current Password -->
             <VRow>
@@ -147,6 +170,7 @@ const isOneTimePasswordDialogVisible = ref(false)
                   label="Current Password"
                   placeholder="············"
                   @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
+                  
                 />
               </VCol>
             </VRow>
@@ -166,6 +190,8 @@ const isOneTimePasswordDialogVisible = ref(false)
                   autocomplete="on"
                   placeholder="············"
                   @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+                   :rules="[passwordValidator]"
+                  
                 />
               </VCol>
 
@@ -173,6 +199,7 @@ const isOneTimePasswordDialogVisible = ref(false)
                 cols="12"
                 md="6"
               >
+           
                 <!-- 👉 confirm password -->
                 <VTextField
                   v-model="confirmPassword"
@@ -182,6 +209,7 @@ const isOneTimePasswordDialogVisible = ref(false)
                   label="Confirm New Password"
                   placeholder="············"
                   @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+                 :rules="[value => confirmedValidator(value, passwordConfirmationTarget)]"
                 />
               </VCol>
             </VRow>
@@ -214,7 +242,7 @@ const isOneTimePasswordDialogVisible = ref(false)
 
             <!-- 👉 Action Buttons -->
             <div class="d-flex flex-wrap gap-4">
-              <VBtn>Save changes</VBtn>
+              <VBtn @click="save">Save changes</VBtn>
 
               <VBtn
                 type="reset"
@@ -363,7 +391,7 @@ const isOneTimePasswordDialogVisible = ref(false)
     </VCol>
 
     <!-- SECTION Recent Devices -->
-    <VCol cols="12">
+    <VCol cols="12" style="display: none;">
       <!-- 👉 Table -->
       <VCard
         title="Recent Devices"
@@ -396,6 +424,6 @@ const isOneTimePasswordDialogVisible = ref(false)
   </VRow>
 
   <!-- SECTION Enable One time password -->
-  <TwoFactorAuthDialog v-model:isDialogVisible="isOneTimePasswordDialogVisible" />
+  <TwoFactorAuthDialog v-model:isDialogVisible="isOneTimePasswordDialogVisible" style="display: none;"/>
   <!-- !SECTION -->
 </template>