110 lines
3.0 KiB
Vue
110 lines
3.0 KiB
Vue
<template>
|
|
<modal-form ref="modal" size="md" centered :title="$gettext('Change Password')" :disable-save-button="v$.$invalid"
|
|
@submit="onSubmit" @hidden="clearContents">
|
|
<b-form-fieldset>
|
|
<b-wrapped-form-group id="form_current_password" :field="v$.current_password"
|
|
input-type="password" autofocus>
|
|
<template #label>
|
|
{{ $gettext('Current Password') }}
|
|
</template>
|
|
</b-wrapped-form-group>
|
|
|
|
<b-wrapped-form-group id="form_new_password" :field="v$.new_password" input-type="password">
|
|
<template #label>
|
|
{{ $gettext('New Password') }}
|
|
</template>
|
|
</b-wrapped-form-group>
|
|
|
|
<b-wrapped-form-group id="form_current_password" :field="v$.new_password2" input-type="password">
|
|
<template #label>
|
|
{{ $gettext('Confirm New Password') }}
|
|
</template>
|
|
</b-wrapped-form-group>
|
|
</b-form-fieldset>
|
|
|
|
<template #save-button-name>
|
|
{{ $gettext('Change Password') }}
|
|
</template>
|
|
</modal-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
|
|
import ModalForm from "~/components/Common/ModalForm";
|
|
import BFormFieldset from "~/components/Form/BFormFieldset";
|
|
import {helpers, required, sameAs} from "@vuelidate/validators";
|
|
import validatePassword from "~/functions/validatePassword";
|
|
import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
|
|
import {ref} from "vue";
|
|
import {useNotify} from "~/vendor/bootstrapVue";
|
|
import {useAxios} from "~/vendor/axios";
|
|
import {useTranslate} from "~/vendor/gettext";
|
|
|
|
const props = defineProps({
|
|
changePasswordUrl: String
|
|
});
|
|
|
|
const emit = defineEmits(['relist']);
|
|
|
|
const passwordsMatch = (value, siblings) => {
|
|
return siblings.new_password === value;
|
|
};
|
|
|
|
const {$gettext} = useTranslate();
|
|
|
|
const {form, resetForm, v$} = useVuelidateOnForm(
|
|
{
|
|
current_password: {required},
|
|
new_password: {required, validatePassword},
|
|
new_password2: {
|
|
required,
|
|
passwordsMatch: helpers.withMessage($gettext('Must match new password.'), passwordsMatch)
|
|
}
|
|
},
|
|
{
|
|
current_password: null,
|
|
new_password: null,
|
|
new_password2: null
|
|
}
|
|
);
|
|
|
|
const error = ref(null);
|
|
|
|
const clearContents = () => {
|
|
error.value = null;
|
|
resetForm();
|
|
};
|
|
|
|
const modal = ref(); // ModalForm
|
|
|
|
const open = () => {
|
|
clearContents();
|
|
modal.value.show();
|
|
};
|
|
|
|
const close = () => {
|
|
modal.value.hide();
|
|
}
|
|
|
|
const {wrapWithLoading} = useNotify();
|
|
const {axios} = useAxios();
|
|
|
|
const onSubmit = () => {
|
|
v$.value.$touch();
|
|
if (v$.value.$errors.length > 0) {
|
|
return;
|
|
}
|
|
|
|
wrapWithLoading(
|
|
axios.put(props.changePasswordUrl, form.value)
|
|
).finally(() => {
|
|
modal.value.hide();
|
|
emit('relist');
|
|
});
|
|
};
|
|
|
|
defineExpose({
|
|
open
|
|
});
|
|
</script>
|