mobilizon.chapril.org-mobil.../js/src/views/User/PasswordReset.vue
Thomas Citharel ee20e03cc2
Migrate to Vue 3 and Vite
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2022-08-11 16:46:31 +02:00

116 lines
2.9 KiB
Vue

<template>
<section class="container mx-auto">
<h1 class="">
{{ $t("Password reset") }}
</h1>
<o-notification
:title="$t('Error')"
variant="danger"
v-for="error in errors"
:key="error"
>{{ error }}</o-notification
>
<form @submit="resetAction">
<o-field :label="$t('Password')">
<o-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password"
/>
</o-field>
<o-field :label="$t('Password (confirmation)')">
<o-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.passwordConfirmation"
/>
</o-field>
<button class="button is-primary">
{{ $t("Reset my password") }}
</button>
</form>
</section>
</template>
<script lang="ts" setup>
import { RESET_PASSWORD } from "@/graphql/auth";
import { saveUserData } from "@/utils/auth";
import { ILogin } from "@/types/login.model";
import RouteName from "@/router/name";
import { reactive, ref, computed } from "vue";
import { useMutation } from "@vue/apollo-composable";
import { useRouter } from "vue-router";
import { useHead } from "@vueuse/head";
import { useI18n } from "vue-i18n";
const props = defineProps<{ token: string }>();
const { t } = useI18n({ useScope: "global" });
useHead({ title: computed(() => t("Password reset")) });
const credentials = reactive<{
password: string;
passwordConfirmation: string;
}>({
password: "",
passwordConfirmation: "",
});
const errors = ref<string[]>([]);
// rules = {
// passwordLength: (value: string): boolean | string =>
// value.length > 6 || "Password must be at least 6 characters long",
// required: validateRequiredField,
// passwordEqual: (value: string): boolean | string =>
// value === this.credentials.password || "Passwords must be the same",
// };
// get samePasswords(): boolean {
// return (
// this.rules.passwordLength(this.credentials.password) === true &&
// this.credentials.password === this.credentials.passwordConfirmation
// );
// }
const router = useRouter();
const {
mutate: resetPasswordMutation,
onDone: resetPasswordMutationDone,
onError: resetPasswordMutationError,
} = useMutation<{ resetPassword: ILogin }>(RESET_PASSWORD);
resetPasswordMutationDone(({ data }) => {
if (data == null) {
throw new Error("Data is undefined");
}
saveUserData(data.resetPassword);
router.push({ name: RouteName.HOME });
return;
});
resetPasswordMutationError((err) => {
err.graphQLErrors.forEach(({ message }: { message: any }) => {
errors.value.push(message);
});
});
const resetAction = (e: Event) => {
e.preventDefault();
errors.value.splice(0);
resetPasswordMutation({
password: credentials.password,
token: props.token,
});
};
</script>