From 9e4378d4db0f91096590592d230b1e1551d989d4 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 29 Sep 2021 18:21:24 +0200
Subject: [PATCH] Fix an issue with Identity Picker

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Comment/CommentTree.vue      |  2 +-
 js/src/views/Account/IdentityPicker.vue        |  4 +++-
 js/src/views/Account/IdentityPickerWrapper.vue | 17 +++++++++--------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index baf759e1..4d997bee 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -12,7 +12,7 @@
         >{{ $t("Comments are closed for everybody else.") }}</b-notification
       >
       <article class="media">
-        <figure class="media-left">
+        <figure class="media-left" v-if="newComment.actor">
           <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
         </figure>
         <div class="media-content">
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index 071ea193..5aaefc4b 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -9,7 +9,9 @@
           class="list-item"
           v-for="identity in identities"
           :key="identity.id"
-          :class="{ 'is-active': identity.id === currentIdentity.id }"
+          :class="{
+            'is-active': currentIdentity && identity.id === currentIdentity.id,
+          }"
           @click="changeCurrentIdentity(identity)"
         >
           <div class="media">
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index 368b9ba4..81b09a4b 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="identity-picker">
     <div
-      v-if="inline"
+      v-if="inline && currentIdentity"
       class="inline box"
       :class="{
         'has-background-grey-lighter': masked,
@@ -39,14 +39,14 @@
         </b-button>
       </div>
     </div>
-    <span v-else class="block" @click="activateModal">
+    <span v-else-if="currentIdentity" class="block" @click="activateModal">
       <figure class="image is-48x48" v-if="currentIdentity.avatar">
         <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
       </figure>
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
     <b-modal v-model="isComponentModalActive" has-modal-card>
-      <identity-picker v-model="currentIdentity" @input="relay" />
+      <identity-picker v-model="currentIdentity" />
     </b-modal>
   </div>
 </template>
@@ -69,21 +69,22 @@ export default class IdentityPickerWrapper extends Vue {
 
   @Prop({ default: true, type: Boolean }) inline!: boolean;
 
-  @Prop({ type: Boolean, required: false, default: false }) masked = false;
+  @Prop({ type: Boolean, required: false, default: false }) masked!: boolean;
 
   isComponentModalActive = false;
 
   identities: IActor[] = [];
 
-  currentIdentity: IActor = this.value;
-
   @Watch("value")
   updateCurrentActor(value: IActor): void {
     this.currentIdentity = value;
   }
 
-  relay(identity: IActor): void {
-    this.currentIdentity = identity;
+  get currentIdentity(): IActor | undefined {
+    return this.value;
+  }
+
+  set currentIdentity(identity: IActor | undefined) {
     this.$emit("input", identity);
     this.isComponentModalActive = false;
   }