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

Allow to join an open group

Browse Source 
Also:

* Refactor interacting with a remote event so that you can interact with
  a remote group as well
* Add a setting for group admins to pick between an open and invite-only
  group
* Fix new groups without posts/todos/resources/events/conversations URL
  set
* Repair local groups that haven't got their
  posts/todos/resources/events/conversations URL set
* Add a scheduled job to refresh remote groups every hour
* Add a user setting to pick when to receive notifications when there's
  new members to approve (will be used when this feature is available)
* Fix pagination for members

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-11-06 11:34:32 +01:00
parent 7baad7cafc
commit 7c11807c14
74 changed files with 1174 additions and 626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/components/Account/ParticipantCard.vue
View File

@@ -65,8 +65,8 @@
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Person } from "../../types/actor";
import { IParticipant, ParticipantRole } from "../../types/event.model";
import { IParticipant, ParticipantRole } from "../../types/participant.model";
import { IPerson, Person } from "../../types/actor";
@Component
export default class ParticipantCard extends Vue {
@@ -81,7 +81,7 @@ export default class ParticipantCard extends Vue {
ParticipantRole = ParticipantRole;
get actorDisplayName(): string {
const actor = new Person(this.participant.actor);
const actor = new Person(this.participant.actor as IPerson);
return actor.displayName();
}
}

3
js/src/components/Comment/Comment.vue
View File

@@ -137,11 +137,12 @@ import { Component, Prop, Vue, Ref } from "vue-property-decorator";
import EditorComponent from "@/components/Editor.vue";
import { SnackbarProgrammatic as Snackbar } from "buefy";
import { formatDistanceToNow } from "date-fns";
import { CommentModeration } from "../../types/event-options.model";
import { CommentModel, IComment } from "../../types/comment.model";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IPerson, usernameWithDomain } from "../../types/actor";
import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
import { IEvent, CommentModeration } from "../../types/event.model";
import { IEvent } from "../../types/event.model";
import ReportModal from "../Report/ReportModal.vue";
import { IReport } from "../../types/report.model";
import { CREATE_REPORT } from "../../graphql/report";

3
js/src/components/Comment/CommentTree.vue
View File

