105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
import { ref, useTemplateRef, computed } from 'vue';
|
||
|
|
import { PasswordInput, Dialog, FormGroup } from 'pankow';
|
||
|
|
import ProfileModel from '../../models/ProfileModel.js';
|
||
|
|
|
||
|
|
const emit = defineEmits([ 'success' ]);
|
||
|
|
|
||
|
|
const profileModel = ProfileModel.create();
|
||
|
|
|
||
|
|
const dialog = useTemplateRef('dialog');
|
||
|
|
const formError = ref({});
|
||
|
|
const busy = ref (false);
|
||
|
|
const newPassword = ref('');
|
||
|
|
const newPasswordRepeat = ref('');
|
||
|
|
const password = ref('');
|
||
|
|
|
||
|
|
const isFormValid = computed(() => {
|
||
|
|
if (!newPassword.value) return false;
|
||
|
|
if (newPasswordRepeat.value !== newPassword.value) return false;
|
||
|
|
if (!password.value) return false;
|
||
|
|
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
|
||
|
|
async function onSubmit() {
|
||
|
|
if (!isFormValid.value) return;
|
||
|
|
|
||
|
|
busy.value = true;
|
||
|
|
formError.value = {};
|
||
|
|
|
||
|
|
const [error] = await profileModel.setPassword(password.value, newPassword.value);
|
||
|
|
if (error) {
|
||
|
|
if (error.status === 400) formError.value.newPassword = error.body.message;
|
||
|
|
else if (error.status === 412) formError.value.password = error.body.message;
|
||
|
|
else {
|
||
|
|
formError.value.generic = error.status ? error.body.message : 'Internal error';
|
||
|
|
console.error('Failed to set password', error);
|
||
|
|
}
|
||
|
|
|
||
|
|
busy.value = false;
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
emit('success');
|
||
|
|
dialog.value.close();
|
||
|
|
|
||
|
|
busy.value = false;
|
||
|
|
formError.value = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
async open() {
|
||
|
|
newPassword.value = '';
|
||
|
|
newPasswordRepeat.value = '';
|
||
|
|
password.value = '';
|
||
|
|
busy.value = false;
|
||
|
|
formError.value = {};
|
||
|
|
dialog.value.open();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Dialog ref="dialog"
|
||
|
|
:title="$t('profile.changeFallbackEmail.title')"
|
||
|
|
:confirm-label="$t('main.dialog.save')"
|
||
|
|
:confirm-active="!busy && isFormValid"
|
||
|
|
:confirm-busy="busy"
|
||
|
|
confirm-style="primary"
|
||
|
|
:reject-label="$t('main.dialog.cancel')"
|
||
|
|
:reject-active="!busy"
|
||
|
|
reject-style="secondary"
|
||
|
|
@confirm="onSubmit"
|
||
|
|
>
|
||
|
|
<form @submit.prevent="onSubmit">
|
||
|
|
<fieldset :disabled="busy">
|
||
|
|
<input type="submit" style="display: none;" :disabled="!isFormValid"/>
|
||
|
|
|
||
|
|
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
|
||
|
|
|
||
|
|
<FormGroup :has-error="formError.newPassword">
|
||
|
|
<label>{{ $t('profile.changePassword.newPassword') }}</label>
|
||
|
|
<PasswordInput v-model="newPassword" />
|
||
|
|
<div class="error-label" v-if="formError.newPassword">{{ formError.newPassword }}</div>
|
||
|
|
</FormGroup>
|
||
|
|
|
||
|
|
<FormGroup :has-error="newPasswordRepeat.length && newPassword !== newPasswordRepeat">
|
||
|
|
<label>{{ $t('profile.changePassword.newPasswordRepeat') }}</label>
|
||
|
|
<PasswordInput v-model="newPasswordRepeat" />
|
||
|
|
<div class="error-label" v-if="newPasswordRepeat.length && newPassword !== newPasswordRepeat">{{ $t('profile.changePassword.errorPasswordsDontMatch') }}</div>
|
||
|
|
</FormGroup>
|
||
|
|
|
||
|
|
<FormGroup :has-error="formError.password">
|
||
|
|
<label>{{ $t('profile.changePassword.currentPassword') }}</label>
|
||
|
|
<PasswordInput v-model="password" />
|
||
|
|
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
|
||
|
|
</FormGroup>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
</Dialog>
|
||
|
|
</template>
|