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 { Person } from '@/types/actor';
@Component
@Component({})
export default class IdentityEditionMixin extends Mixins(Vue) {
identity = new Person();
identity: Person = new Person();
oldDisplayName: string | null = null;
autoUpdateUsername(newDisplayName: string | null) {

View File

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

View File

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

View File

@ -1,11 +1,11 @@
<template>
<div class="root">
<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>
</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-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_]+"/>
<p class="control">
<span class="button is-static">@{{ getInstanceHost() }}</span>
<span class="button is-static">@{{ getInstanceHost }}</span>
</p>
</b-field>
</b-field>
@ -112,14 +112,24 @@ import identityEditionMixin from '@/mixins/identityEdition';
currentActor: {
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) {
@Prop({ type: Boolean }) isUpdate!: boolean;
@Prop({ type: String }) identityName!: string;
errors: string[] = [];
identityName!: string | undefined;
avatarFile: File | null = null;
private currentActor: IPerson | null = null;
@ -134,24 +144,18 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
this.resetFields();
}
@Watch('$route.params.identityName', { immediate: true })
async onIdentityParamChanged (val: string) {
@Watch('identityName', { immediate: true })
async onIdentityParamChanged(val) {
// Only used when we update the identity
if (this.isUpdate !== true) return;
if (!this.isUpdate) return;
await this.redirectIfNoIdentitySelected(val);
this.resetFields();
this.identityName = val;
const identity = await this.getIdentity();
if (!identity) {
if (!this.identityName) {
return await this.$router.push({ name: 'CreateIdentity' });
}
if (this.identityName && identity) {
this.identity = identity;
if (this.identityName && this.identity) {
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;
}
@ -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) {
console.error(err);
@ -325,7 +315,7 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
return res;
}
private async redirectIfNoIdentitySelected (identityParam?: string) {
private async redirectIfNoIdentitySelected(identityParam?: string) {
if (!!identityParam) return;
await this.loadLoggedPersonIfNeeded();
@ -356,7 +346,6 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
}
private resetFields () {
this.identityName = undefined;
this.identity = new Person();
this.oldDisplayName = null;
this.avatarFile = null;