Fix reset password component

js/src/components/Account/Login.vue

@@ -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>

js/src/components/Account/PasswordReset.vue

@@ -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() {

js/src/components/Account/SendPasswordReset.vue

@@ -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() {

js/src/graphql/auth.ts

@@ -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,
+    }
+  },
+}
+`;

js/src/types/login.model.ts

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

js/src/utils/auth.ts

@@ -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);
+}

js/src/utils/validators.ts

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

lib/mobilizon_web/resolvers/user.ex

@@ -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}