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

@@ -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: {

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: {

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
 		>

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
 		>

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>

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,

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,

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,