From 4e7d3aa157600c372c76758fba738cf6a0e5a645 Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Wed, 16 Dec 2020 18:51:24 +0100
Subject: [PATCH] :zap: hop img

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
---
 js/src/components/NavBar.vue | 267 ++++++++++++++---------------------
 1 file changed, 106 insertions(+), 161 deletions(-)
 mode change 100644 => 100755 js/src/components/NavBar.vue

diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
old mode 100644
new mode 100755
index 4738ac9b3..e9f113d28
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,181 +1,128 @@
-<template >
-  <b-navbar
-    type='is-secondary'
-    wrapper-class='container'
-    :active.sync='mobileNavbarActive' >
-    <template slot='brand' >
-      <b-navbar-item :to='"https://www.chapril.org"' >
-        <img
-          src='img/long_logo_chapril_mobilizon.png'
-          alt='logo mobilizon'
-          style='width: 5em' />
-      </b-navbar-item >
-    </template >
-    <template slot='start' >
+<template>
+  <b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
+    <template slot="brand">
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }">
+        <img src="/img/long_logo_chapril_mobilizon.png" alt="logo mobilizon" style="width: 5em" />
+      </b-navbar-item>
+    </template>
+    <template slot="start">
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }"
+        >{{ $t("Explore") }}
+      </b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }"
+        >{{ $t("My events") }}
+      </b-navbar-item>
+      <b-navbar-item
+        tag="router-link"
+        :to="{ name: RouteName.MY_GROUPS }"
+        v-if="config && config.features.groups"
+        >{{ $t("My groups") }}
+      </b-navbar-item>
 
+      <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
+        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary"
+          >{{ $t("Create") }}
+        </b-button>
+      </b-navbar-item>
+    </template>
+    <template slot="end">
       <b-navbar-item
-        tag='router-link'
-        :to='{ name: RouteName.SEARCH }' >{{
-          $t('Explore')
-                                          }}
-      </b-navbar-item >
-      <b-navbar-item
-        tag='router-link'
-        :to='{ name: RouteName.MY_EVENTS }' >{{
-          $t('My events')
-                                             }}
-      </b-navbar-item >
-      <b-navbar-item
-        tag='router-link'
-        :to='{ name: RouteName.MY_GROUPS }'
-        v-if='config && config.features.groups'
-      >{{ $t('My groups') }}
-      </b-navbar-item
+        :to="'https://www.chapril.org'"
+        :aria-label="'www.chapril.org'"
       >
-      <b-navbar-item
-        tag='span'
-        v-if='config && config.features.eventCreation' >
-        <b-button
-          tag='router-link'
-          :to='{ name: RouteName.CREATE_EVENT }'
-          type='is-primary' >{{
-            $t('Create')
-                             }}
-        </b-button >
-      </b-navbar-item >
-    </template >
-    <template slot='end' >
-      <b-navbar-item
-        tag='router-link'
-        :to='{ name: RouteName.HOME }'
-        :aria-label="$t('Home')" >
-        <img
-          src='img/mobilizon_logo.svg'
-          alt='logo mobilizon'
-          style='width: 5em' />
-      </b-navbar-item >
-      <b-navbar-item tag='div' >
-        <search-field @navbar-search='mobileNavbarActive = false' />
-      </b-navbar-item >
+        <img src="/img/logo_chapril_mobilizon.png" alt="logo chapril mobilizon" />
+      </b-navbar-item>
+      <b-navbar-item tag="div">
+        <search-field @navbar-search="mobileNavbarActive = false" />
+      </b-navbar-item>
 
-      <b-navbar-dropdown
-        v-if='currentActor.id && currentUser.isLoggedIn'
-        right >
-        <template
-          slot='label'
-          v-if='currentActor'
-          class='navbar-dropdown-profile' >
-          <figure
-            class='image is-32x32'
-            v-if='currentActor.avatar' >
-            <img
-              class='is-rounded'
-              alt='avatarUrl'
-              :src='currentActor.avatar.url' />
-          </figure >
-          <b-icon
-            v-else
-            icon='account-circle' />
-        </template >
+      <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
+        <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
+          <figure class="image is-32x32" v-if="currentActor.avatar">
+            <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
+          </figure>
+          <b-icon v-else icon="account-circle" />
+        </template>
 
         <!-- No identities dropdown if no identities -->
-        <span v-if='identities.length <= 1' />
+        <span v-if="identities.length <= 1" />
         <b-navbar-item
-          tag='span'
-          v-for='identity in identities'
+          tag="span"
+          v-for="identity in identities"
           v-else
-          :active='identity.id === currentActor.id'
-          :key='identity.id'
+          :active="identity.id === currentActor.id"
+          :key="identity.id"
         >
-          <span @click='setIdentity(identity)' >
-            <div class='media-left' >
-              <figure
-                class='image is-32x32'
-                v-if='identity.avatar' >
-                <img
-                  class='is-rounded'
-                  :src='identity.avatar.url'
-                  alt />
-              </figure >
-              <b-icon
-                v-else
-                size='is-medium'
-                icon='account-circle' />
-            </div >
+          <span @click="setIdentity(identity)">
+            <div class="media-left">
+              <figure class="image is-32x32" v-if="identity.avatar">
+                <img class="is-rounded" :src="identity.avatar.url" alt />
+              </figure>
+              <b-icon v-else size="is-medium" icon="account-circle" />
+            </div>
 
