Fix login/logout flow

js/src/components/Account/Login.vue

@@ -67,6 +67,8 @@
   import { validateEmailField, validateRequiredField } from '@/utils/validators';
   import { saveUserData } from '@/utils/auth';
   import { ILogin } from '@/types/login.model'
+  import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'
+  import { onLogin } from '@/vue-apollo'
 
   @Component({
     components: {
@@ -123,6 +125,17 @@
         });
 
         saveUserData(result.data.login);
+
+        await this.$apollo.mutate({
+          mutation: UPDATE_CURRENT_USER_CLIENT,
+          variables: {
+            id: result.data.login.user.id,
+            email: this.credentials.email,
+          }
+        });
+
+        onLogin(this.$apollo);
+
         this.$router.push({ name: 'Home' });
       } catch (err) {
         console.error(err);

js/src/components/Home.vue

@@ -5,7 +5,7 @@
       src="https://picsum.photos/1200/900"
       dark
       height="300"
-      v-if="!user"
+      v-if="!currentUser.id"
     >
       <v-container fill-height>
         <v-layout align-center>
@@ -88,12 +88,17 @@
   import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
   import { FETCH_EVENTS } from '@/graphql/event';
   import { Component, Vue } from 'vue-property-decorator';
+  import { ICurrentUser } from '@/types/current-user.model';
+  import { CURRENT_USER_CLIENT } from '@/graphql/user';
 
   @Component({
     apollo: {
       events: {
         query: FETCH_EVENTS,
       },
+      currentUser: {
+        query: CURRENT_USER_CLIENT,
+      },
     },
   })
   export default class Home extends Vue {
@@ -109,7 +114,7 @@
     country = { name: null };
     // FIXME: correctly parse local storage
     actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
-    user = localStorage.getItem(AUTH_USER_ID);
+    currentUser!: ICurrentUser;
 
     get displayed_name() {
       return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
@@ -126,7 +131,7 @@
 
     geoLocalize() {
       const router = this.$router;
-      const sessionCity = sessionStorage.getItem('City')
+      const sessionCity = sessionStorage.getItem('City');
       if (sessionCity) {
         router.push({ name: 'EventList', params: { location: sessionCity } });
       } else {

js/src/components/NavBar.vue

@@ -46,12 +46,15 @@
       </template>
     </v-autocomplete>
     <v-spacer></v-spacer>
+
+    <span v-if="currentUser.id" @click="logout()">Logout</span>
+
     <v-menu
       offset-y
       :close-on-content-click="false"
       :nudge-width="200"
       v-model="notificationMenu"
-      v-if="user"
+      v-if="currentUser.id"
     >
       <v-btn icon slot="activator">
         <v-badge left color="red">
@@ -83,7 +86,7 @@
         </v-card-actions>
       </v-card>
     </v-menu>
-    <v-btn v-if="!user" :to="{ name: 'Login' }">
+    <v-btn v-if="!currentUser.id" :to="{ name: 'Login' }">
       <translate>Login</translate>
     </v-btn>
   </v-toolbar>
@@ -96,11 +99,14 @@
 </style>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
-import { SEARCH } from '@/graphql/search';
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+  import { AUTH_USER_ACTOR } from '@/constants';
+  import { SEARCH } from '@/graphql/search';
+  import { CURRENT_USER_CLIENT } from '@/graphql/user';
+  import { onLogout } from '@/vue-apollo';
+  import { deleteUserData } from '@/utils/auth';
 
-@Component({
+  @Component({
   apollo: {
     search: {
       query: SEARCH,
@@ -113,6 +119,9 @@ import { SEARCH } from '@/graphql/search';
         return !this.searchText;
       },
     },
+    currentUser: {
+      query: CURRENT_USER_CLIENT
+    }
   },
 })
 export default class NavBar extends Vue {
@@ -128,7 +137,6 @@ export default class NavBar extends Vue {
   searchText: string | null = null;
   searchSelect = null;
   actor = localStorage.getItem(AUTH_USER_ACTOR);
-  user = localStorage.getItem(AUTH_USER_ID);
 
   get items() {
     return this.search.map(searchEntry => {
@@ -165,5 +173,13 @@ export default class NavBar extends Vue {
     this.$apollo.queries['search'].refetch();
   }
 
+  logout() {
+    alert('logout !');
+
+    deleteUserData();
+
+    return onLogout(this.$apollo);
+  }
+
 }
 </script>