tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Fix lint issues

Browse source 
And disable eslint when building in prod mode

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-11-30 10:24:11 +01:00
parent da42522073
commit 2d541f2e32
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
161 changed files with 3869 additions and 1236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/.editorconfig
View file

@ -4,4 +4,4 @@ indent_size = 2
end_of_line = lf end_of_line = lf
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true
max_line_length = 100 max_line_length = 80

10
js/.eslintrc.js
View file

@ -38,8 +38,11 @@ module.exports = {
"error", "error",
{ {
ignoreStrings: true, ignoreStrings: true,
ignoreHTMLTextContents: true,
ignoreTemplateLiterals: true,
ignoreComments: true,
template: 170, template: 170,
code: 100, code: 80,
}, },
], ],
"prettier/prettier": "error", "prettier/prettier": "error",
@ -56,7 +59,10 @@ module.exports = {
overrides: [ overrides: [
{ {
files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"], files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: { env: {
mocha: true, mocha: true,
}, },

4
js/get_union_json.ts
View file

@ -24,7 +24,9 @@ fetch(`http://localhost:4000/api`, {
.then((result) => result.json()) .then((result) => result.json())
.then((result) => { .then((result) => {
// here we're filtering out any type information unrelated to unions or interfaces // here we're filtering out any type information unrelated to unions or interfaces
const filteredData = result.data.__schema.types.filter((type) => type.possibleTypes !== null); const filteredData = result.data.__schema.types.filter(
(type) => type.possibleTypes !== null
);
result.data.__schema.types = filteredData; result.data.__schema.types = filteredData;
fs.writeFile("./fragmentTypes.json", JSON.stringify(result.data), (err) => { fs.writeFile("./fragmentTypes.json", JSON.stringify(result.data), (err) => {
if (err) { if (err) {

12
js/src/App.vue
View file

@ -32,8 +32,16 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import { AUTH_ACCESS_TOKEN, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from "./constants"; import {
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from "./graphql/user"; AUTH_ACCESS_TOKEN,
AUTH_USER_EMAIL,
AUTH_USER_ID,
AUTH_USER_ROLE,
} from "./constants";
import {
CURRENT_USER_CLIENT,
UPDATE_CURRENT_USER_CLIENT,
} from "./graphql/user";
import Footer from "./components/Footer.vue"; import Footer from "./components/Footer.vue";
import Logo from "./components/Logo.vue"; import Logo from "./components/Logo.vue";
import { initializeCurrentActor } from "./utils/auth"; import { initializeCurrentActor } from "./utils/auth";

7
js/src/apollo/user.ts
View file

@ -56,7 +56,12 @@ export default function buildCurrentUserResolver(
preferredUsername, preferredUsername,
avatar, avatar,
name, name,
}: { id: string; preferredUsername: string; avatar: string; name: string }, }: {
id: string;
preferredUsername: string;
avatar: string;
name: string;
},
{ cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> } { cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
) => { ) => {
const data = { const data = {

11
js/src/apollo/utils.ts
View file

@ -1,4 +1,7 @@
import { IntrospectionFragmentMatcher, NormalizedCacheObject } from "apollo-cache-inmemory"; import {
IntrospectionFragmentMatcher,
NormalizedCacheObject,
} from "apollo-cache-inmemory";
import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants"; import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants";
import { REFRESH_TOKEN } from "@/graphql/auth"; import { REFRESH_TOKEN } from "@/graphql/auth";
import { saveTokenData } from "@/utils/auth"; import { saveTokenData } from "@/utils/auth";
@ -11,7 +14,11 @@ export const fragmentMatcher = new IntrospectionFragmentMatcher({
{ {
kind: "UNION", kind: "UNION",
name: "SearchResult", name: "SearchResult",
possibleTypes: [{ name: "Event" }, { name: "Person" }, { name: "Group" }], possibleTypes: [
{ name: "Event" },
{ name: "Person" },
{ name: "Group" },
],
}, },
{ {
kind: "INTERFACE", kind: "INTERFACE",

15
js/src/components/Account/ActorAutoComplete.vue
View file

@ -13,7 +13,12 @@
<template slot-scope="props"> <template slot-scope="props">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<img width="32" :src="props.option.avatar.url" v-if="props.option.avatar" alt="" /> <img
width="32"
:src="props.option.avatar.url"
v-if="props.option.avatar"
alt=""
/>
<b-icon v-else icon="account-circle" /> <b-icon v-else icon="account-circle" />
</div> </div>
<div class="media-content"> <div class="media-content">
@ -21,7 +26,9 @@
{{ props.option.name }} {{ props.option.name }}
<br /> <br />
<small>{{ `@${props.option.preferredUsername}` }}</small> <small>{{ `@${props.option.preferredUsername}` }}</small>
<small v-if="props.option.domain">{{ `@${props.option.domain}` }}</small> <small v-if="props.option.domain">{{
`@${props.option.domain}`
}}</small>
</span> </span>
<span v-else> <span v-else>
{{ `@${props.option.preferredUsername}` }} {{ `@${props.option.preferredUsername}` }}
@ -53,7 +60,9 @@ export default class ActorAutoComplete extends Vue {
selected: IPerson | null = this.defaultSelected; selected: IPerson | null = this.defaultSelected;
name: string = this.defaultSelected ? this.defaultSelected.preferredUsername : ""; name: string = this.defaultSelected
? this.defaultSelected.preferredUsername
: "";
page = 1; page = 1;

11
js/src/components/Account/ActorCard.vue
View file

@ -12,8 +12,15 @@
<p> <p>
{{ actor.name || `@${usernameWithDomain(actor)}` }} {{ actor.name || `@${usernameWithDomain(actor)}` }}
</p> </p>
<p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p> <p class="has-text-grey" v-if="actor.name">
<div v-if="full" class="summary" :class="{ limit: limit }" v-html="actor.summary" /> @{{ usernameWithDomain(actor) }}
</p>
<div
v-if="full"
class="summary"
:class="{ limit: limit }"
v-html="actor.summary"
/>
</div> </div>
</div> </div>
</div> </div>

10
js/src/components/Account/Identities.vue
View file

@ -7,7 +7,10 @@
<ul class="identities"> <ul class="identities">
<li v-for="identity in identities" :key="identity.id"> <li v-for="identity in identities" :key="identity.id">
<router-link <router-link
:to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }" :to="{
name: 'UpdateIdentity',
params: { identityName: identity.preferredUsername },
}"
class="media identity" class="media identity"
v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
> >
@ -24,7 +27,10 @@
</li> </li>
</ul> </ul>
<router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary"> <router-link
:to="{ name: 'CreateIdentity' }"
class="button create-identity is-primary"
>
{{ $t("Create a new identity") }} {{ $t("Create a new identity") }}
</router-link> </router-link>
</section> </section>

63
js/src/components/Admin/Followers.vue
View file

@ -16,11 +16,21 @@
checkable checkable
checkbox-position="left" checkbox-position="left"
> >
<b-table-column field="actor.id" label="ID" width="40" numeric v-slot="props">{{ <b-table-column
props.row.actor.id field="actor.id"
}}</b-table-column> label="ID"
width="40"
numeric
v-slot="props"
>{{ props.row.actor.id }}</b-table-column
>
<b-table-column field="actor.type" :label="$t('Type')" width="80" v-slot="props"> <b-table-column
field="actor.type"
:label="$t('Type')"
width="80"
v-slot="props"
>
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" /> <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
<b-icon icon="account-circle" v-else /> <b-icon icon="account-circle" v-else />
</b-table-column> </b-table-column>
@ -33,26 +43,39 @@
centered centered
v-slot="props" v-slot="props"
> >
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{ <span
props.row.approved ? $t("Accepted") : $t("Pending") :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
}}</span> >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
>
</b-table-column> </b-table-column>
<b-table-column field="actor.domain" :label="$t('Domain')" sortable> <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
<template v-slot:default="props"> <template v-slot:default="props">
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{ <a
props.row.actor.domain @click="toggle(props.row)"
}}</a> v-if="RelayMixin.isInstance(props.row.actor)"
>{{ props.row.actor.domain }}</a
>
<a @click="toggle(props.row)" v-else>{{ <a @click="toggle(props.row)" v-else>{{
`${props.row.actor.preferredUsername}@${props.row.actor.domain}` `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
}}</a> }}</a>
</template> </template>
</b-table-column> </b-table-column>
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props"> <b-table-column
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{ field="targetActor.updatedAt"
formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale }) :label="$t('Date')"
}}</span></b-table-column sortable
v-slot="props"
>
<span
:title="$options.filters.formatDateTimeString(props.row.updatedAt)"
>{{
formatDistanceToNow(new Date(props.row.updatedAt), {
locale: $dateFnsLocale,
})
}}</span
></b-table-column
> >
<template slot="detail" slot-scope="props"> <template slot="detail" slot-scope="props">
@ -143,7 +166,11 @@ export default class Followers extends Mixins(RelayMixin) {
await this.$apollo.queries.relayFollowers.refetch(); await this.$apollo.queries.relayFollowers.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
@ -158,7 +185,11 @@ export default class Followers extends Mixins(RelayMixin) {
await this.$apollo.queries.relayFollowers.refetch(); await this.$apollo.queries.relayFollowers.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }

87
js/src/components/Admin/Followings.vue
View file

@ -1,13 +1,22 @@
<template> <template>
<div> <div>
<form @submit="followRelay"> <form @submit="followRelay">
<b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal> <b-field
:label="$t('Add an instance')"
custom-class="add-relay"
horizontal
>
<b-field grouped expanded size="is-large"> <b-field grouped expanded size="is-large">
<p class="control"> <p class="control">
<b-input v-model="newRelayAddress" :placeholder="$t('Ex: mobilizon.fr')" /> <b-input
v-model="newRelayAddress"
:placeholder="$t('Ex: mobilizon.fr')"
/>
</p> </p>
<p class="control"> <p class="control">
<b-button type="is-primary" native-type="submit">{{ $t("Add an instance") }}</b-button> <b-button type="is-primary" native-type="submit">{{
$t("Add an instance")
}}</b-button>
</p> </p>
</b-field> </b-field>
</b-field> </b-field>
@ -29,12 +38,25 @@
checkable checkable
checkbox-position="left" checkbox-position="left"
> >
<b-table-column field="targetActor.id" label="ID" width="40" numeric v-slot="props">{{ <b-table-column
props.row.targetActor.id field="targetActor.id"
}}</b-table-column> label="ID"
width="40"
numeric
v-slot="props"
>{{ props.row.targetActor.id }}</b-table-column
>
<b-table-column field="targetActor.type" :label="$t('Type')" width="80" v-slot="props"> <b-table-column
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" /> field="targetActor.type"
:label="$t('Type')"
width="80"
v-slot="props"
>
<b-icon
icon="lan"
v-if="RelayMixin.isInstance(props.row.targetActor)"
/>
<b-icon icon="account-circle" v-else /> <b-icon icon="account-circle" v-else />
</b-table-column> </b-table-column>
@ -46,26 +68,39 @@
centered centered
v-slot="props" v-slot="props"
> >
<span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{ <span
props.row.approved ? $t("Accepted") : $t("Pending") :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
}}</span> >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
>
</b-table-column> </b-table-column>
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable> <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
<template v-slot:default="props"> <template v-slot:default="props">
<a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{ <a
props.row.targetActor.domain @click="toggle(props.row)"
}}</a> v-if="RelayMixin.isInstance(props.row.targetActor)"
>{{ props.row.targetActor.domain }}</a
>
<a @click="toggle(props.row)" v-else>{{ <a @click="toggle(props.row)" v-else>{{
`${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}` `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
}}</a> }}</a>
</template> </template>
</b-table-column> </b-table-column>
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props"> <b-table-column
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{ field="targetActor.updatedAt"
formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale }) :label="$t('Date')"
}}</span></b-table-column sortable
v-slot="props"
>
<span
:title="$options.filters.formatDateTimeString(props.row.updatedAt)"
>{{
formatDistanceToNow(new Date(props.row.updatedAt), {
locale: $dateFnsLocale,
})
}}</span
></b-table-column
> >
<template slot="detail" slot-scope="props"> <template slot="detail" slot-scope="props">
@ -132,13 +167,19 @@ export default class Followings extends Mixins(RelayMixin) {
await this.$apollo.queries.relayFollowings.refetch(); await this.$apollo.queries.relayFollowings.refetch();
this.newRelayAddress = ""; this.newRelayAddress = "";
} catch (err) { } catch (err) {
Snackbar.open({ message: err.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: err.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
async removeRelays(): Promise<void> { async removeRelays(): Promise<void> {
await this.checkedRows.forEach((row: IFollower) => { await this.checkedRows.forEach((row: IFollower) => {
this.removeRelay(`${row.targetActor.preferredUsername}@${row.targetActor.domain}`); this.removeRelay(
`${row.targetActor.preferredUsername}@${row.targetActor.domain}`
);
}); });
} }
@ -153,7 +194,11 @@ export default class Followings extends Mixins(RelayMixin) {
await this.$apollo.queries.relayFollowings.refetch(); await this.$apollo.queries.relayFollowings.refetch();
this.checkedRows = []; this.checkedRows = [];
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
} }

81
js/src/components/Comment/Comment.vue
View file

@ -1,19 +1,34 @@
<template> <template>
<li :class="{ reply: comment.inReplyToComment }"> <li :class="{ reply: comment.inReplyToComment }">
<article class="media" :class="{ selected: commentSelected }" :id="commentId"> <article
class="media"
:class="{ selected: commentSelected }"
:id="commentId"
>
<popover-actor-card <popover-actor-card
class="media-left" class="media-left"
:actor="comment.actor" :actor="comment.actor"
:inline="true" :inline="true"
v-if="comment.actor" v-if="comment.actor"
> >
<figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar"> <figure
class="image is-48x48"
v-if="!comment.deletedAt && comment.actor.avatar"
>
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" /> <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
</popover-actor-card> </popover-actor-card>
<div v-else class="media-left"> <div v-else class="media-left">
<figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar"> <figure
class="image is-48x48"
v-if="!comment.deletedAt && comment.actor.avatar"
>
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" /> <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
@ -21,7 +36,9 @@
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<span class="first-line" v-if="!comment.deletedAt"> <span class="first-line" v-if="!comment.deletedAt">
<strong :class="{ organizer: commentFromOrganizer }">{{ comment.actor.name }}</strong> <strong :class="{ organizer: commentFromOrganizer }">{{
comment.actor.name
}}</strong>
<small>@{{ usernameWithDomain(comment.actor) }}</small> <small>@{{ usernameWithDomain(comment.actor) }}</small>
<a class="comment-link has-text-grey" :href="commentURL"> <a class="comment-link has-text-grey" :href="commentURL">
<small>{{ <small>{{
@ -54,10 +71,15 @@
<div class="load-replies" v-if="comment.totalReplies"> <div class="load-replies" v-if="comment.totalReplies">
<p v-if="!showReplies" @click="fetchReplies"> <p v-if="!showReplies" @click="fetchReplies">
<b-icon icon="chevron-down" /><span>{{ <b-icon icon="chevron-down" /><span>{{
$tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies }) $tc("View a reply", comment.totalReplies, {
totalReplies: comment.totalReplies,
})
}}</span> }}</span>
</p> </p>
<p v-else-if="comment.totalReplies && showReplies" @click="showReplies = false"> <p
v-else-if="comment.totalReplies && showReplies"
@click="showReplies = false"
>
<b-icon icon="chevron-up" /> <b-icon icon="chevron-up" />
<span>{{ $t("Hide replies") }}</span> <span>{{ $t("Hide replies") }}</span>
</p> </p>
@ -86,14 +108,24 @@
</nav> </nav>
</div> </div>
</article> </article>
<form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo"> <form
class="reply"
@submit.prevent="replyToComment"
v-if="currentActor.id"
v-show="replyTo"
>
<article class="media reply"> <article class="media reply">
<figure class="media-left" v-if="currentActor.avatar"> <figure class="media-left" v-if="currentActor.avatar">
<p class="image is-48x48"> <p class="image is-48x48">
<img :src="currentActor.avatar.url" alt="" /> <img :src="currentActor.avatar.url" alt="" />
</p> </p>
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<span class="first-line"> <span class="first-line">
@ -102,7 +134,12 @@
</span> </span>
<br /> <br />
<span class="editor-line"> <span class="editor-line">
<editor class="editor" ref="commentEditor" v-model="newComment.text" mode="comment" /> <editor
class="editor"
ref="commentEditor"
v-model="newComment.text"
mode="comment"
/>
<b-button <b-button
:disabled="newComment.text.trim().length === 0" :disabled="newComment.text.trim().length === 0"
native-type="submit" native-type="submit"
@ -118,7 +155,12 @@
<div class="left"> <div class="left">
<div class="vertical-border" @click="showReplies = false" /> <div class="vertical-border" @click="showReplies = false" />
</div> </div>
<transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul"> <transition-group
name="comment-replies"
v-if="showReplies"
class="comment-replies"
tag="ul"
>
<comment <comment
class="reply" class="reply"
v-for="reply in comment.replies" v-for="reply in comment.replies"
@ -155,7 +197,8 @@ import PopoverActorCard from "../Account/PopoverActorCard.vue";
}, },
}, },
components: { components: {
editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"), editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"), comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
PopoverActorCard, PopoverActorCard,
}, },
@ -167,7 +210,9 @@ export default class Comment extends Vue {
// Hack because Vue only exports it's own interface. // Hack because Vue only exports it's own interface.
// See https://github.com/kaorun343/vue-property-decorator/issues/257 // See https://github.com/kaorun343/vue-property-decorator/issues/257
@Ref() readonly commentEditor!: EditorComponent & { replyToComment: (comment: IComment) => void }; @Ref() readonly commentEditor!: EditorComponent & {
replyToComment: (comment: IComment) => void;
};
currentActor!: IPerson; currentActor!: IPerson;
@ -231,7 +276,9 @@ export default class Comment extends Vue {
if (!eventData) return; if (!eventData) return;
const { event } = eventData; const { event } = eventData;
const { comments } = event; const { comments } = event;
const parentCommentIndex = comments.findIndex((oldComment) => oldComment.id === parentId); const parentCommentIndex = comments.findIndex(
(oldComment) => oldComment.id === parentId
);
const parentComment = comments[parentCommentIndex]; const parentComment = comments[parentCommentIndex];
if (!parentComment) return; if (!parentComment) return;
parentComment.replies = thread; parentComment.replies = thread;
@ -303,7 +350,11 @@ export default class Comment extends Vue {
duration: 5000, duration: 5000,
}); });
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
} }

52
js/src/components/Comment/CommentTree.vue
View file

@ -6,9 +6,11 @@
@submit.prevent="createCommentForEvent(newComment)" @submit.prevent="createCommentForEvent(newComment)"
@keyup.ctrl.enter="createCommentForEvent(newComment)" @keyup.ctrl.enter="createCommentForEvent(newComment)"
> >
<b-notification v-if="isEventOrganiser && !areCommentsClosed" :closable="false">{{ <b-notification
$t("Comments are closed for everybody else.") v-if="isEventOrganiser && !areCommentsClosed"
}}</b-notification> :closable="false"
>{{ $t("Comments are closed for everybody else.") }}</b-notification
>
<article class="media"> <article class="media">
<figure class="media-left"> <figure class="media-left">
<identity-picker-wrapper :inline="false" v-model="newComment.actor" /> <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
@ -16,11 +18,17 @@
<div class="media-content"> <div class="media-content">
<div class="field"> <div class="field">
<p class="control"> <p class="control">
<editor ref="commenteditor" mode="comment" v-model="newComment.text" /> <editor
ref="commenteditor"
mode="comment"
v-model="newComment.text"
/>
</p> </p>
</div> </div>
<div class="send-comment"> <div class="send-comment">
<b-button native-type="submit" type="is-primary">{{ $t("Post a comment") }}</b-button> <b-button native-type="submit" type="is-primary">{{
$t("Post a comment")
}}</b-button>
</div> </div>
</div> </div>
</article> </article>
@ -29,7 +37,12 @@
$t("The organiser has chosen to close comments.") $t("The organiser has chosen to close comments.")
}}</b-notification> }}</b-notification>
<transition name="comment-empty-list" mode="out-in"> <transition name="comment-empty-list" mode="out-in">
<transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul"> <transition-group
name="comment-list"
v-if="comments.length"
class="comment-list"
tag="ul"
>
<comment <comment
class="root-comment" class="root-comment"
:comment="comment" :comment="comment"
@ -76,7 +89,9 @@ import { IEvent } from "../../types/event.model";
}; };
}, },
update(data) { update(data) {
return data.event.comments.map((comment: IComment) => new CommentModel(comment)); return data.event.comments.map(
(comment: IComment) => new CommentModel(comment)
);
}, },
skip() { skip() {
return !this.event.uuid; return !this.event.uuid;
@ -86,7 +101,8 @@ import { IEvent } from "../../types/event.model";
components: { components: {
Comment, Comment,
IdentityPickerWrapper, IdentityPickerWrapper,
editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"), editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
}, },
}) })
export default class CommentTree extends Vue { export default class CommentTree extends Vue {
@ -113,7 +129,9 @@ export default class CommentTree extends Vue {
variables: { variables: {
eventId: this.event.id, eventId: this.event.id,
text: comment.text, text: comment.text,
inReplyToCommentId: comment.inReplyToComment ? comment.inReplyToComment.id : null, inReplyToCommentId: comment.inReplyToComment
? comment.inReplyToComment.id
: null,
}, },
update: (store, { data }) => { update: (store, { data }) => {
if (data == null) return; if (data == null) return;
@ -228,7 +246,9 @@ export default class CommentTree extends Vue {
}); });
if (!localData) return; if (!localData) return;
const { thread: oldReplyList } = localData; const { thread: oldReplyList } = localData;
const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId); const replies = oldReplyList.filter(
(reply) => reply.id !== deletedCommentId
);
store.writeQuery({ store.writeQuery({
query: FETCH_THREAD_REPLIES, query: FETCH_THREAD_REPLIES,
variables: { variables: {
@ -249,7 +269,9 @@ export default class CommentTree extends Vue {
event.comments = oldComments; event.comments = oldComments;
} else { } else {
// we have deleted a thread itself // we have deleted a thread itself
event.comments = oldComments.filter((reply) => reply.id !== deletedCommentId); event.comments = oldComments.filter(
(reply) => reply.id !== deletedCommentId
);
} }
store.writeQuery({ store.writeQuery({
query: COMMENTS_THREADS, query: COMMENTS_THREADS,
@ -274,14 +296,18 @@ export default class CommentTree extends Vue {
.filter((comment) => comment.inReplyToComment == null) .filter((comment) => comment.inReplyToComment == null)
.sort((a, b) => { .sort((a, b) => {
if (a.updatedAt && b.updatedAt) { if (a.updatedAt && b.updatedAt) {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(); return (
new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
);
} }
return 0; return 0;
}); });
} }
get filteredOrderedComments(): IComment[] { get filteredOrderedComments(): IComment[] {
return this.orderedComments.filter((comment) => !comment.deletedAt || comment.totalReplies > 0); return this.orderedComments.filter(
(comment) => !comment.deletedAt || comment.totalReplies > 0
);
} }
get isEventOrganiser(): boolean { get isEventOrganiser(): boolean {

17
js/src/components/Discussion/DiscussionComment.vue
View file

@ -15,7 +15,10 @@
<span v-else class="name comment-link has-text-grey"> <span v-else class="name comment-link has-text-grey">
{{ $t("[deleted]") }} {{ $t("[deleted]") }}
</span> </span>
<span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id"> <span
class="icons"
v-if="!comment.deletedAt && comment.actor.id === currentActor.id"
>
<b-dropdown aria-role="list"> <b-dropdown aria-role="list">
<b-icon slot="trigger" role="button" icon="dots-horizontal" /> <b-icon slot="trigger" role="button" icon="dots-horizontal" />
@ -44,8 +47,9 @@
<div class="post-infos"> <div class="post-infos">
<span :title="comment.insertedAt | formatDateTimeString"> <span :title="comment.insertedAt | formatDateTimeString">
{{ {{
formatDistanceToNow(new Date(comment.updatedAt), { locale: $dateFnsLocale }) || formatDistanceToNow(new Date(comment.updatedAt), {
$t("Right now") locale: $dateFnsLocale,
}) || $t("Right now")
}}</span }}</span
> >
</div> </div>
@ -77,7 +81,9 @@
type="is-primary" type="is-primary"
>{{ $t("Update") }}</b-button >{{ $t("Update") }}</b-button
> >
<b-button native-type="button" @click="toggleEditMode">{{ $t("Cancel") }}</b-button> <b-button native-type="button" @click="toggleEditMode">{{
$t("Cancel")
}}</b-button>
</div> </div>
</form> </form>
</div> </div>
@ -95,7 +101,8 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
currentActor: CURRENT_ACTOR_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
}, },
components: { components: {
editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"), editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
}, },
}) })
export default class DiscussionComment extends Vue { export default class DiscussionComment extends Vue {

32
js/src/components/Discussion/DiscussionListItem.vue
View file

@ -1,14 +1,23 @@
<template> <template>
<router-link <router-link
class="discussion-minimalist-card-wrapper" class="discussion-minimalist-card-wrapper"
:to="{ name: RouteName.DISCUSSION, params: { slug: discussion.slug, id: discussion.id } }" :to="{
name: RouteName.DISCUSSION,
params: { slug: discussion.slug, id: discussion.id },
}"
> >
<div class="media-left"> <div class="media-left">
<figure <figure
class="image is-32x32" class="image is-32x32"
v-if="discussion.lastComment.actor && discussion.lastComment.actor.avatar" v-if="
discussion.lastComment.actor && discussion.lastComment.actor.avatar
"
> >
<img class="is-rounded" :src="discussion.lastComment.actor.avatar.url" alt /> <img
class="is-rounded"
:src="discussion.lastComment.actor.avatar.url"
alt
/>
</figure> </figure>
<b-icon v-else size="is-medium" icon="account-circle" /> <b-icon v-else size="is-medium" icon="account-circle" />
</div> </div>
@ -17,15 +26,18 @@
<p class="discussion-minimalist-title">{{ discussion.title }}</p> <p class="discussion-minimalist-title">{{ discussion.title }}</p>
<span :title="actualDate | formatDateTimeString"> <span :title="actualDate | formatDateTimeString">
{{ {{
formatDistanceToNowStrict(new Date(actualDate), { locale: $dateFnsLocale }) || formatDistanceToNowStrict(new Date(actualDate), {
$t("Right now") locale: $dateFnsLocale,
}) || $t("Right now")
}}</span }}</span
> >
</div> </div>
<div class="has-text-grey" v-if="!discussion.lastComment.deletedAt"> <div class="has-text-grey" v-if="!discussion.lastComment.deletedAt">
{{ htmlTextEllipsis }} {{ htmlTextEllipsis }}
</div> </div>
<div v-else class="has-text-grey">{{ $t("[This comment has been deleted]") }}</div> <div v-else class="has-text-grey">
{{ $t("[This comment has been deleted]") }}
</div>
</div> </div>
</router-link> </router-link>
</template> </template>
@ -54,7 +66,10 @@ export default class DiscussionListItem extends Vue {
} }
get actualDate(): string | Date | undefined { get actualDate(): string | Date | undefined {
if (this.discussion.updatedAt === this.discussion.insertedAt && this.discussion.lastComment) { if (
this.discussion.updatedAt === this.discussion.insertedAt &&
this.discussion.lastComment
) {
return this.discussion.lastComment.publishedAt; return this.discussion.lastComment.publishedAt;
} }
return this.discussion.updatedAt; return this.discussion.updatedAt;
@ -83,7 +98,8 @@ export default class DiscussionListItem extends Vue {
.discussion-minimalist-title { .discussion-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica,
Arial, serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
flex: 1; flex: 1;

29
js/src/components/Editor.vue
View file

@ -117,11 +117,21 @@
<b-icon icon="format-quote-close" /> <b-icon icon="format-quote-close" />
</button> </button>
<button v-if="!isBasicMode" class="menubar__button" @click="commands.undo" type="button"> <button
v-if="!isBasicMode"
class="menubar__button"
@click="commands.undo"
type="button"
>
<b-icon icon="undo" /> <b-icon icon="undo" />
</button> </button>
<button v-if="!isBasicMode" class="menubar__button" @click="commands.redo" type="button"> <button
v-if="!isBasicMode"
class="menubar__button"
@click="commands.redo"
type="button"
>
<b-icon icon="redo" /> <b-icon icon="redo" />
</button> </button>
</div> </div>
@ -181,7 +191,9 @@
</div> </div>
</div> </div>
</template> </template>
<div v-else class="suggestion-list__item is-empty">{{ $t("No profiles found") }}</div> <div v-else class="suggestion-list__item is-empty">
{{ $t("No profiles found") }}
</div>
</div> </div>
</div> </div>
</template> </template>
@ -430,7 +442,8 @@ export default class EditorComponent extends Vue {
upHandler(): void { upHandler(): void {
this.navigatedActorIndex = this.navigatedActorIndex =
(this.navigatedActorIndex + this.filteredActors.length - 1) % this.filteredActors.length; (this.navigatedActorIndex + this.filteredActors.length - 1) %
this.filteredActors.length;
} }
/** /**
@ -438,7 +451,8 @@ export default class EditorComponent extends Vue {
* if it's the last item, navigate to the first one * if it's the last item, navigate to the first one
*/ */
downHandler(): void { downHandler(): void {
this.navigatedActorIndex = (this.navigatedActorIndex + 1) % this.filteredActors.length; this.navigatedActorIndex =
(this.navigatedActorIndex + 1) % this.filteredActors.length;
} }
enterHandler(): void { enterHandler(): void {
@ -533,7 +547,10 @@ export default class EditorComponent extends Vue {
}, },
}); });
if (data.uploadMedia && data.uploadMedia.url) { if (data.uploadMedia && data.uploadMedia.url) {
command({ src: data.uploadMedia.url, "data-media-id": data.uploadMedia.id }); command({
src: data.uploadMedia.url,
"data-media-id": data.uploadMedia.id,
});
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);

17
js/src/components/Editor/Image.ts
View file

@ -48,9 +48,14 @@ export default class Image extends Node {
} }
commands({ type }: { type: NodeType }): any { commands({ type }: { type: NodeType }): any {
return (attrs: { [key: string]: string }) => (state: EditorState, dispatch: DispatchFn) => { return (attrs: { [key: string]: string }) => (
state: EditorState,
dispatch: DispatchFn
) => {
const { selection }: { selection: TextSelection } = state; const { selection }: { selection: TextSelection } = state;
const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos; const position = selection.$cursor
? selection.$cursor.pos
: selection.$to.pos;
const node = type.create(attrs); const node = type.create(attrs);
const transaction = state.tr.insert(position, node); const transaction = state.tr.insert(position, node);
dispatch(transaction); dispatch(transaction);
@ -75,7 +80,8 @@ export default class Image extends Node {
} }
const images = Array.from(realEvent.dataTransfer.files).filter( const images = Array.from(realEvent.dataTransfer.files).filter(
(file: any) => /image/i.test(file.type) && !/svg/i.test(file.type) (file: any) =>
/image/i.test(file.type) && !/svg/i.test(file.type)
); );
if (images.length === 0) { if (images.length === 0) {
@ -105,7 +111,10 @@ export default class Image extends Node {
src: data.uploadMedia.url, src: data.uploadMedia.url,
"data-media-id": data.uploadMedia.id, "data-media-id": data.uploadMedia.id,
}); });
const transaction = view.state.tr.insert(coordinates.pos, node); const transaction = view.state.tr.insert(
coordinates.pos,
node
);
view.dispatch(transaction); view.dispatch(transaction);
}); });
return true; return true;

26
js/src/components/Event/AddressAutoComplete.vue
View file

@ -21,9 +21,13 @@
</b-autocomplete> </b-autocomplete>
</b-field> </b-field>
<b-field v-if="isSecureContext()"> <b-field v-if="isSecureContext()">
<b-button type="is-text" v-if="!gettingLocation" icon-right="target" @click="locateMe">{{ <b-button
$t("Use my location") type="is-text"
}}</b-button> v-if="!gettingLocation"
icon-right="target"
@click="locateMe"
>{{ $t("Use my location") }}</b-button
>
<span v-else>{{ $t("Getting location") }}</span> <span v-else>{{ $t("Getting location") }}</span>
</b-field> </b-field>
<!-- <!--
@ -58,7 +62,8 @@ import { IConfig } from "../../types/config.model";
@Component({ @Component({
components: { components: {
"map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"), "map-leaflet": () =>
import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
@ -121,7 +126,9 @@ export default class AddressAutoComplete extends Vue {
}, },
}); });
this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address)); this.addressData = result.data.searchAddress.map(
(address: IAddress) => new Address(address)
);
this.isFetching = false; this.isFetching = false;
} }
@ -174,7 +181,9 @@ export default class AddressAutoComplete extends Vue {
}, },
}); });
this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address)); this.addressData = result.data.reverseGeocode.map(
(address: IAddress) => new Address(address)
);
if (this.addressData.length > 0) { if (this.addressData.length > 0) {
const defaultAddress = new Address(this.addressData[0]); const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress; this.selected = defaultAddress;
@ -197,7 +206,10 @@ export default class AddressAutoComplete extends Vue {
this.location = await AddressAutoComplete.getLocation(); this.location = await AddressAutoComplete.getLocation();
this.mapDefaultZoom = 12; this.mapDefaultZoom = 12;
this.reverseGeoCode( this.reverseGeoCode(
new LatLng(this.location.coords.latitude, this.location.coords.longitude), new LatLng(
this.location.coords.latitude,
this.location.coords.longitude
),
12 12
); );
} catch (e) { } catch (e) {

10
js/src/components/Event/DateTimePicker.vue
View file

@ -102,14 +102,20 @@ export default class DateTimePicker extends Vue {
} }
get minTime(): Date | null { get minTime(): Date | null {
if (this.minDatetime && this.datesAreOnSameDay(this.dateWithTime, this.minDatetime)) { if (
this.minDatetime &&
this.datesAreOnSameDay(this.dateWithTime, this.minDatetime)
) {
return this.minDatetime; return this.minDatetime;
} }
return null; return null;
} }
get maxTime(): Date | null { get maxTime(): Date | null {
if (this.maxDatetime && this.datesAreOnSameDay(this.dateWithTime, this.maxDatetime)) { if (
this.maxDatetime &&
this.datesAreOnSameDay(this.dateWithTime, this.maxDatetime)
) {
return this.maxDatetime; return this.maxDatetime;
} }
return null; return null;

13
js/src/components/Event/EventCard.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }"> <router-link
class="card"
:to="{ name: 'Event', params: { uuid: event.uuid } }"
>
<div class="card-image"> <div class="card-image">
<figure <figure
class="image is-16by9" class="image is-16by9"
@ -21,14 +24,18 @@
<div class="card-content"> <div class="card-content">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" /> <date-calendar-icon
v-if="!mergedOptions.hideDate"
:date="event.beginsOn"
/>
</div> </div>
<div class="media-content"> <div class="media-content">
<p class="event-title">{{ event.title }}</p> <p class="event-title">{{ event.title }}</p>
<div class="event-subtitle" v-if="event.physicalAddress"> <div class="event-subtitle" v-if="event.physicalAddress">
<!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>--> <!-- <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
<span> <span>
{{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }} {{ event.physicalAddress.description }},
{{ event.physicalAddress.locality }}
</span> </span>
</div> </div>
</div> </div>

12
js/src/components/Event/EventFullDate.vue
View file

@ -18,7 +18,9 @@
</docs> </docs>
<template> <template>
<span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span> <span v-if="!endsOn">{{
beginsOn | formatDateTimeString(showStartTime)
}}</span>
<span v-else-if="isSameDay() && showStartTime && showEndTime"> <span v-else-if="isSameDay() && showStartTime && showEndTime">
{{ {{
$t("On {date} from {startTime} to {endTime}", { $t("On {date} from {startTime} to {endTime}", {
@ -44,7 +46,9 @@
}) })
}} }}
</span> </span>
<span v-else-if="isSameDay()">{{ $t("On {date}", { date: formatDate(beginsOn) }) }}</span> <span v-else-if="isSameDay()">{{
$t("On {date}", { date: formatDate(beginsOn) })
}}</span>
<span v-else-if="endsOn && showStartTime && showEndTime"> <span v-else-if="endsOn && showStartTime && showEndTime">
{{ {{
$t("From the {startDate} at {startTime} to the {endDate} at {endTime}", { $t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
@ -97,7 +101,9 @@ export default class EventFullDate extends Vue {
} }
isSameDay(): boolean { isSameDay(): boolean {
const sameDay = new Date(this.beginsOn).toDateString() === new Date(this.endsOn).toDateString(); const sameDay =
new Date(this.beginsOn).toDateString() ===
new Date(this.endsOn).toDateString();
return this.endsOn !== undefined && sameDay; return this.endsOn !== undefined && sameDay;
} }
} }

93
js/src/components/Event/EventListCard.vue
View file

@ -6,25 +6,38 @@
<div class="date-component"> <div class="date-component">
<date-calendar-icon :date="participation.event.beginsOn" /> <date-calendar-icon :date="participation.event.beginsOn" />
</div> </div>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"> <router-link
:to="{
name: RouteName.EVENT,
params: { uuid: participation.event.uuid },
}"
>
<h3 class="title">{{ participation.event.title }}</h3> <h3 class="title">{{ participation.event.title }}</h3>
</router-link> </router-link>
</div> </div>
<div class="participation-actor has-text-grey"> <div class="participation-actor has-text-grey">
<span> <span>
<b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" /> <b-icon
icon="earth"
v-if="participation.event.visibility === EventVisibility.PUBLIC"
/>
<b-icon <b-icon
icon="link" icon="link"
v-else-if="participation.event.visibility === EventVisibility.UNLISTED" v-else-if="
participation.event.visibility === EventVisibility.UNLISTED
"
/> />
<b-icon <b-icon
icon="lock" icon="lock"
v-else-if="participation.event.visibility === EventVisibility.PRIVATE" v-else-if="
participation.event.visibility === EventVisibility.PRIVATE
"
/> />
</span> </span>
<span <span
v-if=" v-if="
participation.event.physicalAddress && participation.event.physicalAddress.locality participation.event.physicalAddress &&
participation.event.physicalAddress.locality
" "
>{{ participation.event.physicalAddress.locality }} -</span >{{ participation.event.physicalAddress.locality }} -</span
> >
@ -43,7 +56,11 @@
path="Going as {name}" path="Going as {name}"
tag="span" tag="span"
> >
<popover-actor-card slot="name" :actor="participation.actor" :inline="true"> <popover-actor-card
slot="name"
:actor="participation.actor"
:inline="true"
>
{{ participation.actor.displayName() }} {{ participation.actor.displayName() }}
</popover-actor-card> </popover-actor-card>
</i18n> </i18n>
@ -53,12 +70,15 @@
<span <span
class="participant-stats" class="participant-stats"
v-if=" v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes( ![
participation.role ParticipantRole.PARTICIPANT,
) ParticipantRole.NOT_APPROVED,
].includes(participation.role)
" "
> >
<span v-if="participation.event.options.maximumAttendeeCapacity !== 0"> <span
v-if="participation.event.options.maximumAttendeeCapacity !== 0"
>
{{ {{
$tc( $tc(
"{available}/{capacity} available places", "{available}/{capacity} available places",
@ -68,16 +88,21 @@
available: available:
participation.event.options.maximumAttendeeCapacity - participation.event.options.maximumAttendeeCapacity -
participation.event.participantStats.participant, participation.event.participantStats.participant,
capacity: participation.event.options.maximumAttendeeCapacity, capacity:
participation.event.options.maximumAttendeeCapacity,
} }
) )
}} }}
</span> </span>
<span v-else> <span v-else>
{{ {{
$tc("{count} participants", participation.event.participantStats.participant, { $tc(
count: participation.event.participantStats.participant, "{count} participants",
}) participation.event.participantStats.participant,
{
count: participation.event.participantStats.participant,
}
)
}} }}
</span> </span>
<span v-if="participation.event.participantStats.notApproved > 0"> <span v-if="participation.event.participantStats.notApproved > 0">
@ -107,9 +132,10 @@
<ul> <ul>
<li <li
v-if=" v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes( ![
participation.role ParticipantRole.PARTICIPANT,
) ParticipantRole.NOT_APPROVED,
].includes(participation.role)
" "
> >
<b-button <b-button
@ -140,19 +166,23 @@
</li> </li>
<li <li
v-if=" v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes( ![
participation.role ParticipantRole.PARTICIPANT,
) ParticipantRole.NOT_APPROVED,
].includes(participation.role)
" "
@click="openDeleteEventModalWrapper" @click="openDeleteEventModalWrapper"
> >
<b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button> <b-button type="is-text" icon-left="delete">{{
$t("Delete")
}}</b-button>
</li> </li>
<li <li
v-if=" v-if="
![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes( ![
participation.role ParticipantRole.PARTICIPANT,
) ParticipantRole.NOT_APPROVED,
].includes(participation.role)
" "
> >
<b-button <b-button
@ -172,7 +202,10 @@
tag="router-link" tag="router-link"
icon-left="view-compact" icon-left="view-compact"
type="is-text" type="is-text"
:to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }" :to="{
name: RouteName.EVENT,
params: { uuid: participation.event.uuid },
}"
>{{ $t("View event page") }}</b-button >{{ $t("View event page") }}</b-button
> >
</li> </li>
@ -250,8 +283,14 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
await this.openDeleteEventModal(this.participation.event); await this.openDeleteEventModal(this.participation.event);
} }
async gotToWithCheck(participation: IParticipant, route: RawLocation): Promise<Route> { async gotToWithCheck(
if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) { participation: IParticipant,
route: RawLocation
): Promise<Route> {
if (
participation.actor.id !== this.currentActor.id &&
participation.event.organizerActor
) {
const organizer = participation.event.organizerActor as IPerson; const organizer = participation.event.organizerActor as IPerson;
await changeIdentity(this.$apollo.provider.defaultClient, organizer); await changeIdentity(this.$apollo.provider.defaultClient, organizer);
this.$buefy.notification.open({ this.$buefy.notification.open({

41
js/src/components/Event/EventListViewCard.vue
View file

@ -6,7 +6,9 @@
<div class="date-component"> <div class="date-component">
<date-calendar-icon :date="event.beginsOn" /> <date-calendar-icon :date="event.beginsOn" />
</div> </div>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"> <router-link
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
>
<h2 class="title">{{ event.title }}</h2> <h2 class="title">{{ event.title }}</h2>
</router-link> </router-link>
</div> </div>
@ -15,17 +17,34 @@
{{ event.physicalAddress.locality }} {{ event.physicalAddress.locality }}
</span> </span>
<span v-if="event.attributedTo && options.memberofGroup"> <span v-if="event.attributedTo && options.memberofGroup">
{{ $t("Created by {name}", { name: usernameWithDomain(event.organizerActor) }) }} {{
$t("Created by {name}", {
name: usernameWithDomain(event.organizerActor),
})
}}
</span> </span>
<span v-else-if="options.memberofGroup"> <span v-else-if="options.memberofGroup">
{{ $t("Organized by {name}", { name: usernameWithDomain(event.organizerActor) }) }} {{
$t("Organized by {name}", {
name: usernameWithDomain(event.organizerActor),
})
}}
</span> </span>
</div> </div>
<div class="columns"> <div class="columns">
<span class="column is-narrow"> <span class="column is-narrow">
<b-icon icon="earth" v-if="event.visibility === EventVisibility.PUBLIC" /> <b-icon
<b-icon icon="link" v-if="event.visibility === EventVisibility.UNLISTED" /> icon="earth"
<b-icon icon="lock" v-if="event.visibility === EventVisibility.PRIVATE" /> v-if="event.visibility === EventVisibility.PUBLIC"
/>
<b-icon
icon="link"
v-if="event.visibility === EventVisibility.UNLISTED"
/>
<b-icon
icon="lock"
v-if="event.visibility === EventVisibility.PRIVATE"
/>
</span> </span>
<span class="column is-narrow participant-stats"> <span class="column is-narrow participant-stats">
<span v-if="event.options.maximumAttendeeCapacity !== 0"> <span v-if="event.options.maximumAttendeeCapacity !== 0">
@ -38,9 +57,13 @@
</span> </span>
<span v-else> <span v-else>
{{ {{
$tc("{count} participants", event.participantStats.participant, { $tc(
count: event.participantStats.participant, "{count} participants",
}) event.participantStats.participant,
{
count: event.participantStats.participant,
}
)
}} }}
</span> </span>
</span> </span>

19
js/src/components/Event/EventMinimalistCard.vue
View file

@ -14,10 +14,12 @@
{{ {{
$tc( $tc(
"{available}/{capacity} available places", "{available}/{capacity} available places",
event.options.maximumAttendeeCapacity - event.participantStats.participant, event.options.maximumAttendeeCapacity -
event.participantStats.participant,
{ {
available: available:
event.options.maximumAttendeeCapacity - event.participantStats.participant, event.options.maximumAttendeeCapacity -
event.participantStats.participant,
capacity: event.options.maximumAttendeeCapacity, capacity: event.options.maximumAttendeeCapacity,
} }
) )
@ -42,9 +44,13 @@
" "
> >
{{ {{
$tc("{count} requests waiting", event.participantStats.notApproved, { $tc(
count: event.participantStats.notApproved, "{count} requests waiting",
}) event.participantStats.notApproved,
{
count: event.participantStats.notApproved,
}
)
}} }}
</b-button> </b-button>
</span> </span>
@ -88,7 +94,8 @@ export default class EventMinimalistCard extends Vue {
.event-minimalist-title { .event-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
} }

25
js/src/components/Event/FullAddressAutoComplete.vue
View file

@ -33,9 +33,12 @@
<div v-else-if="queryText.length >= 3" class="is-enabled"> <div v-else-if="queryText.length >= 3" class="is-enabled">
<span>{{ $t('No results for "{queryText}"') }}</span> <span>{{ $t('No results for "{queryText}"') }}</span>
<span>{{ <span>{{
$t("You can try another search term or drag and drop the marker on the map", { $t(
queryText, "You can try another search term or drag and drop the marker on the map",
}) {
queryText,
}
)
}}</span> }}</span>
<!-- <p class="control" @click="openNewAddressModal">--> <!-- <p class="control" @click="openNewAddressModal">-->
<!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>--> <!-- <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
@ -110,7 +113,8 @@ import { IConfig } from "../../types/config.model";
@Component({ @Component({
components: { components: {
"map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"), "map-leaflet": () =>
import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
}, },
apollo: { apollo: {
config: CONFIG, config: CONFIG,
@ -173,7 +177,9 @@ export default class FullAddressAutoComplete extends Vue {
}, },
}); });
this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address)); this.addressData = result.data.searchAddress.map(
(address: IAddress) => new Address(address)
);
this.isFetching = false; this.isFetching = false;
} }
@ -224,7 +230,9 @@ export default class FullAddressAutoComplete extends Vue {
}, },
}); });
this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address)); this.addressData = result.data.reverseGeocode.map(
(address: IAddress) => new Address(address)
);
if (this.addressData.length > 0) { if (this.addressData.length > 0) {
const defaultAddress = new Address(this.addressData[0]); const defaultAddress = new Address(this.addressData[0]);
this.selected = defaultAddress; this.selected = defaultAddress;
@ -248,7 +256,10 @@ export default class FullAddressAutoComplete extends Vue {
this.location = await FullAddressAutoComplete.getLocation(); this.location = await FullAddressAutoComplete.getLocation();
this.mapDefaultZoom = 12; this.mapDefaultZoom = 12;
this.reverseGeoCode( this.reverseGeoCode(
new LatLng(this.location.coords.latitude, this.location.coords.longitude), new LatLng(
this.location.coords.latitude,
this.location.coords.longitude
),
12 12
); );
} catch (e) { } catch (e) {

26
js/src/components/Event/OrganizerPicker.vue
View file

@ -10,9 +10,18 @@
> >
<div class="media"> <div class="media">
<figure class="image is-48x48" v-if="availableActor.avatar"> <figure class="image is-48x48" v-if="availableActor.avatar">
<img class="media-left is-rounded" :src="availableActor.avatar.url" alt="" /> <img
class="media-left is-rounded"
:src="availableActor.avatar.url"
alt=""
/>
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content"> <div class="media-content">
<h3>{{ availableActor.name }}</h3> <h3>{{ availableActor.name }}</h3>
<small>{{ `@${availableActor.preferredUsername}` }}</small> <small>{{ `@${availableActor.preferredUsername}` }}</small>
@ -61,16 +70,21 @@ export default class OrganizerPicker extends Vue {
get actualMemberships(): IMember[] { get actualMemberships(): IMember[] {
if (this.restrictModeratorLevel) { if (this.restrictModeratorLevel) {
return this.groupMemberships.elements.filter((membership: IMember) => return this.groupMemberships.elements.filter((membership: IMember) =>
[MemberRole.ADMINISTRATOR, MemberRole.MODERATOR, MemberRole.CREATOR].includes( [
membership.role MemberRole.ADMINISTRATOR,
) MemberRole.MODERATOR,
MemberRole.CREATOR,
].includes(membership.role)
); );
} }
return this.groupMemberships.elements; return this.groupMemberships.elements;
} }
get actualAvailableActors(): IActor[] { get actualAvailableActors(): IActor[] {
return [this.identity, ...this.actualMemberships.map((member) => member.parent)]; return [
this.identity,
...this.actualMemberships.map((member) => member.parent),
];
} }
@Watch("currentActor") @Watch("currentActor")

47
js/src/components/Event/OrganizerPickerWrapper.vue
View file

@ -1,7 +1,11 @@
<template> <template>
<div class="organizer-picker"> <div class="organizer-picker">
<!-- If we have a current actor (inline) --> <!-- If we have a current actor (inline) -->
<div v-if="inline && currentActor.id" class="inline box" @click="isComponentModalActive = true"> <div
v-if="inline && currentActor.id"
class="inline box"
@click="isComponentModalActive = true"
>
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="currentActor.avatar"> <figure class="image is-48x48" v-if="currentActor.avatar">
@ -15,7 +19,9 @@
</div> </div>
<div class="media-content" v-if="currentActor.name"> <div class="media-content" v-if="currentActor.name">
<p class="is-4">{{ currentActor.name }}</p> <p class="is-4">{{ currentActor.name }}</p>
<p class="is-6 has-text-grey">{{ `@${currentActor.preferredUsername}` }}</p> <p class="is-6 has-text-grey">
{{ `@${currentActor.preferredUsername}` }}
</p>
</div> </div>
<div class="media-content" v-else> <div class="media-content" v-else>
{{ `@${currentActor.preferredUsername}` }} {{ `@${currentActor.preferredUsername}` }}
@ -26,7 +32,11 @@
</div> </div>
</div> </div>
<!-- If we have a current actor --> <!-- If we have a current actor -->
<span v-else-if="currentActor.id" class="block" @click="isComponentModalActive = true"> <span
v-else-if="currentActor.id"
class="block"
@click="isComponentModalActive = true"
>
<img <img
class="image is-48x48" class="image is-48x48"
v-if="currentActor.avatar" v-if="currentActor.avatar"
@ -40,13 +50,19 @@
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="identity.avatar"> <figure class="image is-48x48" v-if="identity.avatar">
<img class="image is-rounded" :src="identity.avatar.url" :alt="identity.avatar.alt" /> <img
class="image is-rounded"
:src="identity.avatar.url"
:alt="identity.avatar.alt"
/>
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
<div class="media-content" v-if="identity.name"> <div class="media-content" v-if="identity.name">
<p class="is-4">{{ identity.name }}</p> <p class="is-4">{{ identity.name }}</p>
<p class="is-6 has-text-grey">{{ `@${identity.preferredUsername}` }}</p> <p class="is-6 has-text-grey">
{{ `@${identity.preferredUsername}` }}
</p>
</div> </div>
<div class="media-content" v-else> <div class="media-content" v-else>
{{ `@${identity.preferredUsername}` }} {{ `@${identity.preferredUsername}` }}
@ -74,7 +90,11 @@
<div class="column"> <div class="column">
<div v-if="actorMembersForCurrentActor.length > 0"> <div v-if="actorMembersForCurrentActor.length > 0">
<p>{{ $t("Add a contact") }}</p> <p>{{ $t("Add a contact") }}</p>
<p class="field" v-for="actor in actorMembersForCurrentActor" :key="actor.id"> <p
class="field"
v-for="actor in actorMembersForCurrentActor"
:key="actor.id"
>
<b-checkbox v-model="actualContacts" :native-value="actor.id"> <b-checkbox v-model="actualContacts" :native-value="actor.id">
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -89,7 +109,9 @@
</div> </div>
<div class="media-content" v-if="actor.name"> <div class="media-content" v-if="actor.name">
<p class="is-4">{{ actor.name }}</p> <p class="is-4">{{ actor.name }}</p>
<p class="is-6 has-text-grey">{{ `@${actor.preferredUsername}` }}</p> <p class="is-6 has-text-grey">
{{ `@${actor.preferredUsername}` }}
</p>
</div> </div>
<div class="media-content" v-else> <div class="media-content" v-else>
{{ `@${actor.preferredUsername}` }} {{ `@${actor.preferredUsername}` }}
@ -151,7 +173,8 @@ export default class OrganizerPickerWrapper extends Vue {
groupMemberships: Paginate<IMember> = { elements: [], total: 0 }; groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
@Prop({ type: Array, required: false, default: () => [] }) contacts!: IActor[]; @Prop({ type: Array, required: false, default: () => [] })
contacts!: IActor[];
actualContacts: (string | undefined)[] = this.contacts.map(({ id }) => id); actualContacts: (string | undefined)[] = this.contacts.map(({ id }) => id);
@ -172,7 +195,9 @@ export default class OrganizerPickerWrapper extends Vue {
pickActor(): void { pickActor(): void {
this.$emit( this.$emit(
"update:contacts", "update:contacts",
this.actorMembersForCurrentActor.filter(({ id }) => this.actualContacts.includes(id)) this.actorMembersForCurrentActor.filter(({ id }) =>
this.actualContacts.includes(id)
)
); );
this.$emit("input", this.currentActor); this.$emit("input", this.currentActor);
this.isComponentModalActive = false; this.isComponentModalActive = false;
@ -183,7 +208,9 @@ export default class OrganizerPickerWrapper extends Vue {
({ parent: { id } }) => id === this.currentActor.id ({ parent: { id } }) => id === this.currentActor.id
); );
if (currentMembership) { if (currentMembership) {
return currentMembership.parent.members.elements.map(({ actor }: { actor: IActor }) => actor); return currentMembership.parent.members.elements.map(
({ actor }: { actor: IActor }) => actor
);
} }
return []; return [];
} }

47
js/src/components/Event/ParticipationButton.vue
View file

@ -47,8 +47,16 @@ A button to set your participation
> >
</b-dropdown> </b-dropdown>
<div v-else-if="participation && participation.role === ParticipantRole.NOT_APPROVED"> <div
<b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled"> v-else-if="
participation && participation.role === ParticipantRole.NOT_APPROVED
"
>
<b-dropdown
aria-role="list"
position="is-bottom-left"
class="dropdown-disabled"
>
<button class="button is-success is-large" type="button" slot="trigger"> <button class="button is-success is-large" type="button" slot="trigger">
<b-icon icon="timer-sand-empty" /> <b-icon icon="timer-sand-empty" />
<template> <template>
@ -74,9 +82,17 @@ A button to set your participation
<small>{{ $t("Waiting for organization team approval.") }}</small> <small>{{ $t("Waiting for organization team approval.") }}</small>
</div> </div>
<div v-else-if="participation && participation.role === ParticipantRole.REJECTED"> <div
v-else-if="
participation && participation.role === ParticipantRole.REJECTED
"
>
<span> <span>
{{ $t("Unfortunately, your participation request was rejected by the organizers.") }} {{
$t(
"Unfortunately, your participation request was rejected by the organizers."
)
}}
</span> </span>
</div> </div>
@ -92,7 +108,11 @@ A button to set your participation
<b-icon icon="menu-down" /> <b-icon icon="menu-down" />
</button> </button>
<b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)"> <b-dropdown-item
:value="true"
aria-role="listitem"
@click="joinEvent(currentActor)"
>
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32" v-if="currentActor.avatar">
@ -103,7 +123,8 @@ A button to set your participation
<span> <span>
{{ {{
$t("as {identity}", { $t("as {identity}", {
identity: currentActor.name || `@${currentActor.preferredUsername}`, identity:
currentActor.name || `@${currentActor.preferredUsername}`,
}) })
}} }}
</span> </span>
@ -121,7 +142,10 @@ A button to set your participation
</b-dropdown> </b-dropdown>
<b-button <b-button
tag="router-link" tag="router-link"
:to="{ name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, params: { uuid: event.uuid } }" :to="{
name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT,
params: { uuid: event.uuid },
}"
v-else-if="!participation && hasAnonymousParticipationMethods" v-else-if="!participation && hasAnonymousParticipationMethods"
type="is-primary" type="is-primary"
size="is-large" size="is-large"
@ -130,7 +154,10 @@ A button to set your participation
> >
<b-button <b-button
tag="router-link" tag="router-link"
:to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, params: { uuid: event.uuid } }" :to="{
name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
params: { uuid: event.uuid },
}"
v-else-if="!currentActor.id" v-else-if="!currentActor.id"
type="is-primary" type="is-primary"
size="is-large" size="is-large"
@ -162,7 +189,9 @@ import RouteName from "../../router/name";
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => update: ({ identities }) =>
identities ? identities.map((identity: IPerson) => new Person(identity)) : [], identities
? identities.map((identity: IPerson) => new Person(identity))
: [],
skip() { skip() {
return this.currentUser.isLoggedIn === false; return this.currentUser.isLoggedIn === false;
}, },

20
js/src/components/Event/ShareEventModal.vue
View file

@ -59,7 +59,12 @@
<a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener" <a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
><b-icon icon="linkedin" size="is-large" type="is-primary" ><b-icon icon="linkedin" size="is-large" type="is-primary"
/></a> /></a>
<a :href="diasporaShareUrl" class="diaspora" target="_blank" rel="nofollow noopener"> <a
:href="diasporaShareUrl"
class="diaspora"
target="_blank"
rel="nofollow noopener"
>
<span data-v-5e15e80a="" class="icon has-text-primary is-large"> <span data-v-5e15e80a="" class="icon has-text-primary is-large">
<DiasporaLogo alt="diaspora-logo" /> <DiasporaLogo alt="diaspora-logo" />
</span> </span>
@ -90,7 +95,8 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
export default class ShareEventModal extends Vue { export default class ShareEventModal extends Vue {
@Prop({ type: Object, required: true }) event!: IEvent; @Prop({ type: Object, required: true }) event!: IEvent;
@Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean; @Prop({ type: Boolean, required: false, default: true })
eventCapacityOK!: boolean;
@Ref("eventURLInput") readonly eventURLInput!: any; @Ref("eventURLInput") readonly eventURLInput!: any;
@ -101,13 +107,15 @@ export default class ShareEventModal extends Vue {
showCopiedTooltip = false; showCopiedTooltip = false;
get twitterShareUrl(): string { get twitterShareUrl(): string {
return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${ return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
this.event.title this.event.url
}`; )}&text=${this.event.title}`;
} }
get facebookShareUrl(): string { get facebookShareUrl(): string {
return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.event.url)}`; return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
this.event.url
)}`;
} }
get linkedInShareUrl(): string { get linkedInShareUrl(): string {

10
js/src/components/Event/TagInput.vue
View file

@ -4,7 +4,9 @@
{{ $t("Add some tags") }} {{ $t("Add some tags") }}
<b-tooltip <b-tooltip
type="is-dark" type="is-dark"
:label="$t('You can add tags by hitting the Enter key or by adding a comma')" :label="
$t('You can add tags by hitting the Enter key or by adding a comma')
"
> >
<b-icon size="is-small" icon="help-circle-outline"></b-icon> <b-icon size="is-small" icon="help-circle-outline"></b-icon>
</b-tooltip> </b-tooltip>
@ -58,7 +60,11 @@ export default class TagInput extends Vue {
getFilteredTags(text: string): void { getFilteredTags(text: string): void {
this.filteredTags = differenceBy(this.data, this.value, "id").filter( this.filteredTags = differenceBy(this.data, this.value, "id").filter(
(option) => get(option, this.path).toString().toLowerCase().indexOf(text.toLowerCase()) >= 0 (option) =>
get(option, this.path)
.toString()
.toLowerCase()
.indexOf(text.toLowerCase()) >= 0
); );
} }
} }

17
js/src/components/Footer.vue
View file

@ -3,13 +3,20 @@
<img :src="`/img/pics/footer_${random}.jpg`" alt="" /> <img :src="`/img/pics/footer_${random}.jpg`" alt="" />
<ul> <ul>
<li> <li>
<router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link> <router-link :to="{ name: RouteName.ABOUT }">{{
$t("About")
}}</router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: RouteName.TERMS }">{{ $t("Terms") }}</router-link> <router-link :to="{ name: RouteName.TERMS }">{{
$t("Terms")
}}</router-link>
</li> </li>
<li> <li>
<a hreflang="en" href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"> <a
hreflang="en"
href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
>
{{ $t("License") }} {{ $t("License") }}
</a> </a>
</li> </li>
@ -19,7 +26,9 @@
tag="span" tag="span"
path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}." path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
> >
<a slot="mobilizon" href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a> <a slot="mobilizon" href="https://joinmobilizon.org">{{
$t("Mobilizon")
}}</a>
<span slot="date">{{ new Date().getFullYear() }}</span> <span slot="date">{{ new Date().getFullYear() }}</span>
<a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{ <a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{
$t("more than 1360 contributors") $t("more than 1360 contributors")

4
js/src/components/Group/GroupCard.vue
View file

@ -17,7 +17,9 @@
> >
<h3>{{ group.name }}</h3> <h3>{{ group.name }}</h3>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey">
<span v-if="group.domain">{{ `@${group.preferredUsername}@${group.domain}` }}</span> <span v-if="group.domain">{{
`@${group.preferredUsername}@${group.domain}`
}}</span>
<span v-else>{{ `@${group.preferredUsername}` }}</span> <span v-else>{{ `@${group.preferredUsername}` }}</span>
</p> </p>
</router-link> </router-link>

20
js/src/components/Group/GroupMemberCard.vue
View file

@ -13,7 +13,9 @@
<router-link <router-link
:to="{ :to="{
name: RouteName.GROUP, name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(member.parent) }, params: {
preferredUsername: usernameWithDomain(member.parent),
},
}" }"
> >
<h3>{{ member.parent.name }}</h3> <h3>{{ member.parent.name }}</h3>
@ -23,12 +25,16 @@
}}</span> }}</span>
<span v-else>{{ `@${member.parent.preferredUsername}` }}</span> <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
<b-taglist> <b-taglist>
<b-tag type="is-info" v-if="member.role === MemberRole.ADMINISTRATOR">{{ <b-tag
$t("Administrator") type="is-info"
}}</b-tag> v-if="member.role === MemberRole.ADMINISTRATOR"
<b-tag type="is-info" v-else-if="member.role === MemberRole.MODERATOR">{{ >{{ $t("Administrator") }}</b-tag
$t("Moderator") >
}}</b-tag> <b-tag
type="is-info"
v-else-if="member.role === MemberRole.MODERATOR"
>{{ $t("Moderator") }}</b-tag
>
</b-taglist> </b-taglist>
</p> </p>
</router-link> </router-link>

