Test implementation of my account page

js/src/components/Account/CreateIdentity.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- TODO -->
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  import { CREATE_PERSON, LOGGED_PERSON } from '../../graphql/actor';
+  import { IPerson } from '@/types/actor';
+
+  @Component({
+    apollo: {
+      loggedPerson: {
+        query: LOGGED_PERSON,
+      },
+    },
+  })
+  export default class Identities extends Vue {
+    loggedPerson!: IPerson;
+    errors: string[] = [];
+    newPerson!: IPerson;
+
+    async createProfile(e) {
+      e.preventDefault();
+
+      try {
+        await this.$apollo.mutate({
+          mutation: CREATE_PERSON,
+          variables: this.newPerson,
+        });
+
+        this.$apollo.queries.identities.refresh();
+      } catch (err) {
+        console.error(err);
+        err.graphQLErrors.forEach(({ message }) => {
+          this.errors.push(message);
+        });
+      }
+    }
+
+    host() {
+      return `@${window.location.host}`;
+    }
+  }
+</script>

js/src/components/Account/Identities.vue

@@ -0,0 +1,82 @@
+<template>
+  <section>
+    <h1 class="title">
+      <translate>My identities</translate>
+    </h1>
+
+    <ul class="identities">
+      <li v-for="identity in identities" :key="identity.id">
+        <div class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img class="is-rounded" :src="identity.avatarUrl">
+            </figure>
+          </div>
+
+          <div class="media-content">
+            {{ identity.displayName() }}
+          </div>
+        </div>
+      </li>
+    </ul>
+
+    <a class="button create-identity is-primary">
+      <translate>Create a new identity</translate>
+    </a>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  .identities {
+    border-right: 1px solid grey;
+
+    padding: 15px 0;
+  }
+
+  .media.identity {
+    align-items: center;
+    font-size: 1.3rem;
+    padding-bottom: 0;
+    margin-bottom: 15px;
+
+    &.is-current-identity {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .title {
+    margin-bottom: 30px;
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
+  import { IPerson, Person } from '@/types/actor';
+
+  @Component({
+    apollo: {
+      loggedPerson: {
+        query: LOGGED_PERSON,
+      },
+    },
+  })
+  export default class Identities extends Vue {
+    identities: Person[] = [];
+    loggedPerson!: IPerson;
+    errors: string[] = [];
+
+    async mounted() {
+      const result = await this.$apollo.query({
+        query: IDENTITIES,
+      });
+
+      this.identities = result.data.identities
+                              .map(i => new Person(i));
+    }
+
+    isCurrentIdentity(identity: IPerson) {
+      return identity.preferredUsername === this.loggedPerson.preferredUsername;
+    }
+  }
+</script>

js/src/components/Event/EventCard.vue

@@ -47,7 +47,7 @@
 import { IEvent, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { IActor, IPerson, Person } from '@/types/actor.model';
+import { IActor, IPerson, Person } from '@/types/actor';
 const lineClamp = require('line-clamp');
 
 export interface IEventCardOptions {

js/src/components/Group/GroupCard.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Group } from '@/types/actor.model';
+import { Group } from '@/types/actor';
 import { RouteName } from '@/router';
 
 @Component

js/src/components/NavBar.vue

@@ -36,9 +36,9 @@
           </div>
           <div class="navbar-item has-dropdown is-hoverable" v-else>
               <router-link
-                      class="navbar-link"
-                      v-if="currentUser.isLoggedIn && loggedPerson"
-                      :to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
+                class="navbar-link"
+                v-if="currentUser.isLoggedIn && loggedPerson"
+                :to="{ name: 'MyAccount' }"
               >
                 <figure class="image is-24x24">
                   <img :src="loggedPerson.avatarUrl">
@@ -47,8 +47,13 @@
               </router-link>
 
             <div class="navbar-dropdown">
-              <a class="navbar-item"><translate>My account</translate></a>
-              <a class="navbar-item" v-on:click="logout()"><translate>Log out</translate></a>
+              <router-link :to="{ name: 'MyAccount' }" class="navbar-item">
+                <translate>My account</translate>
+              </router-link>
+
+              <a class="navbar-item" v-on:click="logout()">
+                <translate>Log out</translate>
+              </a>
             </div>
           </div>
         </div>
@@ -63,7 +68,7 @@ import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user'
 import { onLogout } from '@/vue-apollo';
 import { deleteUserData } from '@/utils/auth';
 import { LOGGED_PERSON } from '@/graphql/actor';
-import { IPerson } from '@/types/actor.model';
+import { IPerson } from '@/types/actor';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
 import { ICurrentUser } from '@/types/current-user.model';