Fix reset password component

This commit is contained in:
Chocobozzz 2019-01-11 13:58:29 +01:00
parent 54bae359a1
commit df4d3892c3
No known key found for this signature in database
GPG key ID: 583A612D890159BE
8 changed files with 94 additions and 54 deletions

View file

@ -62,9 +62,11 @@
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar.vue';
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGIN } from '@/graphql/auth';
import { validateEmail, validateRequiredField } from '@/utils/validators';
import { saveUserData } from '@/utils/auth';
import { ILogin } from '@/types/login.model'
@Component({
components: {
@ -91,8 +93,8 @@
},
};
rules = {
required: value => !!value || 'Required.',
email: (value) => value.includes('@') || 'Invalid e-mail.',
required: validateRequiredField,
email: validateEmail
};
user: any;
@ -109,9 +111,10 @@
async loginAction(e: Event) {
e.preventDefault();
this.error.show = false;
try {
const result = await this.$apollo.mutate({
const result = await this.$apollo.mutate<{ login: ILogin }>({
mutation: LOGIN,
variables: {
email: this.credentials.email,
@ -119,7 +122,7 @@
},
});
this.saveUserData(result.data);
saveUserData(result.data.login);
this.$router.push({ name: 'Home' });
} catch (err) {
console.error(err);
@ -131,10 +134,5 @@
validEmail() {
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
}
saveUserData({ login: login }) {
localStorage.setItem(AUTH_USER_ID, login.user.id);
localStorage.setItem(AUTH_TOKEN, login.token);
}
}
</script>

View file

@ -39,6 +39,10 @@
<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'
@Component
export default class PasswordReset extends Vue {
@ -66,8 +70,8 @@
},
};
rules = {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
password_length: value => value.length > 6 || 'Password must be at least 6 characters long',
required: validateRequiredField,
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
};
@ -76,32 +80,27 @@
this.credentials.password === this.credentials.password_confirmation;
}
resetAction(e) {
async resetAction(e) {
this.resetState();
this.error.show = false;
e.preventDefault();
console.log(this.token);
// FIXME: implements fetchStory
// fetchStory('/users/password-reset/post', this.$store, {
// method: 'POST',
// body: JSON.stringify({ password: this.credentials.password, token: this.token }),
// }).then((data) => {
// localStorage.setItem('token', data.token);
// localStorage.setItem('refresh_token', data.refresh_token);
// this.$store.commit('LOGIN_USER', data.account);
// this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
// this.$router.push({ name: 'Home' });
// }, (error) => {
// Promise.resolve(error).then((errormsg) => {
// console.log('errormsg', errormsg);
// this.error.show = true;
// Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
// console.log('key', key);
// console.log('val', val[ 0 ]);
// this.state[ key ] = { status: false, msg: val[ 0 ] };
// console.log('state', this.state);
// });
// });
// });
try {
const result = await this.$apollo.mutate<{ resetPassword: ILogin}>({
mutation: RESET_PASSWORD,
variables: {
password: this.credentials.password,
token: this.token,
},
});
saveUserData(result.data.resetPassword);
this.$router.push({ name: 'Home' });
} catch (err) {
console.error(err);
this.error.show = true;
}
}
resetState() {

View file

@ -32,6 +32,8 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { validateEmail, validateRequiredField } from '@/utils/validators';
import { SEND_RESET_PASSWORD } from '@/graphql/auth';
@Component
export default class SendPasswordReset extends Vue {
@ -46,33 +48,36 @@
email: {
status: null,
msg: '',
},
} as { status: boolean | null, msg: string },
};
rules = {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
required: validateRequiredField,
email: validateEmail,
};
mounted() {
this.credentials.email = this.email;
}
resendConfirmationAction(e) {
async resendConfirmationAction(e) {
e.preventDefault();
// FIXME: implement fetchStory
// fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
// this.error = false;
// this.validationSent = true;
// }).catch((err) => {
// Promise.resolve(err).then((data) => {
// this.error = true;
// this.state.email = { status: false, msg: data.errors };
// });
// });
this.error = false;
try {
await this.$apollo.mutate({
mutation: SEND_RESET_PASSWORD,
variables: {
email: this.credentials.email,
},
});
this.validationSent = true;
} catch (err) {
console.error(err);
this.error = true;
this.state.email = { status: false, msg: err.errors };
}
}
resetState() {

View file

@ -10,3 +10,20 @@ mutation Login($email: String!, $password: String!) {
},
}
`;
export const SEND_RESET_PASSWORD = gql`
mutation SendResetPassword($email: String!) {
sendResetPassword(email: $email)
}
`;
export const RESET_PASSWORD = gql`
mutation ResetPassword($token: String!, $password: String!) {
resetPassword(token: $token, password: $password) {
token,
user {
id,
}
},
}
`;

View file

@ -0,0 +1,7 @@
export interface ILogin {
user: {
id: number,
},
token: string,
}

7
js/src/utils/auth.ts Normal file
View file

@ -0,0 +1,7 @@
import { AUTH_TOKEN, AUTH_USER_ID } from '@/constants';
import { ILogin } from '@/types/login.model';
export function saveUserData(obj: ILogin) {
localStorage.setItem(AUTH_USER_ID, `${obj.user.id}`);
localStorage.setItem(AUTH_TOKEN, obj.token);
}

View file

@ -0,0 +1,7 @@
export function validateEmail(value: string) {
return value.includes('@') || 'Invalid e-mail.';
}
export function validateRequiredField(value: any) {
return !!value || 'Required.';
}

View file

@ -96,7 +96,7 @@ defmodule MobilizonWeb.Resolvers.User do
Send an email to reset the password from an user
"""
def send_reset_password(_parent, %{email: email, locale: locale}, _resolution) do
with {:ok, user} <- Actors.get_user_by_email(email, false),
with {:ok, user} <- Actors.get_user_by_email(email, true),
{:ok, %Bamboo.Email{} = _email_html} <-
Mobilizon.Actors.Service.ResetPassword.send_password_reset_email(user, locale) do
{:ok, email}