hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Move i18n to vue-i18n and json files

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2019-09-12 11:34:01 +02:00
parent c3b03a2e6b
commit 96380f7df2
47 changed files with 740 additions and 1803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/views/Account/IdentityPicker.vue
View File

@@ -1,11 +1,13 @@
<template>
<div class="identity-picker">
<img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/> {{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
<b-button type="is-text" @click="isComponentModalActive = true"><translate>Change</translate></b-button>
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t('Change') }}
</b-button>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Pick an identity</p>
<p class="modal-card-title">{{ $t('Pick an identity') }}</p>
</header>
<section class="modal-card-body">
<div class="list is-hoverable">

18
js/src/views/Account/Profile.vue
View File

@@ -24,46 +24,46 @@
<b-dropdown hoverable has-link aria-role="list">
<button class="button is-primary" slot="trigger">
<translate>Public feeds</translate>
{{ $t('Public feeds') }}
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', true)">
<translate>Public RSS/Atom Feed</translate>
{{ $t('Public RSS/Atom Feed') }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', true)">
<translate>Public iCal Feed</translate>
{{ $t('Public iCal Feed') }}
</a>
</b-dropdown-item>
</b-dropdown>
<b-dropdown hoverable has-link aria-role="list" v-if="person.feedTokens.length > 0">
<button class="button is-info" slot="trigger">
<translate>Private feeds</translate>
{{ $t('Private feeds') }}
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', false)">
<translate>RSS/Atom Feed</translate>
{{ $t('RSS/Atom Feed') }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', false)">
<translate>iCal Feed</translate>
{{ $t('iCal Feed') }}
</a>
</b-dropdown-item>
</b-dropdown>
<a class="button" v-if="currentActor.id === person.id" @click="createToken">
<translate>Create token</translate>
{{ $t('Create token') }}
</a>
</div>
<section v-if="person.organizedEvents.length > 0">
<h2 class="subtitle">
<translate>Organized</translate>
{{ $t('Organized') }}
</h2>
<div class="columns">
<EventCard
@@ -81,7 +81,7 @@
@click="deleteProfile()"
v-if="currentActor && currentActor.id === person.id"
>
<translate>Delete</translate>
{{ $t('Delete') }}
</a>
</p>
</div>

18
js/src/views/Account/Register.vue
View File

@@ -3,7 +3,7 @@
<section class="hero">
<div class="hero-body">
<h1 class="title">
<translate>Register an account on Mobilizon!</translate>
{{ $t('Register an account on Mobilizon!') }}
</h1>
</div>
</section>
@@ -13,7 +13,7 @@
<div class="column">
<form v-if="!validationSent">
<b-field
:label="$gettext('Username')"
:label="t('Username')"
:type="errors.preferred_username ? 'is-danger' : null"
:message="errors.preferred_username"
>
@@ -30,18 +30,18 @@
</b-field>
</b-field>
<b-field :label="$gettext('Displayed name')">
<b-field :label="$t('Displayed name')">
<b-input v-model="person.name"/>
</b-field>
<b-field :label="$gettext('Description')">
<b-field :label="$t('Description')">
<b-input type="textarea" v-model="person.summary"/>
</b-field>
<b-field grouped>
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
<translate>Create my profile</translate>
{{ $t('Create my profile') }}
</button>
</div>
</b-field>
@@ -50,15 +50,13 @@
<div v-if="validationSent && !userAlreadyActivated">
<b-message title="Success" type="is-success">
<h2 class="title">
<translate
:translate-params="{ username: person.preferredUsername }"
>Your account is nearly ready, %{username}</translate>
{{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
</h2>
<p>
<translate>A validation email was sent to %{email}</translate>
{{ $t('A validation email was sent to {email}', { email }) }}
</p>
<p>
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
</p>
</b-message>
</div>

43
js/src/views/Account/children/EditIdentity.vue
View File

@@ -2,16 +2,16 @@
<div class="root">
<h1 class="title">
<span v-if="isUpdate">{{ identity.displayName() }}</span>
<translate v-else>I create an identity</translate>
<span v-else>{{ $t('I create an identity') }}</span>
</h1>
<picture-upload v-model="avatarFile" class="picture-upload"></picture-upload>
<b-field :label="$gettext('Display name')">
<b-field :label="$t('Display name')">
<b-input aria-required="true" required v-model="identity.name" @input="autoUpdateUsername($event)"/>
</b-field>
<b-field :label="$gettext('Username')">
<b-field :label="$t('Username')">
<b-field>
<b-input aria-required="true" required v-model="identity.preferredUsername" :disabled="isUpdate"/>
@@ -21,7 +21,7 @@
</b-field>
</b-field>
<b-field :label="$gettext('Description')">
<b-field :label="$t('Description')">
<b-input type="textarea" aria-required="false" v-model="identity.summary"/>
</b-field>
@@ -37,15 +37,15 @@
<b-field class="submit">
<div class="control">
<button v-translate type="button" class="button is-primary" @click="submit()">
Save
<button type="button" class="button is-primary" @click="submit()">
{{ $t('Save') }}
</button>
</div>
</b-field>
<div class="delete-identity" v-if="isUpdate">
<span v-translate @click="openDeleteIdentityConfirmation()">
Delete this identity
<span @click="openDeleteIdentityConfirmation()">
{{ $t('Delete this identity') }}
</span>
</div>
</div>
@@ -177,7 +177,7 @@ export default class EditIdentity extends Vue {
});
this.$notifier.success(
this.$gettextInterpolate('Identity %{displayName} deleted', { displayName: this.identity.displayName() }),
this.$t('Identity {displayName} deleted', { displayName: this.identity.displayName() }) as string,
);
/**
* If we just deleted the current identity, we need to change it to the next one
@@ -213,7 +213,7 @@ export default class EditIdentity extends Vue {
});
this.$notifier.success(
this.$gettextInterpolate('Identity %{displayName} updated', { displayName: this.identity.displayName() }),
this.$t('Identity {displayName} updated', { displayName: this.identity.displayName() }) as string,
);
} catch (err) {
this.handleError(err);
@@ -237,7 +237,7 @@ export default class EditIdentity extends Vue {
});
this.$notifier.success(
this.$gettextInterpolate('Identity %{displayName} created', { displayName: this.identity.displayName() }),
this.$t('Identity {displayName} created', { displayName: this.identity.displayName() }) as string,
);
await this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
@@ -253,18 +253,17 @@ export default class EditIdentity extends Vue {
openDeleteIdentityConfirmation() {
this.$buefy.dialog.prompt({
type: 'is-danger',
title: this.$gettext('Delete your identity'),
message: this.$gettextInterpolate(
'This will delete / anonymize all content (events, comments, messages, participation...) created from this identity. <br /><br />' +
'If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity. ' +
'Otherwise this identity will just be removed from the group administrators.<br /><br />' +
'To confirm, type your identity username "%{preferredUsername}"',
title: this.$t('Delete your identity') as string,
message: `${this.$t('This will delete / anonymize all content (events, comments, messages, participations…) created from this identity.')}
<br /><br />
${this.$t('If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity.')}
${this.$t('Otherwise this identity will just be removed from the group administrators.')}
<br /><br />
${this.$t('To confirm, type your identity username "{preferredUsername}"', { preferredUsername: this.identity.preferredUsername })}`,
confirmText: this.$t(
'Delete {preferredUsername}',
{ preferredUsername: this.identity.preferredUsername },
),
confirmText: this.$gettextInterpolate(
'Delete %{preferredUsername}',
{ preferredUsername: this.identity.preferredUsername },
),
) as string,
inputAttrs: {
placeholder: this.identity.preferredUsername,
pattern: this.identity.preferredUsername,

14
js/src/views/Admin/Dashboard.vue
View File

@@ -1,35 +1,35 @@
<template>
<section class="container">
<h1 class="title">Administration</h1>
<h1 class="title">{{ $t('Administration') }}</h1>
<div class="tile is-ancestor" v-if="dashboard">
<div class="tile is-vertical is-4">
<div class="tile">
<div class="tile is-parent is-vertical is-6">
<article class="tile is-child box">
<p class="title">{{ dashboard.numberOfEvents }}</p>
<p class="subtitle">événements publiés</p>
<p class="subtitle">{{ $t('Published events')}}</p>
</article>
<article class="tile is-child box">
<p class="title">{{ dashboard.numberOfComments}}</p>
<p class="subtitle">commentaires</p>
<p class="subtitle">{{ $t('Comments')}}</p>
</article>
</div>
<div class="tile is-parent is-vertical">
<article class="tile is-child box">
<p class="title">{{ dashboard.numberOfUsers }}</p>
<p class="subtitle">utilisateurices</p>
<p class="subtitle">{{ $t('Users')}}</p>
</article>
<router-link :to="{ name: ModerationRouteName.REPORTS}">
<article class="tile is-child box">
<p class="title">{{ dashboard.numberOfReports }}</p>
<p class="subtitle">signalements ouverts</p>
<p class="subtitle">{{ $t('Opened reports')}}</p>
</article>
</router-link>
</div>
</div>
<div class="tile is-parent" v-if="dashboard.lastPublicEventPublished">
<article class="tile is-child box">
<p class="title">Dernier événement publié</p>
<p class="title">{{ $t('Last published event') }}</p>
<p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p>
<figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture">
<img :src="dashboard.lastPublicEventPublished.picture.url" />
@@ -40,7 +40,7 @@
<div class="tile is-parent">
<article class="tile is-child box">
<div class="content">
<p class="title">Bienvenue sur votre espace d'administration</p>
<p class="title">{{ $t('Welcome on your administration panel') }}</p>
<p class="subtitle">With even more content</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>

12
js/src/views/Error.vue
View File

@@ -1,10 +1,12 @@
<template>
<div v-if="code === ErrorCode.REGISTRATION_CLOSED">
<translate>Registration is currently closed.</translate>
</div>
<div>
<span v-if="code === ErrorCode.REGISTRATION_CLOSED">
{{ $t('Registration is currently closed.') }}
</span>
<div v-else>
<translate>Unknown error.</translate>
<span v-else>
{{ $t('Unknown error.') }}
</span>
</div>
</template>

80
js/src/views/Event/Edit.vue
View File

@@ -1,133 +1,129 @@
<template>
<section class="container">
<h1 class="title">
<translate v-if="isUpdate === false">Create a new event</translate>
<translate v-else>Update event {{ event.name }}</translate>
<h1 class="title" v-if="isUpdate === false">
{{ $t('Create a new event') }}
</h1>
<h1 class="title" v-else>
{{ $t('Update event {name}', { name: event.title }) }}
</h1>
<div v-if="$apollo.loading">Loading...</div>
<div v-if="$apollo.loading">{{ $t('Loading…') }}</div>
<div class="columns is-centered" v-else>
<form class="column is-two-thirds-desktop" @submit="createOrUpdate">
<h2 class="subtitle">
<translate>
General information
</translate>
{{ $t('General information') }}
</h2>
<picture-upload v-model="pictureFile" />
<b-field :label="$gettext('Title')">
<b-field :label="$t('Title')">
<b-input aria-required="true" required v-model="event.title" maxlength="64" />
</b-field>
<tag-input v-model="event.tags" :data="tags" path="title" />
<date-time-picker v-model="event.beginsOn" :label="$gettext('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$gettext('Ends on…')" :step="15" />
<date-time-picker v-model="event.beginsOn" :label="$t('Starts on…')" :step="15"/>
<date-time-picker v-model="event.endsOn" :label="$t('Ends on…')" :step="15" />
<address-auto-complete v-model="event.physicalAddress" />
<b-field :label="$gettext('Organizer')">
<b-field :label="$t('Organizer')">
<identity-picker v-model="event.organizerActor"></identity-picker>
</b-field>
<div class="field">
<label class="label">{{ $gettext('Description') }}</label>
<label class="label">{{ $t('Description') }}</label>
<editor v-model="event.description" />
</div>
<b-field :label="$gettext('Website / URL')">
<b-field :label="$t('Website / URL')">
<b-input v-model="event.onlineAddress" placeholder="URL" />
</b-field>
<!--<b-field :label="$gettext('Category')">
<!--<b-field :label="$t('Category')">
<b-select placeholder="Select a category" v-model="event.category">
<option
v-for="category in categories"
:value="category"
:key="category"
>{{ $gettext(category) }}</option>
>{{ $t(category) }}</option>
</b-select>
</b-field>-->
<h2 class="subtitle">
<translate>
Who can view this event and participate
</translate>
{{ $t('Who can view this event and participate') }}
</h2>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.PUBLIC">
<translate>Visible everywhere on the web (public)</translate>
{{ $t('Visible everywhere on the web (public)') }}
</b-radio>
</div>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.LINK">
<translate>Only accessible through link and search (private)</translate>
{{ $t('Only accessible through link and search (private)') }}
</b-radio>
</div>
<div class="field">
<b-radio v-model="eventVisibilityJoinOptions"
name="eventVisibilityJoinOptions"
:native-value="EventVisibilityJoinOptions.LIMITED">
<translate>Page limited to my group (asks for auth)</translate>
{{ $t('Page limited to my group (asks for auth)') }}
</b-radio>
</div>
<div class="field">
<label class="label">Approbation des participations</label>
<label class="label">{{ $t('Participation approval') }}</label>
<b-switch v-model="needsApproval">
Je veux approuver chaque demande de participation
{{ $t('I want to approve every participation request') }}
</b-switch>
</div>
<div class="field">
<label class="label">Mise en avant</label>
<label class="label">{{ $t('Promotion') }}</label>
<b-switch v-model="doNotPromote" :disabled="canPromote === false">
Ne pas autoriser la mise en avant sur sur Mobilizon
{{ $t('Disallow promoting on Mobilizon')}}
</b-switch>
</div>
<div class="field">
<b-switch v-model="limitedPlaces">
Places limitées
{{ $t('Limited places') }}
</b-switch>
</div>
<div class="box" v-if="limitedPlaces">
<b-field label="Number of places">
<b-field :label="$t('Number of places')">
<b-numberinput v-model="event.options.maximumAttendeeCapacity"></b-numberinput>
</b-field>
<b-field>
<b-switch v-model="event.options.showRemainingAttendeeCapacity">
Show remaining number of places
{{ $t('Show remaining number of places') }}
</b-switch>
</b-field>
<b-field>
<b-switch v-model="event.options.showParticipationPrice">
Display participation price
{{ $t('Display participation price') }}
</b-switch>
</b-field>
</div>
<h2 class="subtitle">
<translate>
Modération des commentaires publics
</translate>
{{ $t('Public comment moderation') }}
</h2>
<label>Comments on the event page</label>
<label>{{ $t('Comments on the event page') }}</label>
<div class="field">
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.ALLOW_ALL">
<translate>Allow all comments</translate>
{{ $t('Allow all comments') }}
</b-radio>
</div>
@@ -135,7 +131,7 @@
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.MODERATED">
<translate>Moderated comments (shown after approval)</translate>
{{ $t('Moderated comments (shown after approval)') }}
</b-radio>
</div>
@@ -143,21 +139,19 @@
<b-radio v-model="event.options.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED">
<translate>Close all comments (except for admins)</translate>
{{ $t('Close comments for all (except for admins)') }}
</b-radio>
</div>
<h2 class="subtitle">
<translate>
Status
</translate>
{{ $t('Status') }}
</h2>
<div class="field">
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.TENTATIVE">
<translate>Tentative: Will be confirmed later</translate>
{{ $t('Tentative: Will be confirmed later') }}
</b-radio>
</div>
@@ -165,13 +159,13 @@
<b-radio v-model="event.status"
name="status"
:native-value="EventStatus.CONFIRMED">
<translate>Confirmed: Will happen</translate>
{{ $t('Confirmed: Will happen') }}
</b-radio>
</div>
<button class="button is-primary">
<translate v-if="isUpdate === false">Create my event</translate>
<translate v-else>Update my event</translate>
<span v-if="isUpdate === false">{{ $t('Create my event') }}</span>
<span v-else> {{ $t('Update my event') }}</span>
</button>
</form>
</div>

85
js/src/views/Event/Event.vue
View File

@@ -19,32 +19,19 @@
<h1 class="title">{{ event.title }}</h1>
</div>
<span v-if="event.participantStats.approved > 0 && !actorIsParticipant()">
<translate
:translate-n="event.participantStats.approved"
:translate-params="{approved: event.participantStats.approved}"
translate-plural="%{ approved } persons are going">
One person is going
</translate>
{{ $tc('One person is going', event.participantStats.approved, {approved: event.participantStats.approved}) }}
</span>
<span v-else-if="event.participantStats.approved - 1 > 0 && actorIsParticipant()">
<translate
:translate-n="event.participantStats.approved - 1"
:translate-params="{approved: event.participantStats.approved - 1}"
translate-plural="You and %{ approved } persons are going">
You and one other person are going to this event
</translate>
</span>
<span v-else-if="actorIsParticipant()">
<translate>You're the only one going to this event</translate>
<span v-else>
{{ $tc('You and one other person are going to this event', event.participantStats.approved - 1, {approved: event.participantStats.approved - 1}) }}
</span>
<div v-if="!actorIsOrganizer()" class="participate-button has-text-centered">
<a v-if="!actorIsParticipant()" @click="isJoinModalActive = true" class="button is-large is-primary is-rounded">
<b-icon icon="circle-outline"></b-icon>
<translate>Join</translate>
{{ $t('Join') }}
</a>
<a v-if="actorIsParticipant()" @click="confirmLeave()" class="button is-large is-primary is-rounded">
<b-icon icon="check-circle"></b-icon>
<translate>Leave</translate>
{{ $t('Leave') }}
</a>
</div>
</div>
@@ -54,7 +41,7 @@
<span class="tag" v-if="event.category">{{ event.category }}</span>
<span class="tag" v-if="event.tags" v-for="tag in event.tags">{{ tag.title }}</span>
<span class="visibility">
<translate v-if="event.visibility === EventVisibility.PUBLIC">public event</translate>
<span v-if="event.visibility === EventVisibility.PUBLIC">{{ $t('public event') }}</span>
</span>
</p>
<div class="date-and-add-to-calendar">
@@ -64,7 +51,7 @@
</div>
<a class="add-to-calendar" @click="downloadIcsEvent()">
<b-icon icon="calendar-plus" />
<translate>Add to my calendar</translate>
{{ $t('Add to my calendar') }}
</a>
</div>
<p class="slug">
@@ -78,23 +65,23 @@
class="button"
:to="{ name: 'EditEvent', params: {eventId: event.uuid}}"
>
<translate>Edit</translate>
{{ $t('Edit') }}
</router-link>
</p>
<p class="control" v-if="actorIsOrganizer()">
<a class="button is-danger" @click="openDeleteEventModal()">
<translate>Delete</translate>
{{ $t('Delete') }}
</a>
</p>
<p class="control">
<a class="button is-danger" @click="isReportModalActive = true">
<translate>Report</translate>
{{ $t('Report') }}
</a>
</p>
</div>
<div class="address-wrapper">
<b-icon icon="map" />
<translate v-if="!event.physicalAddress">No address defined</translate>
<span v-if="!event.physicalAddress">{{ $t('No address defined') }}</span>
<div class="address" v-if="event.physicalAddress">
<address>
<span class="addressDescription">{{ event.physicalAddress.description }}</span>
@@ -103,7 +90,7 @@
<!-- <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>-->
</address>
<span class="map-show-button" @click="showMap = !showMap" v-if="event.physicalAddress && event.physicalAddress.geom">
<translate>Show map</translate>
{{ $t('Show map') }}
</span>
</div>
<b-modal v-if="event.physicalAddress && event.physicalAddress.geom" :active.sync="showMap" :width="800" scroll="keep">
@@ -117,14 +104,14 @@
</div>
<div class="organizer">
<actor-link :actor="event.organizerActor">
<translate
:translate-params="{name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}"
v-if="event.organizerActor">By %{ name }</translate>
<span v-if="event.organizerActor">
{{ $t('By {name}', {name: event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername}) }}
</span>
<figure v-if="event.organizerActor.avatar" class="image is-48x48">
<img
class="is-rounded"
:src="event.organizerActor.avatar.url"
:alt="$gettextInterpolate('%{actor}\'s avatar', {actor: event.organizerActor.preferredUsername})" />
:alt="$t("{actor}'s avatar", {actor: event.organizerActor.preferredUsername})" />
</figure>
</actor-link>
</div>
@@ -144,7 +131,7 @@
<!-- <span>-->
<!-- <translate-->
<!-- :translate-n="event.participants.length"-->
<!-- translate-plural="%{event.participants.length} persons are going"-->
<!-- translate-plural="{event.participants.length} persons are going"-->
<!-- >-->
<!-- One person is going.-->
<!-- </translate>-->
@@ -154,10 +141,10 @@
<div class="description">
<div class="description-container container">
<h3 class="title">
<translate>About this event</translate>
{{ $t('About this event') }}
</h3>
<p v-if="!event.description">
<translate>The event organizer didn't add any description.</translate>
{{ $t("The event organizer didn't add any description.") }}
</p>
<div class="columns" v-else>
<div class="column is-half">
@@ -221,7 +208,7 @@
<div class="container">
<div class="columns">
<div class="column is-half has-text-centered">
<h3 class="title"><translate>Share this event</translate></h3>
<h3 class="title">{{ $t('Share this event') }}</h3>
<div>
<b-icon icon="mastodon" size="is-large" type="is-primary" />
<a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"><b-icon icon="facebook" size="is-large" type="is-primary" /></a>
@@ -234,14 +221,14 @@
<hr />
<div class="column is-half has-text-right add-to-calendar">
<h3 @click="downloadIcsEvent()">
<translate>Add to my calendar</translate>
{{ $t('Add to my calendar') }}
</h3>
</div>
</div>
</div>
</section>
<section class="more-events container" v-if="event.relatedEvents.length > 0">
<h3 class="title has-text-centered"><translate>These events may interest you</translate></h3>
<h3 class="title has-text-centered">{{ $t('These events may interest you') }}</h3>
<div class="columns">
<div class="column is-one-third-desktop" v-for="relatedEvent in event.relatedEvents" :key="relatedEvent.uuid">
<EventCard :event="relatedEvent" />
@@ -317,21 +304,23 @@ export default class Event extends Vue {
async openDeleteEventModal () {
const participantsLength = this.event.participants.length;
const prefix = participantsLength ? 'There are %{participants} participants. ' : '';
const prefix = participantsLength
? this.$tc('There are {participants} participants.', this.event.participants.length, {
participants: this.event.participants.length,
})
: '';
this.$buefy.dialog.prompt({
type: 'is-danger',
title: this.$gettext('Delete event'),
message: this.$gettextInterpolate(
`${prefix}` +
'Are you sure you want to delete this event? This action cannot be reverted. <br /><br />' +
'To confirm, type your event title "%{eventTitle}"',
{ participants: this.event.participants.length, eventTitle: this.event.title },
),
confirmText: this.$gettextInterpolate(
'Delete %{eventTitle}',
title: this.$t('Delete event') as string,
message: `${prefix}
${this.$t('Are you sure you want to delete this event? This action cannot be reverted.')}
<br><br>
${this.$t('To confirm, type your event title "{eventTitle}"', { eventTitle: this.event.title })}`,
confirmText: this.$t(
'Delete {eventTitle}',
{ eventTitle: this.event.title },
),
) as string,
inputAttrs: {
placeholder: this.event.title,
pattern: this.event.title,
@@ -355,7 +344,7 @@ export default class Event extends Vue {
},
});
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} reported', { eventTitle }),
message: this.$t('Event {eventTitle} reported', { eventTitle }) as string,
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,
@@ -490,7 +479,7 @@ export default class Event extends Vue {
await router.push({ name: RouteName.HOME });
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} deleted', { eventTitle }),
message: this.$t('Event {eventTitle} deleted', { eventTitle }) as string,
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,

4
js/src/views/Event/EventList.vue
View File

@@ -1,7 +1,7 @@
<template>
<section>
<h1>
<translate>Event list</translate>
{{ $t('Event list') }}
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
@@ -13,7 +13,7 @@
/>
</div>
<b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">
<translate>No events found</translate>
{{ $t('No events found') }}
</b-message>
</section>
</template>

12
js/src/views/Group/Create.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="root">
<h1 v-translate>Create a new group</h1>
<h1>{{ $t('Create a new group') }}</h1>
<div>
<b-field :label="$gettext('Group name')">
<b-field :label="$t('Group name')">
<b-input aria-required="true" required v-model="group.preferred_username"/>
</b-field>
<b-field :label="$gettext('Group full name')">
<b-field :label="$t('Group full name')">
<b-input aria-required="true" required v-model="group.name"/>
</b-field>
<b-field :label="$gettext('Description')">
<b-field :label="$t('Description')">
<b-input aria-required="true" required v-model="group.description" type="textarea"/>
</b-field>
@@ -26,7 +26,7 @@
</div>
<button class="button is-primary" @click="createGroup()">
<translate>Create my group</translate>
{{ $t('Create my group') }}
</button>
</div>
</div>
@@ -77,7 +77,7 @@ export default class CreateGroup extends Vue {
await this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
this.$notifier.success(
this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
this.$t('Group {displayName} created', { displayName: this.group.displayName() }) as string,
);
} catch (err) {
this.handleError(err);

6
js/src/views/Group/Group.vue
View File

@@ -25,7 +25,7 @@
</div>
<section class="box" v-if="group.organizedEvents.length > 0">
<h2 class="subtitle">
<translate>Organized</translate>
{{ $t('Organized') }}
</h2>
<div class="columns">
<EventCard
@@ -39,7 +39,7 @@
</section>
<section v-if="group.members.length > 0">
<h2 class="subtitle">
<translate>Members</translate>
{{ $t('Members') }}
</h2>
<div class="columns">
<span
@@ -50,7 +50,7 @@
</section>
</div>
<b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
<translate>No group found</translate>
{{ $t('No group found') }}
</b-message>
</section>
</template>

4
js/src/views/Group/GroupList.vue
View File

@@ -1,7 +1,7 @@
<template>
<section>
<h1>
<translate>Group List</translate>
{{ $t('Group List') }}
</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div class="columns">
@@ -13,7 +13,7 @@
/>
</div>
<router-link class="button" :to="{ name: RouteName.CREATE_GROUP }">
<translate>Create group</translate>
{{ $t('Create group') }}
</router-link>
</section>
</template>

49
js/src/views/Home.vue
View File

@@ -6,64 +6,51 @@
<h1 class="title">{{ config.name }}</h1>
<h2 class="subtitle">{{ config.description }}</h2>
<router-link class="button" :to="{ name: 'Register' }" v-if="config.registrationsOpen">
<translate>Register</translate>
{{ $t('Register') }}
</router-link>
<p v-else>
<translate>This instance isn't opened to registrations, but you can register on other instances.</translate>
{{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
</p>
</div>
</div>
</section>
<section v-else>
<h1>
<translate
:translate-params="{username: loggedPerson.preferredUsername}"
>Welcome back %{username}</translate>
{{ $t('Welcome back {username}', {username: loggedPerson.preferredUsername}) }}
</h1>
</section>
<b-dropdown aria-role="list">
<button class="button is-primary" slot="trigger">
<span>Create</span>
<span>{{ $t('Create') }}</span>
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_EVENT }">Event</router-link>
<router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_GROUP }">Group</router-link>
<router-link :to="{ name: RouteName.CREATE_GROUP }">{{ $t('Group') }}</router-link>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
</b-dropdown>
<section v-if="loggedPerson" class="container">
<span class="events-nearby title"><translate>Events you're going at</translate></span>
<span class="events-nearby title">
{{ $t("Events you're going at") }}
</span>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="goingToEvents.size > 0" v-for="row in Array.from(goingToEvents.entries())">
<!-- Iterators will be supported in v-for with VueJS 3 -->
<date-component :date="row[0]"></date-component>
<h3 class="subtitle"
v-if="isToday(row[0])"
v-translate="{count: row[1].length}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events today"
>
You have one event today.
v-if="isToday(row[0])">
{{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
</h3>
<h3 class="subtitle"
v-else-if="isTomorrow(row[0])"
v-translate="{count: row[1].length}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events tomorrow"
>
You have one event tomorrow.
v-else-if="isTomorrow(row[0])">
{{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
</h3>
<h3 class="subtitle"
v-else
v-translate="{count: row[1].length, days: calculateDiffDays(row[0])}"
:translate-n="row[1].length"
translate-plural="You have %{ count } events in %{ days } days"
>
You have one event in %{ days } days.
v-else>
{{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
</h3>
<div class="columns">
<EventCard
@@ -76,11 +63,11 @@
</div>
</div>
<b-message v-else type="is-danger">
<translate>You're not going to any event yet</translate>
{{ $t("You're not going to any event yet") }}
</b-message>
</section>
<section class="container">
<h3 class="events-nearby title"><translate>Events nearby you</translate></h3>
<h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
<b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline">
<div class="column is-one-third-desktop" v-for="event in events.slice(0, 6)" :key="event.uuid">
@@ -90,7 +77,7 @@
</div>
</div>
<b-message v-else type="is-danger">
<translate>No events found</translate>
{{ $t('No events found') }}
</b-message>
</section>
</div>

2
js/src/views/Moderation/Report.vue
View File

@@ -204,7 +204,7 @@ export default class Report extends Vue {
});
this.$buefy.notification.open({
message: this.$gettextInterpolate('Event %{eventTitle} deleted', { eventTitle }),
message: this.$t('Event {eventTitle} deleted', { eventTitle }) as string,
type: 'is-success',
position: 'is-bottom-right',
duration: 5000,

10
js/src/views/PageNotFound.vue
View File

@@ -4,20 +4,20 @@
<div class="column is-centered">
<img src="../assets/oh_no.jpg" alt="Not found 'oh no' picture">
<h1 class="title">
<translate>The page you're looking for doesn't exist.</translate>
{{ $t("The page you're looking for doesn't exist.") }}
</h1>
<p>
<translate>Please make sure the address is correct and that the page hasn't been moved.</translate>
{{ $t("Please make sure the address is correct and that the page hasn't been moved.") }}
</p>
<p>
<translate>Please contact this instance's Mobilizon admin if you think this is a mistake.</translate>
{{ $t("Please contact this instance's Mobilizon admin if you think this is a mistake.") }}
</p>
<!-- The following should just be replaced with the SearchField component but it fails for some reason -->
<form @submit="enter">
<b-field class="search">
<b-input expanded icon="magnify" type="search" :placeholder="searchPlaceHolder" v-model="searchText" />
<p class="control">
<button type="submit" class="button is-primary"><translate>Search</translate></button>
<button type="submit" class="button is-primary">{{ $t('Search') }}</button>
</p>
</b-field>
</form>
@@ -39,7 +39,7 @@ export default class PageNotFound extends Vue {
searchText: string = '';
get searchPlaceHolder(): string {
return this.$gettext('Search events, groups, etc.');
return this.$t('Search events, groups, etc.') as string;
}
enter() {

14
js/src/views/Search.vue
View File

@@ -1,14 +1,16 @@
<template>
<section class="container">
<h1>
<translate :translate-params="{ search: this.searchTerm }">Search results: « %{ search } »</translate>
{{ $t('Search results: "{search}"', { search: this.searchTerm }) }}
</h1>
<b-loading :active.sync="$apollo.loading" />
<b-tabs v-model="activeTab" type="is-boxed" class="searchTabs" @change="changeTab">
<b-tab-item>
<template slot="header">
<b-icon icon="calendar"></b-icon>
<span><translate>Events</translate> <b-tag rounded>{{ searchEvents.total }}</b-tag> </span>
<span>
{{ $t('Events') }} <b-tag rounded>{{ searchEvents.total }}</b-tag>
</span>
</template>
<div v-if="searchEvents.total > 0" class="columns is-multiline">
<div class="column is-one-quarter-desktop is-half-mobile"
@@ -20,13 +22,15 @@
</div>
</div>
<b-message v-else-if="$apollo.loading === false" type="is-danger">
<translate>No events found</translate>
{{ $t('No events found') }}
</b-message>
</b-tab-item>
<b-tab-item>
<template slot="header">
<b-icon icon="account-multiple"></b-icon>
<span><translate>Groups</translate> <b-tag rounded>{{ searchGroups.total }}</b-tag> </span>
<span>
{{ $t('Groups') }} <b-tag rounded>{{ searchGroups.total }}</b-tag>
</span>
</template>
<div v-if="searchGroups.total > 0" class="columns is-multiline">
<div class="column is-one-quarter-desktop is-half-mobile"
@@ -36,7 +40,7 @@
</div>
</div>
<b-message v-else-if="$apollo.loading === false" type="is-danger">
<translate>No groups found</translate>
{{ $t('No groups found') }}
</b-message>
</b-tab-item>
</b-tabs>

16
js/src/views/User/Login.vue
View File

@@ -2,12 +2,12 @@
<div class="container">
<section class="hero">
<h1 class="title">
<translate>Welcome back!</translate>
{{ $t('Welcome back!') }}
</h1>
</section>
<b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
<translate>You need to login.</translate>
{{ $t('You need to login.') }}
</b-message>
<section v-if="!currentUser.isLoggedIn">
@@ -15,11 +15,11 @@
<div class="column is-half">
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="loginAction">
<b-field :label="$gettext('Email')">
<b-field :label="$t('Email')">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<b-field :label="$gettext('Password')">
<b-field :label="$t('Password')">
<b-input
aria-required="true"
required
@@ -31,7 +31,7 @@
<div class="control has-text-centered">
<button class="button is-primary is-large">
<translate>Login</translate>
{{ $t('Login') }}
</button>
</div>
<div class="control">
@@ -39,7 +39,7 @@
class="button is-text"
:to="{ name: 'SendPasswordReset', params: { email: credentials.email }}"
>
<translate>Forgot your password ?</translate>
{{ $t('Forgot your password ?') }}
</router-link>
</div>
<div class="control" v-if="config && config.registrationsOpen">
@@ -47,7 +47,7 @@
class="button is-text"
:to="{ name: 'Register', params: { default_email: credentials.email, default_password: credentials.password }}"
>
<translate>Register</translate>
{{ $t('Register') }}
</router-link>
</div>
</form>
@@ -56,7 +56,7 @@
</section>
<b-message v-else title="Error" type="is-error">
<translate>You are already logged-in.</translate>
{{ $t('You are already logged-in.') }}
</b-message>
</div>
</template>

4
js/src/views/User/PasswordReset.vue
View File

@@ -2,7 +2,7 @@
<section class="columns is-mobile is-centered">
<div class="card column is-half-desktop">
<h1>
<translate>Password reset</translate>
{{ $t('Password reset') }}
</h1>
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="resetAction">
@@ -27,7 +27,7 @@
/>
</b-field>
<button class="button is-primary">
<translate>Reset my password</translate>
{{ $t('Reset my password') }}
</button>
</form>
</div>

29
js/src/views/User/Register.vue
View File

@@ -3,7 +3,7 @@
<section class="hero">
<div class="hero-body">
<h1 class="title">
<translate>Register an account on Mobilizon!</translate>
{{ $t('Register an account on Mobilizon!') }}
</h1>
</div>
</section>
@@ -12,28 +12,27 @@
<div class="columns is-mobile">
<div class="column">
<div class="content">
<h3 class="title" v-translate>Features</h3>
<h3 class="title">{{ $t('Features') }}</h3>
<ul>
<li v-translate>Create your communities and your events</li>
<li v-translate>Other stuff…</li>
<li>{{ $t('Create your communities and your events') }}</li>
<li>{{ $t('Other stuff…') }}</li>
</ul>
</div>
<p v-translate>
Learn more on
<i18n path="Learn more on" tag="p">
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
</p>
</i18n>
<hr>
<div class="content">
<h3 class="title" v-translate>About this instance</h3>
<h3 class="title">{{ $t('About this instance') }}</h3>
<p>
<translate>Your local administrator resumed it's policy:</translate>
{{ $t("Your local administrator resumed it's policy:") }}
</p>
<ul>
<li v-translate>Please be nice to each other</li>
<li v-translate>meditate a bit</li>
<li>{{ $t('Please be nice to each other') }}</li>
<li>{{ $t('meditate a bit') }}</li>
</ul>
<p>
<translate>Please read the full rules</translate>
{{ $t('Please read the full rules') }}
</p>
</div>
</div>
@@ -72,7 +71,7 @@
<b-field grouped>
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
<translate>Register</translate>
{{ $t('Register') }}
</button>
</div>
<div class="control">
@@ -80,7 +79,7 @@
class="button is-text"
:to="{ name: 'ResendConfirmation', params: { email: credentials.email }}"
>
<translate>Didn't receive the instructions ?</translate>
{{ $t("Didn't receive the instructions ?") }}
</router-link>
</div>
<div class="control">
@@ -89,7 +88,7 @@
:to="{ name: 'Login', params: { email: credentials.email, password: credentials.password }}"
:disabled="sendingValidation"
>
<translate>Login</translate>
{{ $t('Login') }}
</router-link>
</div>
</b-field>

10
js/src/views/User/ResendConfirmation.vue
View File

@@ -2,24 +2,22 @@
<section class="container">
<div class="column">
<h1 class="title">
<translate>Resend confirmation email</translate>
{{ $t('Resend confirmation email') }}
</h1>
<form v-if="!validationSent" @submit="resendConfirmationAction">
<b-field label="Email">
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<button class="button is-primary">
<translate>Send confirmation email again</translate>
{{ $t('Send confirmation email again') }}
</button>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
<translate
:translate-params="{email: credentials.email}"
>If an account with this email exists, we just sent another confirmation email to %{email}</translate>
{{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
</b-message>
<b-message type="is-info">
<translate>Please check you spam folder if you didn't receive the email.</translate>
{{ $t("Please check you spam folder if you didn't receive the email.") }}
</b-message>
</div>
</div>

10
js/src/views/User/SendPasswordReset.vue
View File

@@ -2,7 +2,7 @@
<section class="container">
<div class="column">
<h1 class="title">
<translate>Password reset</translate>
{{ $t('Password reset') }}
</h1>
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
@@ -10,17 +10,15 @@
<b-input aria-required="true" required type="email" v-model="credentials.email"/>
</b-field>
<button class="button is-primary">
<translate>Send email to reset my password</translate>
{{ $t('Send email to reset my password') }}
</button>
</form>
<div v-else>
<b-message type="is-success" :closable="false" title="Success">
<translate
:translate-params="{email: credentials.email}"
>We just sent an email to %{email}</translate>
{{ $t('We just sent an email to {email}', {email: credentials.email}) }}
</b-message>
<b-message type="is-info">
<translate>Please check you spam folder if you didn't receive the email.</translate>
{{ $t("Please check you spam folder if you didn't receive the email.") }}
</b-message>
</div>
</div>

8
js/src/views/User/Validate.vue
View File

@@ -1,16 +1,16 @@
<template>
<section>
<h1 class="title" v-if="loading">
<translate>Your account is being validated</translate>
{{ $t('Your account is being validated') }}
</h1>
<div v-else>
<div v-if="failed">
<b-message :title="$gettext('Error while validating account')" type="is-danger">
<translate>Either the account is already validated, either the validation token is incorrect.</translate>
<b-message :title="$t('Error while validating account')" type="is-danger">
{{ $t('Either the account is already validated, either the validation token is incorrect.') }}
</b-message>
</div>
<h1 class="title" v-else>
<translate>Your account has been validated</translate>
{{ $t('Your account has been validated') }}
</h1>
</div>
</section>