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

Introduce group basic federation, event new page and notifications

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-02-18 08:57:00 +01:00
parent 300ef8f245
commit 4144e9ffd0
416 changed files with 32220 additions and 16750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
js/src/components/Participation/ConfirmParticipation.vue
View File

@@ -1,33 +1,34 @@
<template>
<section class="container">
<h1 class="title" v-if="loading">
{{ $t('Your participation is being validated') }}
</h1>
<div v-else>
<div v-if="failed">
<b-message :title="$t('Error while validating participation')" type="is-danger">
{{ $t('Either the participation has already been validated, either the validation token is incorrect.') }}
</b-message>
</div>
<h1 class="title" v-else>
{{ $t('Your participation has been validated') }}
</h1>
</div>
</section>
<section class="container">
<h1 class="title" v-if="loading">{{ $t("Your participation is being validated") }}</h1>
<div v-else>
<div v-if="failed">
<b-message :title="$t('Error while validating participation')" type="is-danger">
{{
$t(
"Either the participation has already been validated, either the validation token is incorrect."
)
}}
</b-message>
</div>
<h1 class="title" v-else>{{ $t("Your participation has been validated") }}</h1>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';
import { IParticipant } from '@/types/event.model';
import { CONFIRM_PARTICIPATION } from '@/graphql/event';
import { confirmLocalAnonymousParticipation } from '@/services/AnonymousParticipationStorage';
import { Component, Prop, Vue } from "vue-property-decorator";
import RouteName from "../../router/name";
import { IParticipant } from "../../types/event.model";
import { CONFIRM_PARTICIPATION } from "../../graphql/event";
import { confirmLocalAnonymousParticipation } from "../../services/AnonymousParticipationStorage";
@Component
export default class ConfirmParticipation extends Vue {
@Prop({ type: String, required: true }) token!: string;
loading = true;
failed = false;
async created() {
@@ -36,7 +37,9 @@ export default class ConfirmParticipation extends Vue {
async validateAction() {
try {
const { data } = await this.$apollo.mutate<{ confirmParticipation: IParticipant }>({
const { data } = await this.$apollo.mutate<{
confirmParticipation: IParticipant;
}>({
mutation: CONFIRM_PARTICIPATION,
variables: {
token: this.token,
@@ -46,7 +49,10 @@ export default class ConfirmParticipation extends Vue {
if (data) {
const { confirmParticipation: participation } = data;
await confirmLocalAnonymousParticipation(participation.event.uuid);
await this.$router.replace({ name: RouteName.EVENT, params: { uuid: data.confirmParticipation.event.uuid } } );
await this.$router.replace({
name: RouteName.EVENT,
params: { uuid: data.confirmParticipation.event.uuid },
});
}
} catch (err) {
console.error(err);

125
js/src/components/Participation/ParticipationWithAccount.vue
View File

@@ -1,54 +1,65 @@
<template>
<section class="section container hero is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<b-button type="is-primary" size="is-medium" tag="router-link" :to="{ name: RouteName.LOGIN }">{{ $t('Login on {instance}', { instance: host }) }}</b-button>
</div>
<vertical-divider :content="$t('Or')" />
<div class="column">
<subtitle>{{ $t('I have an account on another Mobilizon instance.')}}</subtitle>
<p>{{ $t('Other software may also support this.') }}</p>
<p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p>
<form @submit.prevent="redirectToInstance">
<b-field :label="$t('Your federated identity')">
<b-field>
<b-input
expanded
autocapitalize="none" autocorrect="off"
v-model="remoteActorAddress"
:placeholder="$t('profile@instance')">
</b-input>
<p class="control">
<button class="button is-primary" type="submit">{{ $t('Go') }}</button>
</p>
</b-field>
</b-field>
</form>
</div>
</div>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">
{{ $t('Back to previous page') }}
</b-button>
</div>
</div>
<section class="section container hero is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column">
<b-button
type="is-primary"
size="is-medium"
tag="router-link"
:to="{ name: RouteName.LOGIN }"
>{{ $t("Login on {instance}", { instance: host }) }}</b-button
>
</div>
<vertical-divider :content="$t('Or')" />
<div class="column">
<subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
<p>{{ $t("Other software may also support this.") }}</p>
<p>
{{ $t("We will redirect you to your instance in order to interact with this event") }}
</p>
<form @submit.prevent="redirectToInstance">
<b-field :label="$t('Your federated identity')">
<b-field>
<b-input
expanded
autocapitalize="none"
autocorrect="off"
v-model="remoteActorAddress"
:placeholder="$t('profile@instance')"
></b-input>
<p class="control">
<button class="button is-primary" type="submit">{{ $t("Go") }}</button>
</p>
</b-field>
</b-field>
</form>
</div>
</div>
</section>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';
import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
import Subtitle from '@/components/Utils/Subtitle.vue';
import { Component, Prop, Vue } from "vue-property-decorator";
import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import Subtitle from "@/components/Utils/Subtitle.vue";
import RouteName from "../../router/name";
@Component({
components: { Subtitle, VerticalDivider },
})
export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
remoteActorAddress: string = '';
remoteActorAddress = "";
RouteName = RouteName;
get host() {
@@ -56,29 +67,39 @@ export default class ParticipationWithAccount extends Vue {
}
get uri(): string {
return `${window.location.origin}${this.$router.resolve({ name: RouteName.EVENT, params: { uuid: this.uuid } }).href}`;
return `${window.location.origin}${
this.$router.resolve({
name: RouteName.EVENT,
params: { uuid: this.uuid },
}).href
}`;
}
async redirectToInstance() {
let res;
const [_, host] = res = this.remoteActorAddress.split('@', 2);
const [_, host] = (res = this.remoteActorAddress.split("@", 2));
const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
window.open(remoteInteractionURI);
}
private async webFingerFetch(hostname: string, identity: string): Promise<string> {
const scheme = process.env.NODE_ENV === 'production' ? 'https' : 'http';
const data = await ((await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)).json());
const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
const data = await (
await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)
).json();
if (data && Array.isArray(data.links)) {
const link: { template: string } = data.links.find((link: any) => {
return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe';
});
const link: { template: string } = data.links.find(
(link: any) =>
link &&
typeof link.template === "string" &&
link.rel === "http://ostatus.org/schema/1.0/subscribe"
);
if (link && link.template.includes('{uri}')) {
return link.template.replace('{uri}', encodeURIComponent(this.uri));
if (link && link.template.includes("{uri}")) {
return link.template.replace("{uri}", encodeURIComponent(this.uri));
}
}
throw new Error('No interaction path found in webfinger data');
throw new Error("No interaction path found in webfinger data");
}
}
</script>
</script>

150
js/src/components/Participation/ParticipationWithoutAccount.vue
View File

@@ -1,48 +1,72 @@
<template>
<section class="container section hero is-fullheight">
<div class="hero-body">
<div class="container">
<form @submit.prevent="joinEvent">
<p>{{ $t('This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.') }}</p>
<b-message type="is-info">{{ $t("Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.") }}</b-message>
<b-message type="is-danger" v-if="error">{{ error }}</b-message>
<b-field :label="$t('Email')">
<b-input
type="email"
v-model="anonymousParticipation.email"
placeholder="Your email"
required>
</b-input>
</b-field>
<p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">{{ $t("The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event.") }}</p>
<p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
<b-field :label="$t('Message')">
<b-input
type="textarea"
v-model="anonymousParticipation.message"
minlength="10"
:required="event.joinOptions === EventJoinOptions.RESTRICTED">
</b-input>
</b-field>
<b-button type="is-primary" native-type="submit">{{ $t('Send email') }}</b-button>
<div class="has-text-centered">
<b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">
{{ $t('Back to previous page') }}
</b-button>
</div>
</form>
</div>
</div>
</section>
<section class="container section hero is-fullheight">
<div class="hero-body">
<div class="container">
<form @submit.prevent="joinEvent">
<p>
{{
$t(
"This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation."
)
}}
</p>
<b-message type="is-info">
{{
$t(
"Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
)
}}
</b-message>
<b-message type="is-danger" v-if="error">{{ error }}</b-message>
<b-field :label="$t('Email')">
<b-input
type="email"
v-model="anonymousParticipation.email"
placeholder="Your email"
required
></b-input>
</b-field>
<p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
{{
$t(
"The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
)
}}
</p>
<p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
<b-field :label="$t('Message')">
<b-input
type="textarea"
v-model="anonymousParticipation.message"
minlength="10"
:required="event.joinOptions === EventJoinOptions.RESTRICTED"
></b-input>
</b-field>
<b-button type="is-primary" native-type="submit">{{ $t("Send email") }}</b-button>
<div class="has-text-centered">
<b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</form>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { EventModel, IEvent, IParticipant, ParticipantRole, EventJoinOptions } from '@/types/event.model';
import { FETCH_EVENT, JOIN_EVENT } from '@/graphql/event';
import { IConfig } from '@/types/config.model';
import { CONFIG } from '@/graphql/config';
import { addLocalUnconfirmedAnonymousParticipation } from '@/services/AnonymousParticipationStorage';
import { RouteName } from '@/router';
import { Component, Prop, Vue } from "vue-property-decorator";
import {
EventModel,
IEvent,
IParticipant,
ParticipantRole,
EventJoinOptions,
} from "@/types/event.model";
import { FETCH_EVENT, JOIN_EVENT } from "@/graphql/event";
import { IConfig } from "@/types/config.model";
import { CONFIG } from "@/graphql/config";
import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
import RouteName from "../../router/name";
@Component({
apollo: {
@@ -53,7 +77,9 @@ import { RouteName } from '@/router';
uuid: this.uuid,
};
},
skip() { return !this.uuid; },
skip() {
return !this.uuid;
},
update: (data) => new EventModel(data.event),
},
config: CONFIG,
@@ -61,10 +87,18 @@ import { RouteName } from '@/router';
})
export default class ParticipationWithoutAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
anonymousParticipation: { email: String, message: String } = { email: '', message: '' };
anonymousParticipation: { email: string; message: string } = {
email: "",
message: "",
};
event!: IEvent;
config!: IConfig;
error: String|boolean = false;
error: string | boolean = false;
EventJoinOptions = EventJoinOptions;
async joinEvent() {
@@ -88,7 +122,7 @@ export default class ParticipationWithoutAccount extends Vue {
if (cachedData == null) return;
const { event } = cachedData;
if (event === null) {
console.error('Cannot update event participant cache, because of null value.');
console.error("Cannot update event participant cache, because of null value.");
return;
}
@@ -99,19 +133,31 @@ export default class ParticipationWithoutAccount extends Vue {
event.participantStats.participant = event.participantStats.participant + 1;
}
store.writeQuery({ query: FETCH_EVENT, variables: { uuid: this.event.uuid }, data: { event } });
store.writeQuery({
query: FETCH_EVENT,
variables: { uuid: this.event.uuid },
data: { event },
});
},
});
if (data && data.joinEvent.metadata.cancellationToken) {
await addLocalUnconfirmedAnonymousParticipation(this.event, data.joinEvent.metadata.cancellationToken);
return this.$router.push({ name: RouteName.EVENT, params: { uuid: this.event.uuid } });
await addLocalUnconfirmedAnonymousParticipation(
this.event,
data.joinEvent.metadata.cancellationToken
);
return this.$router.push({
name: RouteName.EVENT,
params: { uuid: this.event.uuid },
});
}
} catch (e) {
console.log(JSON.stringify(e));
if (e.message === 'GraphQL error: You are already a participant of this event') {
this.error = this.$t('This email is already registered as participant for this event') as string;
if (e.message === "GraphQL error: You are already a participant of this event") {
this.error = this.$t(
"This email is already registered as participant for this event"
) as string;
}
}
}
}
</script>
</script>

168
js/src/components/Participation/UnloggedParticipation.vue
View File

@@ -1,67 +1,94 @@
<template>
<section class="section container hero">
<div class="hero-body" v-if="event">
<div class="container">
<subtitle>{{ $t('You wish to participate to the following event')}}</subtitle>
<EventListViewCard v-if="event" :event="event" />
<div class="columns has-text-centered">
<div class="column">
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
<figure class="image is-128x128">
<img src="../../assets/undraw_profile.svg" alt="Profile illustration" />
</figure>
<b-button type="is-primary">{{ $t('I have a Mobilizon account') }}</b-button>
</router-link>
<p>
<small>{{ $t('Either on the {instance} instance or on another instance.', {instance: host })}}</small>
<b-tooltip type="is-dark" :label="$t('Mobilizon is a federated network. You can interact with this event from a different server.')">
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
</p>
</div>
<vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" />
<div class="column" v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod">
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }" v-if="event.local">
<figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</router-link>
<a :href="`${event.url}/participate/without-account`" v-else>
<figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</a>
<p>
<small>{{ $t('Participate using your email address')}}</small><br />
<small v-if="!event.local">{{ $t('You will be redirected to the original instance')}}</small>
</p>
</div>
</div>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">
{{ $t('Back to previous page') }}
</b-button>
</div>
</div>
<section class="section container hero">
<div class="hero-body" v-if="event">
<div class="container">
<subtitle>{{ $t("You wish to participate to the following event") }}</subtitle>
<EventListViewCard v-if="event" :event="event" />
<div class="columns has-text-centered">
<div class="column">
<router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
<figure class="image is-128x128">
<img src="../../assets/undraw_profile.svg" alt="Profile illustration" />
</figure>
<b-button type="is-primary">{{ $t("I have a Mobilizon account") }}</b-button>
</router-link>
<p>
<small>
{{
$t("Either on the {instance} instance or on another instance.", {
instance: host,
})
}}
</small>
<b-tooltip
type="is-dark"
:label="
$t(
'Mobilizon is a federated network. You can interact with this event from a different server.'
)
"
>
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
</p>
</div>
<vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" />
<div
class="column"
v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod"
>
<router-link
:to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
v-if="event.local"
>
<figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</router-link>
<a :href="`${event.url}/participate/without-account`" v-else>
<figure class="image is-128x128">
<img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
</figure>
<b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
</a>
<p>
<small>{{ $t("Participate using your email address") }}</small>
<br />
<small v-if="!event.local">
{{ $t("You will be redirected to the original instance") }}
</small>
</p>
</div>
</div>
</section>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';
import { FETCH_EVENT } from '@/graphql/event';
import EventListCard from '@/components/Event/EventListCard.vue';
import EventListViewCard from '@/components/Event/EventListViewCard.vue';
import { EventModel, IEvent } from '@/types/event.model';
import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import Subtitle from '@/components/Utils/Subtitle.vue';
import { Component, Prop, Vue } from "vue-property-decorator";
import { FETCH_EVENT } from "@/graphql/event";
import EventListCard from "@/components/Event/EventListCard.vue";
import EventListViewCard from "@/components/Event/EventListViewCard.vue";
import { EventModel, IEvent } from "@/types/event.model";
import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import { CONFIG } from "@/graphql/config";
import { IConfig } from "@/types/config.model";
import Subtitle from "@/components/Utils/Subtitle.vue";
import RouteName from "../../router/name";
@Component({
components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle },
components: {
VerticalDivider,
EventListViewCard,
EventListCard,
Subtitle,
},
apollo: {
event: {
query: FETCH_EVENT,
@@ -70,7 +97,9 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
uuid: this.uuid,
};
},
skip() { return !this.uuid; },
skip() {
return !this.uuid;
},
update: (data) => new EventModel(data.event),
},
config: CONFIG,
@@ -78,8 +107,11 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
})
export default class UnloggedParticipation extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
RouteName = RouteName;
event!: IEvent;
config!: IConfig;
get host() {
@@ -91,15 +123,17 @@ export default class UnloggedParticipation extends Vue {
}
get hasAnonymousEmailParticipationMethod(): boolean {
return this.config.anonymous.participation.allowed && this.config.anonymous.participation.validation.email.enabled;
return (
this.config.anonymous.participation.allowed &&
this.config.anonymous.participation.validation.email.enabled
);
}
}
</script>
<style lang="scss" scoped>
.column > a {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
.column > a {
display: flex;
flex-direction: column;
align-items: center;
}
</style>