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.
This commit is contained in:
Austin Anderson 2021-05-22 10:42:57 -07:00
parent db807d0c56
commit 4d310cd545
8 changed files with 35 additions and 9 deletions

View File

@ -6,17 +6,20 @@
>username to <b>{{ message.new_ident }}</b></span >username to <b>{{ message.new_ident }}</b></span
> >
<span v-if="message.new_host" <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> </span>
</template> </template>
<script> <script>
import ParsedMessage from "../ParsedMessage.vue";
import Username from "../Username.vue"; import Username from "../Username.vue";
export default { export default {
name: "MessageTypeChangeHost", name: "MessageTypeChangeHost",
components: { components: {
ParsedMessage,
Username, Username,
}, },
props: { props: {

View File

@ -1,7 +1,7 @@
<template> <template>
<span class="content"> <span class="content">
<Username :user="message.from" /> <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"> <template v-if="message.account">
<i class="account"> [{{ message.account }}]</i> <i class="account"> [{{ message.account }}]</i>
</template> </template>
@ -13,11 +13,13 @@
</template> </template>
<script> <script>
import ParsedMessage from "../ParsedMessage.vue";
import Username from "../Username.vue"; import Username from "../Username.vue";
export default { export default {
name: "MessageTypeJoin", name: "MessageTypeJoin",
components: { components: {
ParsedMessage,
Username, Username,
}, },
props: { props: {

View File

@ -1,7 +1,8 @@
<template> <template>
<span class="content"> <span class="content">
<Username :user="message.from" /> <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" <i v-if="message.text" class="part-reason"
>(<ParsedMessage :network="network" :message="message" />)</i >(<ParsedMessage :network="network" :message="message" />)</i
> >

View File

@ -1,7 +1,8 @@
<template> <template>
<span class="content"> <span class="content">
<Username :user="message.from" /> <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" <i v-if="message.text" class="quit-reason"
>(<ParsedMessage :network="network" :message="message" />)</i >(<ParsedMessage :network="network" :message="message" />)</i
> >

View File

@ -12,7 +12,12 @@
</template> </template>
<dt>Host mask:</dt> <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"> <template v-if="message.whois.actual_hostname">
<dt>Actual host:</dt> <dt>Actual host:</dt>

View File

@ -9,7 +9,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="ban in channel.data" :key="ban.hostmask"> <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_by">{{ ban.banned_by }}</td>
<td class="banned_at">{{ localetime(ban.banned_at) }}</td> <td class="banned_at">{{ localetime(ban.banned_at) }}</td>
</tr> </tr>
@ -18,10 +18,14 @@
</template> </template>
<script> <script>
import ParsedMessage from "../ParsedMessage.vue";
import localetime from "../../js/helpers/localetime"; import localetime from "../../js/helpers/localetime";
export default { export default {
name: "ListBans", name: "ListBans",
components: {
ParsedMessage,
},
props: { props: {
network: Object, network: Object,
channel: Object, channel: Object,

View File

@ -8,7 +8,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="user in channel.data" :key="user.hostmask"> <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> <td class="when">{{ localetime(user.when) }}</td>
</tr> </tr>
</tbody> </tbody>
@ -16,10 +16,14 @@
</template> </template>
<script> <script>
import ParsedMessage from "../ParsedMessage.vue";
import localetime from "../../js/helpers/localetime"; import localetime from "../../js/helpers/localetime";
export default { export default {
name: "ListIgnored", name: "ListIgnored",
components: {
ParsedMessage,
},
props: { props: {
network: Object, network: Object,
channel: Object, channel: Object,

View File

@ -9,7 +9,9 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="invite in channel.data" :key="invite.hostmask"> <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_by">{{ invite.invited_by }}</td>
<td class="invitened_at">{{ localetime(invite.invited_at) }}</td> <td class="invitened_at">{{ localetime(invite.invited_at) }}</td>
</tr> </tr>
@ -18,10 +20,14 @@
</template> </template>
<script> <script>
import ParsedMessage from "../ParsedMessage.vue";
import localetime from "../../js/helpers/localetime"; import localetime from "../../js/helpers/localetime";
export default { export default {
name: "ListInvites", name: "ListInvites",
components: {
ParsedMessage,
},
props: { props: {
network: Object, network: Object,
channel: Object, channel: Object,