mobilizon.chapril.org-mobil.../js/src/components/NavBar.vue
Tykayn f66845efa4 - **Allow remote group moderators to edit group events and posts**
- **Allow events to hold metadata information, either preconfigured (live video URL, price details, accessibility informations,…), either through a free key/value form.** Metadata concerning live video feeds linking to PeerTube, YouTube & Twitch will benefit from iframe integration.
 - Add the possibility to create profiles and groups from CLI
 - Add the possibility to create a profile at the same time when creating an user from CLI
 - Add the possibility to create users with LDAP provider from CLI
 - Added back support for Docker-compose based development
 - Added rel=canonical and meta robots noindex tags to public pages from remote groups, in order to avoid them being indexed by Google
 - Allow members-restricted posts to be viewable by instance moderators (for moderation purposes)
 - Added a filter to resize pictures bigger than 1920x1080
 - Allow to deny registration by email or email domain
 - Added missing index on participants url
 - Added a loading wheel to show that events are loading on some views
 
 - Made server only listen on IPv4 in the install template
 - Improve identity picker to have a fixed height and allow filtering between your identities and group contacts
 - Leaflet map controls (zoom/locate) are now translatable
 - Show exactly 12 events on the Explore page
 
 - Fixed links contained in event & post description that didn't open in new tabs
 - Add back missing RSS/ical links on public group pages
 - Fixed links to Framacolibri forum
 - Fixed drafts and restricted visibility events & posts listed on group page
 - Fixed notification page on Safari
 - Fixed profile edition
 - Fixed Feed Token recreation
 - Fixed media cleaner job
 - Fixed english being always used as a language instead of the default one set when the request has no `Accept-Language` header (such as Google index bots)
 - Fixed Ecto validation errors not being translated and interpolated
 - Fixed <html> `lang` attribute not being properly set with the language currently used
 - Fixed federated posts having wrong visibility setting
 - Fixed unused CSS filter on homepage rendering wrong on Webkit
 - Fixed handling SSL being already started in LDAP connection
 - Fixed an Apollo cache issue when registrering your first profile
 - Fixed the Docker image missing ca-certificates
 - Fixed missing pagination on Explore page featured events
 - Fixed broken popup warning when editing an event
 - Fixed GraphQL Playground (again)
 - Fixed Coordinates mixmatch between latitude and longitude in iCalendar export and federation
 - Fixed token refreshment issues
 - Fixed search from 404 page
 
 - Catalan
 - Chinese (Traditional)
 - Finnish
 - French
 - Gaelic
 - Galician
 - German
 - Indonesian
 - Russian
 - Spanish
 -----BEGIN PGP SIGNATURE-----
 
 iQIzBAABCAAdFiEExMITpfxOHHCvHn8FoGG53eDKB3MFAmEbjvoACgkQoGG53eDK
 B3NOlhAAsAg9L5KFrbsxGtUDL0tCZWtOZXub9YBdeXThykCGcvJleXYDi4FenQN7
 WYSi5gBGZTHJCbEy3AatkaraYV+w7oExB9dKj882iToLj7M16X4c+pWeZNgBt5zb
 oEf4CG/BvV0ICKn48khmsAQVbAPkm8k3Um7fELwfZ2pA5CKvHLyrD5VUnXaz5abV
 in46GDERPFUZ0cSXoozK0PwEP473KGlGWM8vXRkudLCm0aZzx9UwxdJFcvmDMMuK
 etVLiH/XlPyoE89LA0Vq0gUEozQrbAjaXAQCkiaftyKMpw0hda64rz80L4Hy/FS8
 RqNWVDvznrcRe7FmsKDzkgkBfk4ecero60MAE1N2rfJbwwYFVGSD1G2B/PckN0ss
 /4G2Dn61tn/zhBDNVerWRbaHg7cyIbxb92GVOmAJK5yvOG5qo6h8gwN2OzSLSjWG
 jTbIFgJ7KY9XVcFwdZ4VL95CglzM32irFbFh7kpx3MWVAYoeBDPcevE+q8zRyUCY
 jYbWLeTGWlNyEe+C5mXT9IrGt51yFIbsT6alst28H9pOyHZQnsjGzXRIYCn5nNne
 TTbkNG0fE5Pl1Xo40WaLcYJIWjU/2rwS9tyrWmcN5Ws5qg33mRdGKlU6AaSuGfkG
 QpGcclyrvsYl9bVX/XHWbJnAZUdm+qB59IHELY37dLYM2ASUk6w=
 =SXZE
 -----END PGP SIGNATURE-----