@@ -51,6 +51,7 @@
import { Prop, Vue, Component, Watch } from "vue-property-decorator";
import Comment from "@/components/Comment/Comment.vue";
import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
import { CommentModeration } from "../../types/event-options.model";
import { CommentModel, IComment } from "../../types/comment.model";
import {
CREATE_COMMENT_FROM_EVENT,
@@ -60,7 +61,7 @@ import {
} from "../../graphql/comment";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IPerson } from "../../types/actor";
import { IEvent, CommentModeration } from "../../types/event.model";
import { IEvent } from "../../types/event.model";
@Component({
apollo: {

3
js/src/components/Event/EventCard.vue
View File

@@ -73,10 +73,11 @@
</template>
<script lang="ts">
import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model";
import { IEvent, IEventCardOptions } from "@/types/event.model";
import { Component, Prop, Vue } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { Actor, Person } from "@/types/actor";
import { ParticipantRole } from "../../types/participant.model";
import RouteName from "../../router/name";
@Component({

8
js/src/components/Event/EventListCard.vue
View File

@@ -187,12 +187,8 @@ import { Component, Prop } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { mixins } from "vue-class-component";
import { RawLocation, Route } from "vue-router";
import {
IParticipant,
ParticipantRole,
EventVisibility,
IEventCardOptions,
} from "../../types/event.model";
import { IParticipant, ParticipantRole } from "../../types/participant.model";
import { EventVisibility, IEventCardOptions } from "../../types/event.model";
import { IPerson } from "../../types/actor";
import ActorMixin from "../../mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";

3
js/src/components/Event/EventListViewCard.vue
View File

@@ -51,7 +51,7 @@
</template>
<script lang="ts">
import { ParticipantRole, EventVisibility, IEventCardOptions, IEvent } from "@/types/event.model";
import { EventVisibility, IEventCardOptions, IEvent } from "@/types/event.model";
import { Component, Prop } from "vue-property-decorator";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { IPerson, usernameWithDomain } from "@/types/actor";
@@ -59,6 +59,7 @@ import { mixins } from "vue-class-component";
import ActorMixin from "@/mixins/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import EventMixin from "@/mixins/event";
import { ParticipantRole } from "../../types/participant.model";
import RouteName from "../../router/name";
const defaultOptions: IEventCardOptions = {

3
js/src/components/Event/EventMinimalistCard.vue
View File

@@ -56,6 +56,7 @@
import { Component, Prop, Vue } from "vue-property-decorator";
import { IEvent } from "@/types/event.model";
import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
import { ParticipantRole } from "../../types/participant.model";
import RouteName from "../../router/name";
@Component({
@@ -67,6 +68,8 @@ export default class EventMinimalistCard extends Vue {
@Prop({ required: true, type: Object }) event!: IEvent;
RouteName = RouteName;
ParticipantRole = ParticipantRole;
}
</script>
<style lang="scss" scoped>

17
js/src/components/Event/ParticipationButton.vue
View File

@@ -142,7 +142,8 @@ A button to set your participation
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from "../../types/event.model";
import { IParticipant, ParticipantRole } from "../../types/participant.model";
import { EventJoinOptions, IEvent } from "../../types/event.model";
import { IPerson, Person } from "../../types/actor";
import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
import { CURRENT_USER_CLIENT } from "../../graphql/user";
@@ -182,20 +183,20 @@ export default class ParticipationButton extends Vue {
RouteName = RouteName;
joinEvent(actor: IPerson) {
joinEvent(actor: IPerson): void {
if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
this.$emit("joinEventWithConfirmation", actor);
this.$emit("join-event-with-confirmation", actor);
} else {
this.$emit("joinEvent", actor);
this.$emit("join-event", actor);
}
}
joinModal() {
this.$emit("joinModal");
joinModal(): void {
this.$emit("join-modal");
}
confirmLeave() {
this.$emit("confirmLeave");
confirmLeave(): void {
this.$emit("confirm-leave");
}
get hasAnonymousParticipationMethods(): boolean {

2
js/src/components/Group/GroupSection.vue
View File

@@ -41,7 +41,7 @@ section {
.create-slot {
display: flex;
justify-content: end;
justify-content: flex-end;
padding-bottom: 0.5rem;
padding-right: 0.5rem;
}

30
js/src/components/Group/JoinGroupWithAccount.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<redirect-with-account
:uri="uri"
:pathAfterLogin="`/@${preferredUsername}`"
:sentence="sentence"
/>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
import RouteName from "../../router/name";
@Component({
components: { RedirectWithAccount },
})
export default class JoinGroupWithAccount extends Vue {
@Prop({ type: String, required: true }) preferredUsername!: string;
get uri(): string {
return `${window.location.origin}${
this.$router.resolve({
name: RouteName.GROUP,
params: { preferredUsername: this.preferredUsername },
}).href
}`;
}
sentence = this.$t("We will redirect you to your instance in order to interact with this group");
}
</script>

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

@@ -38,8 +38,9 @@
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { confirmLocalAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
import { IParticipant } from "../../types/participant.model";
import RouteName from "../../router/name";
import { EventJoinOptions, IParticipant } from "../../types/event.model";
import { EventJoinOptions } from "../../types/event.model";
import { CONFIRM_PARTICIPATION } from "../../graphql/event";
@Component

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

@@ -1,71 +1,17 @@
<template>
<section class="section container hero is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column has-text-centered">
<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>
</div>
</section>
<redirect-with-account :uri="uri" :pathAfterLogin="`/events/${uuid}`" :sentence="sentence" />
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import Subtitle from "@/components/Utils/Subtitle.vue";
import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
import RouteName from "../../router/name";
@Component({
components: { Subtitle, VerticalDivider },
components: { RedirectWithAccount },
})
export default class ParticipationWithAccount extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
remoteActorAddress = "";
RouteName = RouteName;
get host() {
return window.location.hostname;
}
get uri(): string {
return `${window.location.origin}${
this.$router.resolve({
@@ -75,31 +21,6 @@ export default class ParticipationWithAccount extends Vue {
}`;
}
async redirectToInstance() {
let res;
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();
if (data && Array.isArray(data.links)) {
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));
}
}
throw new Error("No interaction path found in webfinger data");
}
sentence = this.$t("We will redirect you to your instance in order to interact with this event");
}
</script>

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

@@ -74,19 +74,12 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import {
EventModel,
IEvent,
IParticipant,
ParticipantRole,
EventJoinOptions,
} from "@/types/event.model";
import { EventModel, IEvent, 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 { Route } from "vue-router";
import RouteName from "../../router/name";
import { IParticipant, ParticipantRole } from "../../types/participant.model";
@Component({
apollo: {
@@ -139,8 +132,8 @@ export default class ParticipationWithoutAccount extends Vue {
message: this.anonymousParticipation.message,
locale: this.$i18n.locale,
},
update: (store, { data }) => {
if (data == null) {
update: (store, { data: updateData }) => {
if (updateData == null) {
console.error("Cannot update event participant cache, because of data null value.");
return;
}
@@ -159,7 +152,7 @@ export default class ParticipationWithoutAccount extends Vue {
return;
}
if (data.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
event.participantStats.notConfirmed += 1;
} else {
event.participantStats.going += 1;

9
js/src/components/Settings/SettingsOnboarding.vue
View File

@@ -26,12 +26,9 @@
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Component, Vue } from "vue-property-decorator";
import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
import {
ICurrentUser,
INotificationPendingParticipationEnum,
} from "../../types/current-user.model";
import { ICurrentUser } from "../../types/current-user.model";
import RouteName from "../../router/name";
@Component({
@@ -46,7 +43,7 @@ export default class SettingsOnboarding extends Vue {
RouteName = RouteName;
async updateSetting(variables: object) {
async updateSetting(variables: Record<string, unknown>): Promise<void> {
await this.$apollo.mutate<{ setUserSettings: string }>({
mutation: SET_USER_SETTINGS,
variables,

107
js/src/components/Utils/RedirectWithAccount.vue Normal file
View File

@@ -0,0 +1,107 @@
<template>
<section class="section container hero is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column has-text-centered">
<b-button
type="is-primary"
size="is-medium"
tag="router-link"
:to="{
name: RouteName.LOGIN,
query: {
code: LoginErrorCode.NEED_TO_LOGIN,
redirect: pathAfterLogin,
},
}"
>{{ $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>{{ sentence }}</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>
</div>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
import Subtitle from "@/components/Utils/Subtitle.vue";
import { LoginErrorCode } from "@/types/login-error-code.model";
import RouteName from "../../router/name";
@Component({
components: { Subtitle, VerticalDivider },
})
export default class RedirectWithAccount extends Vue {
@Prop({ type: String, required: true }) uri!: string;
@Prop({ type: String, required: false }) pathAfterLogin!: string;
@Prop({ type: String, required: false }) sentence!: string;
remoteActorAddress = "";
RouteName = RouteName;
LoginErrorCode = LoginErrorCode;
// eslint-disable-next-line class-methods-use-this
get host(): string {
return window.location.hostname;
}
async redirectToInstance(): Promise<void> {
const [, host] = 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();
if (data && Array.isArray(data.links)) {
const link: { template: string } = data.links.find(
(someLink: any) =>
someLink &&
typeof someLink.template === "string" &&
someLink.rel === "http://ostatus.org/schema/1.0/subscribe"
);
if (link && link.template.includes("{uri}")) {
return link.template.replace("{uri}", encodeURIComponent(this.uri));
}
}
throw new Error("No interaction path found in webfinger data");
}
}
</script>