Add ability to update/create/delete identities

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>