Google Translate Links + Scam Warnings on Messages

src/components/MessageBox.vue

@@ -1,6 +1,7 @@
 <script>
 import EmojiPicker from 'vue3-emoji-picker';
 import LocalStorage from '../lib/LocalStorage';
+import ScamDetection from './ScamDetection.vue';
 import 'vue3-emoji-picker/css';
 
 export default {
@@ -23,6 +24,7 @@ export default {
     },
     components: {
         EmojiPicker,
+        ScamDetection,
     },
     data() {
         return {
@@ -163,6 +165,13 @@ export default {
             return false;
         },
 
+        // Google Translate link.
+        translate() {
+            let message = this.message?.message.replace(/<(.|\n)+?>/g, "");
+            let url = `https://translate.google.com/?sl=auto&tl=en&text=${encodeURIComponent(message)}&op=translate`;
+            window.open(url);
+        },
+
         // TODO: DRY
         prettyDate(date) {
             if (date == undefined) return '';
@@ -317,12 +326,21 @@ export default {
 
         <!-- Report & Emoji buttons -->
         <div v-if="message.msgID && !noButtons" class="emoji-button columns is-mobile is-gapless mb-0">
+            <!-- Translate message button -->
+            <div class="column">
+                <button class="button is-small mr-1 py-2 has-text-success"
+                    title="Translate this message using Google Translate"
+                    @click.prevent="translate()">
+                    <i class="fab fa-google"></i>
+                </button>
+            </div>
+
             <!-- Report message button -->
             <div class="column" v-if="reportEnabled && message.username !== username">
                 <button class="button is-small is-outlined mr-1 py-2" :class="{
                     'is-danger': !message.reported,
                     'has-text-grey': message.reported
-                }" title="Report this message" @click="reportMessage()">
+                }" title="Report this message" @click.prevent="reportMessage()">
                     <i class="fa fa-flag"></i>
                     <i class="fa fa-check ml-1" v-if="message.reported"></i>
                 </button>
@@ -333,7 +351,7 @@ export default {
                 @click="showEmojiPicker = true">
                 <div class="dropdown-trigger">
                     <button type="button" class="button is-small px-2" aria-haspopup="true"
-                        :aria-controls="`react-menu-${message.msgID}`" @click="hideEmojiPicker()">
+                        :aria-controls="`react-menu-${message.msgID}`" @click.prevent="hideEmojiPicker()">
                         <span>
                             <i class="fa fa-heart has-text-grey"></i>
                             <i class="fa fa-plus has-text-grey pl-1"></i>
@@ -356,6 +374,12 @@ export default {
             <em v-if="message.action === 'presence'">{{ message.message }}</em>
             <div v-else v-html="message.message"></div>
 
+            <!-- Possible scam message disclaimer -->
+            <ScamDetection v-if="message.username !== username"
+                :username="message.username"
+                :message="message.message">
+            </ScamDetection>
+
             <!-- Reactions so far? -->
             <div v-if="hasReactions" class="mt-1">
                 <span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag mr-1 cursor-pointer"
@@ -424,6 +448,12 @@ export default {
                 </strong>
 
                 <span v-html="compactMessage"></span>
+
+                <!-- Possible scam message disclaimer -->
+                <ScamDetection v-if="message.username !== username"
+                    :username="message.username"
+                    :message="message.message">
+                </ScamDetection>
             </div>
 
             <!-- Reactions so far? -->
@@ -495,6 +525,13 @@ export default {
                                 Hide message
                             </a>
 
+                            <!-- Google Translate -->
+                            <a href="#" class="dropdown-item"
+                                @click.prevent="translate()">
+                                <i class="fab fa-google mr-1"></i>
+                                Google Translate <i class="fa fa-external-link ml-1"></i>
+                            </a>
+
                             <!-- Report button -->
                             <a href="#" class="dropdown-item" v-if="reportEnabled && message.username !== username"
                                 @click.prevent="reportMessage()">

src/components/ScamDetection.vue

@@ -0,0 +1,63 @@
+<script>
+export default {
+    props: {
+        username: String,
+        message: String,
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+        // Scam/spam detection and warning.
+        maybeWhatsAppScam() {
+            return this.message.match(/whats\s*app/i);
+        },
+        maybePhoneNumberScam() {
+            return this.message.match(/\b(phone number|phone|digits|cell number|your number|ur number|text me)\b/i);
+        },
+        maybeOffPlatformScam() {
+            return this.message.match(/\b(telegram|signal|kik|session)\b/i);
+        },
+    },
+    methods: {
+    }
+}
+</script>
+
+<template>
+    <div v-if="maybeWhatsAppScam" class="notification is-danger is-light px-3 py-2 my-2">
+        <strong class="has-text-danger">
+            <i class="fa fa-exclamation-triangle mr-1"></i>
+            Be careful about possible scams!
+        </strong>
+        It sounds like @{{ username }} is talking about moving this conversation to <i class="fab fa-whatsapp"></i> WhatsApp.
+        If this happened within the first couple of messages, be wary! It is a well-known tactic for con artists to move your
+        conversation away to another platform as soon as possible, in order to evade detection from the website.
+        <br><br>
+        <strong>Be especially skeptical of <i class="fab fa-whatsapp"></i> WhatsApp</strong> or trading phone numbers. Scammers
+        can do <strong>a lot</strong> of harm with just your phone number, e.g. by plugging it into a people search website
+        and bringing up lots of personal information about you.
+    </div>
+    <div v-else-if="maybeOffPlatformScam" class="notification is-danger is-light px-3 py-2 my-2">
+        <strong class="has-text-danger">
+            <i class="fa fa-exclamation-triangle mr-1"></i>
+            Be careful about possible scams!
+        </strong>
+        It sounds like @{{ username }} is talking about moving this conversation to another messenger platform.
+        If this happened within the first couple of messages, be wary! It is a well-known tactic for con artists to move your
+        conversation away to another platform as soon as possible, in order to evade detection from the website.
+    </div>
+    <div v-else-if="maybePhoneNumberScam" class="notification is-danger is-light px-3 py-2 my-2">
+        <strong class="has-text-danger">
+            <i class="fa fa-exclamation-triangle mr-1"></i>
+            Be careful about possible scams!
+        </strong>
+        It sounds like @{{ username }} may want to get your phone number. If this happened within the first couple of messages,
+        be wary! Scammers can do <strong>a lot</strong> of harm with just your phone number, e.g. by plugging it into a people
+        search website and bringing up lots of personal information about you.
+    </div>
+</template>
+
+<style scoped>
+</style>