29
js/src/components/Group/GroupPicker.vue
View file

@ -8,7 +8,9 @@
<a <a
class="list-item" class="list-item"
v-for="groupMembership in actualMemberships" v-for="groupMembership in actualMemberships"
:class="{ 'is-active': groupMembership.parent.id === currentGroup.id }" :class="{
'is-active': groupMembership.parent.id === currentGroup.id,
}"
@click="changeCurrentGroup(groupMembership.parent)" @click="changeCurrentGroup(groupMembership.parent)"
:key="groupMembership.id" :key="groupMembership.id"
> >
@ -19,14 +21,25 @@
:src="groupMembership.parent.avatar.url" :src="groupMembership.parent.avatar.url"
alt="" alt=""
/> />
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content"> <div class="media-content">
<h3>@{{ groupMembership.parent.name }}</h3> <h3>@{{ groupMembership.parent.name }}</h3>
<small>{{ `@${groupMembership.parent.preferredUsername}` }}</small> <small>{{
`@${groupMembership.parent.preferredUsername}`
}}</small>
</div> </div>
</div> </div>
</a> </a>
<a class="list-item" @click="changeCurrentGroup(new Group())" v-if="currentGroup.id"> <a
class="list-item"
@click="changeCurrentGroup(new Group())"
v-if="currentGroup.id"
>
<h3>{{ $t("Unset group") }}</h3> <h3>{{ $t("Unset group") }}</h3>
</a> </a>
</div> </div>
@ -79,9 +92,11 @@ export default class GroupPicker extends Vue {
get actualMemberships(): IMember[] { get actualMemberships(): IMember[] {
if (this.restrictModeratorLevel) { if (this.restrictModeratorLevel) {
return this.groupMemberships.elements.filter((membership: IMember) => return this.groupMemberships.elements.filter((membership: IMember) =>
[MemberRole.ADMINISTRATOR, MemberRole.MODERATOR, MemberRole.CREATOR].includes( [
membership.role MemberRole.ADMINISTRATOR,
) MemberRole.MODERATOR,
MemberRole.CREATOR,
].includes(membership.role)
); );
} }
return this.groupMemberships.elements; return this.groupMemberships.elements;

20
js/src/components/Group/GroupPickerWrapper.vue
View file

@ -10,7 +10,11 @@
{{ $t("The event will show the group as organizer.") }} {{ $t("The event will show the group as organizer.") }}
</p> </p>
</div> </div>
<div v-if="inline && currentGroup.id" class="inline box" @click="isComponentModalActive = true"> <div
v-if="inline && currentGroup.id"
class="inline box"
@click="isComponentModalActive = true"
>
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="currentGroup.avatar"> <figure class="image is-48x48" v-if="currentGroup.avatar">
@ -24,7 +28,9 @@
</div> </div>
<div class="media-content" v-if="currentGroup.name"> <div class="media-content" v-if="currentGroup.name">
<p class="is-4">{{ currentGroup.name }}</p> <p class="is-4">{{ currentGroup.name }}</p>
<p class="is-6 has-text-grey">{{ `@${currentGroup.preferredUsername}` }}</p> <p class="is-6 has-text-grey">
{{ `@${currentGroup.preferredUsername}` }}
</p>
</div> </div>
<div class="media-content" v-else> <div class="media-content" v-else>
{{ `@${currentGroup.preferredUsername}` }} {{ `@${currentGroup.preferredUsername}` }}
@ -34,7 +40,11 @@
</b-button> </b-button>
</div> </div>
</div> </div>
<span v-else-if="currentGroup.id" class="block" @click="isComponentModalActive = true"> <span
v-else-if="currentGroup.id"
class="block"
@click="isComponentModalActive = true"
>
<img <img
class="image is-48x48" class="image is-48x48"
v-if="currentGroup.avatar" v-if="currentGroup.avatar"
@ -44,7 +54,9 @@
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</span> </span>
<div v-if="groupMemberships.total === 0" class="box"> <div v-if="groupMemberships.total === 0" class="box">
<p class="is-4">{{ $t("This identity is not a member of any group.") }}</p> <p class="is-4">
{{ $t("This identity is not a member of any group.") }}
</p>
<p class="is-6 is-size-6 has-text-grey"> <p class="is-6 is-size-6 has-text-grey">
{{ $t("You need to create the group before you create an event.") }} {{ $t("You need to create the group before you create an event.") }}
</p> </p>

6
js/src/components/Group/GroupSection.vue
View file

@ -26,7 +26,8 @@ export default class GroupSection extends Vue {
@Prop({ required: true, type: String }) icon!: string; @Prop({ required: true, type: String }) icon!: string;
@Prop({ required: false, type: Boolean, default: true }) privateSection!: boolean; @Prop({ required: false, type: Boolean, default: true })
privateSection!: boolean;
@Prop({ required: true, type: Object }) route!: Route; @Prop({ required: true, type: Object }) route!: Route;
} }
@ -76,7 +77,8 @@ div.group-section-title {
::v-deep span { ::v-deep span {
display: inline; display: inline;
padding: 3px 8px; padding: 3px 8px;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-weight: 500; font-weight: 500;
font-size: 30px; font-size: 30px;
flex: 1; flex: 1;

17
js/src/components/Group/InvitationCard.vue
View file

@ -2,7 +2,10 @@
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<i18n tag="p" path="You have been invited by {invitedBy} to the following group:"> <i18n
tag="p"
path="You have been invited by {invitedBy} to the following group:"
>
<b slot="invitedBy">{{ member.invitedBy.name }}</b> <b slot="invitedBy">{{ member.invitedBy.name }}</b>
</i18n> </i18n>
</div> </div>
@ -20,15 +23,21 @@
<router-link <router-link
:to="{ :to="{
name: RouteName.GROUP, name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(member.parent) }, params: {
preferredUsername: usernameWithDomain(member.parent),
},
}" }"
> >
<h3>{{ member.parent.name }}</h3> <h3>{{ member.parent.name }}</h3>
<p class="is-6 has-text-grey"> <p class="is-6 has-text-grey">
<span v-if="member.parent.domain"> <span v-if="member.parent.domain">
{{ `@${member.parent.preferredUsername}@${member.parent.domain}` }} {{
`@${member.parent.preferredUsername}@${member.parent.domain}`
}}
</span> </span>
<span v-else>{{ `@${member.parent.preferredUsername}` }}</span> <span v-else>{{
`@${member.parent.preferredUsername}`
}}</span>
</p> </p>
</router-link> </router-link>
</div> </div>

32
js/src/components/Group/Invitations.vue
View file

@ -26,13 +26,15 @@ export default class Invitations extends Vue {
async acceptInvitation(id: string): Promise<void> { async acceptInvitation(id: string): Promise<void> {
try { try {
const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>({ const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>(
mutation: ACCEPT_INVITATION, {
variables: { mutation: ACCEPT_INVITATION,
id, variables: {
}, id,
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }], },
}); refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
}
);
if (data) { if (data) {
this.$emit("accept-invitation", data.acceptInvitation); this.$emit("accept-invitation", data.acceptInvitation);
} }
@ -46,13 +48,15 @@ export default class Invitations extends Vue {
async rejectInvitation(id: string): Promise<void> { async rejectInvitation(id: string): Promise<void> {
try { try {
const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>({ const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>(
mutation: REJECT_INVITATION, {
variables: { mutation: REJECT_INVITATION,
id, variables: {
}, id,
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }], },
}); refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
}
);
if (data) { if (data) {
this.$emit("reject-invitation", data.rejectInvitation); this.$emit("reject-invitation", data.rejectInvitation);
} }

4
js/src/components/Group/JoinGroupWithAccount.vue
View file

@ -25,6 +25,8 @@ export default class JoinGroupWithAccount extends Vue {
}`; }`;
} }
sentence = this.$t("We will redirect you to your instance in order to interact with this group"); sentence = this.$t(
"We will redirect you to your instance in order to interact with this group"
);
} }
</script> </script>

18
js/src/components/Map.vue
View file

@ -8,7 +8,11 @@
@click="clickMap" @click="clickMap"
@update:zoom="updateZoom" @update:zoom="updateZoom"
> >
<l-tile-layer :url="config.maps.tiles.endpoint" :attribution="attribution"> </l-tile-layer> <l-tile-layer
:url="config.maps.tiles.endpoint"
:attribution="attribution"
>
</l-tile-layer>
<v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" /> <v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" />
<l-marker <l-marker
:lat-lng="[lat, lon]" :lat-lng="[lat, lon]"
@ -17,7 +21,9 @@
:draggable="!readOnly" :draggable="!readOnly"
> >
<l-popup v-if="popupMultiLine"> <l-popup v-if="popupMultiLine">
<span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span> <span v-for="line in popupMultiLine" :key="line"
>{{ line }}<br
/></span>
</l-popup> </l-popup>
</l-marker> </l-marker>
</l-map> </l-map>
@ -51,7 +57,10 @@ export default class Map extends Vue {
@Prop({ type: String, required: true }) coords!: string; @Prop({ type: String, required: true }) coords!: string;
@Prop({ type: Object, required: false }) marker!: { text: string | string[]; icon: string }; @Prop({ type: Object, required: false }) marker!: {
text: string | string[];
icon: string;
};
@Prop({ type: Object, required: false }) options!: Record<string, unknown>; @Prop({ type: Object, required: false }) options!: Record<string, unknown>;
@ -125,7 +134,8 @@ export default class Map extends Vue {
get attribution(): string { get attribution(): string {
return ( return (
this.config.maps.tiles.attribution || (this.$t("© The OpenStreetMap Contributors") as string) this.config.maps.tiles.attribution ||
(this.$t("© The OpenStreetMap Contributors") as string)
); );
} }
} }

5
js/src/components/Map/Vue2LeafletLocateControl.vue
View file

@ -23,7 +23,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
}, },
}) })
export default class Vue2LeafletLocateControl extends Vue { export default class Vue2LeafletLocateControl extends Vue {
@Prop({ type: Object, default: () => ({}) }) options!: Record<string, unknown>; @Prop({ type: Object, default: () => ({}) }) options!: Record<
string,
unknown
>;
@Prop({ type: Boolean, default: true }) visible = true; @Prop({ type: Boolean, default: true }) visible = true;

62
js/src/components/NavBar.vue
View file

@ -1,7 +1,15 @@
<template> <template>
<b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive"> <b-navbar
type="is-secondary"
wrapper-class="container"
:active.sync="mobileNavbarActive"
>
<template slot="brand"> <template slot="brand">
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')"> <b-navbar-item
tag="router-link"
:to="{ name: RouteName.HOME }"
:aria-label="$t('Home')"
>
<logo /> <logo />
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -19,9 +27,12 @@
>{{ $t("My groups") }}</b-navbar-item >{{ $t("My groups") }}</b-navbar-item
> >
<b-navbar-item tag="span" v-if="config && config.features.eventCreation"> <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{ <b-button
$t("Create") tag="router-link"
}}</b-button> :to="{ name: RouteName.CREATE_EVENT }"
type="is-primary"
>{{ $t("Create") }}</b-button
>
</b-navbar-item> </b-navbar-item>
</template> </template>
<template slot="end"> <template slot="end">
@ -30,9 +41,17 @@
</b-navbar-item> </b-navbar-item>
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right> <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile"> <template
slot="label"
v-if="currentActor"
class="navbar-dropdown-profile"
>
<figure class="image is-32x32" v-if="currentActor.avatar"> <figure class="image is-32x32" v-if="currentActor.avatar">
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" /> <img
class="is-rounded"
alt="avatarUrl"
:src="currentActor.avatar.url"
/>
</figure> </figure>
<b-icon v-else icon="account-circle" /> <b-icon v-else icon="account-circle" />
</template> </template>
@ -65,9 +84,11 @@
<hr class="navbar-divider" /> <hr class="navbar-divider" />
</b-navbar-item> </b-navbar-item>
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{ <b-navbar-item
$t("My account") tag="router-link"
}}</b-navbar-item> :to="{ name: RouteName.UPDATE_IDENTITY }"
>{{ $t("My account") }}</b-navbar-item
>
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">--> <!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
<!-- {{ $t('Create group') }}--> <!-- {{ $t('Create group') }}-->
@ -95,9 +116,11 @@
<strong>{{ $t("Sign up") }}</strong> <strong>{{ $t("Sign up") }}</strong>
</router-link> </router-link>
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ <router-link
$t("Log in") class="button is-light"
}}</router-link> :to="{ name: RouteName.LOGIN }"
>{{ $t("Log in") }}</router-link
>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -112,7 +135,11 @@ import { loadLanguageAsync } from "@/utils/i18n";
import { ICurrentUserRole } from "@/types/enums"; import { ICurrentUserRole } from "@/types/enums";
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user"; import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
import { changeIdentity, logout } from "../utils/auth"; import { changeIdentity, logout } from "../utils/auth";
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor"; import {
CURRENT_ACTOR_CLIENT,
IDENTITIES,
UPDATE_DEFAULT_ACTOR,
} from "../graphql/actor";
import { IPerson, Person } from "../types/actor"; import { IPerson, Person } from "../types/actor";
import { CONFIG } from "../graphql/config"; import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
@ -131,7 +158,9 @@ import RouteName from "../router/name";
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: ({ identities }) => update: ({ identities }) =>
identities ? identities.map((identity: IPerson) => new Person(identity)) : [], identities
? identities.map((identity: IPerson) => new Person(identity))
: [],
skip() { skip() {
return this.currentUser.isLoggedIn === false; return this.currentUser.isLoggedIn === false;
}, },
@ -202,7 +231,8 @@ export default class NavBar extends Vue {
async handleErrors(errors: GraphQLError[]): Promise<void> { async handleErrors(errors: GraphQLError[]): Promise<void> {
if ( if (
errors.length > 0 && errors.length > 0 &&
errors[0].message === "You need to be logged-in to view your list of identities" errors[0].message ===
"You need to be logged-in to view your list of identities"
) { ) {
await this.logout(); await this.logout();
} }

22
js/src/components/Participation/ConfirmParticipation.vue
View file

@ -1,9 +1,14 @@
<template> <template>
<section class="section container"> <section class="section container">
<h1 class="title" v-if="loading">{{ $t("Your participation request is being validated") }}</h1> <h1 class="title" v-if="loading">
{{ $t("Your participation request is being validated") }}
</h1>
<div v-else> <div v-else>
<div v-if="failed"> <div v-if="failed">
<b-message :title="$t('Error while validating participation request')" type="is-danger"> <b-message
:title="$t('Error while validating participation request')"
type="is-danger"
>
{{ {{
$t( $t(
"Either the participation request has already been validated, either the validation token is incorrect." "Either the participation request has already been validated, either the validation token is incorrect."
@ -12,9 +17,16 @@
</b-message> </b-message>
</div> </div>
<div v-else> <div v-else>
<h1 class="title">{{ $t("Your participation request has been validated") }}</h1> <h1 class="title">
<p class="content" v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED"> {{ $t("Your participation request has been validated") }}
{{ $t("Your participation still has to be approved by the organisers.") }} </h1>
<p
class="content"
v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED"
>
{{
$t("Your participation still has to be approved by the organisers.")
}}
</p> </p>
<div class="columns has-text-centered"> <div class="columns has-text-centered">
<div class="column"> <div class="column">

10
js/src/components/Participation/ParticipationWithAccount.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<redirect-with-account :uri="uri" :pathAfterLogin="`/events/${uuid}`" :sentence="sentence" /> <redirect-with-account
:uri="uri"
:pathAfterLogin="`/events/${uuid}`"
:sentence="sentence"
/>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@ -21,6 +25,8 @@ export default class ParticipationWithAccount extends Vue {
}`; }`;
} }
sentence = this.$t("We will redirect you to your instance in order to interact with this event"); sentence = this.$t(
"We will redirect you to your instance in order to interact with this event"
);
} }
</script> </script>

53
js/src/components/Participation/ParticipationWithoutAccount.vue
View file

@ -33,7 +33,13 @@
) )
}} }}
</p> </p>
<p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p> <p v-else>
{{
$t(
"If you want, you may send a message to the event organizer here."
)
}}
</p>
<b-field :label="$t('Message')"> <b-field :label="$t('Message')">
<b-input <b-input
type="textarea" type="textarea"
@ -54,18 +60,29 @@
</p> </p>
</b-checkbox> </b-checkbox>
</b-field> </b-field>
<b-button :disabled="sendingForm" type="is-primary" native-type="submit">{{ <b-button
$t("Send email") :disabled="sendingForm"
}}</b-button> type="is-primary"
native-type="submit"
>{{ $t("Send email") }}</b-button
>
<div class="has-text-centered"> <div class="has-text-centered">
<b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">{{ <b-button
$t("Back to previous page") native-type="button"
}}</b-button> tag="a"
type="is-text"
@click="$router.go(-1)"
>{{ $t("Back to previous page") }}</b-button
>
</div> </div>
</form> </form>
<div v-else> <div v-else>
<h1 class="title">{{ $t("Request for participation confirmation sent") }}</h1> <h1 class="title">
<p class="content">{{ $t("Check your inbox (and your junk mail folder).") }}</p> {{ $t("Request for participation confirmation sent") }}
</h1>
<p class="content">
{{ $t("Check your inbox (and your junk mail folder).") }}
</p>
<p class="content">{{ $t("You may now close this window.") }}</p> <p class="content">{{ $t("You may now close this window.") }}</p>
</div> </div>
</div> </div>
@ -102,7 +119,11 @@ import { IParticipant } from "../../types/participant.model";
export default class ParticipationWithoutAccount extends Vue { export default class ParticipationWithoutAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;
anonymousParticipation: { email: string; message: string; saveParticipation: boolean } = { anonymousParticipation: {
email: string;
message: string;
saveParticipation: boolean;
} = {
email: "", email: "",
message: "", message: "",
saveParticipation: true, saveParticipation: true,
@ -134,7 +155,9 @@ export default class ParticipationWithoutAccount extends Vue {
}, },
update: (store, { data: updateData }) => { update: (store, { data: updateData }) => {
if (updateData == null) { if (updateData == null) {
console.error("Cannot update event participant cache, because of data null value."); console.error(
"Cannot update event participant cache, because of data null value."
);
return; return;
} }
@ -143,12 +166,16 @@ export default class ParticipationWithoutAccount extends Vue {
variables: { uuid: this.event.uuid }, variables: { uuid: this.event.uuid },
}); });
if (cachedData == null) { if (cachedData == null) {
console.error("Cannot update event participant cache, because of cached null value."); console.error(
"Cannot update event participant cache, because of cached null value."
);
return; return;
} }
const { event } = cachedData; const { event } = cachedData;
if (event === null) { if (event === null) {
console.error("Cannot update event participant cache, because of null value."); console.error(
"Cannot update event participant cache, because of null value."
);
return; return;
} }

54
js/src/components/Participation/UnloggedParticipation.vue
View file

@ -2,22 +2,34 @@
<section class="section container hero"> <section class="section container hero">
<div class="hero-body" v-if="event"> <div class="hero-body" v-if="event">
<div class="container"> <div class="container">
<subtitle>{{ $t("You wish to participate to the following event") }}</subtitle> <subtitle>{{
$t("You wish to participate to the following event")
}}</subtitle>
<EventListViewCard v-if="event" :event="event" /> <EventListViewCard v-if="event" :event="event" />
<div class="columns has-text-centered"> <div class="columns has-text-centered">
<div class="column"> <div class="column">
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"> <router-link
:to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"
>
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="../../assets/undraw_profile.svg" alt="Profile illustration" /> <img
src="../../assets/undraw_profile.svg"
alt="Profile illustration"
/>
</figure> </figure>
<b-button type="is-primary">{{ $t("I have a Mobilizon account") }}</b-button> <b-button type="is-primary">{{
$t("I have a Mobilizon account")
}}</b-button>
</router-link> </router-link>
<p> <p>
<small> <small>
{{ {{
$t("Either on the {instance} instance or on another instance.", { $t(
instance: host, "Either on the {instance} instance or on another instance.",
}) {
instance: host,
}
)
}} }}
</small> </small>
<b-tooltip <b-tooltip
@ -32,25 +44,41 @@
</b-tooltip> </b-tooltip>
</p> </p>
</div> </div>
<vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" /> <vertical-divider
:content="$t('Or')"
v-if="anonymousParticipationAllowed"
/>
<div <div
class="column" class="column"
v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod" v-if="
anonymousParticipationAllowed &&
hasAnonymousEmailParticipationMethod
"
> >
<router-link <router-link
:to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }" :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
v-if="event.local" v-if="event.local"
> >
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" /> <img
src="../../assets/undraw_mail_2.svg"
alt="Privacy illustration"
/>
</figure> </figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button> <b-button type="is-primary">{{
$t("I don't have a Mobilizon account")
}}</b-button>
</router-link> </router-link>
<a :href="`${event.url}/participate/without-account`" v-else> <a :href="`${event.url}/participate/without-account`" v-else>
<figure class="image is-128x128"> <figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" /> <img
src="../../assets/undraw_mail_2.svg"
alt="Privacy illustration"
/>
</figure> </figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button> <b-button type="is-primary">{{
$t("I don't have a Mobilizon account")
}}</b-button>
</a> </a>
<p> <p>
<small>{{ $t("Participate using your email address") }}</small> <small>{{ $t("Participate using your email address") }}</small>

