Remove invisible characters from display names

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Changed
+
+- Remove invisible characters from display names.
+
 ## [1.13.0] - 2023-02-06
 
 ### Added

src/api/users.ts

@@ -89,7 +89,14 @@ export class ProfileWrapper {
   }
 
   getDisplayName(): string {
-    return this.display_name || this.username
+    let cleanDisplayName
+    if (this.display_name) {
+      // Replace control characters
+      cleanDisplayName = this.display_name.replace(/\p{C}/gu, "")
+    } else {
+      cleanDisplayName = this.display_name
+    }
+    return cleanDisplayName || this.username
   }
 
   getVerifiedEthereumAddress(): string | null {

src/components/PostOrRepost.vue

@@ -6,7 +6,7 @@
         :to="{ name: 'profile', params: { profileId: post.account.id }}"
         :title="getActorAddress(post.account)"
       >
-        {{ post.account.display_name || post.account.username }}
+        {{ author.getDisplayName() }}
       </router-link>
       <span>reposted</span>
     </div>
@@ -27,14 +27,15 @@
 </template>
 
 <script setup lang="ts">
-import { $ } from "vue/macros"
+import { $, $computed } from "vue/macros"
 
 import type { Post as PostObject } from "@/api/posts"
+import { ProfileWrapper } from "@/api/users"
 import Post from "@/components/Post.vue"
 import { useInstanceInfo } from "@/store/instance"
 
 /* eslint-disable-next-line no-undef */
-defineProps<{
+const props = defineProps<{
   post: PostObject,
 }>()
 /* eslint-disable-next-line no-undef */
@@ -42,6 +43,8 @@ const emit = defineEmits<{(event: "post-deleted", postId: string): void}>()
 
 const { getActorAddress } = $(useInstanceInfo())
 
+const author = $computed(() => new ProfileWrapper(props.post.account))
+
 function onPostDeleted(postId: string) {
   emit("post-deleted", postId)
 }

src/components/ProfileCard.vue

@@ -7,7 +7,7 @@
       <div class="avatar-row">
         <avatar :profile="profile"></avatar>
         <div class="name-group">
-          <div class="display-name">{{ profile.display_name || profile.username }}</div>
+          <div class="display-name">{{ profile.getDisplayName() }}</div>
           <div class="actor-address">@{{ getActorAddress(profile) }}</div>
         </div>
       </div>
@@ -23,17 +23,21 @@
 </template>
 
 <script setup lang="ts">
-import { Profile } from "@/api/users"
+import { $computed } from "vue/macros"
+
+import { Profile, ProfileWrapper } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import { useInstanceInfo } from "@/store/instance"
 
 /* eslint-disable-next-line no-undef */
-defineProps<{
+const props = defineProps<{
   profile: Profile,
   compact: boolean,
 }>()
 
 const { getActorAddress } = useInstanceInfo()
+
+const profile = $computed(() => new ProfileWrapper(props.profile))
 </script>
 
 <style scoped lang="scss">

src/components/ProfileListItem.vue

@@ -2,23 +2,27 @@
   <div class="profile">
     <avatar :profile="profile"></avatar>
     <div class="name">
-      <div class="display-name">{{ profile.display_name || profile.username }}</div>
+      <div class="display-name">{{ profile.getDisplayName() }}</div>
       <div class="actor-address">@{{ getActorAddress(profile) }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Profile } from "@/api/users"
+import { $computed } from "vue/macros"
+
+import { Profile, ProfileWrapper } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import { useInstanceInfo } from "@/store/instance"
 
 const { getActorAddress } = useInstanceInfo()
 
 /* eslint-disable-next-line no-undef */
-defineProps<{
+const props = defineProps<{
   profile: Profile,
 }>()
+
+const profile = $computed(() => new ProfileWrapper(props.profile))
 </script>
 
 <style scoped lang="scss">

src/views/NotificationList.vue

@@ -70,6 +70,7 @@ import { $ } from "vue/macros"
 import { PAGE_SIZE } from "@/api/common"
 import { updateNotificationMarker } from "@/api/markers"
 import { getNotifications, Notification } from "@/api/notifications"
+import { ProfileWrapper } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import Post from "@/components/Post.vue"
 import SidebarLayout from "@/components/SidebarLayout.vue"
@@ -94,8 +95,8 @@ onMounted(async () => {
 })
 
 function getSenderName(notification: Notification): string {
-  const sender = notification.account
+  const sender = new ProfileWrapper(notification.account)
-  return sender.display_name || sender.username
+  return sender.getDisplayName()
 }
 
 function getSenderInfo(notification: Notification): string {