Merge tag '1.3.0' into chapril

- **Allow remote group moderators to edit group events and posts**
- **Allow events to hold metadata information, either preconfigured (live video URL, price details, accessibility informations,…), either through a free key/value form.** Metadata concerning live video feeds linking to PeerTube, YouTube & Twitch will benefit from iframe integration.
- Add the possibility to create profiles and groups from CLI
- Add the possibility to create a profile at the same time when creating an user from CLI
- Add the possibility to create users with LDAP provider from CLI
- Added back support for Docker-compose based development
- Added rel=canonical and meta robots noindex tags to public pages from remote groups, in order to avoid them being indexed by Google
- Allow members-restricted posts to be viewable by instance moderators (for moderation purposes)
- Added a filter to resize pictures bigger than 1920x1080
- Allow to deny registration by email or email domain
- Added missing index on participants url
- Added a loading wheel to show that events are loading on some views

- Made server only listen on IPv4 in the install template
- Improve identity picker to have a fixed height and allow filtering between your identities and group contacts
- Leaflet map controls (zoom/locate) are now translatable
- Show exactly 12 events on the Explore page

- Fixed links contained in event & post description that didn't open in new tabs
- Add back missing RSS/ical links on public group pages
- Fixed links to Framacolibri forum
- Fixed drafts and restricted visibility events & posts listed on group page
- Fixed notification page on Safari
- Fixed profile edition
- Fixed Feed Token recreation
- Fixed media cleaner job
- Fixed english being always used as a language instead of the default one set when the request has no `Accept-Language` header (such as Google index bots)
- Fixed Ecto validation errors not being translated and interpolated
- Fixed <html> `lang` attribute not being properly set with the language currently used
- Fixed federated posts having wrong visibility setting
- Fixed unused CSS filter on homepage rendering wrong on Webkit
- Fixed handling SSL being already started in LDAP connection
- Fixed an Apollo cache issue when registrering your first profile
- Fixed the Docker image missing ca-certificates
- Fixed missing pagination on Explore page featured events
- Fixed broken popup warning when editing an event
- Fixed GraphQL Playground (again)
- Fixed Coordinates mixmatch between latitude and longitude in iCalendar export and federation
- Fixed token refreshment issues
- Fixed search from 404 page

- Catalan
- Chinese (Traditional)
- Finnish
- French
- Gaelic
- Galician
- German
- Indonesian
- Russian
- Spanish
2021-08-18 15:48:10 +02:00

392 lines
9.9 KiB
Vue
Executable File

