feat: allow customization of user nickname

src/components/inbox/InboxDetailsUserIdentity.vue

@@ -99,9 +99,14 @@ export default {
   computed: {
     userName(): string {
       // Prefer profile-based name, since we are showing the full profile here \
-      //   (from vCard)
-      if (this.profile.name) {
-        return `${this.profile.name.first} ${this.profile.name.last}`;
+      //   from vCard. Set priority on user-defined given name, or else use \
+      //   user full name.
+      if (this.profile.name?.nick) {
+        return this.profile.name.nick;
+      }
+
+      if (this.profile.name?.full) {
+        return `${this.profile.name.full.first} ${this.profile.name.full.last}`;
       }
 
       return this.room.name;

src/components/inbox/InboxDetailsUserSecurityDetailsIdentity.vue

@@ -118,13 +118,12 @@ export default {
     },
 
     userName(): string {
-      // Prefer profile-based name, since we are showing the full profile here \
-      //   (from vCard)
-      if (this.profile.name) {
-        return `${this.profile.name.first} ${this.profile.name.last}`;
+      // Prefer profile-based full name (ie. name from official identity)
+      if (this.profile.name?.full) {
+        return `${this.profile.name.full.first} ${this.profile.name.full.last}`;
       }
 
-      return this.room.name;
+      return this.jid.toString();
     },
 
     identityUrl(): string {

src/components/popups/sidebar/EditProfileIdentity.vue

@@ -60,8 +60,8 @@ export default {
 
       fieldsets: [
         {
-          id: "name",
-          title: "Name",
+          id: "full_name",
+          title: "Full name",
 
           fields: [
             {
@@ -72,13 +72,7 @@ export default {
               data: {
                 value: this.form.nameFirst,
                 placeholder: "Enter your first name…"
-              } as FormFieldsetFieldDataInput,
-
-              aside: {
-                type: FormFieldsetFieldAsideType.Link,
-                label: "Get verified",
-                disabled: true
-              }
+              } as FormFieldsetFieldDataInput
             },
 
             {
@@ -94,8 +88,33 @@ export default {
           ],
 
           notes: [
-            "In order to show a verified badge on your profile, visible to other users, you should get your real identity verified (first name & last name). The process takes a few seconds: you will be asked to submit a government ID (ID card, password or driving license). Note that the verified status is optional.",
-            "Your data will be processed on an external service. This service does not keep any record of your ID after your verified status is confirmed."
+            "Your full name is visible from everyone in your team. It should be your real name. If you want to specify a different display name, you can set it right below."
+          ],
+
+          options: {
+            aside: FormFieldsetOptionAside.Fixed
+          }
+        },
+
+        {
+          id: "display_name",
+          title: "Display name",
+
+          fields: [
+            {
+              id: "nickname",
+              type: FormFieldsetFieldType.Input,
+              label: "Name:",
+
+              data: {
+                value: this.form.nickname,
+                placeholder: "Enter a display name…"
+              } as FormFieldsetFieldDataInput
+            }
+          ],
+
+          notes: [
+            "You can opt to specify a display name that's different from your full name, if you want people to refer to you using a different name."
           ],
 
           options: {
@@ -134,19 +153,13 @@ export default {
               data: {
                 value: this.form.phone,
                 placeholder: "Enter your phone number…"
-              } as FormFieldsetFieldDataInput,
-
-              aside: {
-                type: FormFieldsetFieldAsideType.Link,
-                label: "Get verified",
-                disabled: true
-              }
+              } as FormFieldsetFieldDataInput
             }
           ],
 
           notes: [
             "Your email address and phone number are public. They are visible to all team members and contacts. They will not be available to other users.",
-            "It is recommended that your email address and phone number each get verified, as this increases the level of trust of your profile. The process only takes a few seconds: you will receive a link to verify your contact details."
+            "Make sure that your email address is verified, for account security purposes."
           ],
 
           options: {

src/popups/sidebar/EditProfile.vue

@@ -95,6 +95,7 @@ type FormValueString = { inner: string };
 export interface FormIdentity {
   nameFirst: FormValueString;
   nameLast: FormValueString;
+  nickname: FormValueString;
   email: FormValueString;
   phone: FormValueString;
 }
@@ -160,6 +161,7 @@ export default {
             form: {
               nameFirst: { inner: "" },
               nameLast: { inner: "" },
+              nickname: { inner: "" },
               email: { inner: "" },
               phone: { inner: "" }
             } as FormIdentity
@@ -263,30 +265,23 @@ export default {
         formProfile = this.contentSections.profile.properties.form;
 
       // Populate identity form
-      if (profile.name) {
-        formIdentity.nameFirst.inner = profile.name.first;
-        formIdentity.nameLast.inner = profile.name.last;
-      }
+      formIdentity.nameFirst.inner = profile.name?.full?.first || "";
+      formIdentity.nameLast.inner = profile.name?.full?.last || "";
+      formIdentity.nickname.inner = profile.name?.nick || "";
 
-      if (profile.information && profile.information.contact) {
-        formIdentity.email.inner = profile.information.contact.email || "";
-        formIdentity.phone.inner = profile.information.contact.phone || "";
-      }
+      formIdentity.email.inner = profile.information?.contact?.email || "";
+      formIdentity.phone.inner = profile.information?.contact?.phone || "";
 
       // Populate profile form
-      if (profile.employment) {
-        formProfile.jobOrganization.inner =
-          profile.employment.organization || "";
-        formProfile.jobTitle.inner = profile.employment.title || "";
-      }
+      formProfile.jobOrganization.inner =
+        profile.employment?.organization || "";
+      formProfile.jobTitle.inner = profile.employment?.title || "";
 
-      if (profile.information && profile.information.location) {
-        formProfile.locationCity.inner =
-          profile.information.location.city || "";
+      formProfile.locationCity.inner =
+        profile.information?.location?.city || "";
 
-        formProfile.locationCountry.inner =
-          profile.information.location.country || "";
-      }
+      formProfile.locationCountry.inner =
+        profile.information?.location?.country || "";
     },
 
     formsToUserProfile(
@@ -298,6 +293,7 @@ export default {
       // Assign base information
       profile.firstName = formIdentity.nameFirst.inner || undefined;
       profile.lastName = formIdentity.nameLast.inner || undefined;
+      profile.nickname = formIdentity.nickname.inner || undefined;
       profile.email = formIdentity.email.inner || undefined;
       profile.phone = formIdentity.phone.inner || undefined;
 

src/store/tables/profile.ts

@@ -23,6 +23,11 @@ import Broker from "@/broker";
  * ************************************************************************* */
 
 type ProfileEntryName = {
+  full?: ProfileEntryNameFull;
+  nick?: string;
+};
+
+type ProfileEntryNameFull = {
   first: string;
   last: string;
 };
@@ -221,14 +226,22 @@ const $profile = defineStore("profile", {
       } else {
         // Update data in store
         this.$patch(() => {
-          // #1. Store name
+          // #1. Store name (full name & nick name)
+          profile.name = profile.name || {};
+
           if (userProfile.firstName || userProfile.lastName) {
-            profile.name = {
+            profile.name.full = {
               first: userProfile.firstName || "",
               last: userProfile.lastName || ""
             };
           } else {
-            delete profile.name;
+            delete profile.name.full;
+          }
+
+          if (userProfile.nickname) {
+            profile.name.nick = userProfile.nickname;
+          } else {
+            delete profile.name.nick;
           }
 
           // #2. Store employment