8
js/src/components/PictureUpload.vue
View file

@ -69,7 +69,11 @@ export default class PictureUpload extends Vue {
@Prop({ type: Object, required: false }) defaultImage!: IMedia; @Prop({ type: Object, required: false }) defaultImage!: IMedia;
@Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" }) @Prop({
type: String,
required: false,
default: "image/gif,image/png,image/jpeg,image/webp",
})
accept!: string; accept!: string;
@Prop({ @Prop({
@ -95,13 +99,11 @@ export default class PictureUpload extends Vue {
@Watch("pictureFile") @Watch("pictureFile")
onPictureFileChanged(val: File): void { onPictureFileChanged(val: File): void {
console.log("onPictureFileChanged", val);
this.updatePreview(val); this.updatePreview(val);
} }
@Watch("defaultImage") @Watch("defaultImage")
onDefaultImageChange(defaultImage: IMedia): void { onDefaultImageChange(defaultImage: IMedia): void {
console.log("onDefaultImageChange", defaultImage);
this.imageSrc = defaultImage ? defaultImage.url : null; this.imageSrc = defaultImage ? defaultImage.url : null;
} }

42
js/src/components/Post/PostElementItem.vue
View file

@ -14,26 +14,46 @@
<div class="media-content"> <div class="media-content">
<p class="post-minimalist-title">{{ post.title }}</p> <p class="post-minimalist-title">{{ post.title }}</p>
<div class="metadata"> <div class="metadata">
<b-tag type="is-warning" size="is-small" v-if="post.draft">{{ $t("Draft") }}</b-tag> <b-tag type="is-warning" size="is-small" v-if="post.draft">{{
$t("Draft")
}}</b-tag>
<small <small
v-if="post.visibility === PostVisibility.PUBLIC && isCurrentActorMember" v-if="
post.visibility === PostVisibility.PUBLIC &&
isCurrentActorMember
"
class="has-text-grey" class="has-text-grey"
> >
<b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small <b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
> >
<small v-else-if="post.visibility === PostVisibility.UNLISTED" class="has-text-grey"> <small
<b-icon icon="link" size="is-small" />{{ $t("Accessible through link") }}</small v-else-if="post.visibility === PostVisibility.UNLISTED"
class="has-text-grey"
>
<b-icon icon="link" size="is-small" />{{
$t("Accessible through link")
}}</small
>
<small
v-else-if="post.visibility === PostVisibility.PRIVATE"
class="has-text-grey"
> >
<small v-else-if="post.visibility === PostVisibility.PRIVATE" class="has-text-grey">
<b-icon icon="lock" size="is-small" />{{ <b-icon icon="lock" size="is-small" />{{
$t("Accessible only to members", { group: post.attributedTo.name }) $t("Accessible only to members", {
group: post.attributedTo.name,
})
}}</small }}</small
> >
<small class="has-text-grey">{{ <small class="has-text-grey">{{
$options.filters.formatDateTimeString(new Date(post.insertedAt), false) $options.filters.formatDateTimeString(
new Date(post.insertedAt),
false
)
}}</small> }}</small>
<small class="has-text-grey" v-if="isCurrentActorMember">{{ <small class="has-text-grey" v-if="isCurrentActorMember">{{
$t("Created by {username}", { username: `@${usernameWithDomain(post.author)}` }) $t("Created by {username}", {
username: `@${usernameWithDomain(post.author)}`,
})
}}</small> }}</small>
</div> </div>
</div> </div>
@ -52,7 +72,8 @@ import { IPost } from "../../types/post.model";
export default class PostElementItem extends Vue { export default class PostElementItem extends Vue {
@Prop({ required: true, type: Object }) post!: IPost; @Prop({ required: true, type: Object }) post!: IPost;
@Prop({ required: false, type: Boolean, default: false }) isCurrentActorMember!: boolean; @Prop({ required: false, type: Boolean, default: false })
isCurrentActorMember!: boolean;
RouteName = RouteName; RouteName = RouteName;
@ -75,7 +96,8 @@ export default class PostElementItem extends Vue {
.post-minimalist-title { .post-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
overflow: hidden; overflow: hidden;

3
js/src/components/Post/PostListItem.vue
View file

@ -43,7 +43,8 @@ export default class PostListItem extends Vue {
.post-minimalist-title { .post-minimalist-title {
color: #3c376e; color: #3c376e;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
overflow: hidden; overflow: hidden;

12
js/src/components/Report/ReportCard.vue
View file

@ -22,10 +22,18 @@
<div class="content columns"> <div class="content columns">
<div class="column is-one-quarter-desktop"> <div class="column is-one-quarter-desktop">
<span v-if="report.reporter.type === ActorType.APPLICATION"> <span v-if="report.reporter.type === ActorType.APPLICATION">
{{ $t("Reported by someone on {domain}", { domain: report.reporter.domain }) }} {{
$t("Reported by someone on {domain}", {
domain: report.reporter.domain,
})
}}
</span> </span>
<span v-else> <span v-else>
{{ $t("Reported by {reporter}", { reporter: report.reporter.preferredUsername }) }} {{
$t("Reported by {reporter}", {
reporter: report.reporter.preferredUsername,
})
}}
</span> </span>
</div> </div>
<div class="column" v-if="report.content" v-html="report.content" /> <div class="column" v-if="report.content" v-html="report.content" />

17
js/src/components/Report/ReportModal.vue
View file

@ -4,7 +4,10 @@
<p class="modal-card-title">{{ title }}</p> <p class="modal-card-title">{{ title }}</p>
</header> </header>
<section class="modal-card-body is-flex" :class="{ 'is-titleless': !title }"> <section
class="modal-card-body is-flex"
:class="{ 'is-titleless': !title }"
>
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<b-icon icon="alert" type="is-warning" size="is-large" /> <b-icon icon="alert" type="is-warning" size="is-large" />
@ -16,7 +19,12 @@
<figure class="image is-48x48" v-if="comment.actor.avatar"> <figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="Image" /> <img :src="comment.actor.avatar.url" alt="Image" />
</figure> </figure>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
</div> </div>
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
@ -82,7 +90,10 @@ import { IComment } from "../../types/comment.model";
}, },
}) })
export default class ReportModal extends Vue { export default class ReportModal extends Vue {
@Prop({ type: Function }) onConfirm!: (content: string, forward: boolean) => void; @Prop({ type: Function }) onConfirm!: (
content: string,
forward: boolean
) => void;
@Prop({ type: String }) title!: string; @Prop({ type: String }) title!: string;

28
js/src/components/Resource/FolderItem.vue
View file

@ -14,7 +14,9 @@
</div> </div>
<div class="body"> <div class="body">
<h3>{{ resource.title }}</h3> <h3>{{ resource.title }}</h3>
<span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span> <span class="host" v-if="inline">{{
resource.updatedAt | formatDateTimeString
}}</span>
</div> </div>
<draggable <draggable
v-if="!inline" v-if="!inline"
@ -93,21 +95,27 @@ export default class FolderItem extends Mixins(ResourceMixin) {
async moveResource(resource: IResource): Promise<IResource | undefined> { async moveResource(resource: IResource): Promise<IResource | undefined> {
try { try {
const { data } = await this.$apollo.mutate<{ updateResource: IResource }>({ const { data } = await this.$apollo.mutate<{ updateResource: IResource }>(
mutation: UPDATE_RESOURCE, {
variables: { mutation: UPDATE_RESOURCE,
id: resource.id, variables: {
path: `${this.resource.path}/${resource.title}`, id: resource.id,
parentId: this.resource.id, path: `${this.resource.path}/${resource.title}`,
}, parentId: this.resource.id,
}); },
}
);
if (!data) { if (!data) {
console.error("Error while updating resource"); console.error("Error while updating resource");
return undefined; return undefined;
} }
return data.updateResource; return data.updateResource;
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
return undefined; return undefined;
} }
} }

11
js/src/components/Resource/ResourceItem.vue
View file

@ -2,7 +2,12 @@
<div class="resource-wrapper"> <div class="resource-wrapper">
<a :href="resource.resourceUrl" target="_blank"> <a :href="resource.resourceUrl" target="_blank">
<div class="preview"> <div class="preview">
<div v-if="resource.type && Object.keys(mapServiceTypeToIcon).includes(resource.type)"> <div
v-if="
resource.type &&
Object.keys(mapServiceTypeToIcon).includes(resource.type)
"
>
<b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" /> <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
</div> </div>
<div <div
@ -21,7 +26,9 @@
:src="resource.metadata.faviconUrl" :src="resource.metadata.faviconUrl"
/> />
<h3>{{ resource.title }}</h3> <h3>{{ resource.title }}</h3>
<span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span> <span class="host" v-if="inline">{{
resource.updatedAt | formatDateTimeString
}}</span>
<span class="host" v-else>{{ urlHostname }}</span> <span class="host" v-else>{{ urlHostname }}</span>
</div> </div>
</a> </a>

41
js/src/components/Resource/ResourceSelector.vue
View file

@ -2,9 +2,15 @@
<div v-if="resource"> <div v-if="resource">
<article class="panel is-primary"> <article class="panel is-primary">
<p class="panel-heading"> <p class="panel-heading">
{{ $t('Move "{resourceName}"', { resourceName: initialResource.title }) }} {{
$t('Move "{resourceName}"', { resourceName: initialResource.title })
}}
</p> </p>
<a class="panel-block clickable" @click="resource = resource.parent" v-if="resource.parent"> <a
class="panel-block clickable"
@click="resource = resource.parent"
v-if="resource.parent"
>
<span class="panel-icon"> <span class="panel-icon">
<b-icon icon="chevron-up" size="is-small" /> <b-icon icon="chevron-up" size="is-small" />
</span> </span>
@ -23,12 +29,19 @@
<a <a
class="panel-block" class="panel-block"
v-for="element in resource.children.elements" v-for="element in resource.children.elements"
:class="{ clickable: element.type === 'folder' && element.id !== initialResource.id }" :class="{
clickable:
element.type === 'folder' && element.id !== initialResource.id,
}"
:key="element.id" :key="element.id"
@click="goDown(element)" @click="goDown(element)"
> >
<span class="panel-icon"> <span class="panel-icon">
<b-icon icon="folder" size="is-small" v-if="element.type === 'folder'" /> <b-icon
icon="folder"
size="is-small"
v-if="element.type === 'folder'"
/>
<b-icon icon="link" size="is-small" v-else /> <b-icon icon="link" size="is-small" v-else />
</span> </span>
{{ element.title }} {{ element.title }}
@ -44,10 +57,17 @@
{{ $t("No resources in this folder") }} {{ $t("No resources in this folder") }}
</p> </p>
</article> </article>
<b-button type="is-primary" @click="updateResource" :disabled="moveDisabled">{{ <b-button
$t("Move resource to {folder}", { folder: resource.title }) type="is-primary"
@click="updateResource"
:disabled="moveDisabled"
>{{
$t("Move resource to {folder}", { folder: resource.title })
}}</b-button
>
<b-button type="is-text" @click="$emit('close-move-modal')">{{
$t("Cancel")
}}</b-button> }}</b-button>
<b-button type="is-text" @click="$emit('close-move-modal')">{{ $t("Cancel") }}</b-button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -93,7 +113,8 @@ export default class ResourceSelector extends Vue {
{ {
id: this.initialResource.id, id: this.initialResource.id,
title: this.initialResource.title, title: this.initialResource.title,
parent: this.resource && this.resource.path === "/" ? null : this.resource, parent:
this.resource && this.resource.path === "/" ? null : this.resource,
path: this.initialResource.path, path: this.initialResource.path,
}, },
this.initialResource.parent this.initialResource.parent
@ -105,7 +126,9 @@ export default class ResourceSelector extends Vue {
(this.initialResource.parent && (this.initialResource.parent &&
this.resource && this.resource &&
this.initialResource.parent.path === this.resource.path) || this.initialResource.parent.path === this.resource.path) ||
(this.initialResource.parent === undefined && this.resource && this.resource.path === "/") (this.initialResource.parent === undefined &&
this.resource &&
this.resource.path === "/")
); );
} }
} }

23
js/src/components/Settings/NotificationsOnboarding.vue
View file

@ -15,16 +15,27 @@
</p> </p>
</div> </div>
<div class="field"> <div class="field">
<b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })"> <b-checkbox
v-model="notificationOnDay"
@input="updateSetting({ notificationOnDay })"
>
<strong>{{ $t("Notification on the day of the event") }}</strong> <strong>{{ $t("Notification on the day of the event") }}</strong>
<p> <p>
{{ {{
$t("We'll use your timezone settings to send a recap of the morning of the event.") $t(
"We'll use your timezone settings to send a recap of the morning of the event."
)
}} }}
</p> </p>
</b-checkbox> </b-checkbox>
</div> </div>
<p>{{ $t("To activate more notifications, head over to the notification settings.") }}</p> <p>
{{
$t(
"To activate more notifications, head over to the notification settings."
)
}}
</p>
</section> </section>
</div> </div>
</template> </template>
@ -50,7 +61,11 @@ export default class NotificationsOnboarding extends mixins(Onboarding) {
try { try {
this.doUpdateSetting(variables); this.doUpdateSetting(variables);
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
} }

53
js/src/components/Settings/SettingsMenu.vue
View file

@ -1,18 +1,27 @@
<template> <template>
<aside> <aside>
<ul> <ul>
<SettingMenuSection :title="$t('Account')" :to="{ name: RouteName.ACCOUNT_SETTINGS }"> <SettingMenuSection
:title="$t('Account')"
:to="{ name: RouteName.ACCOUNT_SETTINGS }"
>
<SettingMenuItem <SettingMenuItem
:title="this.$t('General')" :title="this.$t('General')"
:to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }" :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }"
/> />
<SettingMenuItem :title="$t('Preferences')" :to="{ name: RouteName.PREFERENCES }" /> <SettingMenuItem
:title="$t('Preferences')"
:to="{ name: RouteName.PREFERENCES }"
/>
<SettingMenuItem <SettingMenuItem
:title="this.$t('Email notifications')" :title="this.$t('Email notifications')"
:to="{ name: RouteName.NOTIFICATIONS }" :to="{ name: RouteName.NOTIFICATIONS }"
/> />
</SettingMenuSection> </SettingMenuSection>
<SettingMenuSection :title="$t('Profiles')" :to="{ name: RouteName.IDENTITIES }"> <SettingMenuSection
:title="$t('Profiles')"
:to="{ name: RouteName.IDENTITIES }"
>
<SettingMenuItem <SettingMenuItem
v-for="profile in identities" v-for="profile in identities"
:key="profile.preferredUsername" :key="profile.preferredUsername"
@ -22,7 +31,10 @@
params: { identityName: profile.preferredUsername }, params: { identityName: profile.preferredUsername },
}" }"
/> />
<SettingMenuItem :title="$t('New profile')" :to="{ name: RouteName.CREATE_IDENTITY }" /> <SettingMenuItem
:title="$t('New profile')"
:to="{ name: RouteName.CREATE_IDENTITY }"
/>
</SettingMenuSection> </SettingMenuSection>
<SettingMenuSection <SettingMenuSection
v-if=" v-if="
@ -33,23 +45,41 @@
:title="$t('Moderation')" :title="$t('Moderation')"
:to="{ name: RouteName.MODERATION }" :to="{ name: RouteName.MODERATION }"
> >
<SettingMenuItem :title="$t('Reports')" :to="{ name: RouteName.REPORTS }" /> <SettingMenuItem
<SettingMenuItem :title="$t('Moderation log')" :to="{ name: RouteName.REPORT_LOGS }" /> :title="$t('Reports')"
:to="{ name: RouteName.REPORTS }"
/>
<SettingMenuItem
:title="$t('Moderation log')"
:to="{ name: RouteName.REPORT_LOGS }"
/>
<SettingMenuItem :title="$t('Users')" :to="{ name: RouteName.USERS }" /> <SettingMenuItem :title="$t('Users')" :to="{ name: RouteName.USERS }" />
<SettingMenuItem :title="$t('Profiles')" :to="{ name: RouteName.PROFILES }" /> <SettingMenuItem
<SettingMenuItem :title="$t('Groups')" :to="{ name: RouteName.ADMIN_GROUPS }" /> :title="$t('Profiles')"
:to="{ name: RouteName.PROFILES }"
/>
<SettingMenuItem
:title="$t('Groups')"
:to="{ name: RouteName.ADMIN_GROUPS }"
/>
</SettingMenuSection> </SettingMenuSection>
<SettingMenuSection <SettingMenuSection
v-if="this.currentUser.role == ICurrentUserRole.ADMINISTRATOR" v-if="this.currentUser.role == ICurrentUserRole.ADMINISTRATOR"
:title="$t('Admin')" :title="$t('Admin')"
:to="{ name: RouteName.ADMIN }" :to="{ name: RouteName.ADMIN }"
> >
<SettingMenuItem :title="$t('Dashboard')" :to="{ name: RouteName.ADMIN_DASHBOARD }" /> <SettingMenuItem
:title="$t('Dashboard')"
:to="{ name: RouteName.ADMIN_DASHBOARD }"
/>
<SettingMenuItem <SettingMenuItem
:title="$t('Instance settings')" :title="$t('Instance settings')"
:to="{ name: RouteName.ADMIN_SETTINGS }" :to="{ name: RouteName.ADMIN_SETTINGS }"
/> />
<SettingMenuItem :title="$t('Federation')" :to="{ name: RouteName.RELAYS }" /> <SettingMenuItem
:title="$t('Federation')"
:to="{ name: RouteName.RELAYS }"
/>
</SettingMenuSection> </SettingMenuSection>
</ul> </ul>
</aside> </aside>
@ -71,7 +101,8 @@ import RouteName from "../../router/name";
apollo: { apollo: {
identities: { identities: {
query: IDENTITIES, query: IDENTITIES,
update: (data) => data.identities.map((identity: IPerson) => new Person(identity)), update: (data) =>
data.identities.map((identity: IPerson) => new Person(identity)),
}, },
currentUser: CURRENT_USER_CLIENT, currentUser: CURRENT_USER_CLIENT,
}, },

5
js/src/components/Settings/SettingsOnboarding.vue
View file

@ -39,7 +39,10 @@
timezone, timezone,
}) })
}} }}
<b-message type="is-danger" v-if="!$apollo.loading && !supportedTimezone"> <b-message
type="is-danger"
v-if="!$apollo.loading && !supportedTimezone"
>
{{ $t("Your timezone {timezone} isn't supported.", { timezone }) }} {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
</b-message> </b-message>
</p> </p>

17
js/src/components/Todo/CompactTodo.vue
View file

@ -2,9 +2,10 @@
<div class="card" v-if="todo"> <div class="card" v-if="todo">
<div class="card-content"> <div class="card-content">
<b-checkbox v-model="status" /> <b-checkbox v-model="status" />
<router-link :to="{ name: RouteName.TODO, params: { todoId: todo.id } }">{{ <router-link
todo.title :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
}}</router-link> >{{ todo.title }}</router-link
>
<span class="details has-text-grey"> <span class="details has-text-grey">
<span v-if="todo.dueDate" class="due_date"> <span v-if="todo.dueDate" class="due_date">
<b-icon icon="calendar" /> <b-icon icon="calendar" />
@ -13,7 +14,9 @@
<span v-if="todo.assignedTo" class="assigned_to"> <span v-if="todo.assignedTo" class="assigned_to">
<b-icon icon="account" /> <b-icon icon="account" />
{{ `@${todo.assignedTo.preferredUsername}` }} {{ `@${todo.assignedTo.preferredUsername}` }}
<span v-if="todo.assignedTo.domain">{{ `@${todo.assignedTo.domain}` }}</span> <span v-if="todo.assignedTo.domain">{{
`@${todo.assignedTo.domain}`
}}</span>
</span> </span>
</span> </span>
</div> </div>
@ -53,7 +56,11 @@ export default class Todo extends Vue {
}); });
this.editMode = false; this.editMode = false;
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
} }

