initial commit

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

@@ -0,0 +1,110 @@
+<script setup>
+import axios from '@axios';
+import {
+    requiredValidator
+} from '@validators';
+const errors = ref({
+    new_password: undefined,
+    confirm_passowrd: undefined,
+
+})
+const isTonalSnackbarVisible = ref(false)
+const patientResponse = ref(false)
+const isLoadingVisible = ref(false)
+const passwordVForm = ref()
+const isNewPasswordVisible = ref(false)
+const isConfirmPasswordVisible = ref(false)
+const newPassword = ref(null)
+const confirmPassword = ref(null)
+
+const matchPasswordsValidator = (value) => {
+    if (value !== newPassword.value) {
+        errors.confirm_passowrd = ['Passwords do not match'];
+        return 'Passwords do not match';
+    }
+    return true;
+}
+
+const onSubmit = () => {
+    passwordVForm.value?.validate().then(async ({ valid: isValid }) => {
+        console.log('isValid ', isValid)
+        if (isValid)
+            await changePassword()
+    })
+}
+const changePassword = async () => {
+    isLoadingVisible.value = true;
+    await axios.post('/api/change-password', {
+        new_password: newPassword.value,
+
+    }).then(r => {
+        console.log("Change Password", r.data);
+        isTonalSnackbarVisible.value = true;
+        patientResponse.value = r.data.message;
+        isLoadingVisible.value = false;
+    }).catch(e => {
+        console.log(e.response);
+        const { errors: formErrors } = e.response.data.errors;
+        errors.value = e.response.data.errors;
+        isLoadingVisible.value = false;
+        console.error("Error", e.response.data.errors)
+    });
+}
+
+</script>
+
+<template>
+    <VSnackbar v-model="isTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="success">
+        {{ patientResponse }}
+    </VSnackbar>
+
+    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
+        <VCardText class="" style="color: white !important;">
+            <div class="demo-space-x">
+                <VProgressCircular :size="40" color="primary" indeterminate />
+            </div>
+        </VCardText>
+    </VDialog>
+    <VRow>
+        <VCol cols="12">
+            <VCard>
+                <VCardText>
+                    <VForm ref="passwordVForm" @submit.prevent="onSubmit">
+                        <VCardText>
+                            <VRow>
+                                <VCol cols="12" md="6">
+                                    <!-- 👉 new password -->
+                                    <VTextField v-model="newPassword" :type="isNewPasswordVisible ? 'text' : 'password'"
+                                        :append-inner-icon="isNewPasswordVisible ? 'bx-hide' : 'bx-show'"
+                                        label="New Password" placeholder="············"
+                                        @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+                                        :rules="[requiredValidator]" :error-messages="errors.new_password" />
+                                </VCol>
+
+                                <VCol cols="12" md="6">
+                                    <!-- 👉 confirm password -->
+                                    <VTextField v-model="confirmPassword"
+                                        :type="isConfirmPasswordVisible ? 'text' : 'password'"
+                                        :append-inner-icon="isConfirmPasswordVisible ? 'bx-hide' : 'bx-show'"
+                                        label="Re-enter Password" placeholder="············"
+                                        @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+                                        :rules="[requiredValidator, matchPasswordsValidator]"
+                                        :error-messages="errors.confirm_passowrd" />
+                                </VCol>
+                            </VRow>
+                        </VCardText>
+
+                        <!-- 👉 Action Buttons -->
+                        <VCardText class="d-flex flex-wrap gap-4">
+                            <VBtn type="submit">Save changes</VBtn>
+
+                            <!-- <VBtn type="reset" color="secondary" variant="tonal">
+                                Reset
+                            </VBtn> -->
+                        </VCardText>
+                    </VForm>
+                </VCardText>
+            </VCard>
+        </VCol>
+    </VRow>
+</template>