From 4d310cd545984d4c7ea767fdc0a8f85396e55f66 Mon Sep 17 00:00:00 2001
From: Austin Anderson <angerson@google.com>
Date: Sat, 22 May 2021 10:42:57 -0700
Subject: [PATCH] Render styling for colored host masks

On some IRC networks, users have vanity host masks with colors or other text styling.
Rizon is one such network.

For example, a user connecting from 127.0.0.1 could instead have the host
angerson@this.is.my.host.mask. this.is.my.host.mask may have IRC color code
characters in it, which without this change would be displayed as a bunch of jumbled
garbage in the /whois response or join/part messages.

Resolves #4232.
---
 client/components/MessageTypes/chghost.vue | 7 +++++--
 client/components/MessageTypes/join.vue    | 4 +++-
 client/components/MessageTypes/part.vue    | 3 ++-
 client/components/MessageTypes/quit.vue    | 3 ++-
 client/components/MessageTypes/whois.vue   | 7 ++++++-
 client/components/Special/ListBans.vue     | 6 +++++-
 client/components/Special/ListIgnored.vue  | 6 +++++-
 client/components/Special/ListInvites.vue  | 8 +++++++-
 8 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/client/components/MessageTypes/chghost.vue b/client/components/MessageTypes/chghost.vue
index ef8e2f83..e54c245d 100644
--- a/client/components/MessageTypes/chghost.vue
+++ b/client/components/MessageTypes/chghost.vue
@@ -6,17 +6,20 @@
 			>username to <b>{{ message.new_ident }}</b></span
 		>
 		<span v-if="message.new_host"
-			>hostname to <i class="hostmask">{{ message.new_host }}</i></span
-		>
+			>hostname to
+			<i class="hostmask"><ParsedMessage :network="network" :text="message.new_host" /></i
+		></span>
 	</span>
 </template>
 
 <script>
