Merge branch 'feature/pick-identity' into 'master'

Add identity pickers on event creation & join

Closes #153 et #152

See merge request framasoft/mobilizon!183

js/src/App.vue

@@ -11,11 +11,20 @@
 <script lang="ts">
 import NavBar from '@/components/NavBar.vue';
 import { Component, Vue } from 'vue-property-decorator';
-import { AUTH_ACCESS_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from '@/constants';
+import {
+  AUTH_ACCESS_TOKEN,
+  AUTH_USER_ACTOR_ID,
+  AUTH_USER_EMAIL,
+  AUTH_USER_ID,
+  AUTH_USER_ROLE,
+} from '@/constants';
 import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { ICurrentUser } from '@/types/current-user.model';
 import Footer from '@/components/Footer.vue';
 import Logo from '@/components/Logo.vue';
+import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
+import { IPerson } from '@/types/actor';
+import { changeIdentity, saveActorData } from '@/utils/auth';
 
 @Component({
   apollo: {
@@ -30,16 +39,9 @@ import Logo from '@/components/Logo.vue';
   },
 })
 export default class App extends Vue {
-  currentUser!: ICurrentUser;
+  async created() {
-
-  actor = localStorage.getItem(AUTH_USER_ACTOR);
-
-  async mounted() {
     await this.initializeCurrentUser();
-  }
+    await this.initializeCurrentActor();
-
-  getUser(): ICurrentUser | false {
-    return this.currentUser.id ? this.currentUser : false;
   }
 
   private initializeCurrentUser() {
@@ -60,6 +62,27 @@ export default class App extends Vue {
       });
     }
   }
+
+  /**
+   * We fetch from localStorage the latest actor ID used,
+   * then fetch the current identities to set in cache
+   * the current identity used
+   */
+  private async initializeCurrentActor() {
+    const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
+
+    const result = await this.$apollo.query({
+      query: IDENTITIES,
+    });
+    const identities = result.data.identities;
+    if (identities.length < 1) return;
+    const activeIdentity = identities.find(identity => identity.id === actorId) || identities[0] as IPerson;
+
+    if (activeIdentity) {
+      console.log('calling changeIdentity with', activeIdentity);
+      return await changeIdentity(this.$apollo.provider.defaultClient, activeIdentity);
+    }
+  }
 }
 </script>
 
@@ -77,6 +100,7 @@ export default class App extends Vue {
 @import "~bulma/sass/components/pagination.sass";
 @import "~bulma/sass/components/dropdown.sass";
 @import "~bulma/sass/components/breadcrumb.sass";
+@import "~bulma/sass/components/list.sass";
 @import "~bulma/sass/elements/box.sass";
 @import "~bulma/sass/elements/button.sass";
 @import "~bulma/sass/elements/container.sass";

js/src/apollo/user.ts

@@ -12,6 +12,13 @@ export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObjec
         isLoggedIn: false,
         role: ICurrentUserRole.USER,
       },
+      currentActor: {
+        __typename: 'CurrentActor',
+        id: null,
+        preferredUsername: null,
+        name: null,
+        avatar: null,
+      },
     },
   });
 
@@ -28,6 +35,19 @@ export function buildCurrentUserResolver(cache: ApolloCache<NormalizedCacheObjec
           },
         };
 
+        cache.writeData({ data });
+      },
+      updateCurrentActor: (_, { id, preferredUsername, avatar, name }, { cache }) => {
+        const data = {
+          currentActor: {
+            id,
+            preferredUsername,
+            avatar,
+            name,
+            __typename: 'CurrentActor',
+          },
+        };
+
         cache.writeData({ data });
       },
     },

js/src/components/Account/Identities.vue

