111 lines
4.3 KiB
Vue
111 lines
4.3 KiB
Vue
<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>
|