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

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

@@ -1,29 +1,39 @@
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t('Pick an identity') }}</p>
</header>
<section class="modal-card-body">
<div class="list is-hoverable">
<a class="list-item" v-for="identity in identities" :class="{ 'is-active': identity.id === currentIdentity.id }" @click="changeCurrentIdentity(identity)">
<div class="media">
<img class="media-left image is-48x48" v-if="identity.avatar" :src="identity.avatar.url" alt="" />
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
<div class="media-content">
<h3>@{{ identity.preferredUsername }}</h3>
<small>{{ identity.name }}</small>
</div>
</div>
</a>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ $t("Pick an identity") }}</p>
</header>
<section class="modal-card-body">
<div class="list is-hoverable">
<a
class="list-item"
v-for="identity in identities"
:class="{ 'is-active': identity.id === currentIdentity.id }"
@click="changeCurrentIdentity(identity)"
>
<div class="media">
<img
class="media-left image is-48x48"
v-if="identity.avatar"
:src="identity.avatar.url"
alt=""
/>
<b-icon class="media-left" v-else size="is-large" icon="account-circle" />
<div class="media-content">
<h3>@{{ identity.preferredUsername }}</h3>
<small>{{ identity.name }}</small>
</div>
</section>
<slot name="footer" />
</div>
</div>
</a>
</div>
</section>
<slot name="footer" />
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { IActor } from '@/types/actor';
import { IDENTITIES } from '@/graphql/actor';
import { Component, Prop, Vue } from "vue-property-decorator";
import { IActor } from "@/types/actor";
import { IDENTITIES } from "@/graphql/actor";
@Component({
apollo: {
@@ -34,13 +44,14 @@ import { IDENTITIES } from '@/graphql/actor';
})
export default class IdentityPicker extends Vue {
@Prop() value!: IActor;
identities: IActor[] = [];
currentIdentity: IActor = this.value;
changeCurrentIdentity(identity: IActor) {
this.currentIdentity = identity;
this.$emit('input', identity);
this.$emit("input", identity);
}
}
</script>
</script>

96
js/src/views/Account/IdentityPickerWrapper.vue
View File

@@ -1,60 +1,86 @@
<template>
<div class="identity-picker">
<span v-if="inline" class="inline">
<img class="image" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/>
<b-icon v-else size="is-small" icon="account-circle" />
{{ currentIdentity.name || `@${currentIdentity.preferredUsername}` }}
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t('Change') }}
</b-button>
</span>
<span v-else class="block" @click="isComponentModalActive = true">
<img class="image is-48x48" v-if="currentIdentity.avatar" :src="currentIdentity.avatar.url" :alt="currentIdentity.avatar.alt"/>
<b-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<identity-picker v-model="currentIdentity" @input="relay" />
</b-modal>
<div class="identity-picker">
<div
v-if="inline"
class="inline box"
:class="{ 'has-background-grey-lighter': masked }"
@click="isComponentModalActive = true"
>
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="currentIdentity.avatar">
<img class="image" :src="currentIdentity.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="currentIdentity.name">
<p class="is-4">{{ currentIdentity.name }}</p>
<p class="is-6 has-text-grey">
{{ `@${currentIdentity.preferredUsername}` }}
<span v-if="masked">{{ $t("(Masked)") }}</span>
</p>
</div>
<div class="media-content" v-else>
{{ `@${currentIdentity.preferredUsername}` }}
</div>
<b-button type="is-text" @click="isComponentModalActive = true">
{{ $t("Change") }}
</b-button>
</div>
</div>
<span v-else class="block" @click="isComponentModalActive = true">
<img
class="image is-48x48"
v-if="currentIdentity.avatar"
:src="currentIdentity.avatar.url"
alt=""
/>
<b-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal :active.sync="isComponentModalActive" has-modal-card>
<identity-picker v-model="currentIdentity" @input="relay" />
</b-modal>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { IActor } from '@/types/actor';
import IdentityPicker from './IdentityPicker.vue';
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { IActor } from "../../types/actor";
import IdentityPicker from "./IdentityPicker.vue";
@Component({
components: { IdentityPicker },
})
export default class IdentityPickerWrapper extends Vue {
@Prop() value!: IActor;
@Prop({ default: true, type: Boolean }) inline!: boolean;
isComponentModalActive: boolean = false;
@Prop({ type: Boolean, required: false, default: false }) masked = false;
isComponentModalActive = false;
currentIdentity: IActor = this.value;
@Watch('value')
updateCurrentActor(value) {
@Watch("value")
updateCurrentActor(value: IActor) {
this.currentIdentity = value;
}
relay(identity: IActor) {
this.currentIdentity = identity;
this.$emit('input', identity);
this.$emit("input", identity);
this.isComponentModalActive = false;
}
}
</script>
<style lang="scss">
.identity-picker {
.identity-picker {
.block {
cursor: pointer;
}
.block {
cursor: pointer;
}
.inline img.image {
display: inline;
height: 1.5em;
vertical-align: text-bottom;
}
}
.inline {
cursor: pointer;
}
}
</style>

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

@@ -3,14 +3,14 @@
<div v-if="person">
<div class="card-image" v-if="person.banner">
<figure class="image">
<img :src="person.banner.url">
<img :src="person.banner.url" />
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="person.avatar">
<img :src="person.avatar.url">
<img :src="person.avatar.url" />
</figure>
</div>
<div class="media-content">
@@ -24,46 +24,46 @@
<b-dropdown hoverable has-link aria-role="list">
<button class="button is-primary" slot="trigger">
{{ $t('Public feeds') }}
{{ $t("Public feeds") }}
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', true)">
{{ $t('Public RSS/Atom Feed') }}
{{ $t("Public RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', true)">
{{ $t('Public iCal Feed') }}
{{ $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">
{{ $t('Private feeds') }}
{{ $t("Private feeds") }}
<b-icon icon="menu-down"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', false)">
{{ $t('RSS/Atom Feed') }}
{{ $t("RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', false)">
{{ $t('iCal Feed') }}
{{ $t("iCal Feed") }}
</a>
</b-dropdown-item>
</b-dropdown>
<a class="button" v-if="currentActor.id === person.id" @click="createToken">
{{ $t('Create token') }}
{{ $t("Create token") }}
</a>
</div>
<section v-if="person.organizedEvents.length > 0">
<h2 class="subtitle">
{{ $t('Organized') }}
{{ $t("Organized") }}
</h2>
<div class="columns">
<EventCard
@@ -81,7 +81,7 @@
@click="deleteProfile()"
v-if="currentActor && currentActor.id === person.id"
>
{{ $t('Delete') }}
{{ $t("Delete") }}
</a>
</p>
</div>
@@ -91,12 +91,12 @@
</template>
<script lang="ts">
import { FETCH_PERSON, CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import EventCard from '@/components/Event/EventCard.vue';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { IPerson } from '@/types/actor';
import { CREATE_FEED_TOKEN_ACTOR } from '@/graphql/feed_tokens';
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import { FETCH_PERSON, CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
import { IPerson } from "../../types/actor";
import { CREATE_FEED_TOKEN_ACTOR } from "../../graphql/feed_tokens";
@Component({
apollo: {
@@ -120,23 +120,24 @@ export default class Profile extends Vue {
@Prop({ type: String, required: true }) name!: string;
person!: IPerson;
currentActor!: IPerson;
// call again the method if the route changes
@Watch('$route')
onRouteChange() {
// this.fetchData()
}
// // call again the method if the route changes
// @Watch('$route')
// onRouteChange() {
// // this.fetchData()
// }
feedUrls(format, isPublic = true): string {
let url = format === 'ics' ? 'webcal:' : '';
feedUrls(format: "ics" | "webcal:" | "atom", isPublic = true): string {
let url = format === "ics" ? "webcal:" : "";
url += `//${MOBILIZON_INSTANCE_HOST}/`;
if (isPublic === true) {
url += `@${this.person.preferredUsername}/feed/`;
} else {
url += `events/going/${this.person.feedTokens[0].token}/`;
}
return url + (format === 'ics' ? 'ics' : 'atom');
return url + (format === "ics" ? "ics" : "atom");
}
async createToken() {
@@ -150,7 +151,7 @@ export default class Profile extends Vue {
}
</script>
<style lang="scss">
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
@import "../../variables";
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/components/dropdown.sass";
</style>

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

@@ -2,15 +2,18 @@
<section class="section container">
<div class="columns is-mobile is-centered">
<div class="column is-half-desktop">
<h1 class="title">
{{ $t('Register an account on Mobilizon!') }}
</h1>
<b-message v-if="userAlreadyActivated">
{{ $t('To achieve your registration, please create a first identity profile.')}}
</b-message>
<h1 class="title">{{ $t("Register an account on Mobilizon!") }}</h1>
<b-message v-if="userAlreadyActivated">{{
$t("To achieve your registration, please create a first identity profile.")
}}</b-message>
<form v-if="!validationSent" @submit.prevent="submit">
<b-field :label="$t('Display name')">
<b-input aria-required="true" required v-model="identity.name" @input="autoUpdateUsername($event)"/>
<b-input
aria-required="true"
required
v-model="identity.name"
@input="autoUpdateUsername($event)"
/>
</b-field>
<b-field
@@ -32,26 +35,32 @@
</b-field>
<b-field :label="$t('Description')">
<b-input type="textarea" v-model="identity.summary"/>
<b-input type="textarea" v-model="identity.summary" />
</b-field>
<p class="control has-text-centered">
<b-button type="is-primary" size="is-large" native-type="submit">
{{ $t('Create my profile') }}
</b-button>
<b-button type="is-primary" size="is-large" native-type="submit">{{
$t("Create my profile")
}}</b-button>
</p>
</form>
<div v-if="validationSent && !userAlreadyActivated">
<b-message title="Success" type="is-success" closable="false">
<h2 class="title">
{{ $t('Your account is nearly ready, {username}', { username: identity.preferredUsername }) }}
{{
$t("Your account is nearly ready, {username}", {
username: identity.preferredUsername,
})
}}
</h2>
<p>{{ $t("A validation email was sent to {email}", { email }) }}</p>
<p>
{{ $t('A validation email was sent to {email}', { email }) }}
</p>
<p>
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
{{
$t(
"Before you can login, you need to click on the link inside it to validate your account"
)
}}
</p>
</b-message>
</div>
@@ -61,25 +70,29 @@
</template>
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import { IPerson } from '@/types/actor';
import { IDENTITIES, REGISTER_PERSON } from '@/graphql/actor';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { RouteName } from '@/router';
import { changeIdentity } from '@/utils/auth';
import { mixins } from 'vue-class-component';
import identityEditionMixin from '@/mixins/identityEdition';
import { Component, Prop } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import { IPerson } from "../../types/actor";
import { IDENTITIES, REGISTER_PERSON } from "../../graphql/actor";
import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
import RouteName from "../../router/name";
import { changeIdentity } from "../../utils/auth";
import identityEditionMixin from "../../mixins/identityEdition";
@Component
export default class Register extends mixins(identityEditionMixin) {
@Prop({ type: String, required: true }) email!: string;
@Prop({ type: Boolean, required: false, default: false }) userAlreadyActivated!: boolean;
@Prop({ type: Boolean, required: false, default: false })
userAlreadyActivated!: boolean;
host?: string = MOBILIZON_INSTANCE_HOST;
errors: object = {};
validationSent: boolean = false;
sendingValidation: boolean = false;
validationSent = false;
sendingValidation = false;
async created() {
// Make sure no one goes to this page if we don't want to
@@ -94,13 +107,15 @@ export default class Register extends mixins(identityEditionMixin) {
this.errors = {};
const { data } = await this.$apollo.mutate<{ registerPerson: IPerson }>({
mutation: REGISTER_PERSON,
variables: Object.assign({ email: this.email }, this.identity),
update: (store, { data }) => {
variables: { email: this.email, ...this.identity },
update: (store, { data: localData }) => {
if (this.userAlreadyActivated) {
const identitiesData = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
const identitiesData = store.readQuery<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (identitiesData && data) {
identitiesData.identities.push(data.registerPerson);
if (identitiesData && localData) {
identitiesData.identities.push(localData.registerPerson);
store.writeQuery({ query: IDENTITIES, data: identitiesData });
}
}
@@ -108,7 +123,7 @@ export default class Register extends mixins(identityEditionMixin) {
});
if (data) {
this.validationSent = true;
window.localStorage.setItem('new-registered-user', 'yes');
window.localStorage.setItem("new-registered-user", "yes");
if (this.userAlreadyActivated) {
await changeIdentity(this.$apollo.provider.defaultClient, data.registerPerson);
@@ -116,13 +131,16 @@ export default class Register extends mixins(identityEditionMixin) {
await this.$router.push({ name: RouteName.HOME });
}
}
} catch (error) {
this.errors = error.graphQLErrors.reduce((acc, error) => {
acc[error.details] = error.message;
return acc;
}, {});
console.error('Error while registering person', error);
console.error('Errors while registering person', this.errors);
} catch (errorCatched) {
this.errors = errorCatched.graphQLErrors.reduce(
(acc: { [key: string]: string }, error: any) => {
acc[error.details] = error.message;
return acc;
},
{}
);
console.error("Error while registering person", errorCatched);
console.error("Errors while registering person", this.errors);
}
}
}
@@ -142,7 +160,7 @@ export default class Register extends mixins(identityEditionMixin) {
display: none;
}
.container .columns {
margin: 1rem auto 3rem;
}
.container .columns {
margin: 1rem auto 3rem;
}
</style>

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

@@ -2,18 +2,36 @@
<div class="root" v-if="identity">
<h1 class="title">
<span v-if="isUpdate">{{ identity.displayName() }}</span>
<span v-else>{{ $t('I create an identity') }}</span>
<span v-else>{{ $t("I create an identity") }}</span>
</h1>
<picture-upload v-model="avatarFile" class="picture-upload" />
<b-field horizontal :label="$t('Display name')">
<b-input aria-required="true" required v-model="identity.name" @input="autoUpdateUsername($event)"/>
<b-input
aria-required="true"
required
v-model="identity.name"
@input="autoUpdateUsername($event)"
/>
</b-field>
<b-field horizontal custom-class="username-field" expanded :label="$t('Username')" :message="message">
<b-field
horizontal
custom-class="username-field"
expanded
:label="$t('Username')"
:message="message"
>
<b-field expanded>
<b-input aria-required="true" required v-model="identity.preferredUsername" :disabled="isUpdate" :use-html5-validation="!isUpdate" pattern="[a-z0-9_]+"/>
<b-input
aria-required="true"
required
v-model="identity.preferredUsername"
:disabled="isUpdate"
:use-html5-validation="!isUpdate"
pattern="[a-z0-9_]+"
/>
<p class="control">
<span class="button is-static">@{{ getInstanceHost }}</span>
@@ -22,69 +40,65 @@
</b-field>
<b-field horizontal :label="$t('Description')">
<b-input type="textarea" aria-required="false" v-model="identity.summary"/>
<b-input type="textarea" aria-required="false" v-model="identity.summary" />
</b-field>
<b-notification
type="is-danger"
has-icon
aria-close-label="Close notification"
role="alert"
:key="error"
v-for="error in errors"
type="is-danger"
has-icon
aria-close-label="Close notification"
role="alert"
:key="error"
v-for="error in errors"
>{{ error }}</b-notification
>
{{ error }}
</b-notification>
<b-field class="submit">
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
{{ $t('Save') }}
</button>
<button type="button" class="button is-primary" @click="submit()">{{ $t("Save") }}</button>
</div>
</b-field>
<div class="delete-identity" v-if="isUpdate">
<span @click="openDeleteIdentityConfirmation()">
{{ $t('Delete this identity') }}
</span>
<span @click="openDeleteIdentityConfirmation()">{{ $t("Delete this identity") }}</span>
</div>
</div>
</template>
<style scoped type="scss">
h1 {
display: flex;
justify-content: center;
}
h1 {
display: flex;
justify-content: center;
}
.picture-upload {
margin: 30px 0;
}
.picture-upload {
margin: 30px 0;
}
.submit,
.delete-identity {
display: flex;
justify-content: center;
}
.submit,
.delete-identity {
display: flex;
justify-content: center;
}
.submit {
margin: 30px 0;
}
.submit {
margin: 30px 0;
}
.delete-identity {
text-decoration: underline;
cursor: pointer;
margin-top: 15px;
}
.delete-identity {
text-decoration: underline;
cursor: pointer;
margin-top: 15px;
}
.username-field + .field {
margin-bottom: 0;
}
.username-field + .field {
margin-bottom: 0;
}
</style>
<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import { Component, Prop, Watch } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import {
CREATE_PERSON,
CURRENT_ACTOR_CLIENT,
@@ -92,21 +106,18 @@ import {
FETCH_PERSON,
IDENTITIES,
UPDATE_PERSON,
} from '@/graphql/actor';
import { IPerson, Person } from '@/types/actor';
import PictureUpload from '@/components/PictureUpload.vue';
import { MOBILIZON_INSTANCE_HOST } from '@/api/_entrypoint';
import { Dialog } from 'buefy/dist/components/dialog';
import { RouteName } from '@/router';
import { buildFileFromIPicture, buildFileVariable, readFileAsync } from '@/utils/image';
import { changeIdentity } from '@/utils/auth';
import { mixins } from 'vue-class-component';
import identityEditionMixin from '@/mixins/identityEdition';
} from "../../../graphql/actor";
import { IPerson, Person } from "../../../types/actor";
import PictureUpload from "../../../components/PictureUpload.vue";
import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
import RouteName from "../../../router/name";
import { buildFileFromIPicture, buildFileVariable, readFileAsync } from "../../../utils/image";
import { changeIdentity } from "../../../utils/auth";
import identityEditionMixin from "../../../mixins/identityEdition";
@Component({
components: {
PictureUpload,
Dialog,
},
apollo: {
currentActor: {
@@ -119,13 +130,16 @@ import identityEditionMixin from '@/mixins/identityEdition';
username: this.identityName,
};
},
skip() { return !this.identityName; },
update: data => new Person(data.fetchPerson),
skip() {
return !this.identityName;
},
update: (data) => new Person(data.fetchPerson),
},
},
})
export default class EditIdentity extends mixins(identityEditionMixin) {
@Prop({ type: Boolean }) isUpdate!: boolean;
@Prop({ type: String }) identityName!: string;
errors: string[] = [];
@@ -136,23 +150,23 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
get message() {
if (this.isUpdate) return null;
return this.$t('Only alphanumeric characters and underscores are supported.');
return this.$t("Only alphanumeric characters and underscores are supported.");
}
@Watch('isUpdate')
async isUpdateChanged () {
@Watch("isUpdate")
async isUpdateChanged() {
this.resetFields();
}
@Watch('identityName', { immediate: true })
async onIdentityParamChanged(val) {
@Watch("identityName", { immediate: true })
async onIdentityParamChanged(val: string) {
// Only used when we update the identity
if (!this.isUpdate) return;
await this.redirectIfNoIdentitySelected(val);
if (!this.identityName) {
return await this.$router.push({ name: 'CreateIdentity' });
return await this.$router.push({ name: "CreateIdentity" });
}
if (this.identityName && this.identity) {
@@ -177,10 +191,12 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
id: this.identity.id,
},
update: (store) => {
const data = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
const data = store.readQuery<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
data.identities = data.identities.filter(i => i.id !== this.identity.id);
data.identities = data.identities.filter((i) => i.id !== this.identity.id);
store.writeQuery({ query: IDENTITIES, data });
}
@@ -188,12 +204,16 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
});
this.$notifier.success(
this.$t('Identity {displayName} deleted', { displayName: this.identity.displayName() }) as string,
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
*/
const data = this.$apollo.provider.defaultClient.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
const data = this.$apollo.provider.defaultClient.readQuery<{
identities: IPerson[];
}>({ query: IDENTITIES });
if (data) {
await this.maybeUpdateCurrentActorCache(data.identities[0]);
}
@@ -212,10 +232,12 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
mutation: UPDATE_PERSON,
variables,
update: (store, { data: { updatePerson } }) => {
const data = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
const data = store.readQuery<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
const index = data.identities.findIndex(i => i.id === this.identity.id);
const index = data.identities.findIndex((i) => i.id === this.identity.id);
this.$set(data.identities, index, updatePerson);
this.maybeUpdateCurrentActorCache(updatePerson);
@@ -226,7 +248,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
});
this.$notifier.success(
this.$t('Identity {displayName} updated', { displayName: this.identity.displayName() }) as string,
this.$t("Identity {displayName} updated", {
displayName: this.identity.displayName(),
}) as string
);
} catch (err) {
this.handleError(err);
@@ -241,7 +265,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
mutation: CREATE_PERSON,
variables,
update: (store, { data: { createPerson } }) => {
const data = store.readQuery<{ identities: IPerson[] }>({ query: IDENTITIES });
const data = store.readQuery<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
data.identities.push(createPerson);
@@ -252,10 +278,15 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
});
this.$notifier.success(
this.$t('Identity {displayName} created', { displayName: this.identity.displayName() }) as string,
this.$t("Identity {displayName} created", {
displayName: this.identity.displayName(),
}) as string
);
await this.$router.push({ name: RouteName.UPDATE_IDENTITY, params: { identityName: this.identity.preferredUsername } });
await this.$router.push({
name: RouteName.UPDATE_IDENTITY,
params: { identityName: this.identity.preferredUsername },
});
} catch (err) {
this.handleError(err);
}
@@ -267,18 +298,25 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
openDeleteIdentityConfirmation() {
this.$buefy.dialog.prompt({
type: 'is-danger',
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.')}
type: "is-danger",
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.')}
${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 },
) as string,
${this.$t('To confirm, type your identity username "{preferredUsername}"', {
preferredUsername: this.identity.preferredUsername,
})}`,
confirmText: this.$t("Delete {preferredUsername}", {
preferredUsername: this.identity.preferredUsername,
}) as string,
inputAttrs: {
placeholder: this.identity.preferredUsername,
pattern: this.identity.preferredUsername,
@@ -292,20 +330,24 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
console.error(err);
if (err.graphQLErrors !== undefined) {
err.graphQLErrors.forEach(({ message }) => {
err.graphQLErrors.forEach(({ message }: { message: string }) => {
this.$notifier.error(message);
});
}
}
private async buildVariables() {
const avatarObj = buildFileVariable(this.avatarFile, 'avatar', `${this.identity.preferredUsername}'s avatar`);
const res = Object.assign({}, this.identity, avatarObj);
const avatarObj = buildFileVariable(
this.avatarFile,
"avatar",
`${this.identity.preferredUsername}'s avatar`
);
const res = { ...this.identity, ...avatarObj };
/**
* If the avatar didn't change, no need to try reuploading it
*/
if (this.identity.avatar) {
const oldAvatarFile = await buildFileFromIPicture(this.identity.avatar) as File;
const oldAvatarFile = (await buildFileFromIPicture(this.identity.avatar)) as File;
const oldAvatarFileContent = await readFileAsync(oldAvatarFile);
const newAvatarFileContent = await readFileAsync(this.avatarFile as File);
if (oldAvatarFileContent === newAvatarFileContent) {
@@ -316,12 +358,14 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
}
private async redirectIfNoIdentitySelected(identityParam?: string) {
if (!!identityParam) return;
if (identityParam) return;
await this.loadLoggedPersonIfNeeded();
if (!!this.currentActor) {
await this.$router.push({ params: { identityName: this.currentActor.preferredUsername } });
if (this.currentActor) {
await this.$router.push({
params: { identityName: this.currentActor.preferredUsername },
});
}
}
@@ -334,18 +378,18 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
}
}
private async loadLoggedPersonIfNeeded (bypassCache = false) {
private async loadLoggedPersonIfNeeded(bypassCache = false) {
if (this.currentActor) return;
const result = await this.$apollo.query({
query: CURRENT_ACTOR_CLIENT,
fetchPolicy: bypassCache ? 'network-only' : undefined,
fetchPolicy: bypassCache ? "network-only" : undefined,
});
this.currentActor = result.data.currentActor;
}
private resetFields () {
private resetFields() {
this.identity = new Person();
this.oldDisplayName = null;
this.avatarFile = null;