10
js/src/components/Todo/FullTodo.vue
View file

@ -36,7 +36,9 @@ export default class Todo extends Vue {
editMode = false; editMode = false;
debounceUpdateTodo!: DebouncedFunc<(obj: Record<string, unknown>) => Promise<void>>; debounceUpdateTodo!: DebouncedFunc<
(obj: Record<string, unknown>) => Promise<void>
>;
// We put this in data because of issues like // We put this in data because of issues like
// https://github.com/vuejs/vue-class-component/issues/263 // https://github.com/vuejs/vue-class-component/issues/263
@ -89,7 +91,11 @@ export default class Todo extends Vue {
}); });
this.editMode = false; this.editMode = false;
} catch (e) { } catch (e) {
Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: e.message,
type: "is-danger",
position: "is-bottom",
});
} }
} }
} }

6
js/src/components/User/AuthProvider.vue
View file

@ -7,7 +7,11 @@
<b-icon :icon="oauthProvider.id" /> <b-icon :icon="oauthProvider.id" />
<span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
> >
<a class="button is-light" :href="`/auth/${oauthProvider.id}`" v-else-if="isProviderSelected"> <a
class="button is-light"
:href="`/auth/${oauthProvider.id}`"
v-else-if="isProviderSelected"
>
<b-icon icon="lock" /> <b-icon icon="lock" />
<span>{{ oauthProvider.label }}</span> <span>{{ oauthProvider.label }}</span>
</a> </a>

