2018-01-09 17:52:26 +01:00
|
|
|
<template>
|
2020-08-18 15:26:11 +02:00
|
|
|
<b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
|
2019-09-20 18:22:25 +02:00
|
|
|
<template slot="brand">
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
|
|
|
|
<logo />
|
|
|
|
</b-navbar-item>
|
2019-09-20 18:22:25 +02:00
|
|
|
</template>
|
|
|
|
<template slot="start">
|
2020-08-12 17:55:38 +02:00
|
|
|
<b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
|
2020-02-18 08:57:00 +01:00
|
|
|
$t("Explore")
|
|
|
|
}}</b-navbar-item>
|
|
|
|
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
|
|
|
|
$t("My events")
|
|
|
|
}}</b-navbar-item>
|
2020-06-08 16:47:57 +02:00
|
|
|
<b-navbar-item
|
|
|
|
tag="router-link"
|
|
|
|
:to="{ name: RouteName.MY_GROUPS }"
|
|
|
|
v-if="config && config.features.groups"
|
|
|
|
>{{ $t("My groups") }}</b-navbar-item
|
|
|
|
>
|
2019-10-03 11:37:34 +02:00
|
|
|
<b-navbar-item tag="span">
|
2020-06-17 15:54:24 +02:00
|
|
|
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
|
2020-02-18 08:57:00 +01:00
|
|
|
$t("Create")
|
|
|
|
}}</b-button>
|
2019-10-03 11:37:34 +02:00
|
|
|
</b-navbar-item>
|
2019-09-20 18:22:25 +02:00
|
|
|
</template>
|
|
|
|
<template slot="end">
|
|
|
|
<b-navbar-item tag="div">
|
2020-08-18 15:26:11 +02:00
|
|
|
<search-field @navbar-search="mobileNavbarActive = false" />
|
2019-09-20 18:22:25 +02:00
|
|
|
</b-navbar-item>
|
|
|
|
|
2019-10-08 18:13:06 +02:00
|
|
|
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
|
2019-09-20 18:22:25 +02:00
|
|
|
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
|
|
|
|
<figure class="image is-32x32" v-if="currentActor.avatar">
|
2020-02-18 08:57:00 +01:00
|
|
|
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
|
2019-09-20 18:22:25 +02:00
|
|
|
</figure>
|
2019-10-13 16:24:43 +02:00
|
|
|
<b-icon v-else icon="account-circle" />
|
2019-09-20 18:22:25 +02:00
|
|
|
</template>
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<!-- No identities dropdown if no identities -->
|
|
|
|
<span v-if="identities.length <= 1" />
|
|
|
|
<b-navbar-item
|
|
|
|
tag="span"
|
|
|
|
v-for="identity in identities"
|
|
|
|
v-else
|
|
|
|
:active="identity.id === currentActor.id"
|
|
|
|
:key="identity.id"
|
|
|
|
>
|
2019-09-20 18:22:25 +02:00
|
|
|
<span @click="setIdentity(identity)">
|
|
|
|
<div class="media-left">
|
|
|
|
<figure class="image is-32x32" v-if="identity.avatar">
|
2020-02-18 08:57:00 +01:00
|
|
|
<img class="is-rounded" :src="identity.avatar.url" alt />
|
2019-06-17 17:15:27 +02:00
|
|
|
</figure>
|
2020-03-05 19:32:34 +01:00
|
|
|
<b-icon v-else size="is-medium" icon="account-circle" />
|
2019-04-03 17:29:03 +02:00
|
|
|
</div>
|
2019-04-01 11:49:54 +02:00
|
|
|
|
2019-09-20 18:22:25 +02:00
|
|
|
<div class="media-content">
|
|
|
|
<span>{{ identity.displayName() }}</span>
|
2020-02-18 08:57:00 +01:00
|
|
|
<span class="has-text-grey" v-if="identity.name"
|
|
|
|
>@{{ identity.preferredUsername }}</span
|
|
|
|
>
|
2019-04-03 17:29:03 +02:00
|
|
|
</div>
|
2019-09-20 18:22:25 +02:00
|
|
|
</span>
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<hr class="navbar-divider" />
|
2019-09-20 18:22:25 +02:00
|
|
|
</b-navbar-item>
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
|
|
|
|
$t("My account")
|
|
|
|
}}</b-navbar-item>
|
2019-09-20 18:22:25 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
|
|
|
|
<!-- {{ $t('Create group') }}-->
|
|
|
|
<!-- </b-navbar-item>-->
|
2019-09-20 18:22:25 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-navbar-item
|
|
|
|
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
|
|
|
|
tag="router-link"
|
|
|
|
:to="{ name: RouteName.ADMIN_DASHBOARD }"
|
|
|
|
>{{ $t("Administration") }}</b-navbar-item
|
|
|
|
>
|
2019-09-20 18:22:25 +02:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<b-navbar-item tag="span">
|
|
|
|
<span @click="logout">{{ $t("Log out") }}</span>
|
|
|
|
</b-navbar-item>
|
2019-09-20 18:22:25 +02:00
|
|
|
</b-navbar-dropdown>
|
|
|
|
|
|
|
|
<b-navbar-item v-else tag="div">
|
|
|
|
<div class="buttons">
|
2020-02-18 08:57:00 +01:00
|
|
|
<router-link
|
|
|
|
class="button is-primary"
|
|
|
|
v-if="config && config.registrationsOpen"
|
|
|
|
:to="{ name: RouteName.REGISTER }"
|
|
|
|
>
|
|
|
|
<strong>{{ $t("Sign up") }}</strong>
|
2019-09-20 18:22:25 +02:00
|
|
|
</router-link>
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
|
|
|
|
$t("Log in")
|
|
|
|
}}</router-link>
|
2019-01-21 15:08:22 +01:00
|
|
|
</div>
|
2019-09-20 18:22:25 +02:00
|
|
|
</b-navbar-item>
|
|
|
|
</template>
|
|
|
|
</b-navbar>
|
2018-01-09 17:52:26 +01:00
|
|
|
</template>
|
|
|
|
|
2018-12-21 15:41:34 +01:00
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Vue, Watch } from "vue-property-decorator";
|
|
|
|
import Logo from "@/components/Logo.vue";
|
|
|
|
import { GraphQLError } from "graphql";
|
|
|
|
import { CURRENT_USER_CLIENT } 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 } from "../types/current-user.model";
|
|
|
|
import SearchField from "./SearchField.vue";
|
|
|
|
import RouteName from "../router/name";
|
2019-08-12 16:04:16 +02:00
|
|
|
|
2019-08-13 08:43:37 +02:00
|
|
|
@Component({
|
2018-12-21 17:10:39 +01:00
|
|
|
apollo: {
|
2019-01-18 14:47:10 +01:00
|
|
|
currentUser: {
|
2019-03-22 10:57:14 +01:00
|
|
|
query: CURRENT_USER_CLIENT,
|
2019-01-21 15:08:22 +01:00
|
|
|
},
|
2019-09-11 09:59:01 +02:00
|
|
|
currentActor: {
|
|
|
|
query: CURRENT_ACTOR_CLIENT,
|
|
|
|
},
|
|
|
|
identities: {
|
|
|
|
query: IDENTITIES,
|
2020-02-18 08:57:00 +01:00
|
|
|
update: ({ identities }) =>
|
|
|
|
identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
|
2019-10-07 13:47:46 +02:00
|
|
|
skip() {
|
|
|
|
return this.currentUser.isLoggedIn === false;
|
|
|
|
},
|
2020-02-18 08:57:00 +01:00
|
|
|
error({ graphQLErrors }) {
|
|
|
|
this.handleErrors(graphQLErrors);
|
|
|
|
},
|
2019-09-11 09:59:01 +02:00
|
|
|
},
|
2020-08-05 14:39:17 +02:00
|
|
|
config: CONFIG,
|
2019-03-21 20:23:42 +01:00
|
|
|
},
|
2019-04-03 17:29:03 +02:00
|
|
|
components: {
|
|
|
|
Logo,
|
|
|
|
SearchField,
|
|
|
|
},
|
2018-12-21 17:10:39 +01:00
|
|
|
})
|
|
|
|
export default class NavBar extends Vue {
|
2019-09-11 09:59:01 +02:00
|
|
|
currentActor!: IPerson;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-03-22 13:58:19 +01:00
|
|
|
config!: IConfig;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-04-01 11:49:54 +02:00
|
|
|
currentUser!: ICurrentUser;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-09-09 09:31:08 +02:00
|
|
|
ICurrentUserRole = ICurrentUserRole;
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-09-18 17:32:37 +02:00
|
|
|
identities: IPerson[] = [];
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2019-10-03 11:37:34 +02:00
|
|
|
RouteName = RouteName;
|
2018-12-21 15:41:34 +01:00
|
|
|
|
2020-08-18 15:26:11 +02:00
|
|
|
mobileNavbarActive: boolean = false;
|
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
@Watch("currentActor")
|
2019-09-18 17:32:37 +02:00
|
|
|
async initializeListOfIdentities() {
|
2019-10-07 13:47:46 +02:00
|
|
|
if (!this.currentUser.isLoggedIn) return;
|
2019-09-18 17:32:37 +02:00
|
|
|
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
|
|
|
|
query: IDENTITIES,
|
|
|
|
});
|
|
|
|
if (data) {
|
2020-02-18 08:57:00 +01:00
|
|
|
this.identities = data.identities.map((identity) => new Person(identity));
|
2019-10-04 18:28:25 +02:00
|
|
|
|
|
|
|
// If we don't have any identities, the user has validated their account,
|
|
|
|
// is logging for the first time but didn't create an identity somehow
|
|
|
|
if (this.identities.length === 0) {
|
|
|
|
await this.$router.push({
|
|
|
|
name: RouteName.REGISTER_PROFILE,
|
2020-02-18 08:57:00 +01:00
|
|
|
params: {
|
|
|
|
email: this.currentUser.email,
|
|
|
|
userAlreadyActivated: "true",
|
|
|
|
},
|
2019-10-04 18:28:25 +02:00
|
|
|
});
|
|
|
|
}
|
2019-09-18 17:32:37 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-12 13:16:36 +02:00
|
|
|
async handleErrors(errors: GraphQLError[]) {
|
2020-02-18 08:57:00 +01:00
|
|
|
if (
|
|
|
|
errors.length > 0 &&
|
|
|
|
errors[0].message === "You need to be logged-in to view your list of identities"
|
|
|
|
) {
|
2019-10-08 18:13:06 +02:00
|
|
|
await this.logout();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-01 11:49:54 +02:00
|
|
|
async logout() {
|
2019-08-12 16:04:16 +02:00
|
|
|
await logout(this.$apollo.provider.defaultClient);
|
2019-09-23 11:30:23 +02:00
|
|
|
this.$buefy.notification.open({
|
2020-02-18 08:57:00 +01:00
|
|
|
message: this.$t("You have been disconnected") as string,
|
|
|
|
type: "is-success",
|
|
|
|
position: "is-bottom-right",
|
2019-09-23 11:30:23 +02:00
|
|
|
duration: 5000,
|
|
|
|
});
|
2019-04-01 11:49:54 +02:00
|
|
|
|
2019-09-09 09:31:08 +02:00
|
|
|
if (this.$route.name === RouteName.HOME) return;
|
2019-09-23 11:30:23 +02:00
|
|
|
await this.$router.push({ name: RouteName.HOME });
|
2019-01-18 14:47:10 +01:00
|
|
|
}
|
2019-09-11 09:59:01 +02:00
|
|
|
|
|
|
|
async setIdentity(identity: IPerson) {
|
2020-02-18 08:57:00 +01:00
|
|
|
await this.$apollo.mutate({
|
|
|
|
mutation: UPDATE_DEFAULT_ACTOR,
|
|
|
|
variables: {
|
|
|
|
preferredUsername: identity.preferredUsername,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
return changeIdentity(this.$apollo.provider.defaultClient, identity);
|
2019-09-11 09:59:01 +02:00
|
|
|
}
|
2018-12-21 17:10:39 +01:00
|
|
|
}
|
2018-12-21 15:41:34 +01:00
|
|
|
</script>
|
2019-04-03 17:29:03 +02:00
|
|
|
<style lang="scss" scoped>
|
2019-08-13 08:43:37 +02:00
|
|
|
@import "../variables.scss";
|
2019-04-03 17:29:03 +02:00
|
|
|
|
2019-08-13 08:43:37 +02:00
|
|
|
nav {
|
2020-06-15 18:12:49 +02:00
|
|
|
.navbar-item {
|
2020-06-17 15:54:24 +02:00
|
|
|
a.button {
|
2020-06-16 16:15:38 +02:00
|
|
|
font-weight: bold;
|
2020-06-15 18:12:49 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
svg {
|
|
|
|
height: 1.75rem;
|
|
|
|
}
|
2020-02-18 08:57:00 +01:00
|
|
|
}
|
|
|
|
|
2019-09-20 18:22:25 +02:00
|
|
|
.navbar-dropdown .navbar-item {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
span {
|
|
|
|
display: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.is-active {
|
|
|
|
background: $secondary;
|
|
|
|
}
|
|
|
|
|
2020-03-05 19:32:34 +01:00
|
|
|
span.icon.is-medium {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2019-09-20 18:22:25 +02:00
|
|
|
img {
|
|
|
|
max-height: 2.5em;
|
|
|
|
}
|
|
|
|
}
|
2019-04-24 17:36:25 +02:00
|
|
|
|
2019-09-20 18:22:25 +02:00
|
|
|
.navbar-item.has-dropdown a.navbar-link figure {
|
|
|
|
margin-right: 0.75rem;
|
2019-10-12 19:23:32 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2019-04-03 17:29:03 +02:00
|
|
|
}
|
2019-10-11 15:07:34 +02:00
|
|
|
|
|
|
|
a.navbar-item:focus-within {
|
|
|
|
background-color: inherit;
|
|
|
|
}
|
2019-08-13 08:43:37 +02:00
|
|
|
}
|
2019-04-03 17:29:03 +02:00
|
|
|
</style>
|