Automatically login after registration

Closes #186

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/NavBar.vue

@@ -94,6 +94,9 @@ import { RouteName } from '@/router';
     identities: {
       query: IDENTITIES,
       update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [],
+      skip() {
+        return this.currentUser.isLoggedIn === false;
+      },
     },
     config: {
       query: CONFIG,
@@ -114,6 +117,7 @@ export default class NavBar extends Vue {
 
   @Watch('currentActor')
   async initializeListOfIdentities() {
+    if (!this.currentUser.isLoggedIn) return;
     const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
       query: IDENTITIES,
     });

js/src/graphql/user.ts

@@ -18,7 +18,12 @@ mutation ValidateUser($token: String!) {
       id,
       email,
       defaultActor {
-        id
+        id,
+        preferredUsername,
+        name,
+        avatar {
+            url
+        }
       }
     }
   }

js/src/types/current-user.model.ts

@@ -1,4 +1,5 @@
 import { IEvent, IParticipant } from '@/types/event.model';
+import { IPerson } from '@/types/actor/person.model';
 
 export enum ICurrentUserRole {
   USER = 'USER',
@@ -12,5 +13,6 @@ export interface ICurrentUser {
   isLoggedIn: boolean;
   role: ICurrentUserRole;
   participations: IParticipant[];
+  defaultActor: IPerson;
   drafts: IEvent[];
 }

js/src/views/Account/Register.vue

@@ -103,12 +103,14 @@ export default class Register extends Vue {
         mutation: REGISTER_PERSON,
         variables: Object.assign({ email: this.email }, this.person),
         update: (store, { data }) => {
+          if (this.userAlreadyActivated) {
             const identitiesData = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
 
             if (identitiesData && data) {
               identitiesData.identities.push(data.registerPerson);
               store.writeQuery({ query: IDENTITIES, data: identitiesData });
             }
+          }
         },
       });
       if (data) {

js/src/views/Home.vue

@@ -157,6 +157,7 @@ export default class Home extends Vue {
     const lastWeek = new Date();
     lastWeek.setDate(new Date().getDate() - 7);
 
+    if (this.currentUser.isLoggedIn === false) return;
     const { data } = await this.$apollo.query({
       query: LOGGED_USER_PARTICIPATIONS,
       variables: {

js/src/views/User/Register.vue

@@ -36,7 +36,7 @@
           </div>
         </div>
         <div class="column">
-          <form @submit="submit">
+          <form v-on:submit.prevent="submit()">
             <b-field
               :label="$t('Email')"
               :type="errors.email ? 'is-danger' : null"
@@ -69,7 +69,7 @@
 
             <b-field grouped>
               <div class="control">
-                <button type="button" class="button is-primary" @click="submit()">
+                <button class="button is-primary">
                   {{ $t('Register') }}
                 </button>
               </div>

js/src/views/User/Validate.vue

@@ -17,11 +17,13 @@
 </template>
 
 <script lang="ts">
-import { VALIDATE_USER } from '@/graphql/user';
+import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { AUTH_USER_ID } from '@/constants';
 import { RouteName } from '@/router';
-import { saveTokenData } from '@/utils/auth';
+import { saveUserData, changeIdentity } from '@/utils/auth';
+import { ILogin } from '@/types/login.model';
+import { ICurrentUserRole } from '@/types/current-user.model';
 
 @Component
 export default class Validate extends Vue {
@@ -36,18 +38,30 @@ export default class Validate extends Vue {
 
   async validateAction() {
     try {
-      const { data } = await this.$apollo.mutate({
+      const { data } = await this.$apollo.mutate<{ validateUser: ILogin }>({
         mutation: VALIDATE_USER,
         variables: {
           token: this.token,
         },
       });
 
-      this.saveUserData(data);
+      if (data) {
+        saveUserData(data.validateUser);
 
         const user = data.validateUser.user;
-      console.log(user);
+
+        await this.$apollo.mutate({
+          mutation: UPDATE_CURRENT_USER_CLIENT,
+          variables: {
+            id: user.id,
+            email: user.email,
+            isLoggedIn: true,
+            role: ICurrentUserRole.USER,
+          },
+        });
+
         if (user.defaultActor) {
+          await changeIdentity(this.$apollo.provider.defaultClient, user.defaultActor);
           await this.$router.push({ name: RouteName.HOME });
         } else { // If the user didn't register any profile yet, let's create one for them
           await this.$router.push({
@@ -55,6 +69,7 @@ export default class Validate extends Vue {
             params: { email: user.email, userAlreadyActivated: 'true' },
           });
         }
+      }
     } catch (err) {
       console.error(err);
       this.failed = true;
@@ -62,11 +77,5 @@ export default class Validate extends Vue {
       this.loading = false;
     }
   }
-
-  saveUserData({ validateUser: login }) {
-    localStorage.setItem(AUTH_USER_ID, login.user.id);
-
-    saveTokenData(login);
-  }
 }
 </script>

js/tests/e2e/specs/register.js

@@ -65,5 +65,8 @@ describe('Registration', () => {
     cy.location().should((loc) => {
       expect(loc.pathname).to.eq('/');
     });
+
+    cy.contains('.navbar-link', 'tester');
+    cy.contains('article.message.is-info', 'Welcome back tester account');
   });
 });

tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "./js/tsconfig.json"
+}