From 09fe160e8b9fad7a8c70e44ae894d67211b993e1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 26 Feb 2021 16:23:11 +0200
Subject: [PATCH 1/2] separate screen_name and screen_name_ui with decoded
 punycode

---
 CHANGELOG.md                                           |  1 +
 src/components/basic_user_card/basic_user_card.vue     |  2 +-
 src/components/chat/chat.js                            |  2 +-
 src/components/chat_title/chat_title.js                |  2 +-
 src/components/emoji_input/suggestor.js                |  4 ++--
 src/components/notification/notification.vue           | 10 +++++-----
 src/components/status/status.js                        |  4 ++--
 src/components/status/status.vue                       |  6 +++---
 src/components/user_avatar/user_avatar.vue             |  4 ++--
 src/components/user_card/user_card.vue                 |  4 ++--
 src/components/user_list_popover/user_list_popover.vue |  2 +-
 .../user_reporting_modal/user_reporting_modal.vue      |  2 +-
 .../entity_normalizer/entity_normalizer.service.js     |  5 +++--
 .../entity_normalizer/entity_normalizer.spec.js        |  2 +-
 14 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2685fd324b..20d96f98c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed missing highlighted border in expanded conversations again
 - Fixed some UI jumpiness when opening images particularly in chat view
 - Fixed chat unread badge looking weird
+- Fixed punycode names not working properly
 
 ### Changed
 - Display 'people voted' instead of 'votes' for multi-choice polls
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 9e4106102d..c53f6a9c7f 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -42,7 +42,7 @@
           class="basic-user-card-screen-name"
           :to="userProfileLink(user)"
         >
