Various accessibility improvements

* Add announcement element with `aria-live`
* Add skip to main content element

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-10-10 16:24:12 +02:00
parent 6113836e29
commit eba3c70c9b
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
62 changed files with 687 additions and 175 deletions

View File

@ -29,6 +29,8 @@
"@tiptap/extension-underline": "^2.0.0-beta.7", "@tiptap/extension-underline": "^2.0.0-beta.7",
"@tiptap/starter-kit": "^2.0.0-beta.37", "@tiptap/starter-kit": "^2.0.0-beta.37",
"@tiptap/vue-2": "^2.0.0-beta.21", "@tiptap/vue-2": "^2.0.0-beta.21",
"@vue-a11y/announcer": "^2.1.0",
"@vue-a11y/skip-to": "^2.1.2",
"@vue/apollo-option": "4.0.0-alpha.11", "@vue/apollo-option": "4.0.0-alpha.11",
"apollo-absinthe-upload-link": "^1.5.0", "apollo-absinthe-upload-link": "^1.5.0",
"blurhash": "^1.1.3", "blurhash": "^1.1.3",

View File

@ -1,5 +1,7 @@
<template> <template>
<div id="mobilizon"> <div id="mobilizon">
<VueAnnouncer />
<VueSkipTo to="#main" :label="$t('Skip to main content')" />
<NavBar /> <NavBar />
<div v-if="config && config.demoMode"> <div v-if="config && config.demoMode">
<b-message <b-message
@ -22,9 +24,9 @@
</div> </div>
<error v-if="error" :error="error" /> <error v-if="error" :error="error" />
<main v-else> <main id="main" v-else>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<router-view /> <router-view ref="routerView" />
</transition> </transition>
</main> </main>
<mobilizon-footer /> <mobilizon-footer />
@ -32,7 +34,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import NavBar from "./components/NavBar.vue"; import NavBar from "./components/NavBar.vue";
import { import {
AUTH_ACCESS_TOKEN, AUTH_ACCESS_TOKEN,
@ -52,6 +54,7 @@ import { IConfig } from "./types/config.model";
import { ICurrentUser } from "./types/current-user.model"; import { ICurrentUser } from "./types/current-user.model";
import jwt_decode, { JwtPayload } from "jwt-decode"; import jwt_decode, { JwtPayload } from "jwt-decode";
import { refreshAccessToken } from "./apollo/utils"; import { refreshAccessToken } from "./apollo/utils";
import { Route } from "vue-router";
@Component({ @Component({
apollo: { apollo: {
@ -82,6 +85,8 @@ export default class App extends Vue {
interval: number | undefined = undefined; interval: number | undefined = undefined;
@Ref("routerView") routerView!: Vue;
async created(): Promise<void> { async created(): Promise<void> {
if (await this.initializeCurrentUser()) { if (await this.initializeCurrentUser()) {
await initializeCurrentActor(this.$apollo.provider.defaultClient); await initializeCurrentActor(this.$apollo.provider.defaultClient);
@ -197,6 +202,39 @@ export default class App extends Vue {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = undefined; this.interval = undefined;
} }
@Watch("$route", { immediate: true })
updateAnnouncement(route: Route): void {
const pageTitle = this.extractPageTitleFromRoute(route);
if (pageTitle) {
this.$announcer.polite(
this.$t("Navigated to {pageTitle}", {
pageTitle,
}) as string
);
}
// Set the focus to the router view
// https://marcus.io/blog/accessible-routing-vuejs
setTimeout(() => {
const focusTarget = this.routerView.$el as HTMLElement;
// Make focustarget programmatically focussable
focusTarget.setAttribute("tabindex", "-1");
// Focus element
focusTarget.focus();
// Remove tabindex from focustarget.
// Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
focusTarget.removeAttribute("tabindex");
}, 0);
}
extractPageTitleFromRoute(route: Route): string {
if (route.meta?.announcer?.message) {
return route.meta?.announcer?.message();
}
return document.title;
}
} }
</script> </script>
@ -218,4 +256,8 @@ $mdi-font-path: "~@mdi/font/fonts";
flex-grow: 1; flex-grow: 1;
} }
} }
.vue-skip-to {
z-index: 40;
}
</style> </style>

View File

@ -135,3 +135,23 @@ a.list-item {
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
@mixin focus() {
&:focus {
border: 2px solid black;
border-radius: 5px;
}
}
ul.menu-list > li,
p {
@include focus;
}
.navbar-item {
@include focus;
}
.navbar-dropdown span.navbar-item:hover {
background-color: whitesmoke;
color: #0a0a0a;
}

View File

@ -11,7 +11,7 @@
) )
}} }}
</p> </p>
<hr /> <hr role="presentation" />
<p class="content"> <p class="content">
<span> <span>
{{ {{
@ -33,7 +33,7 @@
" "
/> />
</p> </p>
<hr /> <hr role="presentation" />
<p class="content"> <p class="content">
{{ {{
$t( $t(

View File

@ -137,6 +137,7 @@
ref="commentEditor" ref="commentEditor"
v-model="newComment.text" v-model="newComment.text"
mode="comment" mode="comment"
:aria-label="$t('Comment body')"
/> />
<b-button <b-button
:disabled="newComment.text.trim().length === 0" :disabled="newComment.text.trim().length === 0"

View File

@ -23,6 +23,7 @@
ref="commenteditor" ref="commenteditor"
mode="comment" mode="comment"
v-model="newComment.text" v-model="newComment.text"
:aria-label="$t('Comment body')"
/> />
</p> </p>
<p class="help is-danger" v-if="emptyCommentError"> <p class="help is-danger" v-if="emptyCommentError">
@ -30,9 +31,11 @@
</p> </p>
</div> </div>
<div class="field notify-participants" v-if="isEventOrganiser"> <div class="field notify-participants" v-if="isEventOrganiser">
<b-switch v-model="newComment.isAnnouncement">{{ <b-switch
$t("Notify participants") aria-labelledby="notify-participants-toggle"
}}</b-switch> v-model="newComment.isAnnouncement"
>{{ $t("Notify participants") }}</b-switch
>
</div> </div>
</div> </div>
</div> </div>

View File

@ -88,7 +88,7 @@
{{ $t("[This comment has been deleted by it's author]") }} {{ $t("[This comment has been deleted by it's author]") }}
</div> </div>
<form v-else class="edition" @submit.prevent="updateComment"> <form v-else class="edition" @submit.prevent="updateComment">
<editor v-model="updatedComment" /> <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
<div class="buttons"> <div class="buttons">
<b-button <b-button
native-type="submit" native-type="submit"

View File

@ -227,6 +227,8 @@ export default class EditorComponent extends Vue {
@Prop({ required: false, default: 100_000_000 }) maxSize!: number; @Prop({ required: false, default: 100_000_000 }) maxSize!: number;
@Prop({ required: false }) ariaLabel!: string;
currentActor!: IPerson; currentActor!: IPerson;
editor: Editor | null = null; editor: Editor | null = null;
@ -256,6 +258,13 @@ export default class EditorComponent extends Vue {
mounted(): void { mounted(): void {
this.editor = new Editor({ this.editor = new Editor({
editorProps: {
attributes: {
"aria-multiline": this.isShortMode.toString(),
"aria-label": this.ariaLabel,
role: "textbox",
},
},
extensions: [ extensions: [
StarterKit, StarterKit,
Document, Document,

View File

@ -103,9 +103,11 @@
:active="copied !== false" :active="copied !== false"
always always
> >
<b-button @click="copyErrorToClipboard">{{ <b-button
$t("Copy details to clipboard") @click="copyErrorToClipboard"
}}</b-button> @keyup.enter="copyErrorToClipboard"
>{{ $t("Copy details to clipboard") }}</b-button
>
</b-tooltip> </b-tooltip>
</div> </div>
</section> </section>

View File

@ -31,6 +31,7 @@
v-if="!gettingLocation" v-if="!gettingLocation"
icon-right="target" icon-right="target"
@click="locateMe" @click="locateMe"
@keyup.enter="locateMe"
>{{ $t("Use my location") }}</b-button >{{ $t("Use my location") }}</b-button
> >
<span v-else>{{ $t("Getting location") }}</span> <span v-else>{{ $t("Getting location") }}</span>

View File

@ -7,25 +7,15 @@
<div class="address-wrapper"> <div class="address-wrapper">
<span v-if="!physicalAddress">{{ $t("No address defined") }}</span> <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
<div class="address" v-if="physicalAddress"> <div class="address" v-if="physicalAddress">
<div> <address-info :address="physicalAddress" />
<address> <b-button
<p type="is-text"
class="addressDescription"
:title="physicalAddress.poiInfos.name"
>
{{ physicalAddress.poiInfos.name }}
</p>
<p class="has-text-grey-dark">
{{ physicalAddress.poiInfos.alternativeName }}
</p>
</address>
</div>
<span
class="map-show-button" class="map-show-button"
@click="showMap = !showMap" @click="showMap = !showMap"
v-if="physicalAddress.geom" v-if="physicalAddress.geom"
>{{ $t("Show map") }}</span
> >
{{ $t("Show map") }}
</b-button>
</div> </div>
</div> </div>
</event-metadata-block> </event-metadata-block>

View File

@ -30,18 +30,22 @@ A button to set your participation
position="is-bottom-left" position="is-bottom-left"
v-if="participation && participation.role === ParticipantRole.PARTICIPANT" v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
> >
<button class="button is-success is-large" type="button" slot="trigger"> <template #trigger="{ active }">
<b-icon icon="check" /> <b-button
<template> type="is-success"
<span>{{ $t("I participate") }}</span> size="is-large"
icon-left="check"
:icon-right="active ? 'menu-up' : 'menu-down'"
>
{{ $t("I participate") }}
</b-button>
</template> </template>
<b-icon icon="menu-down" />
</button>
<b-dropdown-item <b-dropdown-item
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="confirmLeave" @click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger" class="has-text-danger"
>{{ $t("Cancel my participation…") }}</b-dropdown-item >{{ $t("Cancel my participation…") }}</b-dropdown-item
> >
@ -73,6 +77,7 @@ A button to set your participation
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="confirmLeave" @click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger" class="has-text-danger"
>{{ $t("Cancel my participation request…") }}</b-dropdown-item >{{ $t("Cancel my participation request…") }}</b-dropdown-item
> >
@ -101,17 +106,21 @@ A button to set your participation
position="is-bottom-left" position="is-bottom-left"
v-else-if="!participation && currentActor.id" v-else-if="!participation && currentActor.id"
> >
<button class="button is-primary is-large" type="button" slot="trigger"> <template #trigger="{ active }">
<template> <b-button
<span>{{ $t("Participate") }}</span> type="is-primary"
size="is-large"
:icon-right="active ? 'menu-up' : 'menu-down'"
>
{{ $t("Participate") }}
</b-button>
</template> </template>
<b-icon icon="menu-down" />
</button>
<b-dropdown-item <b-dropdown-item
:value="true" :value="true"
aria-role="listitem" aria-role="listitem"
@click="joinEvent(currentActor)" @click="joinEvent(currentActor)"
@keyup.enter="joinEvent(currentActor)"
> >
<div class="media"> <div class="media">
<div class="media-left"> <div class="media-left">
@ -136,6 +145,7 @@ A button to set your participation
:value="false" :value="false"
aria-role="listitem" aria-role="listitem"
@click="joinModal" @click="joinModal"
@keyup.enter="joinModal"
v-if="identities.length > 1" v-if="identities.length > 1"
>{{ $t("with another identity…") }}</b-dropdown-item >{{ $t("with another identity…") }}</b-dropdown-item
> >

View File

@ -25,7 +25,12 @@
v-model="locale" v-model="locale"
:placeholder="$t('Select a language')" :placeholder="$t('Select a language')"
> >
<option v-for="(language, lang) in langs" :value="lang" :key="lang"> <option
v-for="(language, lang) in langs"
:value="lang"
:key="lang"
:selected="isLangSelected(lang)"
>
{{ language }} {{ language }}
</option> </option>
</b-select> </b-select>
@ -48,6 +53,9 @@
{{ $t("License") }} {{ $t("License") }}
</a> </a>
</li> </li>
<li>
<a href="#navbar">{{ $t("Back to top") }}</a>
</li>
</ul> </ul>
<div class="content has-text-centered"> <div class="content has-text-centered">
<i18n <i18n
@ -101,6 +109,10 @@ export default class Footer extends Vue {
this.locale = locale; this.locale = locale;
} }
} }
isLangSelected(lang: string): boolean {
return lang === this.locale;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -145,6 +157,13 @@ footer.footer {
color: $white; color: $white;
text-decoration: underline; text-decoration: underline;
text-decoration-color: $secondary; text-decoration-color: $secondary;
&:focus {
background-color: #000;
color: #fff;
outline: 3px solid #000;
text-decoration: none;
}
} }
::v-deep span.select { ::v-deep span.select {

View File

@ -1,5 +1,6 @@
<template> <template>
<b-navbar <b-navbar
id="navbar"
type="is-secondary" type="is-secondary"
wrapper-class="container" wrapper-class="container"
:active.sync="mobileNavbarActive" :active.sync="mobileNavbarActive"
@ -58,6 +59,7 @@
href="https://mediation.koena.net/framasoft/mobilizon/" href="https://mediation.koena.net/framasoft/mobilizon/"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
hreflang="fr"
> >
<img <img
src="/img/koena-a11y.svg" src="/img/koena-a11y.svg"
@ -75,6 +77,10 @@
v-if="currentActor.id && currentUser.isLoggedIn" v-if="currentActor.id && currentUser.isLoggedIn"
right right
collapsible collapsible
ref="user-dropdown"
tabindex="0"
tag="span"
@keyup.enter="toggleMenu"
> >
<template <template
slot="label" slot="label"
@ -109,8 +115,11 @@
v-else v-else
:active="identity.id === currentActor.id" :active="identity.id === currentActor.id"
:key="identity.id" :key="identity.id"
tabindex="0"
@click="setIdentity(identity)"
@keyup.enter="setIdentity(identity)"
> >
<span @click="setIdentity(identity)"> <span>
<div class="media-left"> <div class="media-left">
<figure class="image is-32x32" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img <img
@ -131,7 +140,7 @@
</div> </div>
</span> </span>
<hr class="navbar-divider" /> <hr class="navbar-divider" role="presentation" />
</b-navbar-item> </b-navbar-item>
<b-navbar-item <b-navbar-item
@ -146,8 +155,13 @@
>{{ $t("Administration") }}</b-navbar-item >{{ $t("Administration") }}</b-navbar-item
> >
<b-navbar-item tag="span"> <b-navbar-item
<span @click="logout">{{ $t("Log out") }}</span> tag="span"
tabindex="0"
@click="logout"
@keyup.enter="logout"
>
<span>{{ $t("Log out") }}</span>
</b-navbar-item> </b-navbar-item>
</b-navbar-dropdown> </b-navbar-dropdown>

View File

@ -71,7 +71,13 @@ import { IParticipant } from "../../types/participant.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { CONFIRM_PARTICIPATION } from "../../graphql/event"; import { CONFIRM_PARTICIPATION } from "../../graphql/event";
@Component @Component({
metaInfo() {
return {
title: this.$t("Confirm participation") as string,
};
},
})
export default class ConfirmParticipation extends Vue { export default class ConfirmParticipation extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;

View File

@ -28,6 +28,11 @@ import { IEvent } from "@/types/event.model";
}, },
}, },
}, },
metaInfo() {
return {
title: this.$t("Participation with account") as string,
};
},
}) })
export default class ParticipationWithAccount extends Vue { export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;

View File

@ -155,6 +155,11 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
}, },
config: CONFIG, config: CONFIG,
}, },
metaInfo() {
return {
title: this.$t("Participation without account") as string,
};
},
}) })
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;

View File

@ -130,6 +130,11 @@ import RouteName from "../../router/name";
}, },
config: CONFIG, config: CONFIG,
}, },
metaInfo() {
return {
title: this.$t("Unlogged participation") as string,
};
},
}) })
export default class UnloggedParticipation extends Vue { export default class UnloggedParticipation extends Vue {
@Prop({ type: String, required: true }) uuid!: string; @Prop({ type: String, required: true }) uuid!: string;

View File

@ -38,7 +38,12 @@
</span> </span>
</b-upload> </b-upload>
</b-field> </b-field>
<b-button type="is-text" v-if="imageSrc" @click="removeOrClearPicture"> <b-button
type="is-text"
v-if="imageSrc"
@click="removeOrClearPicture"
@keyup.enter="removeOrClearPicture"
>
{{ $t("Clear") }} {{ $t("Clear") }}
</b-button> </b-button>
</div> </div>

View File

@ -4,6 +4,8 @@ import Component from "vue-class-component";
import VueScrollTo from "vue-scrollto"; import VueScrollTo from "vue-scrollto";
import VueMeta from "vue-meta"; import VueMeta from "vue-meta";
import VTooltip from "v-tooltip"; import VTooltip from "v-tooltip";
import VueAnnouncer from "@vue-a11y/announcer";
import VueSkipTo from "@vue-a11y/skip-to";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import { NotifierPlugin } from "./plugins/notifier"; import { NotifierPlugin } from "./plugins/notifier";
@ -20,6 +22,8 @@ Vue.use(filters);
Vue.use(VueMeta); Vue.use(VueMeta);
Vue.use(VueScrollTo); Vue.use(VueScrollTo);
Vue.use(VTooltip); Vue.use(VTooltip);
Vue.use(VueAnnouncer);
Vue.use(VueSkipTo);
// Register the router hooks with their names // Register the router hooks with their names
Component.registerHooks([ Component.registerHooks([

View File

@ -1,5 +1,6 @@
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
export enum ActorRouteName { export enum ActorRouteName {
GROUP = "Group", GROUP = "Group",
@ -14,7 +15,10 @@ export const actorRoutes: RouteConfig[] = [
name: ActorRouteName.CREATE_GROUP, name: ActorRouteName.CREATE_GROUP,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"), import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Create group") as string },
},
}, },
{ {
path: "/@:preferredUsername", path: "/@:preferredUsername",
@ -22,13 +26,16 @@ export const actorRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"), import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/groups/me", path: "/groups/me",
name: ActorRouteName.MY_GROUPS, name: ActorRouteName.MY_GROUPS,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"), import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("My groups") as string },
},
}, },
]; ];

View File

@ -1,5 +1,6 @@
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
export enum DiscussionRouteName { export enum DiscussionRouteName {
DISCUSSION_LIST = "DISCUSSION_LIST", DISCUSSION_LIST = "DISCUSSION_LIST",
@ -16,7 +17,12 @@ export const discussionRoutes: RouteConfig[] = [
/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue" /* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Discussions list") as string,
},
},
}, },
{ {
path: "/@:preferredUsername/discussions/new", path: "/@:preferredUsername/discussions/new",
@ -26,7 +32,12 @@ export const discussionRoutes: RouteConfig[] = [
/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue" /* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Create discussion") as string,
},
},
}, },
{ {
path: "/@:preferredUsername/c/:slug/:comment_id?", path: "/@:preferredUsername/c/:slug/:comment_id?",
@ -36,6 +47,6 @@ export const discussionRoutes: RouteConfig[] = [
/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue" /* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
]; ];

View File

@ -1,5 +1,6 @@
import { RouteConfig } from "vue-router"; import { RouteConfig } from "vue-router";
import { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
export enum ErrorRouteName { export enum ErrorRouteName {
ERROR = "Error", ERROR = "Error",
@ -11,5 +12,8 @@ export const errorRoutes: RouteConfig[] = [
name: ErrorRouteName.ERROR, name: ErrorRouteName.ERROR,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Error" */ "../views/Error.vue"), import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
meta: {
announcer: { message: (): string => i18n.t("Error") as string },
},
}, },
]; ];

View File

@ -1,5 +1,6 @@
import { RouteConfig, Route } from "vue-router"; import { RouteConfig, Route } from "vue-router";
import { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
const participations = (): Promise<ImportedComponent> => const participations = (): Promise<ImportedComponent> =>
import( import(
@ -33,25 +34,34 @@ export const eventRoutes: RouteConfig[] = [
name: EventRouteName.EVENT_LIST, name: EventRouteName.EVENT_LIST,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"), import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Event list") as string },
},
}, },
{ {
path: "/events/create", path: "/events/create",
name: EventRouteName.CREATE_EVENT, name: EventRouteName.CREATE_EVENT,
component: editEvent, component: editEvent,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Create event") as string },
},
}, },
{ {
path: "/events/me", path: "/events/me",
name: EventRouteName.MY_EVENTS, name: EventRouteName.MY_EVENTS,
component: myEvents, component: myEvents,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("My events") as string },
},
}, },
{ {
path: "/events/edit/:eventId", path: "/events/edit/:eventId",
name: EventRouteName.EDIT_EVENT, name: EventRouteName.EDIT_EVENT,
component: editEvent, component: editEvent,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
props: (route: Route): Record<string, unknown> => { props: (route: Route): Record<string, unknown> => {
return { ...route.params, ...{ isUpdate: true } }; return { ...route.params, ...{ isUpdate: true } };
}, },
@ -60,7 +70,7 @@ export const eventRoutes: RouteConfig[] = [
path: "/events/duplicate/:eventId", path: "/events/duplicate/:eventId",
name: EventRouteName.DUPLICATE_EVENT, name: EventRouteName.DUPLICATE_EVENT,
component: editEvent, component: editEvent,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announce: { skip: true } },
props: (route: Route): Record<string, unknown> => ({ props: (route: Route): Record<string, unknown> => ({
...route.params, ...route.params,
...{ isDuplicate: true }, ...{ isDuplicate: true },
@ -70,7 +80,7 @@ export const eventRoutes: RouteConfig[] = [
path: "/events/:eventId/participations", path: "/events/:eventId/participations",
name: EventRouteName.PARTICIPATIONS, name: EventRouteName.PARTICIPATIONS,
component: participations, component: participations,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
props: true, props: true,
}, },
{ {
@ -78,7 +88,7 @@ export const eventRoutes: RouteConfig[] = [
name: EventRouteName.EVENT, name: EventRouteName.EVENT,
component: event, component: event,
props: true, props: true,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/events/:uuid/participate", path: "/events/:uuid/participate",
@ -86,12 +96,22 @@ export const eventRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../components/Participation/UnloggedParticipation.vue"), import("../components/Participation/UnloggedParticipation.vue"),
props: true, props: true,
meta: {
announcer: {
message: (): string => i18n.t("Unlogged participation") as string,
},
},
}, },
{ {
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: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../components/Participation/ParticipationWithAccount.vue"), import("../components/Participation/ParticipationWithAccount.vue"),
meta: {
announcer: {
message: (): string => i18n.t("Participation with account") as string,
},
},
props: true, props: true,
}, },
{ {
@ -99,6 +119,12 @@ export const eventRoutes: RouteConfig[] = [
name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT, name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../components/Participation/ParticipationWithoutAccount.vue"), import("../components/Participation/ParticipationWithoutAccount.vue"),
meta: {
announcer: {
message: (): string =>
i18n.t("Participation without account") as string,
},
},
props: true, props: true,
}, },
{ {
@ -106,6 +132,11 @@ export const eventRoutes: RouteConfig[] = [
name: EventRouteName.EVENT_PARTICIPATE_CONFIRM, name: EventRouteName.EVENT_PARTICIPATE_CONFIRM,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../components/Participation/ConfirmParticipation.vue"), import("../components/Participation/ConfirmParticipation.vue"),
meta: {
announcer: {
message: (): string => i18n.t("Confirm participation") as string,
},
},
props: true, props: true,
}, },
{ {
@ -114,6 +145,9 @@ export const eventRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Search" */ "@/views/Search.vue"), import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Tag search") as string },
},
}, },
]; ];

View File

@ -33,7 +33,7 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("@/views/Todos/TodoLists.vue"), import("@/views/Todos/TodoLists.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/todo-lists/:id", path: "/todo-lists/:id",
@ -41,7 +41,7 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("@/views/Todos/TodoList.vue"), import("@/views/Todos/TodoList.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/todo/:todoId", path: "/todo/:todoId",
@ -49,21 +49,21 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("@/views/Todos/Todo.vue"), import("@/views/Todos/Todo.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/resources", path: "/@:preferredUsername/resources",
name: GroupsRouteName.RESOURCE_FOLDER_ROOT, name: GroupsRouteName.RESOURCE_FOLDER_ROOT,
component: resourceFolder, component: resourceFolder,
props: { path: "/" }, props: { path: "/" },
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/resources/:path+", path: "/@:preferredUsername/resources/:path+",
name: GroupsRouteName.RESOURCE_FOLDER, name: GroupsRouteName.RESOURCE_FOLDER,
component: resourceFolder, component: resourceFolder,
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/settings", path: "/@:preferredUsername/settings",
@ -79,6 +79,7 @@ export const groupsRoutes: RouteConfig[] = [
name: GroupsRouteName.GROUP_PUBLIC_SETTINGS, name: GroupsRouteName.GROUP_PUBLIC_SETTINGS,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../views/Group/GroupSettings.vue"), import("../views/Group/GroupSettings.vue"),
meta: { announcer: { skip: true } },
}, },
{ {
path: "members", path: "members",
@ -86,6 +87,7 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../views/Group/GroupMembers.vue"), import("../views/Group/GroupMembers.vue"),
props: true, props: true,
meta: { announcer: { skip: true } },
}, },
{ {
path: "followers", path: "followers",
@ -93,6 +95,7 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("../views/Group/GroupFollowers.vue"), import("../views/Group/GroupFollowers.vue"),
props: true, props: true,
meta: { announcer: { skip: true } },
}, },
], ],
}, },
@ -102,7 +105,7 @@ export const groupsRoutes: RouteConfig[] = [
import("@/views/Posts/Edit.vue"), import("@/views/Posts/Edit.vue"),
props: true, props: true,
name: GroupsRouteName.POST_CREATE, name: GroupsRouteName.POST_CREATE,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/p/:slug/edit", path: "/p/:slug/edit",
@ -113,7 +116,7 @@ export const groupsRoutes: RouteConfig[] = [
...{ isUpdate: true }, ...{ isUpdate: true },
}), }),
name: GroupsRouteName.POST_EDIT, name: GroupsRouteName.POST_EDIT,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/p/:slug", path: "/p/:slug",
@ -121,7 +124,7 @@ export const groupsRoutes: RouteConfig[] = [
import("@/views/Posts/Post.vue"), import("@/views/Posts/Post.vue"),
props: true, props: true,
name: GroupsRouteName.POST, name: GroupsRouteName.POST,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/p", path: "/@:preferredUsername/p",
@ -129,14 +132,14 @@ export const groupsRoutes: RouteConfig[] = [
import("@/views/Posts/List.vue"), import("@/views/Posts/List.vue"),
props: true, props: true,
name: GroupsRouteName.POSTS, name: GroupsRouteName.POSTS,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/events", path: "/@:preferredUsername/events",
component: groupEvents, component: groupEvents,
props: true, props: true,
name: GroupsRouteName.GROUP_EVENTS, name: GroupsRouteName.GROUP_EVENTS,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/join", path: "/@:preferredUsername/join",
@ -144,7 +147,7 @@ export const groupsRoutes: RouteConfig[] = [
import("@/components/Group/JoinGroupWithAccount.vue"), import("@/components/Group/JoinGroupWithAccount.vue"),
props: true, props: true,
name: GroupsRouteName.GROUP_JOIN, name: GroupsRouteName.GROUP_JOIN,
meta: { requiredAuth: false }, meta: { requiredAuth: false, announcer: { skip: true } },
}, },
{ {
path: "/@:preferredUsername/timeline", path: "/@:preferredUsername/timeline",
@ -152,6 +155,6 @@ export const groupsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import("@/views/Group/Timeline.vue"), import("@/views/Group/Timeline.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
]; ];

View File

@ -13,6 +13,7 @@ import { groupsRoutes } from "./groups";
import { discussionRoutes } from "./discussion"; import { discussionRoutes } from "./discussion";
import { userRoutes } from "./user"; import { userRoutes } from "./user";
import RouteName from "./name"; import RouteName from "./name";
import { i18n } from "@/utils/i18n";
Vue.use(Router); Vue.use(Router);
@ -49,13 +50,19 @@ export const routes = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Search" */ "@/views/Search.vue"), import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Search") as string },
},
}, },
{ {
path: "/", path: "/",
name: RouteName.HOME, name: RouteName.HOME,
component: Home, component: Home,
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Homepage") as string },
},
}, },
{ {
path: "/about", path: "/about",
@ -72,27 +79,41 @@ export const routes = [
import( import(
/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue" /* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
), ),
meta: {
announcer: {
message: (): string => i18n.t("About instance") as string,
},
},
}, },
{ {
path: "/terms", path: "/terms",
name: RouteName.TERMS, name: RouteName.TERMS,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"), import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Terms") as string },
},
}, },
{ {
path: "/privacy", path: "/privacy",
name: RouteName.PRIVACY, name: RouteName.PRIVACY,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"), import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Privacy") as string },
},
}, },
{ {
path: "/rules", path: "/rules",
name: RouteName.RULES, name: RouteName.RULES,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"), import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Rules") as string },
},
}, },
{ {
path: "/glossary", path: "/glossary",
@ -101,7 +122,10 @@ export const routes = [
import( import(
/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue" /* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
), ),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Glossary") as string },
},
}, },
], ],
}, },
@ -110,7 +134,10 @@ export const routes = [
name: RouteName.INTERACT, name: RouteName.INTERACT,
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "interact" */ "@/views/Interact.vue"), import(/* webpackChunkName: "interact" */ "@/views/Interact.vue"),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Interact") as string },
},
}, },
{ {
path: "/auth/:provider/callback", path: "/auth/:provider/callback",
@ -119,6 +146,11 @@ export const routes = [
import( import(
/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue" /* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
), ),
meta: {
announcer: {
message: (): string => i18n.t("Redirecting to Mobilizon") as string,
},
},
}, },
{ {
path: "/welcome/:step?", path: "/welcome/:step?",
@ -127,7 +159,10 @@ export const routes = [
import( import(
/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue" /* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
), ),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("First steps") as string },
},
props: (route: Route): Record<string, unknown> => { props: (route: Route): Record<string, unknown> => {
const step = Number.parseInt(route.params.step, 10); const step = Number.parseInt(route.params.step, 10);
if (Number.isNaN(step)) { if (Number.isNaN(step)) {
@ -143,7 +178,10 @@ export const routes = [
import( import(
/* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue" /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
), ),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Page not found") as string },
},
}, },
{ {
path: "*", path: "*",

View File

@ -1,5 +1,6 @@
import { Route, RouteConfig } from "vue-router"; import { Route, RouteConfig } from "vue-router";
import { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
export enum SettingsRouteName { export enum SettingsRouteName {
SETTINGS = "SETTINGS", SETTINGS = "SETTINGS",
@ -34,7 +35,7 @@ export const settingsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"), import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS }, redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
name: SettingsRouteName.SETTINGS, name: SettingsRouteName.SETTINGS,
children: [ children: [
@ -42,7 +43,10 @@ export const settingsRoutes: RouteConfig[] = [
path: "account", path: "account",
name: SettingsRouteName.ACCOUNT_SETTINGS, name: SettingsRouteName.ACCOUNT_SETTINGS,
redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL }, redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL },
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { skip: true },
},
}, },
{ {
path: "account/general", path: "account/general",
@ -52,7 +56,12 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue" /* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Account settings") as string,
},
},
}, },
{ {
path: "preferences", path: "preferences",
@ -62,7 +71,10 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue" /* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Preferences") as string },
},
}, },
{ {
path: "notifications", path: "notifications",
@ -72,13 +84,18 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue" /* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Notifications") as string,
},
},
}, },
{ {
path: "admin", path: "admin",
name: SettingsRouteName.ADMIN, name: SettingsRouteName.ADMIN,
redirect: { name: SettingsRouteName.ADMIN_DASHBOARD }, redirect: { name: SettingsRouteName.ADMIN_DASHBOARD },
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "admin/dashboard", path: "admin/dashboard",
@ -87,7 +104,12 @@ export const settingsRoutes: RouteConfig[] = [
import( import(
/* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue" /* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"
), ),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Admin dashboard") as string,
},
},
}, },
{ {
path: "admin/settings", path: "admin/settings",
@ -97,7 +119,12 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue" /* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Admin settings") as string,
},
},
}, },
{ {
path: "admin/users", path: "admin/users",
@ -105,7 +132,10 @@ export const settingsRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"), import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Users") as string },
},
}, },
{ {
path: "admin/users/:id", path: "admin/users/:id",
@ -115,7 +145,10 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue" /* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { skip: true },
},
}, },
{ {
path: "admin/profiles", path: "admin/profiles",
@ -125,7 +158,10 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue" /* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Profiles") as string },
},
}, },
{ {
path: "admin/profiles/:id", path: "admin/profiles/:id",
@ -135,7 +171,7 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue" /* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "admin/groups", path: "admin/groups",
@ -145,7 +181,12 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue" /* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Group profiles") as string,
},
},
}, },
{ {
path: "admin/groups/:id", path: "admin/groups/:id",
@ -155,7 +196,7 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue" /* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "admin/relays", path: "admin/relays",
@ -163,7 +204,7 @@ export const settingsRoutes: RouteConfig[] = [
redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS }, redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS },
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"), import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
children: [ children: [
{ {
path: "followings", path: "followings",
@ -172,7 +213,12 @@ export const settingsRoutes: RouteConfig[] = [
import( import(
/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue" /* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"
), ),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Followings") as string,
},
},
}, },
{ {
path: "followers", path: "followers",
@ -181,7 +227,12 @@ export const settingsRoutes: RouteConfig[] = [
import( import(
/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue" /* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"
), ),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Followers") as string,
},
},
}, },
], ],
props: true, props: true,
@ -190,7 +241,7 @@ export const settingsRoutes: RouteConfig[] = [
path: "/moderation", path: "/moderation",
name: SettingsRouteName.MODERATION, name: SettingsRouteName.MODERATION,
redirect: { name: SettingsRouteName.REPORTS }, redirect: { name: SettingsRouteName.REPORTS },
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/moderation/reports/:filter?", path: "/moderation/reports/:filter?",
@ -200,7 +251,12 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue" /* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Reports list") as string,
},
},
}, },
{ {
path: "/moderation/report/:reportId", path: "/moderation/report/:reportId",
@ -210,7 +266,10 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue" /* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: { message: (): string => i18n.t("Report") as string },
},
}, },
{ {
path: "/moderation/logs", path: "/moderation/logs",
@ -220,13 +279,18 @@ export const settingsRoutes: RouteConfig[] = [
/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue" /* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"
), ),
props: true, props: true,
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Moderation logs") as string,
},
},
}, },
{ {
path: "/identity", path: "/identity",
name: SettingsRouteName.IDENTITIES, name: SettingsRouteName.IDENTITIES,
redirect: { name: SettingsRouteName.UPDATE_IDENTITY }, redirect: { name: SettingsRouteName.UPDATE_IDENTITY },
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
{ {
path: "/identity/create", path: "/identity/create",
@ -239,7 +303,12 @@ export const settingsRoutes: RouteConfig[] = [
identityName: route.params.identityName, identityName: route.params.identityName,
isUpdate: false, isUpdate: false,
}), }),
meta: { requiredAuth: true }, meta: {
requiredAuth: true,
announcer: {
message: (): string => i18n.t("Create identity") as string,
},
},
}, },
{ {
path: "/identity/update/:identityName?", path: "/identity/update/:identityName?",
@ -252,7 +321,7 @@ export const settingsRoutes: RouteConfig[] = [
identityName: route.params.identityName, identityName: route.params.identityName,
isUpdate: true, isUpdate: true,
}), }),
meta: { requiredAuth: true }, meta: { requiredAuth: true, announcer: { skip: true } },
}, },
], ],
}, },

View File

@ -1,6 +1,7 @@
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 { ImportedComponent } from "vue/types/options"; import { ImportedComponent } from "vue/types/options";
import { i18n } from "@/utils/i18n";
export enum UserRouteName { export enum UserRouteName {
REGISTER = "Register", REGISTER = "Register",
@ -22,7 +23,10 @@ export const userRoutes: RouteConfig[] = [
/* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue" /* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"
), ),
props: true, props: true,
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Register") as string },
},
beforeEnter: beforeRegisterGuard, beforeEnter: beforeRegisterGuard,
}, },
{ {
@ -37,7 +41,10 @@ export const userRoutes: RouteConfig[] = [
email: route.params.email, email: route.params.email,
userAlreadyActivated: route.params.userAlreadyActivated === "true", userAlreadyActivated: route.params.userAlreadyActivated === "true",
}), }),
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Register") as string },
},
}, },
{ {
path: "/resend-instructions", path: "/resend-instructions",
@ -47,7 +54,12 @@ export const userRoutes: RouteConfig[] = [
/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue" /* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
), ),
props: true, props: true,
meta: { requiresAuth: false }, meta: {
requiresAuth: false,
announcer: {
message: (): string => i18n.t("Resent confirmation email") as string,
},
},
}, },
{ {
path: "/password-reset/send", path: "/password-reset/send",
@ -57,7 +69,12 @@ export const userRoutes: RouteConfig[] = [
/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue" /* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
), ),
props: true, props: true,
meta: { requiresAuth: false }, meta: {
requiresAuth: false,
announcer: {
message: (): string => i18n.t("Send password reset") as string,
},
},
}, },
{ {
path: "/password-reset/:token", path: "/password-reset/:token",
@ -66,7 +83,10 @@ export const userRoutes: RouteConfig[] = [
import( import(
/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue" /* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
), ),
meta: { requiresAuth: false }, meta: {
requiresAuth: false,
announcer: { message: (): string => i18n.t("Password reset") as string },
},
props: true, props: true,
}, },
{ {
@ -77,7 +97,10 @@ export const userRoutes: RouteConfig[] = [
/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue" /* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"
), ),
props: true, props: true,
meta: { requiresAuth: false }, meta: {
requiresAuth: false,
announcer: { message: (): string => i18n.t("Email validate") as string },
},
}, },
{ {
path: "/validate/:token", path: "/validate/:token",
@ -85,7 +108,12 @@ export const userRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"), import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
props: true, props: true,
meta: { requiresAuth: false }, meta: {
requiresAuth: false,
announcer: {
message: (): string => i18n.t("Validating account") as string,
},
},
}, },
{ {
path: "/login", path: "/login",
@ -93,6 +121,9 @@ export const userRoutes: RouteConfig[] = [
component: (): Promise<ImportedComponent> => component: (): Promise<ImportedComponent> =>
import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"), import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
props: true, props: true,
meta: { requiredAuth: false }, meta: {
requiredAuth: false,
announcer: { message: (): string => i18n.t("Login") as string },
},
}, },
]; ];

View File

@ -82,7 +82,7 @@ export interface IEvent {
onlineAddress?: string; onlineAddress?: string;
phoneAddress?: string; phoneAddress?: string;
physicalAddress?: IAddress; physicalAddress: IAddress | null;
tags: ITag[]; tags: ITag[];
options: IEventOptions; options: IEventOptions;
@ -115,7 +115,7 @@ export class EventModel implements IEvent {
phoneAddress: string | undefined = ""; phoneAddress: string | undefined = "";
physicalAddress?: IAddress; physicalAddress: IAddress | null = null;
picture: IMedia | null = null; picture: IMedia | null = null;
@ -192,7 +192,7 @@ export class EventModel implements IEvent {
this.phoneAddress = hash.phoneAddress; this.phoneAddress = hash.phoneAddress;
this.physicalAddress = hash.physicalAddress this.physicalAddress = hash.physicalAddress
? new Address(hash.physicalAddress) ? new Address(hash.physicalAddress)
: undefined; : null;
this.participantStats = hash.participantStats; this.participantStats = hash.participantStats;
this.contacts = hash.contacts; this.contacts = hash.contacts;

View File

@ -1,28 +1,6 @@
<template> <template>
<div> <div>
<div class="hero intro is-small is-primary"> <section class="container">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ $t("About Mobilizon") }}</h1>
<p>
{{
$t(
"A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
)
}}
</p>
<b-button
icon-left="open-in-new"
size="is-large"
type="is-secondary"
tag="a"
href="https://joinmobilizon.org"
>{{ $t("Learn more") }}</b-button
>
</div>
</div>
</div>
<main class="container">
<div class="columns"> <div class="columns">
<div class="column is-one-quarter-desktop"> <div class="column is-one-quarter-desktop">
<aside class="menu"> <aside class="menu">
@ -62,8 +40,29 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
</main> </section>
<div class="hero intro is-small is-secondary">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ $t("Powered by Mobilizon") }}</h1>
<p>
{{
$t(
"A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
)
}}
</p>
<b-button
icon-left="open-in-new"
size="is-large"
type="is-primary"
tag="a"
href="https://joinmobilizon.org"
>{{ $t("Learn more") }}</b-button
>
</div>
</div>
</div>
<div <div
class="hero register is-primary is-medium" class="hero register is-primary is-medium"
v-if="!currentUser || !currentUser.id" v-if="!currentUser || !currentUser.id"

View File

@ -3,7 +3,7 @@
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<h2 class="title">{{ config.name }}</h2> <h1 class="title">{{ config.name }}</h1>
<p>{{ config.description }}</p> <p>{{ config.description }}</p>
</div> </div>
</div> </div>
@ -24,7 +24,7 @@
</i18n> </i18n>
</div> </div>
<div class="column contact"> <div class="column contact">
<h4>{{ $t("Contact") }}</h4> <p class="has-text-weight-bold">{{ $t("Contact") }}</p>
<instance-contact-link <instance-contact-link
v-if="config && config.contact" v-if="config && config.contact"
:contact="config.contact" :contact="config.contact"
@ -32,13 +32,13 @@
<p v-else>{{ $t("No information") }}</p> <p v-else>{{ $t("No information") }}</p>
</div> </div>
</section> </section>
<hr /> <hr role="presentation" />
<section class="long-description content"> <section class="long-description content">
<div v-html="config.longDescription" /> <div v-html="config.longDescription" />
</section> </section>
<hr /> <hr role="presentation" />
<section class="config"> <section class="config">
<h3 class="subtitle">{{ $t("Instance configuration") }}</h3> <h2 class="subtitle">{{ $t("Instance configuration") }}</h2>
<table class="table is-fullwidth"> <table class="table is-fullwidth">
<tr> <tr>
<td>{{ $t("Instance languages") }}</td> <td>{{ $t("Instance languages") }}</td>
@ -168,7 +168,7 @@ section {
} }
&.hero { &.hero {
h2.title { h1.title {
margin: auto; margin: auto;
} }
} }
@ -195,7 +195,7 @@ section {
} }
} }
.contact { .contact {
h4 { h3 {
font-weight: bold; font-weight: bold;
} }
p { p {

View File

@ -307,6 +307,14 @@ const MEMBERSHIPS_PER_PAGE = 10;
ActorCard, ActorCard,
EmptyContent, EmptyContent,
}, },
metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { person } = this;
return {
title: person ? person.name || usernameWithDomain(person) : "",
};
},
}) })
export default class AdminProfile extends Vue { export default class AdminProfile extends Vue {
@Prop({ required: true }) id!: string; @Prop({ required: true }) id!: string;

View File

@ -96,6 +96,14 @@ import { IPerson } from "../../types/actor";
}, },
}, },
}, },
metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { user } = this;
return {
title: user.email,
};
},
}) })
export default class AdminUserProfile extends Vue { export default class AdminUserProfile extends Vue {
@Prop({ required: true }) id!: string; @Prop({ required: true }) id!: string;

View File

@ -87,6 +87,11 @@ import RouteName from "../../router/name";
}, },
}, },
}, },
metaInfo() {
return {
title: this.$t("Follows") as string,
};
},
}) })
export default class Follows extends Vue { export default class Follows extends Vue {
RouteName = RouteName; RouteName = RouteName;

View File

@ -55,7 +55,7 @@
</b-field> </b-field>
<b-field :label="$t('Text')"> <b-field :label="$t('Text')">
<editor v-model="discussion.text" /> <editor v-model="discussion.text" :aria-label="$t('Comment body')" />
</b-field> </b-field>
<button class="button is-primary" type="submit"> <button class="button is-primary" type="submit">

View File

@ -125,7 +125,7 @@
> >
<form @submit.prevent="reply" v-if="!error"> <form @submit.prevent="reply" v-if="!error">
<b-field :label="$t('Text')"> <b-field :label="$t('Text')">
<editor v-model="newComment" /> <editor v-model="newComment" :aria-label="$t('Comment body')" />
</b-field> </b-field>
<b-button <b-button
native-type="submit" native-type="submit"

View File

@ -84,7 +84,10 @@
<div class="field"> <div class="field">
<label class="label">{{ $t("Description") }}</label> <label class="label">{{ $t("Description") }}</label>
<editor v-model="event.description" /> <editor
v-model="event.description"
:aria-label="$t('Event description body')"
/>
</div> </div>
<b-field :label="$t('Website / URL')" label-for="website-url"> <b-field :label="$t('Website / URL')" label-for="website-url">

View File

@ -245,12 +245,14 @@
aria-role="listitem" aria-role="listitem"
v-if="canManageEvent || event.draft" v-if="canManageEvent || event.draft"
@click="openDeleteEventModalWrapper" @click="openDeleteEventModalWrapper"
@keyup.enter="openDeleteEventModalWrapper"
> >
{{ $t("Delete") }} {{ $t("Delete") }}
<b-icon icon="delete" /> <b-icon icon="delete" />
</b-dropdown-item> </b-dropdown-item>
<hr <hr
role="presentation"
class="dropdown-divider" class="dropdown-divider"
aria-role="menuitem" aria-role="menuitem"
v-if="canManageEvent || event.draft" v-if="canManageEvent || event.draft"
@ -259,6 +261,7 @@
aria-role="listitem" aria-role="listitem"
v-if="!event.draft" v-if="!event.draft"
@click="triggerShare()" @click="triggerShare()"
@keyup.enter="triggerShare()"
> >
<span> <span>
{{ $t("Share this event") }} {{ $t("Share this event") }}
@ -268,6 +271,7 @@
<b-dropdown-item <b-dropdown-item
aria-role="listitem" aria-role="listitem"
@click="downloadIcsEvent()" @click="downloadIcsEvent()"
@keyup.enter="downloadIcsEvent()"
v-if="!event.draft" v-if="!event.draft"
> >
<span> <span>
@ -279,6 +283,7 @@
aria-role="listitem" aria-role="listitem"
v-if="ableToReport" v-if="ableToReport"
@click="isReportModalActive = true" @click="isReportModalActive = true"
@keyup.enter="isReportModalActive = true"
> >
<span> <span>
{{ $t("Report") }} {{ $t("Report") }}
@ -379,6 +384,7 @@
class="button" class="button"
ref="cancelButton" ref="cancelButton"
@click="isJoinModalActive = false" @click="isJoinModalActive = false"
@keyup.enter="isJoinModalActive = false"
> >
{{ $t("Cancel") }} {{ $t("Cancel") }}
</button> </button>
@ -390,6 +396,11 @@
? joinEventWithConfirmation(identity) ? joinEventWithConfirmation(identity)
: joinEvent(identity) : joinEvent(identity)
" "
@keyup.enter="
event.joinOptions === EventJoinOptions.RESTRICTED
? joinEventWithConfirmation(identity)
: joinEvent(identity)
"
> >
{{ $t("Confirm my particpation") }} {{ $t("Confirm my particpation") }}
</button> </button>
@ -436,6 +447,7 @@
class="button" class="button"
ref="cancelButton" ref="cancelButton"
@click="isJoinConfirmationModalActive = false" @click="isJoinConfirmationModalActive = false"
@keyup.enter="isJoinConfirmationModalActive = false"
>{{ $t("Cancel") }} >{{ $t("Cancel") }}
</b-button> </b-button>
<b-button type="is-primary" native-type="submit"> <b-button type="is-primary" native-type="submit">

View File

@ -62,13 +62,17 @@
</template> </template>
<b-dropdown-item <b-dropdown-item
has-link
v-for="format in exportFormats" v-for="format in exportFormats"
:key="format" :key="format"
@click="exportParticipants(format)"
aria-role="listitem" aria-role="listitem"
@click="exportParticipants(format)"
@keyup.enter="exportParticipants(format)"
> >
<button class="dropdown-button">
<b-icon :icon="formatToIcon(format)"></b-icon> <b-icon :icon="formatToIcon(format)"></b-icon>
{{ format }} {{ format }}
</button>
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
</div> </div>
@ -566,4 +570,21 @@ nav.breadcrumb {
text-decoration: none; text-decoration: none;
} }
} }
button.dropdown-button {
&:hover {
background-color: #f5f5f5;
color: #0a0a0a;
}
width: 100%;
display: flex;
flex: 1;
background: white;
border: none;
cursor: pointer;
color: #4a4a4a;
font-size: 0.875rem;
line-height: 1.5;
padding: 0.375rem 1rem;
}
</style> </style>

View File

@ -203,6 +203,7 @@
</span> </span>
</b-dropdown-item> </b-dropdown-item>
<hr <hr
role="presentation"
class="dropdown-divider" class="dropdown-divider"
v-if="isCurrentActorAGroupMember" v-if="isCurrentActorAGroupMember"
/> />
@ -224,7 +225,7 @@
{{ $t("ICS/WebCal Feed") }} {{ $t("ICS/WebCal Feed") }}
</a> </a>
</b-dropdown-item> </b-dropdown-item>
<hr class="dropdown-divider" /> <hr role="presentation" class="dropdown-divider" />
<b-dropdown-item <b-dropdown-item
v-if="ableToReport" v-if="ableToReport"
aria-role="menuitem" aria-role="menuitem"

View File

@ -41,7 +41,11 @@
<b-input v-model="editableGroup.name" id="group-settings-name" /> <b-input v-model="editableGroup.name" id="group-settings-name" />
</b-field> </b-field>
<b-field :label="$t('Group short description')"> <b-field :label="$t('Group short description')">
<editor mode="basic" v-model="editableGroup.summary" :maxSize="500" <editor
mode="basic"
v-model="editableGroup.summary"
:maxSize="500"
:aria-label="$t('Group description body')"
/></b-field> /></b-field>
<b-field :label="$t('Avatar')"> <b-field :label="$t('Avatar')">
<picture-upload <picture-upload

View File

@ -39,6 +39,11 @@ import SettingMenuItem from "../../components/Settings/SettingMenuItem.vue";
@Component({ @Component({
components: { SettingMenuSection, SettingMenuItem }, components: { SettingMenuSection, SettingMenuItem },
metaInfo() {
return {
title: this.$t("Group settings") as string,
};
},
}) })
export default class Settings extends mixins(GroupMixin) { export default class Settings extends mixins(GroupMixin) {
RouteName = RouteName; RouteName = RouteName;

View File

@ -241,6 +241,7 @@
</span> </span>
</section> </section>
<hr <hr
role="presentation"
class="home-separator" class="home-separator"
v-if="canShowMyUpcomingEvents && canShowLastWeekEvents" v-if="canShowMyUpcomingEvents && canShowLastWeekEvents"
/> />
@ -259,6 +260,7 @@
</div> </div>
</section> </section>
<hr <hr
role="presentation"
class="home-separator" class="home-separator"
v-if="canShowLastWeekEvents && canShowCloseEvents" v-if="canShowLastWeekEvents && canShowCloseEvents"
/> />
@ -297,6 +299,7 @@
</div> </div>
</section> </section>
<hr <hr
role="presentation"
class="home-separator" class="home-separator"
v-if=" v-if="
canShowMyUpcomingEvents || canShowLastWeekEvents || canShowCloseEvents canShowMyUpcomingEvents || canShowLastWeekEvents || canShowCloseEvents

View File

@ -395,6 +395,11 @@ import { Paginate } from "@/types/paginate";
}, },
}, },
}, },
metaInfo() {
return {
title: this.$t("Moderation logs") as string,
};
},
}) })
export default class ReportList extends Vue { export default class ReportList extends Vue {
actionLogs?: Paginate<IActionLog> = { total: 0, elements: [] }; actionLogs?: Paginate<IActionLog> = { total: 0, elements: [] };

View File

@ -111,6 +111,11 @@ const REPORT_PAGE_LIMIT = 10;
pollInterval: 120000, // 2 minutes pollInterval: 120000, // 2 minutes
}, },
}, },
metaInfo() {
return {
title: this.$t("Reports") as string,
};
},
}) })
export default class ReportList extends Vue { export default class ReportList extends Vue {
reports?: Paginate<IReport> = { elements: [], total: 0 }; reports?: Paginate<IReport> = { elements: [], total: 0 };

View File

@ -72,7 +72,7 @@
<div class="field"> <div class="field">
<label class="label">{{ $t("Post") }}</label> <label class="label">{{ $t("Post") }}</label>
<p v-if="errors.body" class="help is-danger">{{ errors.body }}</p> <p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
<editor v-model="editablePost.body" /> <editor v-model="editablePost.body" :aria-label="$t('Post body')" />
</div> </div>
<subtitle>{{ $t("Who can view this post") }}</subtitle> <subtitle>{{ $t("Who can view this post") }}</subtitle>
<fieldset> <fieldset>

View File

@ -127,11 +127,13 @@ const POSTS_PAGE_LIMIT = 10;
PostElementItem, PostElementItem,
}, },
metaInfo() { metaInfo() {
return {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
title: this.$t("My groups") as string, const { group } = this;
titleTemplate: "%s | Mobilizon", return {
title: this.$t("{group} posts", {
group: group.name || usernameWithDomain(group),
}) as string,
}; };
}, },
}) })

View File

@ -58,6 +58,7 @@
{{ $t("New link") }} {{ $t("New link") }}
</b-dropdown-item> </b-dropdown-item>
<hr <hr
role="presentation"
class="dropdown-divider" class="dropdown-divider"
v-if="config.resourceProviders.length" v-if="config.resourceProviders.length"
/> />

View File

@ -18,12 +18,16 @@
<div class="setting-title"> <div class="setting-title">
<h2>{{ $t("Browser notifications") }}</h2> <h2>{{ $t("Browser notifications") }}</h2>
</div> </div>
<b-button v-if="subscribed" @click="unsubscribeToWebPush()">{{ <b-button
$t("Unsubscribe to browser push notifications") v-if="subscribed"
}}</b-button> @click="unsubscribeToWebPush()"
@keyup.enter="unsubscribeToWebPush()"
>{{ $t("Unsubscribe to browser push notifications") }}</b-button
>
<b-button <b-button
icon-left="rss" icon-left="rss"
@click="subscribeToWebPush" @click="subscribeToWebPush"
@keyup.enter="subscribeToWebPush"
v-else-if="canShowWebPush && webPushEnabled" v-else-if="canShowWebPush && webPushEnabled"
>{{ $t("Activate browser push notifications") }}</b-button >{{ $t("Activate browser push notifications") }}</b-button
> >
@ -247,6 +251,9 @@
@click=" @click="
(e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom') (e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
" "
@keyup.enter="
(e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
"
:href="tokenToURL(feedToken.token, 'atom')" :href="tokenToURL(feedToken.token, 'atom')"
target="_blank" target="_blank"
>{{ $t("RSS/Atom Feed") }}</b-button >{{ $t("RSS/Atom Feed") }}</b-button
@ -264,6 +271,9 @@
@click=" @click="
(e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics') (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
" "
@keyup.enter="
(e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
"
icon-left="calendar-sync" icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')" :href="tokenToURL(feedToken.token, 'ics')"
target="_blank" target="_blank"
@ -274,6 +284,7 @@
icon-left="refresh" icon-left="refresh"
type="is-text" type="is-text"
@click="openRegenerateFeedTokensConfirmation" @click="openRegenerateFeedTokensConfirmation"
@keyup.enter="openRegenerateFeedTokensConfirmation"
>{{ $t("Regenerate new links") }}</b-button >{{ $t("Regenerate new links") }}</b-button
> >
</div> </div>
@ -283,6 +294,7 @@
icon-left="refresh" icon-left="refresh"
type="is-text" type="is-text"
@click="generateFeedTokens" @click="generateFeedTokens"
@keyup.enter="generateFeedTokens"
>{{ $t("Create new links") }}</b-button >{{ $t("Create new links") }}</b-button
> >
</div> </div>
@ -333,7 +345,7 @@ type NotificationType = { label: string; subtypes: NotificationSubType[] };
}, },
metaInfo() { metaInfo() {
return { return {
title: this.$t("Notifications") as string, title: this.$t("Notification settings") as string,
}; };
}, },
}) })

View File

@ -61,7 +61,7 @@
<b-message v-else type="is-danger">{{ <b-message v-else type="is-danger">{{
$t("Unable to detect timezone.") $t("Unable to detect timezone.")
}}</b-message> }}</b-message>
<hr /> <hr role="presentation" />
<b-field grouped> <b-field grouped>
<b-field <b-field
:label="$t('City or region')" :label="$t('City or region')"
@ -95,6 +95,7 @@
<b-button <b-button
:disabled="address == undefined" :disabled="address == undefined"
@click="resetArea" @click="resetArea"
@keyup.enter="resetArea"
class="reset-area" class="reset-area"
icon-left="close" icon-left="close"
:aria-label="$t('Reset')" :aria-label="$t('Reset')"

View File

@ -55,6 +55,14 @@ import RouteName from "../../router/name";
}, },
}, },
}, },
metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { todo } = this;
return {
title: todo.title,
};
},
}) })
export default class Todo extends Vue { export default class Todo extends Vue {
@Prop({ type: String, required: true }) todoId!: string; @Prop({ type: String, required: true }) todoId!: string;

View File

@ -69,6 +69,14 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
}, },
currentActor: CURRENT_ACTOR_CLIENT, currentActor: CURRENT_ACTOR_CLIENT,
}, },
metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { todoList } = this;
return {
title: todoList.title,
};
},
}) })
export default class TodoList extends Vue { export default class TodoList extends Vue {
@Prop({ type: String, required: true }) id!: string; @Prop({ type: String, required: true }) id!: string;

View File

@ -82,6 +82,16 @@ import RouteName from "../../router/name";
components: { components: {
CompactTodo, CompactTodo,
}, },
metaInfo() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { group } = this;
return {
title: this.$t("{group}'s todolists", {
group: group.name || usernameWithDomain(group),
}) as string,
};
},
}) })
export default class TodoLists extends Vue { export default class TodoLists extends Vue {
@Prop({ type: String, required: true }) preferredUsername!: string; @Prop({ type: String, required: true }) preferredUsername!: string;

View File

@ -24,7 +24,13 @@ import { VALIDATE_EMAIL } from "../../graphql/user";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { ICurrentUser } from "../../types/current-user.model"; import { ICurrentUser } from "../../types/current-user.model";
@Component @Component({
metaInfo() {
return {
title: this.$t("Validating email") as string,
};
},
})
export default class Validate extends Vue { export default class Validate extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;

View File

@ -50,7 +50,13 @@ import { saveUserData } from "../../utils/auth";
import { ILogin } from "../../types/login.model"; import { ILogin } from "../../types/login.model";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
@Component @Component({
metaInfo() {
return {
title: this.$t("Password reset") as string,
};
},
})
export default class PasswordReset extends Vue { export default class PasswordReset extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;

View File

@ -9,7 +9,13 @@ import RouteName from "../../router/name";
import { saveUserData, changeIdentity } from "../../utils/auth"; import { saveUserData, changeIdentity } from "../../utils/auth";
import { IUser } from "../../types/current-user.model"; import { IUser } from "../../types/current-user.model";
@Component @Component({
metaInfo() {
return {
title: this.$t("Redirecting to Mobilizon") as string,
};
},
})
export default class ProviderValidate extends Vue { export default class ProviderValidate extends Vue {
async mounted(): Promise<void> { async mounted(): Promise<void> {
const accessToken = this.getValueFromMeta("auth-access-token"); const accessToken = this.getValueFromMeta("auth-access-token");

View File

@ -59,7 +59,7 @@
<router-link class="out" :to="{ name: RouteName.ABOUT }">{{ <router-link class="out" :to="{ name: RouteName.ABOUT }">{{
$t("Learn more") $t("Learn more")
}}</router-link> }}</router-link>
<hr /> <hr role="presentation" />
<div class="content"> <div class="content">
<subtitle>{{ <subtitle>{{
$t("About {instance}", { instance: config.name }) $t("About {instance}", { instance: config.name })
@ -170,7 +170,7 @@
> >
</p> </p>
<hr /> <hr role="presentation" />
<div <div
class="control" class="control"
v-if="config && config.auth.oauthProviders.length > 0" v-if="config && config.auth.oauthProviders.length > 0"

View File

@ -56,7 +56,13 @@ import {
import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth"; import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
@Component @Component({
metaInfo() {
return {
title: this.$t("Resend confirmation email") as string,
};
},
})
export default class ResendConfirmation extends Vue { export default class ResendConfirmation extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string; @Prop({ type: String, required: false, default: "" }) email!: string;

View File

@ -71,7 +71,13 @@ import {
import { SEND_RESET_PASSWORD } from "../../graphql/auth"; import { SEND_RESET_PASSWORD } from "../../graphql/auth";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
@Component @Component({
metaInfo() {
return {
title: this.$t("Reset password") as string,
};
},
})
export default class SendPasswordReset extends Vue { export default class SendPasswordReset extends Vue {
@Prop({ type: String, required: false, default: "" }) email!: string; @Prop({ type: String, required: false, default: "" }) email!: string;

View File

@ -66,6 +66,11 @@ import { IConfig } from "../../types/config.model";
apollo: { apollo: {
config: TIMEZONES, config: TIMEZONES,
}, },
metaInfo() {
return {
title: this.$t("First steps") as string,
};
},
}) })
export default class SettingsOnboard extends Vue { export default class SettingsOnboard extends Vue {
@Prop({ required: false, default: 1, type: Number }) step!: number; @Prop({ required: false, default: 1, type: Number }) step!: number;

View File

@ -29,7 +29,13 @@ import RouteName from "../../router/name";
import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth"; import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth";
import { ILogin } from "../../types/login.model"; import { ILogin } from "../../types/login.model";
@Component @Component({
metaInfo() {
return {
title: this.$t("Validating account") as string,
};
},
})
export default class Validate extends Vue { export default class Validate extends Vue {
@Prop({ type: String, required: true }) token!: string; @Prop({ type: String, required: true }) token!: string;

View File

@ -2254,6 +2254,16 @@
"@typescript-eslint/types" "4.33.0" "@typescript-eslint/types" "4.33.0"
eslint-visitor-keys "^2.0.0" eslint-visitor-keys "^2.0.0"
"@vue-a11y/announcer@^2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@vue-a11y/announcer/-/announcer-2.1.0.tgz#ed725e90b91870c76285840e0aaa637cfafbf27f"
integrity sha512-7V1osiJQxZPBA+2duF2nZugwgbIba/yvKLsHWvGIBJGY0VZhR4vYyFH3VFyFH2Yi46tHEVBN+X+a0uQaJMhCsQ==
"@vue-a11y/skip-to@^2.1.2":
version "2.1.2"
resolved "https://registry.yarnpkg.com/@vue-a11y/skip-to/-/skip-to-2.1.2.tgz#a50f5b97605f5054ca7a7e222bdc721405e38f38"
integrity sha512-oKx0YE/nfWSBI48RKHoRsUmpY0//rDPBZTGk1LxhkkUsXPwzuMlJBFrWGIswdd+3DiIE5OyiDaM45ZldYjtDIA==
"@vue/apollo-option@4.0.0-alpha.11": "@vue/apollo-option@4.0.0-alpha.11":
version "4.0.0-alpha.11" version "4.0.0-alpha.11"
resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.11.tgz#b4ecac2d1ac40271cb7f20683fb8e4c85974329a" resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.11.tgz#b4ecac2d1ac40271cb7f20683fb8e4c85974329a"