Fix an issue on My Account page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-12-17 19:32:48 +01:00
parent 056b696b36
commit ebb39aab63
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
4 changed files with 32 additions and 41 deletions

View File

@ -1,10 +1,10 @@
import { Component, Mixins, Vue } from 'vue-property-decorator'; import { Component, Mixins, Vue } from 'vue-property-decorator';
import { Person } from '@/types/actor'; import { Person } from '@/types/actor';
@Component @Component({})
export default class IdentityEditionMixin extends Mixins(Vue) { export default class IdentityEditionMixin extends Mixins(Vue) {
identity = new Person(); identity: Person = new Person();
oldDisplayName: string | null = null; oldDisplayName: string | null = null;
autoUpdateUsername(newDisplayName: string | null) { autoUpdateUsername(newDisplayName: string | null) {

View File

@ -55,13 +55,13 @@ export const actorRoutes: RouteConfig[] = [
path: 'create', path: 'create',
name: MyAccountRouteName.CREATE_IDENTITY, name: MyAccountRouteName.CREATE_IDENTITY,
component: EditIdentity, component: EditIdentity,
props: { isUpdate: false }, props: (route) => ({ identityName: route.params.identityName, isUpdate: false }),
}, },
{ {
path: 'update/:identityName?', path: 'update/:identityName?',
name: MyAccountRouteName.UPDATE_IDENTITY, name: MyAccountRouteName.UPDATE_IDENTITY,
component: EditIdentity, component: EditIdentity,
props: { isUpdate: true }, props: (route) => ({ identityName: route.params.identityName, isUpdate: true }),
}, },
], ],
}, },

View File

@ -2,7 +2,9 @@
<section class="container"> <section class="container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <nav class="breadcrumb" aria-label="breadcrumbs">
<ul> <ul>
<li class="is-active"><router-link :to="{ name: RouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link></li> <li class="is-active">
<router-link :to="{ name: RouteName.UPDATE_IDENTITY }" aria-current="page">{{ $t('My account') }}</router-link>
</li>
</ul> </ul>
</nav> </nav>
<div v-if="currentActor"> <div v-if="currentActor">
@ -14,13 +16,13 @@
<div class="columns"> <div class="columns">
<div class="identities column is-4"> <div class="identities column is-4">
<identities v-bind:currentIdentityName="currentIdentityName"></identities> <identities :currentIdentityName="currentIdentityName" />
<div class="buttons"> <div class="buttons">
<b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button> <b-button tag="router-link" type="is-secondary" :to="{ name: RouteName.PASSWORD_CHANGE }">{{ $t('Change password') }}</b-button>
</div> </div>
</div> </div>
<div class="column is-8"> <div class="column is-8">
<router-view></router-view> <router-view />
</div> </div>
</div> </div>
</div> </div>
@ -68,13 +70,13 @@ export default class MyAccount extends Vue {
RouteName = RouteName; RouteName = RouteName;
@Watch('$route.params.identityName', { immediate: true }) @Watch('$route.params.identityName', { immediate: true })
async onIdentityParamChanged (val: string) { async onIdentityParamChanged(val: string) {
await this.redirectIfNoIdentitySelected(val); await this.redirectIfNoIdentitySelected(val);
this.currentIdentityName = val; this.currentIdentityName = val;
} }
private async redirectIfNoIdentitySelected (identityParam?: string) { private async redirectIfNoIdentitySelected(identityParam?: string) {
if (!!identityParam) return; if (!!identityParam) return;
if (!!this.currentActor) { if (!!this.currentActor) {

View File

@ -1,11 +1,11 @@
<template> <template>
<div class="root"> <div class="root" v-if="identity">
<h1 class="title"> <h1 class="title">
<span v-if="isUpdate">{{ identity.displayName() }}</span> <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> </h1>
<picture-upload v-model="avatarFile" class="picture-upload"></picture-upload> <picture-upload v-model="avatarFile" class="picture-upload" />
<b-field horizontal :label="$t('Display name')"> <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)"/>
@ -16,7 +16,7 @@
<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"> <p class="control">
<span class="button is-static">@{{ getInstanceHost() }}</span> <span class="button is-static">@{{ getInstanceHost }}</span>
</p> </p>
</b-field> </b-field>
</b-field> </b-field>
@ -112,14 +112,24 @@ import identityEditionMixin from '@/mixins/identityEdition';
currentActor: { currentActor: {
query: CURRENT_ACTOR_CLIENT, query: CURRENT_ACTOR_CLIENT,
}, },
identity: {
query: FETCH_PERSON,
variables() {
return {
username: this.identityName,
};
},
skip() { return !this.identityName; },
update: data => new Person(data.fetchPerson),
},
}, },
}) })
export default class EditIdentity extends mixins(identityEditionMixin) { export default class EditIdentity extends mixins(identityEditionMixin) {
@Prop({ type: Boolean }) isUpdate!: boolean; @Prop({ type: Boolean }) isUpdate!: boolean;
@Prop({ type: String }) identityName!: string;
errors: string[] = []; errors: string[] = [];
identityName!: string | undefined;
avatarFile: File | null = null; avatarFile: File | null = null;
private currentActor: IPerson | null = null; private currentActor: IPerson | null = null;
@ -134,24 +144,18 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
this.resetFields(); this.resetFields();
} }
@Watch('$route.params.identityName', { immediate: true }) @Watch('identityName', { immediate: true })
async onIdentityParamChanged (val: string) { async onIdentityParamChanged(val) {
// Only used when we update the identity // Only used when we update the identity
if (this.isUpdate !== true) return; if (!this.isUpdate) return;
await this.redirectIfNoIdentitySelected(val); await this.redirectIfNoIdentitySelected(val);
this.resetFields(); if (!this.identityName) {
this.identityName = val;
const identity = await this.getIdentity();
if (!identity) {
return await this.$router.push({ name: 'CreateIdentity' }); return await this.$router.push({ name: 'CreateIdentity' });
} }
if (this.identityName && identity) { if (this.identityName && this.identity) {
this.identity = identity;
this.avatarFile = await buildFileFromIPicture(this.identity.avatar); this.avatarFile = await buildFileFromIPicture(this.identity.avatar);
} }
} }
@ -257,7 +261,7 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
} }
} }
getInstanceHost() { get getInstanceHost() {
return MOBILIZON_INSTANCE_HOST; return MOBILIZON_INSTANCE_HOST;
} }
@ -284,20 +288,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
}); });
} }
private async getIdentity(): Promise<Person|null> {
try {
const result = await this.$apollo.query({
query: FETCH_PERSON,
variables: {
username: this.identityName,
},
});
return new Person(result.data.fetchPerson);
} catch (e) {
return null;
}
}
private handleError(err: any) { private handleError(err: any) {
console.error(err); console.error(err);
@ -325,7 +315,7 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
return res; return res;
} }
private async redirectIfNoIdentitySelected (identityParam?: string) { private async redirectIfNoIdentitySelected(identityParam?: string) {
if (!!identityParam) return; if (!!identityParam) return;
await this.loadLoggedPersonIfNeeded(); await this.loadLoggedPersonIfNeeded();
@ -356,7 +346,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
} }
private resetFields () { private resetFields () {
this.identityName = undefined;
this.identity = new Person(); this.identity = new Person();
this.oldDisplayName = null; this.oldDisplayName = null;
this.avatarFile = null; this.avatarFile = null;