Introduce group basic federation, event new page and notifications

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/PictureUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="root">
     <figure class="image" v-if="imageSrc">
-      <img :src="imageSrc"  />
+      <img :src="imageSrc" />
     </figure>
     <figure class="image is-128x128" v-else>
       <div class="image-placeholder">
@@ -12,50 +12,61 @@
     <b-upload @input="onFileChanged" :accept="accept">
       <a class="button is-primary">
         <b-icon icon="upload"></b-icon>
-        <span>{{ $t('Click to upload') }}</span>
+        <span>{{ $t("Click to upload") }}</span>
       </a>
     </b-upload>
   </div>
 </template>
 
 <style scoped lang="scss">
-  .root {
-    display: flex;
-    align-items: center;
-  }
+.root {
+  display: flex;
+  align-items: center;
+}
 
-  figure.image {
-    margin-right: 30px;
-    max-height: 200px;
-    max-width: 200px;
-    overflow: hidden;
-  }
+figure.image {
+  margin-right: 30px;
+  max-height: 200px;
+  max-width: 200px;
+  overflow: hidden;
+}
 
-  .image-placeholder {
-    background-color: grey;
-    width: 100%;
-    height: 100%;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.image-placeholder {
+  background-color: grey;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    span {
-      flex: 1;
-      color: #eee;
-    }
+  span {
+    flex: 1;
+    color: #eee;
   }
+}
 </style>
 
 <script lang="ts">
-import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
 
 @Component
 export default class PictureUpload extends Vue {
-  @Model('change', { type: File }) readonly pictureFile!: File;
-  @Prop({ type: String, required: false, default: 'image/gif,image/png,image/jpeg,image/webp' }) accept;
-  // @ts-ignore
-  @Prop({ type: String, required: false, default() { return this.$t('Avatar'); } }) textFallback!: string;
+  @Model("change", { type: File }) readonly pictureFile!: File;
+
+  @Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
+  accept!: string;
+
+  @Prop({
+    type: String,
+    required: false,
+    default() {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      return this.$t("Avatar");
+    },
+  })
+  textFallback!: string;
 
   imageSrc: string | null = null;
 
@@ -63,13 +74,13 @@ export default class PictureUpload extends Vue {
     this.updatePreview(this.pictureFile);
   }
 
-  @Watch('pictureFile')
+  @Watch("pictureFile")
   onPictureFileChanged(val: File) {
     this.updatePreview(val);
   }
 
   onFileChanged(file: File) {
-    this.$emit('change', file);
+    this.$emit("change", file);
 
     this.updatePreview(file);
   }