-            <div class='media-content' >
-              <span >{{ identity.displayName() }}</span >
-              <span
-                class='has-text-grey'
-                v-if='identity.name'
-              >@{{ identity.preferredUsername }}</span
+            <div class="media-content">
+              <span>{{ identity.displayName() }}</span>
+              <span class="has-text-grey" v-if="identity.name"
+                >@{{ identity.preferredUsername }}</span
               >
-            </div >
-          </span >
+            </div>
+          </span>
 
-          <hr class='navbar-divider' />
-        </b-navbar-item >
+          <hr class="navbar-divider" />
+        </b-navbar-item>
 
-        <b-navbar-item
-          tag='router-link'
-          :to='{ name: RouteName.UPDATE_IDENTITY }' >{{
-            $t('My account')
-                                                     }}
-        </b-navbar-item >
+        <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }"
+          >{{ $t("My account") }}
+        </b-navbar-item>
 
         <!--          <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
         <!--            {{ $t('Create group') }}-->
         <!--          </b-navbar-item>-->
 
         <b-navbar-item
-          v-if='currentUser.role === ICurrentUserRole.ADMINISTRATOR'
-          tag='router-link'
-          :to='{ name: RouteName.ADMIN_DASHBOARD }'
-        >{{ $t('Administration') }}
-        </b-navbar-item
-        >
+          v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
+          tag="router-link"
+          :to="{ name: RouteName.ADMIN_DASHBOARD }"
+          >{{ $t("Administration") }}
+        </b-navbar-item>
 
-        <b-navbar-item tag='span' >
-          <span @click='logout' >{{ $t('Log out') }}</span >
-        </b-navbar-item >
-      </b-navbar-dropdown >
+        <b-navbar-item tag="span">
+          <span @click="logout">{{ $t("Log out") }}</span>
+        </b-navbar-item>
+      </b-navbar-dropdown>
 
-      <b-navbar-item
-        v-else
-        tag='div' >
-        <div class='buttons' >
+      <b-navbar-item v-else tag="div">
+        <div class="buttons">
           <router-link
-            class='button is-primary'
-            v-if='config && config.registrationsOpen'
-            :to='{ name: RouteName.REGISTER }'
+            class="button is-primary"
+            v-if="config && config.registrationsOpen"
+            :to="{ name: RouteName.REGISTER }"
           >
-            <strong >{{ $t('Sign up') }}</strong >
-          </router-link >
+            <strong>{{ $t("Sign up") }}</strong>
+          </router-link>
 
-          <router-link
-            class='button is-light'
-            :to='{ name: RouteName.LOGIN }' >{{
-              $t('Log in')
-                                             }}
-          </router-link >
-        </div >
-      </b-navbar-item >
-    </template >
-  </b-navbar >
-</template >
+          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }"
+            >{{ $t("Log in") }}
+          </router-link>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
 
-<script lang='ts' >
-import {Component, Vue, Watch} from "vue-property-decorator";
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
 import Logo from "@/components/Logo.vue";
-import {GraphQLError} from "graphql";
-import {loadLanguageAsync} from "@/utils/i18n";
-import {CURRENT_USER_CLIENT, USER_SETTINGS} from "../graphql/user";
-import {changeIdentity, logout} from "../utils/auth";
-import {CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR} from "../graphql/actor";
-import {IPerson, Person} from "../types/actor";
-import {CONFIG} from "../graphql/config";
-import {IConfig} from "../types/config.model";
-import {ICurrentUser, ICurrentUserRole, IUser} from "../types/current-user.model";
+import { GraphQLError } from "graphql";
+import { loadLanguageAsync } from "@/utils/i18n";
+import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
+import { changeIdentity, logout } from "../utils/auth";
+import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
+import { IPerson, Person } from "../types/actor";
+import { CONFIG } from "../graphql/config";
+import { IConfig } from "../types/config.model";
+import { ICurrentUser, ICurrentUserRole, IUser } from "../types/current-user.model";
 import SearchField from "./SearchField.vue";
 import RouteName from "../router/name";
 
@@ -189,12 +136,12 @@ import RouteName from "../router/name";
     },
     identities: {
       query: IDENTITIES,
-      update: ({identities}) =>
+      update: ({ identities }) =>
         identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
-      error({graphQLErrors}) {
+      error({ graphQLErrors }) {
         this.handleErrors(graphQLErrors);
       },
     },
@@ -231,7 +178,7 @@ export default class NavBar extends Vue {
   @Watch("currentActor")
   async initializeListOfIdentities(): Promise<void> {
     if (!this.currentUser.isLoggedIn) return;
-    const {data} = await this.$apollo.query<{ identities: IPerson[] }>({
+    const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
       query: IDENTITIES,
     });
     if (data) {
@@ -277,7 +224,7 @@ export default class NavBar extends Vue {
     });
 
     if (this.$route.name === RouteName.HOME) return;
-    await this.$router.push({name: RouteName.HOME});
+    await this.$router.push({ name: RouteName.HOME });
   }
 
   async setIdentity(identity: IPerson): Promise<void> {
@@ -290,10 +237,8 @@ export default class NavBar extends Vue {
     return changeIdentity(this.$apollo.provider.defaultClient, identity);
   }
 }
-</script >
-<style
-  lang='scss'
-  scoped >
+</script>
+<style lang="scss" scoped>
 nav {
   .navbar-item {
     a.button {
@@ -335,4 +280,4 @@ nav {
     background-color: inherit;
   }
 }
-</style >
+</style>