Add social media apps to Fake App tokens (#572)

* Add social media apps
* iOS -> Safari
* Increase opacity for non-selected app icons
* Make dist commit conditional on changes

.github/workflows/build_docker.yml

@@ -81,8 +81,12 @@ jobs:
         git config --global user.name "Frontend Github Action"
         git config --global user.email "max@thinkst.com"
         git add -f dist
-        git commit --allow-empty -am "Add Frontend Dist"
-        git push
+        # Only commit if any files have changed
+        # git status --porcelain is empty if there are no changes
+        if [ -n "$(git status --porcelain)" ]; then
+          git commit -am "Add Frontend Dist"
+          git push
+        fi
 
   build:
     needs: build-and-commit-frontend-dist

canarytokens/models.py

@@ -538,12 +538,16 @@ class PWAType(enum.Enum):
     chase = "chase"
     cred = "cred"
     dashlane = "dashlane"
+    discord = "discord"
+    facebook = "facebook"
     fnb = "fnb"
     gmail = "gmail"
     googlepay = "googlepay"
     googlewallet = "googlewallet"
     hdfc = "hdfc"
     icici = "icici"
+    instagram = "instagram"
+    messenger = "messenger"
     monzo = "monzo"
     n26 = "n26"
     nedbank = "nedbank"
@@ -557,9 +561,15 @@ class PWAType(enum.Enum):
     rbc = "rbc"
     revolut = "revolut"
     sbi = "sbi"
+    signal = "signal"
+    snapchat = "snapchat"
     snapscan = "snapscan"
     standard = "standard"
     starling = "starling"
+    telegram = "telegram"
+    tiktok = "tiktok"
+    twitter = "twitter"
+    whatsapp = "whatsapp"
     zapper = "zapper"
 
 
@@ -575,12 +585,16 @@ class PWAType(enum.Enum):
     PWAType.chase: "Chase",
     PWAType.cred: "CRED",
     PWAType.dashlane: "Dashlane",
+    PWAType.discord: "Discord",
+    PWAType.facebook: "Facebook",
     PWAType.fnb: "FNB",
     PWAType.gmail: "Gmail",
     PWAType.googlepay: "GPay",
     PWAType.googlewallet: "Wallet",
     PWAType.hdfc: "HDFC Bank",
     PWAType.icici: "iMobile Pay",
+    PWAType.instagram: "Instagram",
+    PWAType.messenger: "Messenger",
     PWAType.monzo: "Monzo",
     PWAType.n26: "N26",
     PWAType.nedbank: "Nedbank",
@@ -594,9 +608,15 @@ class PWAType(enum.Enum):
     PWAType.rbc: "RBC Mobile",
     PWAType.revolut: "Revolut",
     PWAType.sbi: "YONO SBI",
+    PWAType.signal: "Signal",
+    PWAType.snapchat: "Snapchat",
     PWAType.snapscan: "SnapScan",
     PWAType.standard: "Standard Bank",
     PWAType.starling: "Starling",
+    PWAType.telegram: "Telegram",
+    PWAType.tiktok: "TikTok",
+    PWAType.twitter: "X",
+    PWAType.whatsapp: "WhatsApp",
     PWAType.zapper: "Zapper",
 }
 

frontend_vue/src/components/base/BaseFormImageSelect.vue

@@ -26,7 +26,7 @@
           <div
             class="bg-cover min-w-[2.5rem] min-h-[2.5rem] rounded-2xl duration-100"
             :class="[
-              selectedImage === image.value ? 'opacity-100' : 'opacity-30',
+              selectedImage === image.value ? 'opacity-100' : 'opacity-40',
               imageClass,
             ]"
             :style="{ backgroundImage: `url(${image.url})` }"

frontend_vue/src/components/tokens/pwa/ActivatedToken.vue

@@ -1,7 +1,7 @@
 <template>
   <TokenDisplay :token-data="tokenSnippetData" />
   <p class="mt-16 text-sm text-center">
-    Remember, it gets triggered whenever someone opens the app.
+    The token gets triggered whenever you open the app.
   </p>
   <base-message-box
     class="mt-24"

frontend_vue/src/components/tokens/pwa/pwaIconService.ts

@@ -1,5 +1,4 @@
 import getImageUrl from '@/utils/getImageUrl';
