mobilizon.chapril.org-mobil.../js/src/views/User/PasswordReset.vue
Thomas Citharel eba3c70c9b
Various accessibility improvements
* Add announcement element with `aria-live`
* Add skip to main content element

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-10-11 17:37:16 +02:00

121 lines
3.2 KiB
Vue

<template>
<section class="section container">
<div class="columns is-mobile is-centered">
<div class="column is-half-desktop">
<h1 class="title">
{{ $t("Password reset") }}
</h1>
<b-message
:title="$t('Error')"
type="is-danger"
v-for="error in errors"
:key="error"
>{{ error }}</b-message
>
<form @submit="resetAction">
<b-field :label="$t('Password')">
<b-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password"
/>
</b-field>
<b-field :label="$t('Password (confirmation)')">
<b-input
aria-required="true"
required
type="password"
password-reveal
minlength="6"
v-model="credentials.password_confirmation"
/>
</b-field>
<button class="button is-primary">
{{ $t("Reset my password") }}
</button>
</form>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { validateRequiredField } from "../../utils/validators";
import { RESET_PASSWORD } from "../../graphql/auth";
import { saveUserData } from "../../utils/auth";
import { ILogin } from "../../types/login.model";
import RouteName from "../../router/name";
@Component({
metaInfo() {
return {
title: this.$t("Password reset") as string,
};
},
})
export default class PasswordReset extends Vue {
@Prop({ type: String, required: true }) token!: string;
credentials = {
password: "",
passwordConfirmation: "",
} as { password: string; passwordConfirmation: string };
errors: 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
);
}
async resetAction(e: Event): Promise<void> {
e.preventDefault();
this.errors.splice(0);
try {
const { data } = await this.$apollo.mutate<{ resetPassword: ILogin }>({
mutation: RESET_PASSWORD,
variables: {
password: this.credentials.password,
token: this.token,
},
});
if (data == null) {
throw new Error("Data is undefined");
}
saveUserData(data.resetPassword);
this.$router.push({ name: RouteName.HOME });
return;
} catch (err: any) {
err.graphQLErrors.forEach(({ message }: { message: any }) => {
this.errors.push(message);
});
}
}
}
</script>
<style lang="scss" scoped>
section.section.container {
background: $white;
}
.container .columns {
margin: 1rem auto 3rem;
}
</style>