141 lines
4.6 KiB
Vue
141 lines
4.6 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import axios from 'axios';
|
|
import { useDialogPluginComponent } from 'quasar';
|
|
|
|
import useNotify from 'src/composables/useNotify';
|
|
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
|
|
const { dialogRef } = useDialogPluginComponent();
|
|
const { notify } = useNotify();
|
|
const { t } = useI18n();
|
|
|
|
const $props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
userPasswords: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
promise: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const closeButton = ref(null);
|
|
const isLoading = ref(false);
|
|
const newPassword = ref('');
|
|
const requestPassword = ref('');
|
|
|
|
const onSubmit = async () => {
|
|
isLoading.value = true;
|
|
|
|
if (newPassword.value !== requestPassword.value) {
|
|
notify(t("Passwords don't match"), 'negative');
|
|
isLoading.value = false;
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
newPassword: newPassword.value,
|
|
};
|
|
try {
|
|
await axios.patch(`Clients/${$props.id}/setPassword`, payload);
|
|
await $props.promise();
|
|
} catch (error) {
|
|
notify('errors.create', 'negative');
|
|
} finally {
|
|
isLoading.value = false;
|
|
if (closeButton.value) closeButton.value.click();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<QDialog ref="dialogRef">
|
|
<QCard class="q-pa-lg">
|
|
<QCardSection>
|
|
<QForm @submit.prevent="onSubmit">
|
|
<span
|
|
ref="closeButton"
|
|
class="row justify-end close-icon"
|
|
v-close-popup
|
|
>
|
|
<QIcon name="close" size="sm" />
|
|
</span>
|
|
|
|
<VnRow class="row q-gutter-md q-mb-md">
|
|
<div class="col">
|
|
<VnInput
|
|
:label="t('New password')"
|
|
clearable
|
|
v-model="newPassword"
|
|
type="password"
|
|
>
|
|
<template #append>
|
|
<QIcon name="info" class="cursor-info">
|
|
<QTooltip>
|
|
{{
|
|
t('customer.card.passwordRequirements', {
|
|
length: $props.userPasswords.length,
|
|
nAlpha: $props.userPasswords.nAlpha,
|
|
nDigits: $props.userPasswords.nDigits,
|
|
nPunct: $props.userPasswords.nPunct,
|
|
nUpper: $props.userPasswords.nUpper,
|
|
})
|
|
}}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</template>
|
|
</VnInput>
|
|
</div>
|
|
<div class="col">
|
|
<VnInput
|
|
:label="t('Request password')"
|
|
clearable
|
|
v-model="requestPassword"
|
|
type="password"
|
|
/>
|
|
</div>
|
|
</VnRow>
|
|
|
|
<div class="q-mt-lg row justify-end">
|
|
<QBtn
|
|
:disabled="isLoading"
|
|
:label="t('globals.cancel')"
|
|
:loading="isLoading"
|
|
class="q-ml-sm"
|
|
color="primary"
|
|
flat
|
|
type="reset"
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:disabled="isLoading"
|
|
:label="t('Change password')"
|
|
:loading="isLoading"
|
|
color="primary"
|
|
type="submit"
|
|
/>
|
|
</div>
|
|
</QForm>
|
|
</QCardSection>
|
|
</QCard>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
New password: Nueva contraseña
|
|
Request password: Repetir contraseña
|
|
Change password: Cambiar contraseña
|
|
Passwords don't match: Las contraseñas no coinciden
|
|
</i18n>
|