-
 export const pwaIconService = [
   {
     value: 'absa',
@@ -56,6 +55,16 @@ export const pwaIconService = [
     label: 'Dashlane',
     url: `${getImageUrl('pwa_icons/pwa_dashlane.png')}`,
   },
+  {
+    value: 'discord',
+    label: 'Discord',
+    url: `${getImageUrl('pwa_icons/pwa_discord.png')}`
+  },
+  {
+    value: 'facebook',
+    label: 'Facebook',
+    url: `${getImageUrl('pwa_icons/pwa_facebook.png')}`
+  },
   {
     value: 'fnb',
     label: 'FNB',
@@ -86,6 +95,16 @@ export const pwaIconService = [
     label: 'iMobile Pay',
     url: `${getImageUrl('pwa_icons/pwa_icici.png')}`,
   },
+  {
+    value: 'instagram',
+    label: 'Instagram',
+    url: `${getImageUrl('pwa_icons/pwa_instagram.png')}`
+  },
+  {
+    value: 'messenger',
+    label: 'Messenger',
+    url: `${getImageUrl('pwa_icons/pwa_messenger.png')}`
+  },
   {
     value: 'monzo',
     label: 'Monzo',
@@ -151,6 +170,16 @@ export const pwaIconService = [
     label: 'YONO SBI',
     url: `${getImageUrl('pwa_icons/pwa_sbi.png')}`,
   },
+  {
+    value: 'signal',
+    label: 'Signal',
+    url: `${getImageUrl('pwa_icons/pwa_signal.png')}`
+  },
+  {
+    value: 'snapchat',
+    label: 'Snapchat',
+    url: `${getImageUrl('pwa_icons/pwa_snapchat.png')}`
+  },
   {
     value: 'snapscan',
     label: 'SnapScan',
@@ -166,6 +195,26 @@ export const pwaIconService = [
     label: 'Starling',
     url: `${getImageUrl('pwa_icons/pwa_starling.png')}`,
   },
+  {
+    value: 'telegram',
+    label: 'Telegram',
+    url: `${getImageUrl('pwa_icons/pwa_telegram.png')}`
+  },
+  {
+    value: 'tiktok',
+    label: 'TikTok',
+    url: `${getImageUrl('pwa_icons/pwa_tiktok.png')}`
+  },
+  {
+    value: 'twitter',
+    label: 'X',
+    url: `${getImageUrl('pwa_icons/pwa_twitter.png')}`
+  },
+  {
+    value: 'whatsapp',
+    label: 'WhatsApp',
+    url: `${getImageUrl('pwa_icons/pwa_whatsapp.png')}`
+  },
   {
     value: 'zapper',
     label: 'Zapper',

frontend_vue/src/utils/tokenServices.ts

@@ -88,7 +88,7 @@ export const tokenServices: TokenServicesType = {
     description: 'Get an alert when someone opens a fake app on your device.',
     documentationLink: 'https://docs.canarytokens.org/guide/fake-app-token.html',
     icon: `${TOKENS_TYPE.PWA}.png`,
-    instruction: 'Open the link to the app\'s page and install it from the Share menu.',
+    instruction: 'Open the link to the app\'s page in your Native Browser (iOS: Safari, Android: Chrome) and install the app.',
     howItWorksInstructions: [
       'We give you a fake app.',
       'You install it on your phone.',

templates/pwa.html

@@ -138,7 +138,7 @@
             <h1>Installation guide:</h1>
             <hr>
             <section id="iphone">
-                <h3>iOS (Chrome or Safari):</h3>
+                <h3>iOS (Safari):</h3>
                 <ol>
                     <li>
                         Tap the <strong>Share</strong> icon
@@ -155,7 +155,7 @@ <h3>iOS (Chrome or Safari):</h3>
             </section>
             <hr>
             <section id="android">
-                <h3>Android (Chrome only):</h3>
+                <h3>Android (Chrome):</h3>
                 <button class="install hcenter" style="margin-bottom: 3vw">Install</button>
                 <p>If <strong>Install</strong> above does not provide a prompt:</h4>
                 <ol>

templates/static/pwa/discord/icons.json

@@ -0,0 +1,132 @@
+{
+  "icons": [
+    {
+      "src": "android/android-launchericon-512-512.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "android/android-launchericon-192-192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "android/android-launchericon-144-144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "android/android-launchericon-96-96.png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "android/android-launchericon-72-72.png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "android/android-launchericon-48-48.png",
+      "sizes": "48x48"
+    },
+    {
+      "src": "ios/16.png",
+      "sizes": "16x16"
+    },
+    {
+      "src": "ios/20.png",
+      "sizes": "20x20"
+    },
+    {
+      "src": "ios/29.png",
+      "sizes": "29x29"
+    },
+    {
+      "src": "ios/32.png",
+      "sizes": "32x32"
+    },
+    {
+      "src": "ios/40.png",
+      "sizes": "40x40"
+    },
+    {
+      "src": "ios/50.png",
+      "sizes": "50x50"
+    },
+    {
+      "src": "ios/57.png",
+      "sizes": "57x57"
+    },
+    {
+      "src": "ios/58.png",
+      "sizes": "58x58"
+    },
+    {
+      "src": "ios/60.png",
+      "sizes": "60x60"
+    },
+    {
+      "src": "ios/64.png",
+      "sizes": "64x64"
+    },
+    {
+      "src": "ios/72.png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "ios/76.png",
+      "sizes": "76x76"
+    },
+    {
+      "src": "ios/80.png",
+      "sizes": "80x80"
+    },
+    {
+      "src": "ios/87.png",
+      "sizes": "87x87"
+    },
+    {
+      "src": "ios/100.png",
+      "sizes": "100x100"
+    },
+    {
+      "src": "ios/114.png",
+      "sizes": "114x114"
+    },
+    {
+      "src": "ios/120.png",
+      "sizes": "120x120"
+    },
+    {
+      "src": "ios/128.png",
+      "sizes": "128x128"
+    },
+    {
+      "src": "ios/144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "ios/152.png",
+      "sizes": "152x152"
+    },
+    {
+      "src": "ios/167.png",
+      "sizes": "167x167"
+    },
+    {
+      "src": "ios/180.png",
+      "sizes": "180x180"
+    },
+    {
+      "src": "ios/192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "ios/256.png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "ios/512.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "ios/1024.png",
+      "sizes": "1024x1024"
+    }
+  ]
+}