+import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
 export default {
 	name: "MessageTypeChangeHost",
 	components: {
+		ParsedMessage,
 		Username,
 	},
 	props: {
diff --git a/client/components/MessageTypes/join.vue b/client/components/MessageTypes/join.vue
index 882726d6..9e635742 100644
--- a/client/components/MessageTypes/join.vue
+++ b/client/components/MessageTypes/join.vue
@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask"> ({{ message.hostmask }})</i>
+		<i class="hostmask"> (<ParsedMessage :network="network" :text="message.hostmask" />)</i>
 		<template v-if="message.account">
 			<i class="account"> [{{ message.account }}]</i>
 		</template>
@@ -13,11 +13,13 @@
 </template>
 
 <script>
+import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
 export default {
 	name: "MessageTypeJoin",
 	components: {
+		ParsedMessage,
 		Username,
 	},
 	props: {
diff --git a/client/components/MessageTypes/part.vue b/client/components/MessageTypes/part.vue
index b4d31994..b2b18c2a 100644
--- a/client/components/MessageTypes/part.vue
+++ b/client/components/MessageTypes/part.vue
@@ -1,7 +1,8 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel
+		<i class="hostmask"> (<ParsedMessage :network="network" :text="message.hostmask" />)</i> has
+		left the channel
 		<i v-if="message.text" class="part-reason"
 			>(<ParsedMessage :network="network" :message="message" />)</i
 		>
diff --git a/client/components/MessageTypes/quit.vue b/client/components/MessageTypes/quit.vue
index 5376029d..a34cd58c 100644
--- a/client/components/MessageTypes/quit.vue
+++ b/client/components/MessageTypes/quit.vue
@@ -1,7 +1,8 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask"> ({{ message.hostmask }})</i> has quit
+		<i class="hostmask"> (<ParsedMessage :network="network" :text="message.hostmask" />)</i> has
+		quit
 		<i v-if="message.text" class="quit-reason"
 			>(<ParsedMessage :network="network" :message="message" />)</i
 		>
diff --git a/client/components/MessageTypes/whois.vue b/client/components/MessageTypes/whois.vue
index b198a823..5a080788 100644
--- a/client/components/MessageTypes/whois.vue
+++ b/client/components/MessageTypes/whois.vue
@@ -12,7 +12,12 @@
 			</template>
 
 			<dt>Host mask:</dt>
-			<dd class="hostmask">{{ message.whois.ident }}@{{ message.whois.hostname }}</dd>
+			<dd class="hostmask">
+				<ParsedMessage
+					:network="network"
+					:text="message.whois.ident + '@' + message.whois.hostname"
+				/>
+			</dd>
 
 			<template v-if="message.whois.actual_hostname">
 				<dt>Actual host:</dt>
diff --git a/client/components/Special/ListBans.vue b/client/components/Special/ListBans.vue
index d0e52cb4..781be944 100644
--- a/client/components/Special/ListBans.vue
+++ b/client/components/Special/ListBans.vue
@@ -9,7 +9,7 @@
 		</thead>
 		<tbody>
 			<tr v-for="ban in channel.data" :key="ban.hostmask">
-				<td class="hostmask">{{ ban.hostmask }}</td>
+				<td class="hostmask"><ParsedMessage :network="network" :text="ban.hostmask" /></td>
 				<td class="banned_by">{{ ban.banned_by }}</td>
 				<td class="banned_at">{{ localetime(ban.banned_at) }}</td>
 			</tr>
@@ -18,10 +18,14 @@
 </template>
 
 <script>
+import ParsedMessage from "../ParsedMessage.vue";
 import localetime from "../../js/helpers/localetime";
 
 export default {
 	name: "ListBans",
+	components: {
+		ParsedMessage,
+	},
 	props: {
 		network: Object,
 		channel: Object,
diff --git a/client/components/Special/ListIgnored.vue b/client/components/Special/ListIgnored.vue
index 0764dc22..be672266 100644
--- a/client/components/Special/ListIgnored.vue
+++ b/client/components/Special/ListIgnored.vue
@@ -8,7 +8,7 @@
 		</thead>
 		<tbody>
 			<tr v-for="user in channel.data" :key="user.hostmask">
-				<td class="hostmask">{{ user.hostmask }}</td>
+				<td class="hostmask"><ParsedMessage :network="network" :text="user.hostmask" /></td>
 				<td class="when">{{ localetime(user.when) }}</td>
 			</tr>
 		</tbody>
@@ -16,10 +16,14 @@
 </template>
 
 <script>
+import ParsedMessage from "../ParsedMessage.vue";
 import localetime from "../../js/helpers/localetime";
 
 export default {
 	name: "ListIgnored",
+	components: {
+		ParsedMessage,
+	},
 	props: {
 		network: Object,
 		channel: Object,
diff --git a/client/components/Special/ListInvites.vue b/client/components/Special/ListInvites.vue
index 6d85b7fd..9f59645e 100644
--- a/client/components/Special/ListInvites.vue
+++ b/client/components/Special/ListInvites.vue
@@ -9,7 +9,9 @@
 		</thead>
 		<tbody>
 			<tr v-for="invite in channel.data" :key="invite.hostmask">
-				<td class="hostmask">{{ invite.hostmask }}</td>
+				<td class="hostmask">
+					<ParsedMessage :network="network" :text="invite.hostmask" />
+				</td>
 				<td class="invitened_by">{{ invite.invited_by }}</td>
 				<td class="invitened_at">{{ localetime(invite.invited_at) }}</td>
 			</tr>
@@ -18,10 +20,14 @@
 </template>
 
 <script>
+import ParsedMessage from "../ParsedMessage.vue";
 import localetime from "../../js/helpers/localetime";
 
 export default {
 	name: "ListInvites",
+	components: {
+		ParsedMessage,
+	},
 	props: {
 		network: Object,
 		channel: Object,