Introduce group basic federation, event new page and notifications

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

js/src/components/SearchField.vue

@@ -1,33 +1,52 @@
 <template>
-    <b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
+  <label>
+    <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
+    <b-input
+      custom-class="searchField"
+      icon="magnify"
+      type="search"
+      rounded
+      :placeholder="defaultPlaceHolder"
+      v-model="searchText"
+      @keyup.native.enter="enter"
+    />
+  </label>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { RouteName } from '@/router';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import RouteName from "../router/name";
 
 @Component
 export default class SearchField extends Vue {
   @Prop({ type: String, required: false }) placeholder!: string;
-  searchText: string = '';
+
+  searchText = "";
 
   enter() {
-    this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchText } });
+    this.$router.push({
+      name: RouteName.SEARCH,
+      params: { searchTerm: this.searchText },
+    });
   }
 
   get defaultPlaceHolder(): string {
-      // We can't use "this" inside @Prop's default value.
-    return this.placeholder || this.$t('Search') as string;
+    // We can't use "this" inside @Prop's default value.
+    return this.placeholder || (this.$t("Search") as string);
   }
 }
 </script>
 
 <style lang="scss">
-    input.searchField {
-        box-shadow: none;
-        border-color: #b5b5b5;
+label span.visually-hidden {
+  display: none;
+}
 
-        &::placeholder {
-            color: gray;
-        }
-    }
+input.searchField {
+  box-shadow: none;
+  border-color: #b5b5b5;
+
+  &::placeholder {
+    color: gray;
+  }
+}
 </style>