22
js/src/components/Utils/RedirectWithAccount.vue
View file

@ -20,7 +20,9 @@
</div> </div>
<vertical-divider :content="$t('Or')" /> <vertical-divider :content="$t('Or')" />
<div class="column"> <div class="column">
<subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle> <subtitle>{{
$t("I have an account on another Mobilizon instance.")
}}</subtitle>
<p>{{ $t("Other software may also support this.") }}</p> <p>{{ $t("Other software may also support this.") }}</p>
<p>{{ sentence }}</p> <p>{{ sentence }}</p>
<form @submit.prevent="redirectToInstance"> <form @submit.prevent="redirectToInstance">
@ -34,7 +36,9 @@
:placeholder="$t('profile@instance')" :placeholder="$t('profile@instance')"
></b-input> ></b-input>
<p class="control"> <p class="control">
<button class="button is-primary" type="submit">{{ $t("Go") }}</button> <button class="button is-primary" type="submit">
{{ $t("Go") }}
</button>
</p> </p>
</b-field> </b-field>
</b-field> </b-field>
@ -80,14 +84,22 @@ export default class RedirectWithAccount extends Vue {
async redirectToInstance(): Promise<void> { async redirectToInstance(): Promise<void> {
const [, host] = this.remoteActorAddress.split("@", 2); const [, host] = this.remoteActorAddress.split("@", 2);
const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress); const remoteInteractionURI = await this.webFingerFetch(
host,
this.remoteActorAddress
);
window.open(remoteInteractionURI); window.open(remoteInteractionURI);
} }
private async webFingerFetch(hostname: string, identity: string): Promise<string> { private async webFingerFetch(
hostname: string,
identity: string
): Promise<string> {
const scheme = process.env.NODE_ENV === "production" ? "https" : "http"; const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
const data = await ( const data = await (
await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`) await fetch(
`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`
)
).json(); ).json();
if (data && Array.isArray(data.links)) { if (data && Array.isArray(data.links)) {
const link: { template: string } = data.links.find( const link: { template: string } = data.links.find(

3
js/src/components/Utils/Subtitle.vue
View file

@ -21,7 +21,8 @@ h2 {
display: inline; display: inline;
padding: 3px 8px; padding: 3px 8px;
color: #3a384c; color: #3a384c;
font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif; font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
serif;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
} }

5
js/src/filters/datetime.ts
View file

@ -14,7 +14,10 @@ function formatDateString(value: string): string {
} }
function formatTimeString(value: string): string { function formatTimeString(value: string): string {
return parseDateTime(value).toLocaleTimeString(undefined, { hour: "numeric", minute: "numeric" }); return parseDateTime(value).toLocaleTimeString(undefined, {
hour: "numeric",
minute: "numeric",
});
} }
function formatDateTimeString(value: string, showTime = true): string { function formatDateTimeString(value: string, showTime = true): string {

6
js/src/filters/index.ts
View file

@ -1,5 +1,9 @@
import nl2br from "@/filters/utils"; import nl2br from "@/filters/utils";
import { formatDateString, formatTimeString, formatDateTimeString } from "./datetime"; import {
formatDateString,
formatTimeString,
formatDateTimeString,
} from "./datetime";
export default { export default {
install(vue: any): void { install(vue: any): void {

19
js/src/graphql/actor.ts
View file

@ -65,7 +65,10 @@ export const GET_PERSON = gql`
feedTokens { feedTokens {
token token
} }
organizedEvents(page: $organizedEventsPage, limit: $organizedEventsLimit) { organizedEvents(
page: $organizedEventsPage
limit: $organizedEventsLimit
) {
total total
elements { elements {
id id
@ -442,7 +445,12 @@ export const CREATE_PERSON = gql`
`; `;
export const UPDATE_PERSON = gql` export const UPDATE_PERSON = gql`
mutation UpdatePerson($id: ID!, $name: String, $summary: String, $avatar: MediaInput) { mutation UpdatePerson(
$id: ID!
$name: String
$summary: String
$avatar: MediaInput
) {
updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) { updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) {
id id
preferredUsername preferredUsername
@ -469,7 +477,12 @@ export const DELETE_PERSON = gql`
* Prefer CREATE_PERSON when creating another identity * Prefer CREATE_PERSON when creating another identity
*/ */
export const REGISTER_PERSON = gql` export const REGISTER_PERSON = gql`
mutation($preferredUsername: String!, $name: String!, $summary: String!, $email: String!) { mutation(
$preferredUsername: String!
$name: String!
$summary: String!
$email: String!
) {
registerPerson( registerPerson(
preferredUsername: $preferredUsername preferredUsername: $preferredUsername
name: $name name: $name

12
js/src/graphql/comment.ts
View file

@ -68,8 +68,16 @@ export const COMMENTS_THREADS = gql`
`; `;
export const CREATE_COMMENT_FROM_EVENT = gql` export const CREATE_COMMENT_FROM_EVENT = gql`
mutation CreateCommentFromEvent($eventId: ID!, $text: String!, $inReplyToCommentId: ID) { mutation CreateCommentFromEvent(
createComment(eventId: $eventId, text: $text, inReplyToCommentId: $inReplyToCommentId) { $eventId: ID!
$text: String!
$inReplyToCommentId: ID
) {
createComment(
eventId: $eventId
text: $text
inReplyToCommentId: $inReplyToCommentId
) {
...CommentRecursive ...CommentRecursive
} }
} }

16
js/src/graphql/search.ts
View file

@ -42,8 +42,20 @@ export const SEARCH_EVENTS = gql`
`; `;
export const SEARCH_GROUPS = gql` export const SEARCH_GROUPS = gql`
query SearchGroups($term: String, $location: String, $radius: Float, $page: Int, $limit: Int) { query SearchGroups(
searchGroups(term: $term, location: $location, radius: $radius, page: $page, limit: $limit) { $term: String
$location: String
$radius: Float
$page: Int
$limit: Int
) {
searchGroups(
term: $term
location: $location
radius: $radius
page: $page
limit: $limit
) {
total total
elements { elements {
id id

7
js/src/graphql/user.ts
View file

@ -108,7 +108,12 @@ export const UPDATE_CURRENT_USER_CLIENT = gql`
$isLoggedIn: Boolean! $isLoggedIn: Boolean!
$role: UserRole! $role: UserRole!
) { ) {
updateCurrentUser(id: $id, email: $email, isLoggedIn: $isLoggedIn, role: $role) @client updateCurrentUser(
id: $id
email: $email
isLoggedIn: $isLoggedIn
role: $role
) @client
} }
`; `;

4
js/src/mixins/actor.ts
View file

@ -7,6 +7,8 @@ export default class ActorMixin extends Vue {
static actorIsOrganizer(actor: IActor, event: IEvent): boolean { static actorIsOrganizer(actor: IActor, event: IEvent): boolean {
console.log("actorIsOrganizer actor", actor.id); console.log("actorIsOrganizer actor", actor.id);
console.log("actorIsOrganizer event", event); console.log("actorIsOrganizer event", event);
return event.organizerActor !== undefined && actor.id === event.organizerActor.id; return (
event.organizerActor !== undefined && actor.id === event.organizerActor.id
);
} }
} }

55
js/src/mixins/event.ts
View file

@ -21,7 +21,9 @@ export default class EventMixin extends mixins(Vue) {
anonymousParticipationConfirmed: boolean | null = null anonymousParticipationConfirmed: boolean | null = null
): Promise<void> { ): Promise<void> {
try { try {
const { data: resultData } = await this.$apollo.mutate<{ leaveEvent: IParticipant }>({ const { data: resultData } = await this.$apollo.mutate<{
leaveEvent: IParticipant;
}>({
mutation: LEAVE_EVENT, mutation: LEAVE_EVENT,
variables: { variables: {
eventId: event.id, eventId: event.id,
@ -33,14 +35,18 @@ export default class EventMixin extends mixins(Vue) {
let participation; let participation;
if (!token) { if (!token) {
const participationCachedData = store.readQuery<{ person: IPerson }>({ const participationCachedData = store.readQuery<{
person: IPerson;
}>({
query: EVENT_PERSON_PARTICIPATION, query: EVENT_PERSON_PARTICIPATION,
variables: { eventId: event.id, actorId }, variables: { eventId: event.id, actorId },
}); });
if (participationCachedData == null) return; if (participationCachedData == null) return;
const { person } = participationCachedData; const { person } = participationCachedData;
if (person === null) { if (person === null) {
console.error("Cannot update participation cache, because of null value."); console.error(
"Cannot update participation cache, because of null value."
);
return; return;
} }
[participation] = person.participations.elements; [participation] = person.participations.elements;
@ -63,7 +69,10 @@ export default class EventMixin extends mixins(Vue) {
console.error("Cannot update event cache, because of null value."); console.error("Cannot update event cache, because of null value.");
return; return;
} }
if (participation && participation.role === ParticipantRole.NOT_APPROVED) { if (
participation &&
participation.role === ParticipantRole.NOT_APPROVED
) {
eventCached.participantStats.notApproved -= 1; eventCached.participantStats.notApproved -= 1;
} else if (anonymousParticipationConfirmed === false) { } else if (anonymousParticipationConfirmed === false) {
eventCached.participantStats.notConfirmed -= 1; eventCached.participantStats.notConfirmed -= 1;
@ -82,13 +91,19 @@ export default class EventMixin extends mixins(Vue) {
this.participationCancelledMessage(); this.participationCancelledMessage();
} }
} catch (error) { } catch (error) {
Snackbar.open({ message: error.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: error.message,
type: "is-danger",
position: "is-bottom",
});
console.error(error); console.error(error);
} }
} }
private participationCancelledMessage() { private participationCancelledMessage() {
this.$notifier.success(this.$t("You have cancelled your participation") as string); this.$notifier.success(
this.$t("You have cancelled your participation") as string
);
} }
protected async openDeleteEventModal(event: IEvent): Promise<void> { protected async openDeleteEventModal(event: IEvent): Promise<void> {
@ -97,21 +112,29 @@ export default class EventMixin extends mixins(Vue) {
} }
const participantsLength = event.participantStats.participant; const participantsLength = event.participantStats.participant;
const prefix = participantsLength const prefix = participantsLength
? this.$tc("There are {participants} participants.", event.participantStats.participant, { ? this.$tc(
participants: event.participantStats.participant, "There are {participants} participants.",
}) event.participantStats.participant,
{
participants: event.participantStats.participant,
}
)
: ""; : "";
this.$buefy.dialog.prompt({ this.$buefy.dialog.prompt({
type: "is-danger", type: "is-danger",
title: this.$t("Delete event") as string, title: this.$t("Delete event") as string,
message: `${prefix} message: `${prefix}
${this.$t("Are you sure you want to delete this event? This action cannot be reverted.")} ${this.$t(
"Are you sure you want to delete this event? This action cannot be reverted."
)}
<br><br> <br><br>
${this.$t('To confirm, type your event title "{eventTitle}"', { ${this.$t('To confirm, type your event title "{eventTitle}"', {
eventTitle: event.title, eventTitle: event.title,
})}`, })}`,
confirmText: this.$t("Delete {eventTitle}", { eventTitle: event.title }) as string, confirmText: this.$t("Delete {eventTitle}", {
eventTitle: event.title,
}) as string,
inputAttrs: { inputAttrs: {
placeholder: event.title, placeholder: event.title,
pattern: escapeRegExp(event.title), pattern: escapeRegExp(event.title),
@ -139,13 +162,19 @@ export default class EventMixin extends mixins(Vue) {
this.$emit("event-deleted", event.id); this.$emit("event-deleted", event.id);
this.$buefy.notification.open({ this.$buefy.notification.open({
message: this.$t("Event {eventTitle} deleted", { eventTitle }) as string, message: this.$t("Event {eventTitle} deleted", {
eventTitle,
}) as string,
type: "is-success", type: "is-success",
position: "is-bottom-right", position: "is-bottom-right",
duration: 5000, duration: 5000,
}); });
} catch (error) { } catch (error) {
Snackbar.open({ message: error.message, type: "is-danger", position: "is-bottom" }); Snackbar.open({
message: error.message,
type: "is-danger",
position: "is-bottom",
});
console.error(error); console.error(error);
} }

8
js/src/mixins/group.ts
View file

@ -61,7 +61,10 @@ export default class GroupMixin extends Vue {
} }
get isCurrentActorAGroupModerator(): boolean { get isCurrentActorAGroupModerator(): boolean {
return this.hasCurrentActorThisRole([MemberRole.MODERATOR, MemberRole.ADMINISTRATOR]); return this.hasCurrentActorThisRole([
MemberRole.MODERATOR,
MemberRole.ADMINISTRATOR,
]);
} }
hasCurrentActorThisRole(givenRole: string | string[]): boolean { hasCurrentActorThisRole(givenRole: string | string[]): boolean {
@ -69,7 +72,8 @@ export default class GroupMixin extends Vue {
return ( return (
this.person && this.person &&
this.person.memberships.elements.some( this.person.memberships.elements.some(
({ parent: { id }, role }) => id === this.group.id && roles.includes(role) ({ parent: { id }, role }) =>
id === this.group.id && roles.includes(role)
) )
); );
} }

8
js/src/mixins/identityEdition.ts
View file

@ -9,10 +9,14 @@ export default class IdentityEditionMixin extends Mixins(Vue) {
oldDisplayName: string | null = null; oldDisplayName: string | null = null;
autoUpdateUsername(newDisplayName: string | null): void { autoUpdateUsername(newDisplayName: string | null): void {
const oldUsername = IdentityEditionMixin.convertToUsername(this.oldDisplayName); const oldUsername = IdentityEditionMixin.convertToUsername(
this.oldDisplayName
);
if (this.identity.preferredUsername === oldUsername) { if (this.identity.preferredUsername === oldUsername) {
this.identity.preferredUsername = IdentityEditionMixin.convertToUsername(newDisplayName); this.identity.preferredUsername = IdentityEditionMixin.convertToUsername(
newDisplayName
);
} }
this.oldDisplayName = newDisplayName; this.oldDisplayName = newDisplayName;

4
js/src/mixins/onboarding.ts
View file

@ -13,7 +13,9 @@ export default class Onboarding extends Vue {
RouteName = RouteName; RouteName = RouteName;
protected async doUpdateSetting(variables: Record<string, unknown>): Promise<void> { protected async doUpdateSetting(
variables: Record<string, unknown>
): Promise<void> {
await this.$apollo.mutate<{ setUserSettings: string }>({ await this.$apollo.mutate<{ setUserSettings: string }>({
mutation: SET_USER_SETTINGS, mutation: SET_USER_SETTINGS,
variables, variables,

13
js/src/mixins/relay.ts
View file

@ -63,7 +63,10 @@ export default class RelayMixin extends Vue {
relayFollowings: { relayFollowings: {
__typename: previousResult.relayFollowings.__typename, __typename: previousResult.relayFollowings.__typename,
total: previousResult.relayFollowings.total, total: previousResult.relayFollowings.total,
elements: [...previousResult.relayFollowings.elements, ...newFollowings], elements: [
...previousResult.relayFollowings.elements,
...newFollowings,
],
}, },
}; };
}, },
@ -88,7 +91,10 @@ export default class RelayMixin extends Vue {
relayFollowers: { relayFollowers: {
__typename: previousResult.relayFollowers.__typename, __typename: previousResult.relayFollowers.__typename,
total: previousResult.relayFollowers.total, total: previousResult.relayFollowers.total,
elements: [...previousResult.relayFollowers.elements, ...newFollowers], elements: [
...previousResult.relayFollowers.elements,
...newFollowers,
],
}, },
}; };
}, },
@ -101,7 +107,8 @@ export default class RelayMixin extends Vue {
static isInstance(actor: IActor): boolean { static isInstance(actor: IActor): boolean {
return ( return (
actor.type === ActorType.APPLICATION && actor.type === ActorType.APPLICATION &&
(actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain) (actor.preferredUsername === "relay" ||
actor.preferredUsername === actor.domain)
); );
} }
} }

5
js/src/plugins/dateFns.ts
View file

@ -7,7 +7,10 @@ declare module "vue/types/vue" {
} }
} }
export function DateFnsPlugin(vue: typeof VueInstance, { locale }: { locale: string }): void { export function DateFnsPlugin(
vue: typeof VueInstance,
{ locale }: { locale: string }
): void {
import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => { import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => {
VueInstance.prototype.$dateFnsLocale = localeEntity; VueInstance.prototype.$dateFnsLocale = localeEntity;
}); });

4
js/src/registerServiceWorker.ts
View file

@ -23,7 +23,9 @@ if (process.env.NODE_ENV === "production") {
console.log("New content is available; please refresh."); console.log("New content is available; please refresh.");
}, },
offline() { offline() {
console.log("No internet connection found. App is running in offline mode."); console.log(
"No internet connection found. App is running in offline mode."
);
}, },
error(error) { error(error) {
console.error("Error during service worker registration:", error); console.error("Error during service worker registration:", error);

10
js/src/router/actor.ts
View file

@ -1,4 +1,5 @@
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum ActorRouteName { export enum ActorRouteName {
GROUP = "Group", GROUP = "Group",
@ -11,20 +12,23 @@ export const actorRoutes: RouteConfig[] = [
{ {
path: "/groups/create", path: "/groups/create",
name: ActorRouteName.CREATE_GROUP, name: ActorRouteName.CREATE_GROUP,
component: () => import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/@:preferredUsername", path: "/@:preferredUsername",
name: ActorRouteName.GROUP, name: ActorRouteName.GROUP,
component: () => import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/groups/me", path: "/groups/me",
name: ActorRouteName.MY_GROUPS, name: ActorRouteName.MY_GROUPS,
component: () => import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
]; ];

19
js/src/router/discussion.ts
View file

@ -1,4 +1,5 @@
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum DiscussionRouteName { export enum DiscussionRouteName {
DISCUSSION_LIST = "DISCUSSION_LIST", DISCUSSION_LIST = "DISCUSSION_LIST",
@ -10,24 +11,30 @@ export const discussionRoutes: RouteConfig[] = [
{ {
path: "/@:preferredUsername/discussions", path: "/@:preferredUsername/discussions",
name: DiscussionRouteName.DISCUSSION_LIST, name: DiscussionRouteName.DISCUSSION_LIST,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"), import(
/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/@:preferredUsername/discussions/new", path: "/@:preferredUsername/discussions/new",
name: DiscussionRouteName.CREATE_DISCUSSION, name: DiscussionRouteName.CREATE_DISCUSSION,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"), import(
/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/@:preferredUsername/c/:slug/:comment_id?", path: "/@:preferredUsername/c/:slug/:comment_id?",
name: DiscussionRouteName.DISCUSSION, name: DiscussionRouteName.DISCUSSION,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"), import(
/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },

4
js/src/router/error.ts
View file

@ -1,5 +1,6 @@
import { beforeRegisterGuard } from "@/router/guards/register-guard"; import { beforeRegisterGuard } from "@/router/guards/register-guard";
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum ErrorRouteName { export enum ErrorRouteName {
ERROR = "Error", ERROR = "Error",
@ -9,7 +10,8 @@ export const errorRoutes: RouteConfig[] = [
{ {
path: "/error", path: "/error",
name: ErrorRouteName.ERROR, name: ErrorRouteName.ERROR,
component: () => import(/* webpackChunkName: "Error" */ "../views/Error.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
beforeEnter: beforeRegisterGuard, beforeEnter: beforeRegisterGuard,
}, },
]; ];

38
js/src/router/event.ts
View file

@ -1,10 +1,16 @@
import { RouteConfig, Route } from "vue-router"; import { RouteConfig, Route } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
const participations = () => const participations = (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"); import(
const editEvent = () => import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue"); /* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"
const event = () => import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue"); );
const myEvents = () => import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.vue"); const editEvent = (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue");
const event = (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue");
const myEvents = (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.vue");
export enum EventRouteName { export enum EventRouteName {
EVENT_LIST = "EventList", EVENT_LIST = "EventList",
@ -25,7 +31,8 @@ export const eventRoutes: RouteConfig[] = [
{ {
path: "/events/list/:location?", path: "/events/list/:location?",
name: EventRouteName.EVENT_LIST, name: EventRouteName.EVENT_LIST,
component: () => import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
@ -45,7 +52,9 @@ export const eventRoutes: RouteConfig[] = [
name: EventRouteName.EDIT_EVENT, name: EventRouteName.EDIT_EVENT,
component: editEvent, component: editEvent,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
props: (route: Route): Record<string, unknown> => ({ ...route.params, ...{ isUpdate: true } }), props: (route: Route): Record<string, unknown> => {
return { ...route.params, ...{ isUpdate: true } };
},
}, },
{ {
path: "/events/duplicate/:eventId", path: "/events/duplicate/:eventId",
@ -74,31 +83,36 @@ export const eventRoutes: RouteConfig[] = [
{ {
path: "/events/:uuid/participate", path: "/events/:uuid/participate",
name: EventRouteName.EVENT_PARTICIPATE_LOGGED_OUT, name: EventRouteName.EVENT_PARTICIPATE_LOGGED_OUT,
component: () => import("../components/Participation/UnloggedParticipation.vue"), component: (): Promise<EsModuleComponent> =>
import("../components/Participation/UnloggedParticipation.vue"),
props: true, props: true,
}, },
{ {
path: "/events/:uuid/participate/with-account", path: "/events/:uuid/participate/with-account",
name: EventRouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, name: EventRouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
component: () => import("../components/Participation/ParticipationWithAccount.vue"), component: (): Promise<EsModuleComponent> =>
import("../components/Participation/ParticipationWithAccount.vue"),
props: true, props: true,
}, },
{ {
path: "/events/:uuid/participate/without-account", path: "/events/:uuid/participate/without-account",
name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT, name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT,
component: () => import("../components/Participation/ParticipationWithoutAccount.vue"), component: (): Promise<EsModuleComponent> =>
import("../components/Participation/ParticipationWithoutAccount.vue"),
props: true, props: true,
}, },
{ {
path: "/participation/email/confirm/:token", path: "/participation/email/confirm/:token",
name: EventRouteName.EVENT_PARTICIPATE_CONFIRM, name: EventRouteName.EVENT_PARTICIPATE_CONFIRM,
component: () => import("../components/Participation/ConfirmParticipation.vue"), component: (): Promise<EsModuleComponent> =>
import("../components/Participation/ConfirmParticipation.vue"),
props: true, props: true,
}, },
{ {
path: "/tag/:tag", path: "/tag/:tag",
name: EventRouteName.TAG, name: EventRouteName.TAG,
component: () => import(/* webpackChunkName: "Search" */ "@/views/Search.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },

44
js/src/router/groups.ts
View file

@ -1,4 +1,5 @@
import { RouteConfig, Route } from "vue-router"; import { RouteConfig, Route } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum GroupsRouteName { export enum GroupsRouteName {
TODO_LISTS = "TODO_LISTS", TODO_LISTS = "TODO_LISTS",
@ -18,29 +19,33 @@ export enum GroupsRouteName {
GROUP_JOIN = "GROUP_JOIN", GROUP_JOIN = "GROUP_JOIN",
} }
const resourceFolder = () => import("@/views/Resources/ResourceFolder.vue"); const resourceFolder = (): Promise<EsModuleComponent> =>
const groupEvents = () => import("@/views/Resources/ResourceFolder.vue");
const groupEvents = (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "groupEvents" */ "@/views/Event/GroupEvents.vue"); import(/* webpackChunkName: "groupEvents" */ "@/views/Event/GroupEvents.vue");
export const groupsRoutes: RouteConfig[] = [ export const groupsRoutes: RouteConfig[] = [
{ {
path: "/@:preferredUsername/todo-lists", path: "/@:preferredUsername/todo-lists",
name: GroupsRouteName.TODO_LISTS, name: GroupsRouteName.TODO_LISTS,
component: () => import("@/views/Todos/TodoLists.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Todos/TodoLists.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/todo-lists/:id", path: "/todo-lists/:id",
name: GroupsRouteName.TODO_LIST, name: GroupsRouteName.TODO_LIST,
component: () => import("@/views/Todos/TodoList.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Todos/TodoList.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/todo/:todoId", path: "/todo/:todoId",
name: GroupsRouteName.TODO, name: GroupsRouteName.TODO,
component: () => import("@/views/Todos/Todo.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Todos/Todo.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
@ -60,7 +65,8 @@ export const groupsRoutes: RouteConfig[] = [
}, },
{ {
path: "/@:preferredUsername/settings", path: "/@:preferredUsername/settings",
component: () => import("@/views/Group/Settings.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Group/Settings.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
redirect: { name: GroupsRouteName.GROUP_PUBLIC_SETTINGS }, redirect: { name: GroupsRouteName.GROUP_PUBLIC_SETTINGS },
@ -69,40 +75,49 @@ export const groupsRoutes: RouteConfig[] = [
{ {
path: "public", path: "public",
name: GroupsRouteName.GROUP_PUBLIC_SETTINGS, name: GroupsRouteName.GROUP_PUBLIC_SETTINGS,
component: () => import("../views/Group/GroupSettings.vue"), component: (): Promise<EsModuleComponent> =>
import("../views/Group/GroupSettings.vue"),
}, },
{ {
path: "members", path: "members",
name: GroupsRouteName.GROUP_MEMBERS_SETTINGS, name: GroupsRouteName.GROUP_MEMBERS_SETTINGS,
component: () => import("../views/Group/GroupMembers.vue"), component: (): Promise<EsModuleComponent> =>
import("../views/Group/GroupMembers.vue"),
props: true, props: true,
}, },
], ],
}, },
{ {
path: "/@:preferredUsername/p/new", path: "/@:preferredUsername/p/new",
component: () => import("@/views/Posts/Edit.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Posts/Edit.vue"),
props: true, props: true,
name: GroupsRouteName.POST_CREATE, name: GroupsRouteName.POST_CREATE,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/p/:slug/edit", path: "/p/:slug/edit",
component: () => import("@/views/Posts/Edit.vue"), component: (): Promise<EsModuleComponent> =>
props: (route: Route) => ({ ...route.params, ...{ isUpdate: true } }), import("@/views/Posts/Edit.vue"),
props: (route: Route): Record<string, unknown> => ({
...route.params,
...{ isUpdate: true },
}),
name: GroupsRouteName.POST_EDIT, name: GroupsRouteName.POST_EDIT,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/p/:slug", path: "/p/:slug",
component: () => import("@/views/Posts/Post.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Posts/Post.vue"),
props: true, props: true,
name: GroupsRouteName.POST, name: GroupsRouteName.POST,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/@:preferredUsername/p", path: "/@:preferredUsername/p",
component: () => import("@/views/Posts/List.vue"), component: (): Promise<EsModuleComponent> =>
import("@/views/Posts/List.vue"),
props: true, props: true,
name: GroupsRouteName.POSTS, name: GroupsRouteName.POSTS,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
@ -116,7 +131,8 @@ export const groupsRoutes: RouteConfig[] = [
}, },
{ {
path: "/@:preferredUsername/join", path: "/@:preferredUsername/join",
component: () => import("@/components/Group/JoinGroupWithAccount.vue"), component: (): Promise<EsModuleComponent> =>
import("@/components/Group/JoinGroupWithAccount.vue"),
props: true, props: true,
name: GroupsRouteName.GROUP_JOIN, name: GroupsRouteName.GROUP_JOIN,
meta: { requiredAuth: false }, meta: { requiredAuth: false },

40
js/src/router/index.ts
View file

@ -49,7 +49,8 @@ const router = new Router({
{ {
path: "/search", path: "/search",
name: RouteName.SEARCH, name: RouteName.SEARCH,
component: () => import(/* webpackChunkName: "search" */ "../views/Search.vue"), component: () =>
import(/* webpackChunkName: "search" */ "../views/Search.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
@ -62,7 +63,8 @@ const router = new Router({
{ {
path: "/about", path: "/about",
name: RouteName.ABOUT, name: RouteName.ABOUT,
component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue"), component: () =>
import(/* webpackChunkName: "about" */ "@/views/About.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
redirect: { name: RouteName.ABOUT_INSTANCE }, redirect: { name: RouteName.ABOUT_INSTANCE },
children: [ children: [
@ -70,30 +72,40 @@ const router = new Router({
path: "instance", path: "instance",
name: RouteName.ABOUT_INSTANCE, name: RouteName.ABOUT_INSTANCE,
component: () => component: () =>
import(/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"), import(
/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
),
}, },
{ {
path: "/terms", path: "/terms",
name: RouteName.TERMS, name: RouteName.TERMS,
component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"), component: () =>
import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/privacy", path: "/privacy",
name: RouteName.PRIVACY, name: RouteName.PRIVACY,
component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"), component: () =>
import(
/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"
),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/rules", path: "/rules",
name: RouteName.RULES, name: RouteName.RULES,
component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"), component: () =>
import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/glossary", path: "/glossary",
name: RouteName.GLOSSARY, name: RouteName.GLOSSARY,
component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"), component: () =>
import(
/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
], ],
@ -101,20 +113,25 @@ const router = new Router({
{ {
path: "/interact", path: "/interact",
name: RouteName.INTERACT, name: RouteName.INTERACT,
component: () => import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"), component: () =>
import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {
path: "/auth/:provider/callback", path: "/auth/:provider/callback",
name: "auth-callback", name: "auth-callback",
component: () => component: () =>
import(/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"), import(
/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
),
}, },
{ {
path: "/welcome/:step?", path: "/welcome/:step?",
name: RouteName.WELCOME_SCREEN, name: RouteName.WELCOME_SCREEN,
component: () => component: () =>
import(/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"), import(
/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
props: (route) => { props: (route) => {
const step = Number.parseInt(route.params.step, 10); const step = Number.parseInt(route.params.step, 10);
@ -127,7 +144,8 @@ const router = new Router({
{ {
path: "/404", path: "/404",
name: RouteName.PAGE_NOT_FOUND, name: RouteName.PAGE_NOT_FOUND,
component: () => import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"), component: () =>
import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{ {

102
js/src/router/settings.ts
View file

@ -1,4 +1,5 @@
import { Route, RouteConfig } from "vue-router"; import { Route, RouteConfig } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum SettingsRouteName { export enum SettingsRouteName {
SETTINGS = "SETTINGS", SETTINGS = "SETTINGS",
@ -30,7 +31,8 @@ export enum SettingsRouteName {
export const settingsRoutes: RouteConfig[] = [ export const settingsRoutes: RouteConfig[] = [
{ {
path: "/settings", path: "/settings",
component: () => import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS }, redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
@ -45,24 +47,30 @@ export const settingsRoutes: RouteConfig[] = [
{ {
path: "account/general", path: "account/general",
name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL, name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"), import(
/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "preferences", path: "preferences",
name: SettingsRouteName.PREFERENCES, name: SettingsRouteName.PREFERENCES,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"), import(
/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "notifications", path: "notifications",
name: SettingsRouteName.NOTIFICATIONS, name: SettingsRouteName.NOTIFICATIONS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"), import(
/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
@ -75,61 +83,77 @@ export const settingsRoutes: RouteConfig[] = [
{ {
path: "admin/dashboard", path: "admin/dashboard",
name: SettingsRouteName.ADMIN_DASHBOARD, name: SettingsRouteName.ADMIN_DASHBOARD,
component: () => import(/* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"), component: (): Promise<EsModuleComponent> =>
import(
/* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"
),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/settings", path: "admin/settings",
name: SettingsRouteName.ADMIN_SETTINGS, name: SettingsRouteName.ADMIN_SETTINGS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"), import(
/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/users", path: "admin/users",
name: SettingsRouteName.USERS, name: SettingsRouteName.USERS,
component: () => import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/users/:id", path: "admin/users/:id",
name: SettingsRouteName.ADMIN_USER_PROFILE, name: SettingsRouteName.ADMIN_USER_PROFILE,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"), import(
/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/profiles", path: "admin/profiles",
name: SettingsRouteName.PROFILES, name: SettingsRouteName.PROFILES,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"), import(
/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/profiles/:id", path: "admin/profiles/:id",
name: SettingsRouteName.ADMIN_PROFILE, name: SettingsRouteName.ADMIN_PROFILE,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"), import(
/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/groups", path: "admin/groups",
name: SettingsRouteName.ADMIN_GROUPS, name: SettingsRouteName.ADMIN_GROUPS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"), import(
/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "admin/groups/:id", path: "admin/groups/:id",
name: SettingsRouteName.ADMIN_GROUP_PROFILE, name: SettingsRouteName.ADMIN_GROUP_PROFILE,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"), import(
/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
@ -137,21 +161,26 @@ export const settingsRoutes: RouteConfig[] = [
path: "admin/relays", path: "admin/relays",
name: SettingsRouteName.RELAYS, name: SettingsRouteName.RELAYS,
redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS }, redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS },
component: () => import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
children: [ children: [
{ {
path: "followings", path: "followings",
name: SettingsRouteName.RELAY_FOLLOWINGS, name: SettingsRouteName.RELAY_FOLLOWINGS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"), import(
/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"
),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "followers", path: "followers",
name: SettingsRouteName.RELAY_FOLLOWERS, name: SettingsRouteName.RELAY_FOLLOWERS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"), import(
/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"
),
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
], ],
@ -166,23 +195,30 @@ export const settingsRoutes: RouteConfig[] = [
{ {
path: "/moderation/reports/:filter?", path: "/moderation/reports/:filter?",
name: SettingsRouteName.REPORTS, name: SettingsRouteName.REPORTS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"), import(
/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/moderation/report/:reportId", path: "/moderation/report/:reportId",
name: SettingsRouteName.REPORT, name: SettingsRouteName.REPORT,
component: () => import(/* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"), component: (): Promise<EsModuleComponent> =>
import(
/* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
{ {
path: "/moderation/logs", path: "/moderation/logs",
name: SettingsRouteName.REPORT_LOGS, name: SettingsRouteName.REPORT_LOGS,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"), import(
/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"
),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true },
}, },
@ -195,7 +231,7 @@ export const settingsRoutes: RouteConfig[] = [
{ {
path: "/identity/create", path: "/identity/create",
name: SettingsRouteName.CREATE_IDENTITY, name: SettingsRouteName.CREATE_IDENTITY,
component: () => component: (): Promise<EsModuleComponent> =>
import( import(
/* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue" /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
), ),
@ -208,7 +244,7 @@ export const settingsRoutes: RouteConfig[] = [
{ {
path: "/identity/update/:identityName?", path: "/identity/update/:identityName?",
name: SettingsRouteName.UPDATE_IDENTITY, name: SettingsRouteName.UPDATE_IDENTITY,
component: () => component: (): Promise<EsModuleComponent> =>
import( import(
/* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue" /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
), ),

42
js/src/router/user.ts
View file

@ -1,5 +1,6 @@
import { beforeRegisterGuard } from "@/router/guards/register-guard"; import { beforeRegisterGuard } from "@/router/guards/register-guard";
import { Route, RouteConfig } from "vue-router"; import { Route, RouteConfig } from "vue-router";
import { EsModuleComponent } from "vue/types/options";
export enum UserRouteName { export enum UserRouteName {
REGISTER = "Register", REGISTER = "Register",
@ -16,7 +17,10 @@ export const userRoutes: RouteConfig[] = [
{ {
path: "/register/user", path: "/register/user",
name: UserRouteName.REGISTER, name: UserRouteName.REGISTER,
component: () => import(/* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"), component: (): Promise<EsModuleComponent> =>
import(
/* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"
),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
beforeEnter: beforeRegisterGuard, beforeEnter: beforeRegisterGuard,
@ -24,8 +28,10 @@ export const userRoutes: RouteConfig[] = [
{ {
path: "/register/profile", path: "/register/profile",
name: UserRouteName.REGISTER_PROFILE, name: UserRouteName.REGISTER_PROFILE,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"), import(
/* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"
),
// We can only pass string values through params, therefore // We can only pass string values through params, therefore
props: (route: Route): Record<string, unknown> => ({ props: (route: Route): Record<string, unknown> => ({
email: route.params.email, email: route.params.email,
@ -36,46 +42,56 @@ export const userRoutes: RouteConfig[] = [
{ {
path: "/resend-instructions", path: "/resend-instructions",
name: UserRouteName.RESEND_CONFIRMATION, name: UserRouteName.RESEND_CONFIRMATION,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"), import(
/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
),
props: true, props: true,
meta: { requiresAuth: false }, meta: { requiresAuth: false },
}, },
{ {
path: "/password-reset/send", path: "/password-reset/send",
name: UserRouteName.SEND_PASSWORD_RESET, name: UserRouteName.SEND_PASSWORD_RESET,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"), import(
/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
),
props: true, props: true,
meta: { requiresAuth: false }, meta: { requiresAuth: false },
}, },
{ {
path: "/password-reset/:token", path: "/password-reset/:token",
name: UserRouteName.PASSWORD_RESET, name: UserRouteName.PASSWORD_RESET,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"), import(
/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
),
meta: { requiresAuth: false }, meta: { requiresAuth: false },
props: true, props: true,
}, },
{ {
path: "/validate/email/:token", path: "/validate/email/:token",
name: UserRouteName.EMAIL_VALIDATE, name: UserRouteName.EMAIL_VALIDATE,
component: () => component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"), import(
/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"
),
props: true, props: true,
meta: { requiresAuth: false }, meta: { requiresAuth: false },
}, },
{ {
path: "/validate/:token", path: "/validate/:token",
name: UserRouteName.VALIDATE, name: UserRouteName.VALIDATE,
component: () => import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
props: true, props: true,
meta: { requiresAuth: false }, meta: { requiresAuth: false },
}, },
{ {
path: "/login", path: "/login",
name: UserRouteName.LOGIN, name: UserRouteName.LOGIN,
component: () => import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"), component: (): Promise<EsModuleComponent> =>
import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },

53
js/src/services/AnonymousParticipationStorage.ts
View file

@ -27,9 +27,13 @@ function mapToJson(map: Map<any, any>): string {
/** /**
* Fetch existing anonymous participations saved inside this browser * Fetch existing anonymous participations saved inside this browser
*/ */
function getLocalAnonymousParticipations(): Map<string, IAnonymousParticipation> { function getLocalAnonymousParticipations(): Map<
string,
IAnonymousParticipation
> {
return jsonToMap( return jsonToMap(
localStorage.getItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY) || mapToJson(new Map()) localStorage.getItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY) ||
mapToJson(new Map())
); );
} }
@ -58,9 +62,14 @@ function insertLocalAnonymousParticipation(
hashedUUID: string, hashedUUID: string,
participation: IAnonymousParticipation participation: IAnonymousParticipation
) { ) {
const participations = purgeOldParticipations(getLocalAnonymousParticipations()); const participations = purgeOldParticipations(
getLocalAnonymousParticipations()
);
participations.set(hashedUUID, participation); participations.set(hashedUUID, participation);
localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations)); localStorage.setItem(
ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
mapToJson(participations)
);
} }
function buildExpiration(event: IEvent): Date { function buildExpiration(event: IEvent): Date {
@ -82,12 +91,14 @@ async function addLocalUnconfirmedAnonymousParticipation(
cancellationToken: string cancellationToken: string
): Promise<void> { ): Promise<void> {
/** /**
* We hash the event UUID so that we can't know which events an anonymous user goes by looking up it's localstorage * We hash the event UUID so that we can't know which events
* an anonymous user goes by looking up it's localstorage
*/ */
const hashedUUID = await digestMessage(event.uuid); const hashedUUID = await digestMessage(event.uuid);
/** /**
* We round expiration to first day of next 3 months so that it's difficult to find event from date * We round expiration to first day of next 3 months so that
* it's difficult to find event from date
*/ */
const expiration = buildExpiration(event); const expiration = buildExpiration(event);
insertLocalAnonymousParticipation(hashedUUID, { insertLocalAnonymousParticipation(hashedUUID, {
@ -98,19 +109,28 @@ async function addLocalUnconfirmedAnonymousParticipation(
} }
async function confirmLocalAnonymousParticipation(uuid: string): Promise<void> { async function confirmLocalAnonymousParticipation(uuid: string): Promise<void> {
const participations = purgeOldParticipations(getLocalAnonymousParticipations()); const participations = purgeOldParticipations(
getLocalAnonymousParticipations()
);
const hashedUUID = await digestMessage(uuid); const hashedUUID = await digestMessage(uuid);
const participation = participations.get(hashedUUID); const participation = participations.get(hashedUUID);
if (participation) { if (participation) {
participation.confirmed = true; participation.confirmed = true;
participations.set(hashedUUID, participation); participations.set(hashedUUID, participation);
localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations)); localStorage.setItem(
ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
mapToJson(participations)
);
} }
} }
async function getParticipation(eventUUID: string): Promise<IAnonymousParticipation> { async function getParticipation(
eventUUID: string
): Promise<IAnonymousParticipation> {
const hashedUUID = await digestMessage(eventUUID); const hashedUUID = await digestMessage(eventUUID);
const participation = purgeOldParticipations(getLocalAnonymousParticipations()).get(hashedUUID); const participation = purgeOldParticipations(
getLocalAnonymousParticipations()
).get(hashedUUID);
if (participation) { if (participation) {
return participation; return participation;
} }
@ -122,15 +142,22 @@ async function isParticipatingInThisEvent(eventUUID: string): Promise<boolean> {
return participation !== undefined && participation.confirmed; return participation !== undefined && participation.confirmed;
} }
async function getLeaveTokenForParticipation(eventUUID: string): Promise<string> { async function getLeaveTokenForParticipation(
eventUUID: string
): Promise<string> {
return (await getParticipation(eventUUID)).token; return (await getParticipation(eventUUID)).token;
} }
async function removeAnonymousParticipation(eventUUID: string): Promise<void> { async function removeAnonymousParticipation(eventUUID: string): Promise<void> {
const hashedUUID = await digestMessage(eventUUID); const hashedUUID = await digestMessage(eventUUID);
const participations = purgeOldParticipations(getLocalAnonymousParticipations()); const participations = purgeOldParticipations(
getLocalAnonymousParticipations()
);
participations.delete(hashedUUID); participations.delete(hashedUUID);
localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations)); localStorage.setItem(
ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
mapToJson(participations)
);
} }
export { export {

4
js/src/types/actor/actor.model.ts
View file

@ -52,7 +52,9 @@ export class Actor implements IActor {
} }
public displayName(): string { public displayName(): string {
return this.name != null && this.name !== "" ? this.name : this.usernameWithDomain(); return this.name != null && this.name !== ""
? this.name
: this.usernameWithDomain();
} }
} }

11
js/src/types/address.model.ts
View file

@ -60,7 +60,8 @@ export class Address implements IAddress {
let alternativeName = ""; let alternativeName = "";
let poiIcon: IPOIIcon = poiIcons.default; let poiIcon: IPOIIcon = poiIcons.default;
// Google Maps doesn't have a type // Google Maps doesn't have a type
if (this.type == null && this.description === this.street) this.type = "house"; if (this.type == null && this.description === this.street)
this.type = "house";
switch (this.type) { switch (this.type) {
case "house": case "house":
@ -81,8 +82,12 @@ export class Address implements IAddress {
case "zone": case "zone":
case "city": case "city":
case "administrative": case "administrative":
name = this.postalCode ? `${this.description} (${this.postalCode})` : this.description; name = this.postalCode
alternativeName = [this.region, this.country].filter((zone) => zone).join(", "); ? `${this.description} (${this.postalCode})`
: this.description;
alternativeName = [this.region, this.country]
.filter((zone) => zone)
.join(", ");
poiIcon = poiIcons.defaultAdministrative; poiIcon = poiIcons.defaultAdministrative;
break; break;
default: default:

4
js/src/types/discussions.ts
View file

@ -41,7 +41,9 @@ export class Discussion implements IDiscussion {
this.title = hash.title; this.title = hash.title;
this.comments = { this.comments = {
total: hash.comments.total, total: hash.comments.total,
elements: hash.comments.elements.map((comment: IComment) => new CommentModel(comment)), elements: hash.comments.elements.map(
(comment: IComment) => new CommentModel(comment)
),
}; };
this.slug = hash.slug; this.slug = hash.slug;
this.creator = hash.creator; this.creator = hash.creator;

7
js/src/types/event.model.ts
View file

@ -184,7 +184,9 @@ export class EventModel implements IEvent {
this.onlineAddress = hash.onlineAddress; this.onlineAddress = hash.onlineAddress;
this.phoneAddress = hash.phoneAddress; this.phoneAddress = hash.phoneAddress;
this.physicalAddress = hash.physicalAddress ? new Address(hash.physicalAddress) : undefined; this.physicalAddress = hash.physicalAddress
? new Address(hash.physicalAddress)
: undefined;
this.participantStats = hash.participantStats; this.participantStats = hash.participantStats;
this.contacts = hash.contacts; this.contacts = hash.contacts;
@ -209,7 +211,8 @@ export class EventModel implements IEvent {
phoneAddress: this.phoneAddress, phoneAddress: this.phoneAddress,
physicalAddress: this.physicalAddress, physicalAddress: this.physicalAddress,
options: this.options, options: this.options,
attributedToId: this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null, attributedToId:
this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
contacts: this.contacts.map(({ id }) => ({ contacts: this.contacts.map(({ id }) => ({
id, id,
})), })),

5
js/src/typings/intl.d.ts vendored
View file

@ -11,7 +11,10 @@ declare namespace Intl {
} }
class ListFormat { class ListFormat {
constructor(locales?: Locale | Locales | undefined, options?: Partial<ListFormatOptions>); constructor(
locales?: Locale | Locales | undefined,
options?: Partial<ListFormatOptions>
);
public format: (items: string[]) => string; public format: (items: string[]) => string;
} }
} }

11
js/src/typings/tiptap-commands.d.ts vendored
View file

@ -13,7 +13,11 @@ declare module "tiptap-commands" {
} }
export interface CommandFunction { export interface CommandFunction {
(state: EditorState, dispatch: DispatchFn | undefined, view: EditorView): boolean; (
state: EditorState,
dispatch: DispatchFn | undefined,
view: EditorView
): boolean;
} }
export function toggleWrap(type: NodeType): Command; export function toggleWrap(type: NodeType): Command;
@ -25,7 +29,10 @@ declare module "tiptap-commands" {
joinPredicate?: (strs: string[], node: Node) => boolean joinPredicate?: (strs: string[], node: Node) => boolean
): InputRule; ): InputRule;
export function toggleMark(type: MarkType, attrs?: { [key: string]: any }): Command; export function toggleMark(
type: MarkType,
attrs?: { [key: string]: any }
): Command;
export function pasteRule( export function pasteRule(
regexp: RegExp, regexp: RegExp,

8
js/src/typings/tiptap.d.ts vendored
View file

@ -76,7 +76,13 @@ declare module "tiptap" {
parseOptions?: ParseOptions; parseOptions?: ParseOptions;
/** defaults to true */ /** defaults to true */
injectCSS?: boolean; injectCSS?: boolean;
onInit?: ({ view, state }: { view: EditorView; state: EditorState }) => void; onInit?: ({
view,
state,
}: {
view: EditorView;
state: EditorState;
}) => void;
onTransaction?: (event: EditorUpdateEvent) => void; onTransaction?: (event: EditorUpdateEvent) => void;
onUpdate?: (event: EditorUpdateEvent) => void; onUpdate?: (event: EditorUpdateEvent) => void;
onFocus?: ({ onFocus?: ({

25
js/src/utils/auth.ts
View file

@ -37,11 +37,15 @@ export function saveActorData(obj: IPerson): void {
} }
export function deleteUserData(): void { export function deleteUserData(): void {
[AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE].forEach( [
(key) => { AUTH_USER_ID,
localStorage.removeItem(key); AUTH_USER_EMAIL,
} AUTH_ACCESS_TOKEN,
); AUTH_REFRESH_TOKEN,
AUTH_USER_ROLE,
].forEach((key) => {
localStorage.removeItem(key);
});
} }
export class NoIdentitiesException extends Error {} export class NoIdentitiesException extends Error {}
@ -62,7 +66,9 @@ export async function changeIdentity(
* then fetch the current identities to set in cache * then fetch the current identities to set in cache
* the current identity used * the current identity used
*/ */
export async function initializeCurrentActor(apollo: ApolloClient<any>): Promise<void> { export async function initializeCurrentActor(
apollo: ApolloClient<any>
): Promise<void> {
const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID); const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
const result = await apollo.query({ const result = await apollo.query({
@ -75,14 +81,17 @@ export async function initializeCurrentActor(apollo: ApolloClient<any>): Promise
throw new NoIdentitiesException(); throw new NoIdentitiesException();
} }
const activeIdentity = const activeIdentity =
identities.find((identity: IPerson) => identity.id === actorId) || (identities[0] as IPerson); identities.find((identity: IPerson) => identity.id === actorId) ||
(identities[0] as IPerson);
if (activeIdentity) { if (activeIdentity) {
await changeIdentity(apollo, activeIdentity); await changeIdentity(apollo, activeIdentity);
} }
} }
export async function logout(apollo: ApolloClient<NormalizedCacheObject>): Promise<void> { export async function logout(
apollo: ApolloClient<NormalizedCacheObject>
): Promise<void> {
await apollo.mutate({ await apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT, mutation: UPDATE_CURRENT_USER_CLIENT,
variables: { variables: {

17
js/src/utils/i18n.ts
View file

@ -8,10 +8,14 @@ import langs from "../i18n/langs.json";
const DEFAULT_LOCALE = "en_US"; const DEFAULT_LOCALE = "en_US";
let language = let language =
localStorage.getItem(USER_LOCALE) || (document.documentElement.getAttribute("lang") as string); localStorage.getItem(USER_LOCALE) ||
(document.documentElement.getAttribute("lang") as string);
language = language =
language || language ||
((window.navigator as any).userLanguage || window.navigator.language).replace(/-/, "_"); ((window.navigator as any).userLanguage || window.navigator.language).replace(
/-/,
"_"
);
export const locale = export const locale =
language && Object.prototype.hasOwnProperty.call(langs, language) language && Object.prototype.hasOwnProperty.call(langs, language)
? language ? language
@ -71,7 +75,9 @@ export async function loadLanguageAsync(lang: string): Promise<string> {
} }
// If the language hasn't been loaded yet // If the language hasn't been loaded yet
const newMessages = await import( const newMessages = await import(
/* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(lang)}.json` /* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(
lang
)}.json`
); );
i18n.setLocaleMessage(lang, newMessages.default); i18n.setLocaleMessage(lang, newMessages.default);
loadedLanguages.push(lang); loadedLanguages.push(lang);
@ -82,7 +88,10 @@ loadLanguageAsync(locale);
export function formatList(list: string[]): string { export function formatList(list: string[]): string {
if (window.Intl && Intl.ListFormat) { if (window.Intl && Intl.ListFormat) {
const formatter = new Intl.ListFormat(undefined, { style: "long", type: "conjunction" }); const formatter = new Intl.ListFormat(undefined, {
style: "long",
type: "conjunction",
});
return formatter.format(list); return formatter.format(list);
} }
return list.join(","); return list.join(",");

8
js/src/utils/image.ts
View file

@ -1,6 +1,8 @@
import { IMedia } from "@/types/media.model"; import { IMedia } from "@/types/media.model";
export async function buildFileFromIMedia(obj: IMedia | null | undefined): Promise<File | null> { export async function buildFileFromIMedia(
obj: IMedia | null | undefined
): Promise<File | null> {
if (!obj) return Promise.resolve(null); if (!obj) return Promise.resolve(null);
const response = await fetch(obj.url); const response = await fetch(obj.url);
@ -27,7 +29,9 @@ export function buildFileVariable(
}; };
} }
export function readFileAsync(file: File): Promise<string | ArrayBuffer | null> { export function readFileAsync(
file: File
): Promise<string | ArrayBuffer | null> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();

5
js/src/utils/username.ts
View file

@ -12,7 +12,10 @@ function convertToUsername(value: string | null): string {
.replace(/[^a-z0-9_]/g, ""); .replace(/[^a-z0-9_]/g, "");
} }
function autoUpdateUsername(actor: IActor, newDisplayName: string | null): IActor { function autoUpdateUsername(
actor: IActor,
newDisplayName: string | null
): IActor {
const actor2 = { ...actor }; const actor2 = { ...actor };
const oldUsername = convertToUsername(actor.name); const oldUsername = convertToUsername(actor.name);

14
js/src/views/About.vue
View file

@ -51,7 +51,9 @@
}}</router-link> }}</router-link>
</li> </li>
<li> <li>
<router-link :to="{ name: RouteName.GLOSSARY }">{{ $t("Glossary") }}</router-link> <router-link :to="{ name: RouteName.GLOSSARY }">{{
$t("Glossary")
}}</router-link>
</li> </li>
</ul> </ul>
</aside> </aside>
@ -79,9 +81,13 @@
</div> </div>
<div class="column"> <div class="column">
<h2 class="title">{{ $t("Find another instance") }}</h2> <h2 class="title">{{ $t("Find another instance") }}</h2>
<b-button type="is-secondary" size="is-large" tag="a" href="https://mobilizon.org">{{ <b-button
$t("Pick an instance") type="is-secondary"
}}</b-button> size="is-large"
tag="a"
href="https://mobilizon.org"
>{{ $t("Pick an instance") }}</b-button
>
</div> </div>
</div> </div>
</div> </div>

26
js/src/views/About/AboutInstance.vue
View file

@ -26,9 +26,12 @@
<div class="column contact"> <div class="column contact">
<h4>{{ $t("Contact") }}</h4> <h4>{{ $t("Contact") }}</h4>
<p> <p>
<a :title="config.contact" v-if="generateConfigLink()" :href="generateConfigLink().uri">{{ <a
generateConfigLink().text :title="config.contact"
}}</a> v-if="generateConfigLink()"
:href="generateConfigLink().uri"
>{{ generateConfigLink().text }}</a
>
<span v-else-if="config.contact">{{ config.contact }}</span> <span v-else-if="config.contact">{{ config.contact }}</span>
<span v-else>{{ $t("contact uninformed") }}</span> <span v-else>{{ $t("contact uninformed") }}</span>
</p> </p>
@ -44,7 +47,9 @@
<table class="table is-fullwidth"> <table class="table is-fullwidth">
<tr> <tr>
<td>{{ $t("Instance languages") }}</td> <td>{{ $t("Instance languages") }}</td>
<td :title="this.config.languages.join(', ')">{{ formattedLanguageList }}</td> <td :title="this.config.languages.join(', ')">
{{ formattedLanguageList }}
</td>
</tr> </tr>
<tr> <tr>
<td>{{ $t("Mobilizon version") }}</td> <td>{{ $t("Mobilizon version") }}</td>
@ -67,7 +72,9 @@
</tr> </tr>
<tr> <tr>
<td>{{ $t("Anonymous participations") }}</td> <td>{{ $t("Anonymous participations") }}</td>
<td v-if="config.anonymous.participation.allowed">{{ $t("If allowed by organizer") }}</td> <td v-if="config.anonymous.participation.allowed">
{{ $t("If allowed by organizer") }}
</td>
<td v-else>{{ $t("Disabled") }}</td> <td v-else>{{ $t("Disabled") }}</td>
</tr> </tr>
</table> </table>
@ -132,12 +139,17 @@ export default class AboutInstance extends Vue {
generateConfigLink(): { uri: string; text: string } | null { generateConfigLink(): { uri: string; text: string } | null {
if (!this.config.contact) return null; if (!this.config.contact) return null;
if (this.isContactEmail) { if (this.isContactEmail) {
return { uri: `mailto:${this.config.contact}`, text: this.config.contact }; return {
uri: `mailto:${this.config.contact}`,
text: this.config.contact,
};
} }
if (this.isContactURL) { if (this.isContactURL) {
return { return {
uri: this.config.contact, uri: this.config.contact,
text: AboutInstance.urlToHostname(this.config.contact) || (this.$t("Contact") as string), text:
AboutInstance.urlToHostname(this.config.contact) ||
(this.$t("Contact") as string),
}; };
} }
return null; return null;

7
js/src/views/Account/IdentityPicker.vue
View file

@ -19,7 +19,12 @@
:src="identity.avatar.url" :src="identity.avatar.url"
alt="" alt=""
/> />
<b-icon class="media-left" v-else size="is-large" icon="account-circle" /> <b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content"> <div class="media-content">
<h3>@{{ identity.preferredUsername }}</h3> <h3>@{{ identity.preferredUsername }}</h3>
<small>{{ identity.name }}</small> <small>{{ identity.name }}</small>

17
js/src/views/Account/IdentityPickerWrapper.vue
View file

@ -3,13 +3,20 @@
<div <div
v-if="inline" v-if="inline"
class="inline box" class="inline box"
:class="{ 'has-background-grey-lighter': masked, 'no-other-identity': !hasOtherIdentities }" :class="{
'has-background-grey-lighter': masked,
'no-other-identity': !hasOtherIdentities,
}"
@click="activateModal" @click="activateModal"
> >
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
<figure class="image is-48x48" v-if="currentIdentity.avatar"> <figure class="image is-48x48" v-if="currentIdentity.avatar">
<img class="image is-rounded" :src="currentIdentity.avatar.url" alt="" /> <img
class="image is-rounded"
:src="currentIdentity.avatar.url"
alt=""
/>
</figure> </figure>
<b-icon v-else size="is-large" icon="account-circle" /> <b-icon v-else size="is-large" icon="account-circle" />
</div> </div>
@ -23,7 +30,11 @@
<div class="media-content" v-else> <div class="media-content" v-else>
{{ `@${currentIdentity.preferredUsername}` }} {{ `@${currentIdentity.preferredUsername}` }}
</div> </div>
<b-button type="is-text" v-if="identities.length > 1" @click="activateModal"> <b-button
type="is-text"
v-if="identities.length > 1"
@click="activateModal"
>
{{ $t("Change") }} {{ $t("Change") }}
</b-button> </b-button>
</div> </div>

Some files were not shown because too many files have changed in this diff Show more