<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 }"
:aria-label="$t('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
v-if="currentActor.id && currentUser.isLoggedIn"
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 &&
currentActor.id &&
currentUser.isLoggedIn
"
>{{ $t("My groups") }}</b-navbar-item
>
<b-navbar-item
tag="span"
v-if="
config &&
config.features.eventCreation &&
currentActor.id &&
currentUser.isLoggedIn
"
>
<b-button
tag="router-link"
:to="{ name: RouteName.CREATE_EVENT }"
type="is-primary"
>{{ $t("Create") }}</b-button
>
</b-navbar-item>
<b-navbar-item
v-if="config && config.features.koenaConnect"
class="koena"
tag="a"
href="https://mediation.koena.net/framasoft/mobilizon/"
target="_blank"
rel="noopener"
>
<img
src="/img/koena-a11y.svg"
width="150"
alt="Contact accessibilité"
/>
</b-navbar-item>
</template>
<template slot="end">
<b-navbar-item
href="https://www.chapril.org"
:aria-label="'www.chapril.org'"
>
<img
src="/img/pics/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
collapsible
>
<template
slot="label"
v-if="currentActor"
class="navbar-dropdown-profile"
>
<div class="identity-wrapper">
<div>
<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" />
</div>
<div class="media-content is-hidden-desktop">
<span>{{ displayName(currentActor) }}</span>
<span class="has-text-grey-dark" v-if="currentActor.name"
>@{{ currentActor.preferredUsername }}</span
>
</div>
</div>
</template>
<!-- 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"
>
<span @click="setIdentity(identity)">
<div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar">
<img
class="is-rounded"
loading="lazy"
:src="identity.avatar.url"
alt
/>
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="media-content">
<span>{{ displayName(identity) }}</span>
<span class="has-text-grey-dark" v-if="identity.name"
>@{{ identity.preferredUsername }}</span
>
</div>
</span>
<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
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 v-else tag="div">
<div class="buttons">
<router-link
class="button is-primary"
v-if="config && config.registrationsOpen"
:to="{ name: RouteName.REGISTER }"
>
<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>
<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 { ICurrentUserRole } from "@/types/enums";
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 { displayName, IPerson, Person } from "../types/actor";
import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model";
import { ICurrentUser, IUser } from "../types/current-user.model";
import SearchField from "./SearchField.vue";
import RouteName from "../router/name";
@Component({
apollo: {
currentUser: {
query: CURRENT_USER_CLIENT,
},
currentActor: {
query: CURRENT_ACTOR_CLIENT,
},
identities: {
query: IDENTITIES,
update: ({ identities }) =>
identities
? identities.map((identity: IPerson) => new Person(identity))
: [],
skip() {
return this.currentUser.isLoggedIn === false;
},
error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
},
config: CONFIG,
loggedUser: {
query: USER_SETTINGS,
skip() {
return !this.currentUser || this.currentUser.isLoggedIn === false;
},
},
},
components: {
Logo,
SearchField,
},
})
export default class NavBar extends Vue {
currentActor!: IPerson;
config!: IConfig;
currentUser!: ICurrentUser;
loggedUser!: IUser;
ICurrentUserRole = ICurrentUserRole;
identities: IPerson[] = [];
RouteName = RouteName;
mobileNavbarActive = false;
displayName = displayName;
@Watch("currentActor")
async initializeListOfIdentities(): Promise<void> {
if (!this.currentUser.isLoggedIn) return;
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
this.identities = data.identities.map(
(identity: IPerson) => new Person(identity)
);
// 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) {
try {
await this.$router.push({
name: RouteName.REGISTER_PROFILE,
params: {
email: this.currentUser.email,
userAlreadyActivated: "true",
},
});
} catch (err) {
return undefined;
}
}
}
}
@Watch("loggedUser")
setSavedLanguage(): void {
if (this.loggedUser?.locale) {
console.debug("Setting locale from navbar");
loadLanguageAsync(this.loggedUser.locale);
}
}
async handleErrors(errors: GraphQLError[]): Promise<void> {
if (
errors.length > 0 &&
errors[0].message ===
"You need to be logged-in to view your list of identities"
) {
await this.logout();
}
}
async logout(): Promise<void> {
await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({
message: this.$t("You have been disconnected") as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000,
});
if (this.$route.name === RouteName.HOME) return;
await this.$router.push({ name: RouteName.HOME });
}
async setIdentity(identity: IPerson): Promise<void> {
await this.$apollo.mutate({
mutation: UPDATE_DEFAULT_ACTOR,
variables: {
preferredUsername: identity.preferredUsername,
},
});
return changeIdentity(this.$apollo.provider.defaultClient, identity);
}
}
</script>
<style lang="scss" scoped>
nav {
.navbar-item {
a.button {
font-weight: bold;
}
svg {
height: 1.75rem;
}
}
.navbar-dropdown .navbar-item {
cursor: pointer;
span {
display: flex;
}
&.is-active {
background: $secondary;
}
span.icon.is-medium {
display: flex;
}
img {
max-height: 2.5em;
}
}
.navbar-item.has-dropdown a.navbar-link figure {
margin-right: 0.75rem;
display: flex;
align-items: center;
}
a.navbar-item:focus-within {
background-color: inherit;
}
.koena {
padding-top: 0;
padding-bottom: 0;
& > img {
max-height: 4rem;
padding-top: 0.2rem;
}
}
.identity-wrapper {
display: flex;
.media-content span {
display: flex;
color: $violet-2;
}
}
}
</style>