Fix an issue on My Account page

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/mixins/identityEdition.ts

@@ -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) {

js/src/router/actor.ts

@@ -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 }),
       },
     ],
   },

js/src/views/Account/MyAccount.vue

@@ -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>

js/src/views/Account/children/EditIdentity.vue

@@ -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);
 
@@ -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;