Improve texts

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

js/src/views/Account/IdentityPicker.vue

@@ -8,6 +8,7 @@
         <a
           class="list-item"
           v-for="identity in identities"
+          :key="identity.id"
           :class="{ 'is-active': identity.id === currentIdentity.id }"
           @click="changeCurrentIdentity(identity)"
         >
@@ -49,7 +50,7 @@ export default class IdentityPicker extends Vue {
 
   currentIdentity: IActor = this.value;
 
-  changeCurrentIdentity(identity: IActor) {
+  changeCurrentIdentity(identity: IActor): void {
     this.currentIdentity = identity;
     this.$emit("input", identity);
   }

js/src/views/Account/IdentityPickerWrapper.vue

@@ -3,8 +3,8 @@
     <div
       v-if="inline"
       class="inline box"
-      :class="{ 'has-background-grey-lighter': masked }"
-      @click="isComponentModalActive = true"
+      :class="{ 'has-background-grey-lighter': masked, 'no-other-identity': !hasOtherIdentities }"
+      @click="activateModal"
     >
       <div class="media">
         <div class="media-left">
@@ -23,29 +23,35 @@
         <div class="media-content" v-else>
           {{ `@${currentIdentity.preferredUsername}` }}
         </div>
-        <b-button type="is-text" @click="isComponentModalActive = true">
+        <b-button type="is-text" v-if="identities.length > 1" @click="activateModal">
           {{ $t("Change") }}
         </b-button>
       </div>
     </div>
-    <span v-else class="block" @click="isComponentModalActive = true">
+    <span v-else 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 :active.sync="isComponentModalActive" has-modal-card>
+    <b-modal v-model="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 { IDENTITIES } from "@/graphql/actor";
 import { IActor } from "../../types/actor";
 import IdentityPicker from "./IdentityPicker.vue";
 
 @Component({
   components: { IdentityPicker },
+  apollo: {
+    identities: {
+      query: IDENTITIES,
+    },
+  },
 })
 export default class IdentityPickerWrapper extends Vue {
   @Prop() value!: IActor;
@@ -56,18 +62,30 @@ export default class IdentityPickerWrapper extends Vue {
 
   isComponentModalActive = false;
 
+  identities: IActor[] = [];
+
   currentIdentity: IActor = this.value;
 
   @Watch("value")
-  updateCurrentActor(value: IActor) {
+  updateCurrentActor(value: IActor): void {
     this.currentIdentity = value;
   }
 
-  relay(identity: IActor) {
+  relay(identity: IActor): void {
     this.currentIdentity = identity;
     this.$emit("input", identity);
     this.isComponentModalActive = false;
   }
+
+  get hasOtherIdentities(): boolean {
+    return this.identities.length > 1;
+  }
+
+  activateModal(): void {
+    if (this.hasOtherIdentities) {
+      this.isComponentModalActive = true;
+    }
+  }
 }
 </script>
 <style lang="scss">
@@ -76,7 +94,7 @@ export default class IdentityPickerWrapper extends Vue {
     cursor: pointer;
   }
 
-  .inline {
+  .inline:not(.no-other-identity) {
     cursor: pointer;
   }
 

js/src/views/Account/Profile.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue } 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";
@@ -123,12 +123,6 @@ export default class Profile extends Vue {
 
   currentActor!: IPerson;
 
-  // // call again the method if the route changes
-  // @Watch('$route')
-  // onRouteChange() {
-  //   // this.fetchData()
-  // }
-
   feedUrls(format: "ics" | "webcal:" | "atom", isPublic = true): string {
     let url = format === "ics" ? "webcal:" : "";
     url += `//${MOBILIZON_INSTANCE_HOST}/`;
@@ -140,7 +134,7 @@ export default class Profile extends Vue {
     return url + (format === "ics" ? "ics" : "atom");
   }
 
-  async createToken() {
+  async createToken(): Promise<void> {
     const { data } = await this.$apollo.mutate({
       mutation: CREATE_FEED_TOKEN_ACTOR,
       variables: { actor_id: this.person.id },

js/src/views/Account/Register.vue

@@ -33,9 +33,16 @@
               </p>
             </b-field>
           </b-field>
+          <p class="description">
+            {{
+              $t(
+                "The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it."
+              )
+            }}
+          </p>
 
-          <b-field :label="$t('Description')">
-            <b-input type="textarea" v-model="identity.summary" />
+          <b-field :label="$t('Bio')">
+            <b-input type="textarea" maxlength="100" rows="2" v-model="identity.summary" />
           </b-field>
 
           <p class="control has-text-centered">
@@ -94,20 +101,20 @@ export default class Register extends mixins(identityEditionMixin) {
 
   host?: string = MOBILIZON_INSTANCE_HOST;
 
-  errors: object = {};
+  errors: Record<string, unknown> = {};
 
   validationSent = false;
 
   sendingValidation = false;
 
-  async created() {
+  async created(): Promise<void> {
     // Make sure no one goes to this page if we don't want to
     if (!this.email) {
       await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
     }
   }
 
-  async submit() {
+  async submit(): Promise<void> {
     try {
       this.sendingValidation = true;
       this.errors = {};
@@ -170,4 +177,9 @@ export default class Register extends mixins(identityEditionMixin) {
 .container .columns {
   margin: 1rem auto 3rem;
 }
+
+p.description {
+  font-size: 0.9rem;
+  margin-bottom: 10px;
+}
 </style>