Add ability to update/create/delete identities

js/src/components/Account/CreateIdentity.vue

@@ -1,44 +0,0 @@
-<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

@@ -6,7 +6,10 @@
 
     <ul class="identities">
       <li v-for="identity in identities" :key="identity.id">
-        <div class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }">
+        <router-link
+          :to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }"
+          class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
+        >
           <div class="media-left">
             <figure class="image is-48x48" v-if="identity.avatar">
               <img class="is-rounded" :src="identity.avatar.url">
@@ -16,13 +19,13 @@
           <div class="media-content">
             {{ identity.displayName() }}
           </div>
-        </div>
+        </router-link>
       </li>
     </ul>
 
-    <a class="button create-identity is-primary">
+    <router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary" >
       <translate>Create a new identity</translate>
-    </a>
+    </router-link>
   </section>
 </template>
 
@@ -38,6 +41,7 @@
     font-size: 1.3rem;
     padding-bottom: 0;
     margin-bottom: 15px;
+    color: #000;
 
     &.is-current-identity {
       background-color: rgba(0, 0, 0, 0.1);
@@ -50,33 +54,29 @@
 </style>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-  import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
-  import { IPerson, Person } from '@/types/actor';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IDENTITIES, LOGGED_PERSON } from '@/graphql/actor';
+import { IPerson, Person } from '@/types/actor';
 
-  @Component({
-    apollo: {
-      loggedPerson: {
-        query: LOGGED_PERSON,
+@Component({
+  apollo: {
+    identities: {
+      query: IDENTITIES,
+
+      update (result) {
+        return result.identities.map(i => new Person(i));
       },
     },
-  })
-  export default class Identities extends Vue {
-    identities: Person[] = [];
-    loggedPerson!: IPerson;
-    errors: string[] = [];
+  },
+})
+export default class Identities extends Vue {
+  @Prop({ type: String }) currentIdentityName!: string;
 
-    async mounted() {
-      const result = await this.$apollo.query({
-        query: IDENTITIES,
-      });
+  identities: Person[] = [];
+  errors: string[] = [];
 
-      this.identities = result.data.identities
-                              .map(i => new Person(i));
-    }
-
-    isCurrentIdentity(identity: IPerson) {
-      return identity.preferredUsername === this.loggedPerson.preferredUsername;
-    }
+  isCurrentIdentity(identity: IPerson) {
+    return identity.preferredUsername === this.currentIdentityName;
   }
+}
 </script>

js/src/components/NavBar.vue

@@ -17,43 +17,40 @@
           <span aria-hidden="true"></span>
         </a>
       </div>
+
       <div class="navbar-menu" :class="{ 'is-active': showNavbar }">
         <div class="navbar-end">
           <div class="navbar-item">
             <search-field />
           </div>
-          <div class="navbar-item" v-if="!currentUser.isLoggedIn">
-            <div class="buttons">
-              <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
-                <strong>
-                  <translate>Sign up</translate>
-                </strong>
-              </router-link>
-              <router-link class="button is-primary" :to="{ name: 'Login' }">
-                <translate>Log in</translate>
-              </router-link>
-            </div>
-          </div>
-          <div class="navbar-item has-dropdown is-hoverable" v-else>
-              <router-link
-                class="navbar-link"
-                v-if="currentUser.isLoggedIn && loggedPerson"
-                :to="{ name: 'MyAccount' }"
-              >
-                <figure class="image is-24x24" v-if="loggedPerson.avatar">
-                  <img :src="loggedPerson.avatar.url">
-                </figure>
-                <span>{{ loggedPerson.preferredUsername }}</span>
-              </router-link>
+
+          <div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
+            <a
+              class="navbar-link"
+              v-if="loggedPerson"
+            >
+              <figure class="image is-24x24" v-if="loggedPerson.avatar">
+                <img alt="avatarUrl" :src="loggedPerson.avatar.url">
+              </figure>
+              <span>{{ loggedPerson.preferredUsername }}</span>
+            </a>
 
             <div class="navbar-dropdown">
-              <router-link :to="{ name: 'MyAccount' }" class="navbar-item">
-                <translate>My account</translate>
+              <span class="navbar-item">
+                <router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
+              </span>
+
+              <a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
+            </div>
+          </div>
+
+          <div class="navbar-item" v-else>
+            <div class="buttons">
+              <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
+                <strong v-translate>Sign up</strong>
               </router-link>
 
-              <a class="navbar-item" v-on:click="logout()">
-                <translate>Log out</translate>
-              </a>
+              <router-link class="button is-primary" :to="{ name: 'Login' }" v-translate>Log in</router-link>
             </div>
           </div>
         </div>

js/src/components/PictureUpload.vue

@@ -1,29 +1,64 @@
 <template>
-    <b-field class="file">
-        <b-upload v-model="pictureFile" @input="onFileChanged">
-            <a class="button is-primary">
-                <b-icon icon="upload"></b-icon>
-                <span>Click to upload</span>
-            </a>
-        </b-upload>
-        <span class="file-name" v-if="pictureFile">
-            {{ pictureFile.name }}
-        </span>
-    </b-field>
+  <div class="root">
+    <figure class="image is-128x128">
+      <img class="is-rounded" v-bind:src="imageSrc">
+      <div class="image-placeholder" v-if="!imageSrc"></div>
+    </figure>
+
+    <b-upload @input="onFileChanged">
+      <a class="button is-primary">
+        <b-icon icon="upload"></b-icon>
+        <span>Click to upload</span>
+      </a>
+    </b-upload>
+  </div>
 </template>
 
+<style scoped type="scss">
+  .root {
+    display: flex;
+    align-items: center;
+  }
+
+  .image {
+    margin-right: 30px;
+  }
+
+  .image-placeholder {
+    background-color: grey;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+  }
+</style>
+
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { IPictureUpload } from '@/types/picture.model';
+import { Component, Model, Vue, Watch } from 'vue-property-decorator';
 
 @Component
 export default class PictureUpload extends Vue {
-  picture!: IPictureUpload;
-  pictureFile: File|null = null;
+  @Model('change', { type: File }) readonly pictureFile!: File;
+
+  imageSrc: string | null = null;
+
+  @Watch('pictureFile')
+  onPictureFileChanged (val: File) {
+    this.updatePreview(val);
+  }
 
   onFileChanged(file: File) {
-    this.picture = { file, name: file.name, alt: '' };
-    this.$emit('change', this.picture);
+    this.$emit('change', file);
+
+    this.updatePreview(file);
+  }
+
+  private updatePreview(file?: File) {
+    if (file) {
+      this.imageSrc = URL.createObjectURL(file);
+      return;
+    }
+
+    this.imageSrc = null;
   }
 }
 </script>