@@ -55,7 +55,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
+import { IDENTITIES } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 
 @Component({

js/src/components/Editor.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-    <div class="editor" id="tiptab-editor" :data-actor-id="loggedPerson && loggedPerson.id">
+    <div class="editor" id="tiptab-editor" :data-actor-id="currentActor && currentActor.id">
         <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
             <div class="menubar bar-is-hidden" :class="{ 'is-focused': focused }">
 
@@ -176,20 +176,20 @@ import { IActor, IPerson } from '@/types/actor';
 import Image from '@/components/Editor/Image';
 import { UPLOAD_PICTURE } from '@/graphql/upload';
 import { listenFileUpload } from '@/utils/upload';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 
 @Component({
   components: { EditorContent, EditorMenuBar, EditorMenuBubble },
   apollo: {
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
 })
 export default class CreateEvent extends Vue {
   @Prop({ required: true }) value!: String;
 
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
 
   editor: Editor = null;
 
@@ -438,7 +438,7 @@ export default class CreateEvent extends Vue {
       variables: {
         file: image,
         name: image.name,
-        actorId: this.loggedPerson.id,
+        actorId: this.currentActor.id,
       },
     });
     if (data.uploadPicture && data.uploadPicture.url) {

js/src/components/Event/ParticipationModal.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Join event {{ event.title }}</p>
+        </header>
+
+        <section class="modal-card-body is-flex">
+            <div class="media">
+                <div
+                        class="media-left">
+                    <b-icon
+                            icon="alert"
+                            type="is-warning"
+                            size="is-large"/>
+                </div>
+                <div class="media-content">
+                    <p>Do you want to participate in {{ event.title }}?</p>
+
+                    <b-field :label="$gettext('Identity')">
+                        <identity-picker v-model="identity"></identity-picker>
+                    </b-field>
+
+                    <p v-if="!event.local">
+                        The event came from another instance. Your participation will be confirmed after we confirm it with the other instance.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <footer class="modal-card-foot">
+            <button
+                    class="button"
+                    ref="cancelButton"
+                    @click="close">
+                Cancel
+            </button>
+            <button
+                    class="button is-primary"
+                    ref="confirmButton"
+                    @click="confirm">
+                Confirm my particpation
+            </button>
+        </footer>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IEvent } from '@/types/event.model';
+import IdentityPicker from '@/views/Account/IdentityPicker.vue';
+import { IPerson } from '@/types/actor';
+
+@Component({
+  components: {
+    IdentityPicker,
+  },
+  mounted() {
+    this.$data.isActive = true;
+  },
+})
+export default class ReportModal extends Vue {
+  @Prop({ type: Function, default: () => {} }) onConfirm;
+  @Prop({ type: Object }) event! : IEvent;
+  @Prop({ type: Object }) defaultIdentity!: IPerson;
+
+  isActive: boolean = false;
+  identity: IPerson = this.defaultIdentity;
+
+  confirm() {
+    this.onConfirm(this.identity);
+  }
+
+    /**
+     * Close the Dialog.
+     */
+  close() {
+    this.isActive = false;
+    this.$emit('close');
+  }
+}
+</script>
+<style lang="scss">
+    .modal-card .modal-card-foot {
+        justify-content: flex-end;
+    }
+</style>

js/src/components/NavBar.vue

@@ -27,26 +27,42 @@
           <div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
             <a
               class="navbar-link"
-              v-if="loggedPerson"
+              v-if="currentActor"
             >
-              <figure class="image is-24x24" v-if="loggedPerson.avatar">
+              <figure class="image is-24x24" v-if="currentActor.avatar">
-                <img alt="avatarUrl" :src="loggedPerson.avatar.url">
+                <img alt="avatarUrl" :src="currentActor.avatar.url">
               </figure>
-              <span>{{ loggedPerson.preferredUsername }}</span>
+              <span>{{ currentActor.preferredUsername }}</span>
             </a>
 
-            <div class="navbar-dropdown">
+            <div class="navbar-dropdown is-boxed">
-              <span class="navbar-item">
+              <div v-for="identity in identities" v-if="identities.length > 0">
+                <a class="navbar-item" @click="setIdentity(identity)" :class="{ 'is-active': identity.id === currentActor.id }">
+                   <div class="media-left">
+                      <figure class="image is-24x24" v-if="identity.avatar">
+                        <img class="is-rounded" :src="identity.avatar.url">
+                      </figure>
+                    </div>
+
+                    <div class="media-content">
+                      <h3>{{ identity.displayName() }}</h3>
+                    </div>
+                </a>
+
+                <hr class="navbar-divider">
+              </div>
+
+              <a class="navbar-item">
                 <router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
-              </span>
+              </a>
 
-              <span class="navbar-item">
+              <a class="navbar-item">
                 <router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link>
-              </span>
+              </a>
 
-              <span class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
+              <a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
                 <router-link :to="{ name: AdminRouteName.DASHBOARD }" v-translate>Administration</router-link>
-              </span>
+              </a>
 
               <a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
             </div>
@@ -70,9 +86,9 @@
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
-import { logout } from '@/utils/auth';
+import { changeIdentity, logout } from '@/utils/auth';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
-import { IPerson } from '@/types/actor';
+import { IPerson, Person } from '@/types/actor';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
 import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
@@ -87,6 +103,13 @@ import { RouteName } from '@/router';
     currentUser: {
       query: CURRENT_USER_CLIENT,
     },
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+    identities: {
+      query: IDENTITIES,
+      update: ({ identities }) => identities.map(identity => new Person(identity)),
+    },
     config: {
       query: CONFIG,
     },
@@ -101,28 +124,30 @@ export default class NavBar extends Vue {
     { header: 'Coucou' },
     { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
   ];
-  loggedPerson: IPerson | null = null;
+  currentActor!: IPerson;
   config!: IConfig;
   currentUser!: ICurrentUser;
   ICurrentUserRole = ICurrentUserRole;
+  identities!: IPerson[];
   showNavbar: boolean = false;
 
   ActorRouteName = ActorRouteName;
   AdminRouteName = AdminRouteName;
 
-  @Watch('currentUser')
+  // @Watch('currentUser')
-  async onCurrentUserChanged() {
+  // async onCurrentUserChanged() {
-    // Refresh logged person object
+  //   // Refresh logged person object
-    if (this.currentUser.isLoggedIn) {
+  //   if (this.currentUser.isLoggedIn) {
-      const result = await this.$apollo.query({
+  //     const result = await this.$apollo.query({
-        query: LOGGED_PERSON,
+  //       query: CURRENT_ACTOR_CLIENT,
-      });
+  //     });
-
+  //     console.log(result);
-      this.loggedPerson = result.data.loggedPerson;
+  //
-    } else {
+  //     this.loggedPerson = result.data.currentActor;
-      this.loggedPerson = null;
+  //   } else {
-    }
+  //     this.loggedPerson = null;
-  }
+  //   }
+  // }
 
   async logout() {
     await logout(this.$apollo.provider.defaultClient);
@@ -130,6 +155,10 @@ export default class NavBar extends Vue {
     if (this.$route.name === RouteName.HOME) return;
     return this.$router.push({ name: RouteName.HOME });
   }
+
+  async setIdentity(identity: IPerson) {
+    return await changeIdentity(this.$apollo.provider.defaultClient, identity);
+  }
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Report/ReportModal.vue

@@ -43,7 +43,7 @@
                 <button
                         class="button"
                         ref="cancelButton"
-                        @click="cancel('button')">
+                        @click="close">
                     {{ cancelText }}
                 </button>
                 <button
@@ -86,11 +86,7 @@ export default class ReportModal extends Vue {
      */
   close() {
     this.isActive = false;
-        // Timeout for the animation complete before destroying
+    this.$emit('close');
-    setTimeout(() => {
-      this.$destroy();
-      removeElement(this.$el);
-    },         150);
   }
 }
 </script>

js/src/constants.ts

@@ -2,5 +2,5 @@ export const AUTH_ACCESS_TOKEN = 'auth-access-token';
 export const AUTH_REFRESH_TOKEN = 'auth-refresh-token';
 export const AUTH_USER_ID = 'auth-user-id';
 export const AUTH_USER_EMAIL = 'auth-user-email';
-export const AUTH_USER_ACTOR = 'auth-user-actor';
+export const AUTH_USER_ACTOR_ID = 'auth-user-actor-id';
 export const AUTH_USER_ROLE = 'auth-user-role';

js/src/graphql/actor.ts

@@ -40,6 +40,25 @@ query {
   }
 }`;
 
+export const CURRENT_ACTOR_CLIENT = gql`
+    query {
+        currentActor @client {
+            id,
+            avatar {
+                url
+            },
+            preferredUsername,
+            name
+        }
+    }
+`;
+
+export const UPDATE_CURRENT_ACTOR_CLIENT = gql`
+    mutation UpdateCurrentActor($id: String!, $avatar: String, $preferredUsername: String!, $name: String!) {
+        updateCurrentActor(id: $id, avatar: $avatar, preferredUsername: $preferredUsername, name: $name) @client
+    }
+`;
+
 export const LOGGED_PERSON_WITH_GOING_TO_EVENTS = gql`
 query {
   loggedPerson {

js/src/graphql/user.ts

@@ -37,7 +37,7 @@ query {
 `;
 
 export const UPDATE_CURRENT_USER_CLIENT = gql`
-mutation UpdateCurrentUser($id: Int!, $email: String!, $isLoggedIn: Boolean!, $role: UserRole!) {
+mutation UpdateCurrentUser($id: String!, $email: String!, $isLoggedIn: Boolean!, $role: UserRole!) {
   updateCurrentUser(id: $id, email: $email, isLoggedIn: $isLoggedIn, role: $role) @client
 }
 `;

js/src/plugins/notifier.ts

@@ -4,6 +4,7 @@ declare module 'vue/types/vue' {
   interface Vue {
     $notifier: {
       success: (message: string) => void;
+      error: (message: string) => void;
     };
   }
 }
@@ -16,7 +17,7 @@ export class Notifier {
   }
 
   success(message: string) {
-    this.vue.prototype.$notification.open({
+    this.vue.prototype.$buefy.notification.open({
       message,
       duration: 5000,
       position: 'is-bottom-right',
@@ -24,6 +25,16 @@ export class Notifier {
       hasIcon: true,
     });
   }
+
+  error(message: string) {
+    this.vue.prototype.$buefy.notification.open({
+      message,
+      duration: 5000,
+      position: 'is-bottom-right',
+      type: 'is-danger',
+      hasIcon: true,
+    });
+  }
 }
 
 // tslint:disable

js/src/types/actor/actor.model.ts

@@ -36,7 +36,7 @@ export class Actor implements IActor {
     return `@${this.preferredUsername}${domain}`;
   }
 
-  displayName(): string {
+  public displayName(): string {
     return this.name != null && this.name !== '' ? this.name : this.usernameWithDomain();
   }
 }

js/src/types/event.model.ts

@@ -90,7 +90,7 @@ export interface IEvent {
 
   picture: IPicture | null;
 
-  organizerActor: IActor;
+  organizerActor?: IActor;
   attributedTo: IActor;
   participants: IParticipant[];
 
@@ -159,7 +159,7 @@ export class EventModel implements IEvent {
   relatedEvents: IEvent[] = [];
 
   attributedTo = new Actor();
-  organizerActor = new Actor();
+  organizerActor?: IActor;
 
   tags: ITag[] = [];
   options: IEventOptions = new EventOptions();

js/src/utils/auth.ts

@@ -1,9 +1,18 @@
-import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from '@/constants';
+import {
+  AUTH_ACCESS_TOKEN,
+  AUTH_REFRESH_TOKEN,
+  AUTH_USER_ACTOR_ID,
+  AUTH_USER_EMAIL,
+  AUTH_USER_ID,
+  AUTH_USER_ROLE,
+} from '@/constants';
 import { ILogin, IToken } from '@/types/login.model';
 import { UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { onLogout } from '@/vue-apollo';
 import ApolloClient from 'apollo-client';
 import { ICurrentUserRole } from '@/types/current-user.model';
+import { IPerson } from '@/types/actor';
+import { UPDATE_CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 
 export function saveUserData(obj: ILogin) {
   localStorage.setItem(AUTH_USER_ID, `${obj.user.id}`);
@@ -13,17 +22,29 @@ export function saveUserData(obj: ILogin) {
   saveTokenData(obj);
 }
 
+export function saveActorData(obj: IPerson) {
+  localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
+}
+
 export function saveTokenData(obj: IToken) {
   localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken);
   localStorage.setItem(AUTH_REFRESH_TOKEN, obj.refreshToken);
 }
 
 export function deleteUserData() {
-  for (const key of [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE]) {
+  for (const key of [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE, AUTH_USER_ACTOR_ID]) {
     localStorage.removeItem(key);
   }
 }
 
+export async function changeIdentity(apollo: ApolloClient<any>, identity: IPerson) {
+  await apollo.mutate({
+    mutation: UPDATE_CURRENT_ACTOR_CLIENT,
+    variables: identity,
+  });
+  saveActorData(identity);
+}
+
 export function logout(apollo: ApolloClient<any>) {
   apollo.mutate({
     mutation: UPDATE_CURRENT_USER_CLIENT,

js/src/views/Account/IdentityPicker.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="identity-picker">
+        <img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url"  :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
+        <b-button type="is-text" @click="isComponentModalActive = true"><translate>Change</translate></b-button>
+        <b-modal :active.sync="isComponentModalActive" has-modal-card>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Pick an identity</p>
+                </header>
+                <section class="modal-card-body">
+                    <div class="list is-hoverable">
+                        <a class="list-item" v-for="identity in identities" :class="{ 'is-active': identity.id === currentIdentity.id }" @click="changeCurrentIdentity(identity)">
+                            <div class="media">
+                                <img class="media-left image" v-if="identity.avatar" :src="identity.avatar.url" />
+                                <div class="media-content">
+                                    <h3>@{{ identity.preferredUsername }}</h3>
+                                    <small>{{ identity.name }}</small>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+                </section>
+            </div>
+        </b-modal>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IActor } from '@/types/actor';
+import { IDENTITIES } from '@/graphql/actor';
+
+@Component({
+  apollo: {
+    identities: {
+      query: IDENTITIES,
+    },
+  },
+})
+export default class IdentityPicker extends Vue {
+  @Prop() value!: IActor;
+  isComponentModalActive: boolean = false;
+  identities: IActor[] = [];
+  currentIdentity: IActor = this.value;
+
+  changeCurrentIdentity(identity: IActor) {
+    this.currentIdentity = identity;
+    this.$emit('input', identity);
+    this.isComponentModalActive = false;
+  }
+
+}
+</script>
+<style lang="scss">
+    .identity-picker img.image {
+        display: inline;
+        height: 1.5em;
+        vertical-align: text-bottom;
+    }
+</style>

js/src/views/Account/MyAccount.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="container">
-    <div v-if="loggedPerson">
+    <div v-if="currentActor">
       <div class="header">
-        <figure v-if="loggedPerson.banner" class="image is-3by1">
+        <figure v-if="currentActor.banner" class="image is-3by1">
-          <img :src="loggedPerson.banner.url" alt="banner">
+          <img :src="currentActor.banner.url" alt="banner">
         </figure>
       </div>
 
@@ -31,7 +31,7 @@
 </style>
 
 <script lang="ts">
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { IPerson } from '@/types/actor';
@@ -42,17 +42,18 @@ import Identities from '@/components/Account/Identities.vue';
     EventCard,
     Identities,
   },
+  apollo: {
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+  },
 })
 export default class MyAccount extends Vue {
-  loggedPerson: IPerson | null = null;
+  currentActor!: IPerson;
   currentIdentityName: string | null = null;
 
   @Watch('$route.params.identityName', { immediate: true })
   async onIdentityParamChanged (val: string) {
-    if (!this.loggedPerson) {
-      this.loggedPerson = await this.loadLoggedPerson();
-    }
-
     await this.redirectIfNoIdentitySelected(val);
 
     this.currentIdentityName = val;
@@ -61,18 +62,10 @@ export default class MyAccount extends Vue {
   private async redirectIfNoIdentitySelected (identityParam?: string) {
     if (!!identityParam) return;
 
-    if (!!this.loggedPerson) {
+    if (!!this.currentActor) {
-      this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } });
+      await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
     }
   }
-
-  private async loadLoggedPerson () {
-    const result = await this.$apollo.query({
-      query: LOGGED_PERSON,
-    });
-
-    return result.data.loggedPerson as IPerson;
-  }
 }
 </script>
 <style lang="scss">

js/src/views/Account/Profile.vue

@@ -57,7 +57,7 @@
             </a>
           </b-dropdown-item>
         </b-dropdown>
-        <a class="button" v-if="loggedPerson.id === person.id" @click="createToken">
+        <a class="button" v-if="currentActor.id === person.id" @click="createToken">
           <translate>Create token</translate>
         </a>
       </div>
@@ -79,7 +79,7 @@
             <a
               class="button"
               @click="deleteProfile()"
-              v-if="loggedPerson && loggedPerson.id === person.id"
+              v-if="currentActor && currentActor.id === person.id"
             >
               <translate>Delete</translate>
             </a>
@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { FETCH_PERSON, LOGGED_PERSON } from '@/graphql/actor';
+import { FETCH_PERSON, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
@@ -108,8 +108,8 @@ import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
         };
       },
     },
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
   components: {
@@ -120,6 +120,7 @@ export default class MyAccount extends Vue {
   @Prop({ type: String, required: true }) name!: string;
 
   person!: IPerson;
+  currentActor!: IPerson;
 
   // call again the method if the route changes
   @Watch('$route')

js/src/views/Account/children/EditIdentity.vue

@@ -25,6 +25,16 @@
       <b-input type="textarea" aria-required="false" v-model="identity.summary"/>
     </b-field>
 
+    <b-notification
+          type="is-danger"
+          has-icon
+          aria-close-label="Close notification"
+          role="alert"
+          v-for="error in errors"
+    >
+    {{ error }}
+  </b-notification>
+
     <b-field class="submit">
       <div class="control">
         <button v-translate type="button" class="button is-primary" @click="submit()">
@@ -70,19 +80,32 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { CREATE_PERSON, DELETE_PERSON, FETCH_PERSON, IDENTITIES, LOGGED_PERSON, UPDATE_PERSON } from '../../../graphql/actor';
+import {
+  CREATE_PERSON,
+  CURRENT_ACTOR_CLIENT,
+  DELETE_PERSON,
+  FETCH_PERSON,
+  IDENTITIES,
+  UPDATE_PERSON,
+} from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
 import { Dialog } from 'buefy/dist/components/dialog';
 import { RouteName } from '@/router';
 import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
+import { changeIdentity, saveActorData } from '@/utils/auth';
 
 @Component({
   components: {
     PictureUpload,
     Dialog,
   },
+  apollo: {
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+  },
 })
 export default class EditIdentity extends Vue {
   @Prop({ type: Boolean }) isUpdate!: boolean;
@@ -94,7 +117,7 @@ export default class EditIdentity extends Vue {
   identity = new Person();
 
   private oldDisplayName: string | null = null;
-  private loggedPerson: IPerson | null = null;
+  private currentActor: IPerson | null = null;
 
   @Watch('isUpdate')
   async isUpdateChanged () {
@@ -134,6 +157,9 @@ export default class EditIdentity extends Vue {
     this.oldDisplayName = newDisplayName;
   }
 
+  /**
+   * Delete an identity
+   */
   async deleteIdentity() {
     try {
       await this.$apollo.mutate({
@@ -150,17 +176,15 @@ export default class EditIdentity extends Vue {
         },
       });
 
-
       this.$notifier.success(
         this.$gettextInterpolate('Identity %{displayName} deleted', { displayName: this.identity.displayName() }),
       );
-
+      /**
-      await this.loadLoggedPersonIfNeeded();
+       * If we just deleted the current identity, we need to change it to the next one
-
+       */
-      // Refresh the loaded person if we deleted the default identity
+      const data = this.$apollo.provider.defaultClient.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
-      if (this.loggedPerson && this.identity.id === this.loggedPerson.id) {
+      if (data) {
-        this.loggedPerson = null;
+        await this.maybeUpdateCurrentActorCache(data.identities[0]);
-        await this.loadLoggedPersonIfNeeded(true);
       }
 
       await this.redirectIfNoIdentitySelected();
@@ -181,6 +205,7 @@ export default class EditIdentity extends Vue {
             const index = data.identities.findIndex(i => i.id === this.identity.id);
 
             this.$set(data.identities, index, updatePerson);
+            this.maybeUpdateCurrentActorCache(updatePerson);
 
             store.writeQuery({ query: IDENTITIES, data });
           }
@@ -211,11 +236,11 @@ export default class EditIdentity extends Vue {
         },
       });
 
-      this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
-
       this.$notifier.success(
-        this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
+              this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
       );
+
+      await this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
     } catch (err) {
       this.handleError(err);
     }
@@ -263,9 +288,11 @@ export default class EditIdentity extends Vue {
   private handleError(err: any) {
     console.error(err);
 
-    err.graphQLErrors.forEach(({ message }) => {
+    if (err.graphQLErrors !== undefined) {
-      this.errors.push(message);
+      err.graphQLErrors.forEach(({ message }) => {
-    });
+        this.$notifier.error(message);
+      });
+    }
   }
 
   private convertToUsername(value: string | null) {
@@ -287,20 +314,29 @@ export default class EditIdentity extends Vue {
 
     await this.loadLoggedPersonIfNeeded();
 
-    if (!!this.loggedPerson) {
+    if (!!this.currentActor) {
-      this.$router.push({ params: { identityName: this.loggedPerson.preferredUsername } });
+      await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
+    }
+  }
+
+  private async maybeUpdateCurrentActorCache(identity: IPerson) {
+    if (this.currentActor) {
+      if (this.currentActor.preferredUsername === this.identity.preferredUsername) {
+        await changeIdentity(this.$apollo.provider.defaultClient, identity);
+      }
+      this.currentActor = identity;
     }
   }
 
   private async loadLoggedPersonIfNeeded (bypassCache = false) {
-    if (this.loggedPerson) return;
+    if (this.currentActor) return;
 
     const result = await this.$apollo.query({
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
       fetchPolicy: bypassCache ? 'network-only' : undefined,
     });
 
-    this.loggedPerson = result.data.loggedPerson;
+    this.currentActor = result.data.currentActor;
   }
 
   private resetFields () {

js/src/views/Event/Edit.vue

@@ -22,11 +22,15 @@
 
         <tag-input v-model="event.tags" :data="tags" path="title" />
 
-        <address-auto-complete v-model="event.physicalAddress" />
-
         <date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
         <date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
 
+        <address-auto-complete v-model="event.physicalAddress" />
+
+        <b-field :label="$gettext('Organizer')">
+          <identity-picker v-model="event.organizerActor"></identity-picker>
+        </b-field>
+
         <div class="field">
           <label class="label">{{ $gettext('Description') }}</label>
           <editor v-model="event.description" />
@@ -192,7 +196,7 @@
 import { CREATE_EVENT, EDIT_EVENT, FETCH_EVENT, FETCH_EVENTS } from '@/graphql/event';
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { EventModel, EventStatus, EventVisibility, EventVisibilityJoinOptions, CommentModeration, IEvent } from '@/types/event.model';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import Editor from '@/components/Editor.vue';
@@ -202,12 +206,13 @@ import { TAGS } from '@/graphql/tags';
 import { ITag } from '@/types/tag.model';
 import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
 import { buildFileFromIPicture, buildFileVariable } from '@/utils/image';
+import IdentityPicker from '@/views/Account/IdentityPicker.vue';
 
 @Component({
-  components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor },
+  components: { AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor, IdentityPicker },
   apollo: {
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
     tags: {
       query: TAGS,
@@ -220,7 +225,7 @@ export default class EditEvent extends Vue {
 
   eventId!: string | undefined;
 
-  loggedPerson = new Person();
+  currentActor = new Person();
   tags: ITag[] = [];
   event = new EventModel();
   pictureFile: File | null = null;
@@ -257,6 +262,7 @@ export default class EditEvent extends Vue {
 
     this.event.beginsOn = now;
     this.event.endsOn = end;
+    this.event.organizerActor = this.event.organizerActor || this.currentActor;
   }
 
   createOrUpdate(e: Event) {
@@ -305,7 +311,10 @@ export default class EditEvent extends Vue {
    * Build variables for Event GraphQL creation query
    */
   private buildVariables() {
-    const res = Object.assign(this.event.toEditJSON(), { organizerActorId: this.loggedPerson.id });
+    let res = this.event.toEditJSON();
+    if (this.event.organizerActor) {
+      res = Object.assign(res, { organizerActorId: this.event.organizerActor.id });
+    }
 
     delete this.event.options['__typename'];
 

js/src/views/Event/Event.vue

@@ -19,11 +19,11 @@
               <h1 class="title">{{ event.title }}</h1>
             </div>
             <div v-if="!actorIsOrganizer()" class="participate-button has-text-centered">
-              <a v-if="!actorIsParticipant()" @click="joinEvent" class="button is-large is-primary is-rounded">
+              <a v-if="!actorIsParticipant()" @click="isJoinModalActive = true" class="button is-large is-primary is-rounded">
                 <b-icon icon="circle-outline"></b-icon>
                 <translate>Join</translate>
               </a>
-              <a v-if="actorIsParticipant()" @click="leaveEvent" class="button is-large is-primary is-rounded">
+              <a v-if="actorIsParticipant()" @click="confirmLeave()" class="button is-large is-primary is-rounded">
                 <b-icon icon="check-circle"></b-icon>
                 <translate>Leave</translate>
               </a>
@@ -229,8 +229,11 @@
           </div>
         </div>
       </section>
-      <b-modal :active.sync="isReportModalActive" has-modal-card>
+      <b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
-        <report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" />
+        <report-modal :on-confirm="reportEvent" title="Report this event" :outside-domain="event.organizerActor.domain" @close="$refs.reportModal.close()" />
+      </b-modal>
+      <b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
+        <participation-modal :on-confirm="joinEvent" :event="event" :defaultIdentity="currentActor" @close="$refs.participationModal.close()" />
       </b-modal>
       </div>
     </div>
@@ -239,7 +242,7 @@
 <script lang="ts">
 import { DELETE_EVENT, FETCH_EVENT, JOIN_EVENT, LEAVE_EVENT } from '@/graphql/event';
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { EventVisibility, IEvent, IParticipant } from '@/types/event.model';
 import { IPerson } from '@/types/actor';
 import { RouteName } from '@/router';
@@ -250,6 +253,7 @@ import EventCard from '@/components/Event/EventCard.vue';
 import EventFullDate from '@/components/Event/EventFullDate.vue';
 import ActorLink from '@/components/Account/ActorLink.vue';
 import ReportModal from '@/components/Report/ReportModal.vue';
+import ParticipationModal from '@/components/Event/ParticipationModal.vue';
 import { IReport } from '@/types/report.model';
 import { CREATE_REPORT } from '@/graphql/report';
 
@@ -261,6 +265,7 @@ import { CREATE_REPORT } from '@/graphql/report';
     BIcon,
     DateCalendarIcon,
     ReportModal,
+    ParticipationModal,
     // tslint:disable:space-in-parens
     'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
     // tslint:enable
@@ -274,8 +279,8 @@ import { CREATE_REPORT } from '@/graphql/report';
         };
       },
     },
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
 })
@@ -283,10 +288,11 @@ export default class Event extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
   event!: IEvent;
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
   validationSent: boolean = false;
   showMap: boolean = false;
   isReportModalActive: boolean = false;
+  isJoinModalActive: boolean = false;
 
   EventVisibility = EventVisibility;
 
@@ -317,13 +323,14 @@ export default class Event extends Vue {
 
   async reportEvent(content: string, forward: boolean) {
     this.isReportModalActive = false;
+    if (!this.event.organizerActor) return;
     const eventTitle = this.event.title;
     try {
       await this.$apollo.mutate<IReport>({
         mutation: CREATE_REPORT,
         variables: {
           eventId: this.event.id,
-          reporterActorId: this.loggedPerson.id,
+          reporterActorId: this.currentActor.id,
           reportedActorId: this.event.organizerActor.id,
           content,
         },
@@ -339,13 +346,14 @@ export default class Event extends Vue {
     }
   }
 
-  async joinEvent() {
+  async joinEvent(identity: IPerson) {
+    this.isJoinModalActive = false;
     try {
       await this.$apollo.mutate<{ joinEvent: IParticipant }>({
         mutation: JOIN_EVENT,
         variables: {
           eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: identity.id,
         },
         update: (store, { data }) => {
           if (data == null) return;
@@ -367,13 +375,24 @@ export default class Event extends Vue {
     }
   }
 
+  confirmLeave() {
+    this.$buefy.dialog.confirm({
+      title: `Leaving event « ${this.event.title} »`,
+      message: `Are you sure you want to leave event « ${this.event.title} »`,
+      confirmText: 'Leave event',
+      type: 'is-danger',
+      hasIcon: true,
+      onConfirm: () => this.leaveEvent(),
+    });
+  }
+
   async leaveEvent() {
     try {
       await this.$apollo.mutate<{ leaveEvent: IParticipant }>({
         mutation: LEAVE_EVENT,
         variables: {
           eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
         },
         update: (store, { data }) => {
           if (data == null) return;
@@ -410,14 +429,14 @@ export default class Event extends Vue {
   actorIsParticipant() {
     if (this.actorIsOrganizer()) return true;
 
-    return this.loggedPerson &&
+    return this.currentActor &&
       this.event.participants
-          .some(participant => participant.actor.id === this.loggedPerson.id);
+          .some(participant => participant.actor.id === this.currentActor.id);
   }
 
   actorIsOrganizer() {
-    return this.loggedPerson &&
+    return this.currentActor && this.event.organizerActor &&
-      this.loggedPerson.id === this.event.organizerActor.id;
+      this.currentActor.id === this.event.organizerActor.id;
   }
 
   get twitterShareUrl(): string {
@@ -445,7 +464,7 @@ export default class Event extends Vue {
         mutation: DELETE_EVENT,
         variables: {
           eventId: this.event.id,
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
         },
       });
 

js/src/views/Group/Create.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { Group, IPerson } from '@/types/actor';
-import { CREATE_GROUP, LOGGED_PERSON } from '@/graphql/actor';
+import { CREATE_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { RouteName } from '@/router';
 import PictureUpload from '@/components/PictureUpload.vue';
 
@@ -51,13 +51,13 @@ import PictureUpload from '@/components/PictureUpload.vue';
     PictureUpload,
   },
   apollo: {
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
 })
 export default class CreateGroup extends Vue {
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
 
   group = new Group();
 
@@ -74,7 +74,7 @@ export default class CreateGroup extends Vue {
         },
       });
 
-      this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
+      await this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
 
       this.$notifier.success(
         this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
@@ -111,7 +111,7 @@ export default class CreateGroup extends Vue {
     }
 
     const currentActor = {
-      creatorActorId: this.loggedPerson.id,
+      creatorActorId: this.currentActor.id,
     };
 
     return Object.assign({}, this.group, avatarObj, bannerObj, currentActor);

js/src/views/Group/Group.vue

@@ -58,7 +58,7 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import EventCard from '@/components/Event/EventCard.vue';
-import { FETCH_GROUP, LOGGED_PERSON } from '@/graphql/actor';
+import { FETCH_GROUP, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IGroup } from '@/types/actor';
 
 @Component({
@@ -71,8 +71,8 @@ import { IGroup } from '@/types/actor';
         };
       },
     },
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
   components: {

js/src/views/Moderation/Report.vue

@@ -109,7 +109,7 @@ import { EventRouteName } from '@/router/event';
 import { ActorRouteName } from '@/router/actor';
 import { AdminRouteName } from '@/router/admin';
 import { ModerationRouteName } from '@/router/moderation';
-import { LOGGED_PERSON } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
 import { IPerson } from '@/types/actor';
 import { DELETE_EVENT } from '@/graphql/event';
 import { uniq } from 'lodash';
@@ -127,15 +127,15 @@ import { uniq } from 'lodash';
         this.errors = uniq(graphQLErrors.map(({ message }) => message));
       },
     },
-    loggedPerson: {
+    currentActor: {
-      query: LOGGED_PERSON,
+      query: CURRENT_ACTOR_CLIENT,
     },
   },
 })
 export default class Report extends Vue {
   @Prop({ required: true }) reportId!: number;
   report!: IReport;
-  loggedPerson!: IPerson;
+  currentActor!: IPerson;
   errors: string[] = [];
 
   ReportStatusEnum = ReportStatusEnum;
@@ -152,7 +152,7 @@ export default class Report extends Vue {
         mutation: CREATE_REPORT_NOTE,
         variables: {
           reportId: this.report.id,
-          moderatorId: this.loggedPerson.id,
+          moderatorId: this.currentActor.id,
           content: this.noteContent,
         },
         update: (store, { data }) => {
@@ -165,7 +165,7 @@ export default class Report extends Vue {
             return;
           }
           const note = data.createReportNote;
-          note.moderator = this.loggedPerson;
+          note.moderator = this.currentActor;
 
           report.notes = report.notes.concat([note]);
 
@@ -199,7 +199,7 @@ export default class Report extends Vue {
         mutation: DELETE_EVENT,
         variables: {
           eventId: this.report.event.id.toString(),
-          actorId: this.loggedPerson.id,
+          actorId: this.currentActor.id,
         },
       });
 
@@ -220,7 +220,7 @@ export default class Report extends Vue {
         mutation: UPDATE_REPORT,
         variables: {
           reportId: this.report.id,
-          moderatorId: this.loggedPerson.id,
+          moderatorId: this.currentActor.id,
           status,
         },
         update: (store, { data }) => {