137 lines
4.5 KiB
Vue
137 lines
4.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import VnRow from '../ui/VnRow.vue';
|
|
import VnInput from './VnInput.vue';
|
|
import FetchData from '../FetchData.vue';
|
|
import useNotify from 'src/composables/useNotify';
|
|
|
|
const props = defineProps({
|
|
submitFn: { type: Function, default: () => {} },
|
|
askOldPass: { type: Boolean, default: false },
|
|
});
|
|
const emit = defineEmits(['onSubmit']);
|
|
const { t } = useI18n();
|
|
const { notify } = useNotify();
|
|
|
|
const form = ref();
|
|
const changePassDialog = ref();
|
|
const passwords = ref({ newPassword: null, repeatPassword: null });
|
|
const requirements = ref([]);
|
|
const isLoading = ref(false);
|
|
|
|
const validate = async () => {
|
|
const { newPassword, repeatPassword, oldPassword } = passwords.value;
|
|
|
|
if (!newPassword) {
|
|
notify(t('You must enter a new password'), 'negative');
|
|
return;
|
|
}
|
|
if (newPassword !== repeatPassword) {
|
|
notify(t("Passwords don't match"), 'negative');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
isLoading.value = true;
|
|
await props.submitFn(newPassword, oldPassword);
|
|
emit('onSubmit');
|
|
} catch (e) {
|
|
notify('errors.writeRequest', 'negative');
|
|
} finally {
|
|
changePassDialog.value.hide();
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
defineExpose({ show: () => changePassDialog.value.show() });
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
url="UserPasswords/findOne"
|
|
auto-load
|
|
@on-fetch="(data) => (requirements = data)"
|
|
/>
|
|
<QDialog ref="changePassDialog">
|
|
<QCard style="width: 350px">
|
|
<QCardSection>
|
|
<slot name="header">
|
|
<VnRow class="items-center" style="flex-direction: row">
|
|
<span class="text-h6" v-text="t('globals.changePass')" />
|
|
<QIcon
|
|
class="cursor-pointer"
|
|
name="close"
|
|
size="xs"
|
|
style="flex: 0"
|
|
v-close-popup
|
|
/>
|
|
</VnRow>
|
|
</slot>
|
|
</QCardSection>
|
|
<QForm ref="form">
|
|
<QCardSection>
|
|
<VnInput
|
|
v-if="props.askOldPass"
|
|
:label="t('Old password')"
|
|
v-model="passwords.oldPassword"
|
|
type="password"
|
|
:required="true"
|
|
autofocus
|
|
/>
|
|
<VnInput
|
|
:label="t('New password')"
|
|
v-model="passwords.newPassword"
|
|
type="password"
|
|
:required="true"
|
|
:info="
|
|
t('passwordRequirements', {
|
|
length: requirements.length,
|
|
nAlpha: requirements.nAlpha,
|
|
nUpper: requirements.nUpper,
|
|
nDigits: requirements.nDigits,
|
|
nPunct: requirements.nPunct,
|
|
})
|
|
"
|
|
autofocus
|
|
/>
|
|
|
|
<VnInput
|
|
:label="t('Repeat password')"
|
|
v-model="passwords.repeatPassword"
|
|
type="password"
|
|
/>
|
|
</QCardSection>
|
|
</QForm>
|
|
<QCardActions>
|
|
<slot name="actions">
|
|
<QBtn
|
|
:disabled="isLoading"
|
|
:loading="isLoading"
|
|
:label="t('globals.cancel')"
|
|
class="q-ml-sm"
|
|
color="primary"
|
|
flat
|
|
type="reset"
|
|
v-close-popup
|
|
/>
|
|
<QBtn
|
|
:disabled="isLoading"
|
|
:loading="isLoading"
|
|
:label="t('globals.confirm')"
|
|
color="primary"
|
|
@click="validate"
|
|
/>
|
|
</slot>
|
|
</QCardActions>
|
|
</QCard>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<i18n>
|
|
es:
|
|
New password: Nueva contraseña
|
|
Repeat password: Repetir contraseña
|
|
You must enter a new password: Debes introducir la nueva contraseña
|
|
Passwords don't match: Las contraseñas no coinciden
|
|
</i18n>
|