-          @{{ user.screen_name }}
+          @{{ user.screen_name_ui }}
         </router-link>
       </div>
       <slot />
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 2780be75e9..b54f5fb2c1 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -73,7 +73,7 @@ const Chat = {
     },
     formPlaceholder () {
       if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
+        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
       } else {
         return ''
       }
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
index e424bb1f05..edfbe7a400 100644
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
   ],
   computed: {
     title () {
-      return this.user ? this.user.screen_name : ''
+      return this.user ? this.user.screen_name_ui : ''
     },
     htmlTitle () {
       return this.user ? this.user.name_html : ''
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index 14a2b41edf..e8efbd1e0a 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -116,8 +116,8 @@ export const suggestUsers = ({ dispatch, state }) => {
 
       return diff + nameAlphabetically + screenNameAlphabetically
       /* eslint-disable camelcase */
-    }).map(({ screen_name, name, profile_image_url_original }) => ({
-      displayText: screen_name,
+    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+      displayText: screen_name_ui,
       detailText: name,
       imageUrl: profile_image_url_original,
       replacement: '@' + screen_name + ' '
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index f56aa977da..0081dee4d0 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -11,7 +11,7 @@
     >
       <small>
         <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name }}
+          {{ notification.from_profile.screen_name_ui }}
         </router-link>
       </small>
       <button
@@ -54,14 +54,14 @@
             <bdi
               v-if="!!notification.from_profile.name_html"
               class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
               v-html="notification.from_profile.name_html"
             />
             <!-- eslint-enable vue/no-v-html -->
             <span
               v-else
               class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
               <FAIcon
@@ -152,7 +152,7 @@
             :to="userProfileLink"
             class="follow-name"
           >
-            @{{ notification.from_profile.screen_name }}
+            @{{ notification.from_profile.screen_name_ui }}
           </router-link>
           <div
             v-if="notification.type === 'follow_request'"
@@ -177,7 +177,7 @@
           class="move-text"
         >
           <router-link :to="targetUserProfileLink">
-            @{{ notification.target.screen_name }}
+            @{{ notification.target.screen_name_ui }}
           </router-link>
         </div>
         <template v-else>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 2bf93a9eb6..470c01f191 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -136,7 +136,7 @@ const Status = {
       }
     },
     retweet () { return !!this.statusoid.retweeted_status },
-    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name },
+    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
     retweeterHtml () { return this.statusoid.user.name_html },
     retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
     status () {
@@ -216,7 +216,7 @@ const Status = {
         return this.status.in_reply_to_screen_name
       } else {
         const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
-        return user && user.screen_name
+        return user && user.screen_name_ui
       }
     },
     replySubject () {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6ee8117f2a..00e962f301 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -26,7 +26,7 @@
             icon="retweet"
           />
           <router-link :to="userProfileLink">
-            {{ status.user.screen_name }}
+            {{ status.user.screen_name_ui }}
           </router-link>
         </small>
         <small
@@ -156,10 +156,10 @@
                 </h4>
                 <router-link
                   class="account-name"
-                  :title="status.user.screen_name"
+                  :title="status.user.screen_name_ui"
                   :to="userProfileLink"
                 >
-                  {{ status.user.screen_name }}
+                  {{ status.user.screen_name_ui }}
                 </router-link>
                 <img
                   v-if="!!(status.user && status.user.favicon)"
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 0f7c584b13..4040e263c8 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -2,8 +2,8 @@
   <StillImage
     v-if="user"
     class="Avatar"
-    :alt="user.screen_name"
-    :title="user.screen_name"
+    :alt="user.screen_name_ui"
+    :title="user.screen_name_ui"
     :src="imgSrc(user.profile_image_url_original)"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 572943b594..60776ebbba 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -73,10 +73,10 @@
             <div class="bottom-line">
               <router-link
                 class="user-screen-name"
-                :title="user.screen_name"
+                :title="user.screen_name_ui"
                 :to="userProfileLink(user)"
               >
-                @{{ user.screen_name }}
+                @{{ user.screen_name_ui }}
               </router-link>
               <template v-if="!hideBio">
                 <span
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 95673733e3..d0aa315e1d 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -26,7 +26,7 @@
             <!-- eslint-disable vue/no-v-html -->
             <span v-html="user.name_html" />
             <!-- eslint-enable vue/no-v-html -->
-            <span class="user-list-screen-name">{{ user.screen_name }}</span>
+            <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
           </div>
         </div>
       </div>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index fb43094f18..a71c02c193 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -6,7 +6,7 @@
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <div class="title">
-          {{ $t('user_reporting.title', [user.screen_name]) }}
+          {{ $t('user_reporting.title', [user.screen_name_ui]) }}
         </div>
       </div>
       <div class="panel-body">
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 6ed663e1c7..9b2b30e6b2 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -203,7 +203,8 @@ export const parseUser = (data) => {
   output.rights = output.rights || {}
   output.notification_settings = output.notification_settings || {}
 
-  // Convert punycode to unicode
+  // Convert punycode to unicode for UI
+  output.screen_name_ui = output.screen_name
   if (output.screen_name.includes('@')) {
     const parts = output.screen_name.split('@')
     let unicodeDomain = punycode.toUnicode(parts[1])
@@ -211,7 +212,7 @@ export const parseUser = (data) => {
       // Add some identifier so users can potentially spot spoofing attempts:
       // lain.com and xn--lin-6cd.com would appear identical otherwise.
       unicodeDomain = '🌏' + unicodeDomain
-      output.screen_name = [parts[0], unicodeDomain].join('@')
+      output.screen_name_ui = [parts[0], unicodeDomain].join('@')
     }
   }
 
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index a3f49b2cef..759539e0c8 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -315,7 +315,7 @@ describe('API Entities normalizer', () => {
     it('converts IDN to unicode and marks it as internatonal', () => {
       const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })
 
-      expect(parseUser(user)).to.have.property('screen_name').that.equal('lain@🌏lаin.com')
+      expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
     })
   })
 

From 49aa10e1c0e279d692fb92695f92e4b8548f6b12 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 26 Feb 2021 16:37:46 +0200
Subject: [PATCH 2/2] add screen_name_ui to tests

---
 test/unit/specs/components/user_profile.spec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 80092b410c..142db73ce6 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -31,13 +31,15 @@ const testGetters = {
 const localUser = {
   id: 100,
   is_local: true,
-  screen_name: 'testUser'
+  screen_name: 'testUser',
+  screen_name_ui: 'testUser'
 }
 
 const extUser = {
   id: 100,
   is_local: false,
-  screen_name: 'testUser@test.instance'
+  screen_name: 'testUser@test.instance',
+  screen_name_ui: 'testUser@test.instance'
 }
 
 const externalProfileStore = new Vuex.Store({