Add Fake IdP SAML App tokens: Frontend (#623)

* Add Idp App tokens to frontend

* Idp token Preview component (#603)

* Add animation to Download button

---------

Co-authored-by: vittoriaThinkst <[email protected]>
Co-authored-by: Vittoria Toso <[email protected]>

frontend_vue/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     BaseCodeSnippet: typeof import('./src/components/base/BaseCodeSnippet.vue')['default']
     BaseContentBlock: typeof import('./src/components/base/BaseContentBlock.vue')['default']
     BaseCopyButton: typeof import('./src/components/base/BaseCopyButton.vue')['default']
+    BaseDownloadIconButton: typeof import('./src/components/base/BaseDownloadIconButton.vue')['default']
     BaseFormImageSelect: typeof import('./src/components/base/BaseFormImageSelect.vue')['default']
     BaseFormSelect: typeof import('./src/components/base/BaseFormSelect.vue')['default']
     BaseFormTextField: typeof import('./src/components/base/BaseFormTextField.vue')['default']

frontend_vue/src/components/SettingsToken.vue

@@ -87,7 +87,8 @@ const props = defineProps<{
 function isSupportBrowserScan() {
   return (
     props.tokenBackendResponse.canarydrop.type === TOKENS_TYPE.WEB_BUG ||
-    props.tokenBackendResponse.canarydrop.type === TOKENS_TYPE.WEB_IMAGE
+    props.tokenBackendResponse.canarydrop.type === TOKENS_TYPE.WEB_IMAGE ||
+    props.tokenBackendResponse.canarydrop.type === TOKENS_TYPE.IDP_APP
   );
 }
 

frontend_vue/src/components/base/BaseDownloadIconButton.vue

@@ -0,0 +1,108 @@
+<template>
+  <div
+    :class="props.disabled ? 'hover:brightness-100' : 'hover:brightness-110'"
+    class="relative flex items-center justify-center p-8 duration-100 bg-white border cursor-pointer rounded-2xl border-grey-200"
+  >
+    <a
+      v-bind="$attrs"
+      class="bg-cover min-w-[2.5rem] min-h-[2.2rem] duration-100 aspect-square"
+      :class="{ 'bg-grey-200 cursor-default': props.disabled }"
+      :style="
+        !props.disabled && props.url
+          ? { backgroundImage: `url(${props.url})` }
+          : ''
+      "
+      :disabled="props.disabled"
+      download
+      :href="props.url"
+      @click="downloadContent"
+    >
+      <span class="sr-only">{{ props.alt }} Download</span>
+
+      <span
+        v-tooltip="{
+          content: tooltipText,
+          shown: isTriggered,
+          triggers: tooltipTriggers,
+        }"
+        :class="{ hidden: props.disabled }"
+        class="absolute w-[1.5rem] rounded-full h-[1.5rem] bg-green top-[-.5rem] right-[-.5rem] flex items-center justify-center text-white"
+      >
+        <Transition
+          name="fade"
+          mode="out-in"
+        >
+          <font-awesome-icon
+            v-if="!isTriggered"
+            icon="arrow-down"
+          ></font-awesome-icon>
+          <font-awesome-icon
+            v-else
+            aria-hidden="true"
+            icon="check"
+          ></font-awesome-icon>
+        </Transition>
+      </span>
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  url?: string;
+  alt?: string;
+  disabled?: boolean;
+}>();
+
+const tooltipText = ref('Download');
+const isTriggered = ref(false);
+const tooltipTriggers = ref(['hover', 'focus']);
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// 1. prevents UI from jumping when tooltip content changes
+// 2. shows tooltip when content is downloaded
+async function showTooltip() {
+  await delay(150);
+  tooltipTriggers.value = [];
+  isTriggered.value = true;
+  tooltipText.value = 'Download started!';
+  // vTooltip sets a default delay of 1.5s
+  await delay(1500);
+  isTriggered.value = false;
+  tooltipTriggers.value = ['hover', 'focus'];
+  await delay(150);
+  tooltipText.value = 'Download';
+}
+
+function downloadContent() {
+  showTooltip();
+}
+</script>
+
+<style scoped>
+@keyframes bounce {
+  40% {
+    transform: scale(1.2);
+  }
+  80% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  animation: bounce 350ms;
+}
+.fade-enter,
+.fade-leave-to {
+  transform: scale(1);
+}
+</style>

frontend_vue/src/components/base/BaseLabelArrow.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <BaseLabel
+    v-bind="$attrs"
     :id="id"
     class="container relative mb-8"
   >

frontend_vue/src/components/constants.ts

@@ -39,6 +39,7 @@ export const TOKENS_TYPE = {
   PWA: 'pwa',
   CREDIT_CARD_V2: 'credit_card_v2',
   WEBDAV: 'webdav',
+  IDP_APP: 'idp_app',
 };
 
 // unique keys to use in the frontend
@@ -158,5 +159,134 @@ export const TOKEN_COLOR_PALETTES: { [key: string]: Array<string> } = {
   cc: ['#C6C7C7', '#E3E5E7', '#38897F', '#38D47F', '#414241'],
   pwa: ['#1AABEE', '#026696', '#9CE5FD'],
   credit_card_v2: ['#C6C7C7', '#E3E5E7', '#38897F', '#38D47F', '#414241'],
-  windows_fake_fs: ['#2DCA6E', '#93EE7C', '#A2EAC1', '#D2FAC4', '#43CC5F']
+  windows_fake_fs: ['#2DCA6E', '#93EE7C', '#A2EAC1', '#D2FAC4', '#43CC5F'],
+  idp_app: ['#1AABEE', '#026696', '#9CE5FD'],
 };
+
+
+export const IDP_OPTIONS: { value: string; label: string }[]= [
+  {
+    value: 'gmail',
+    label: 'Gmail'
+  },
+  {
+    value: 'outlook',
+    label: 'Outlook'
+  },
+  {
+    value: 'gdrive',
+    label: 'Google Drive'
+  },
+  {
+    value: 'onedrive',
+    label: 'OneDrive'
+  },
+  {
+    value: 'aws',
+    label: 'AWS'
+  },
+  {
+    value: 'azure',
+    label: 'Azure'
+  },
+  {
+    value: 'gcloud',
+    label: 'Google Cloud'
+  },
+  {
+    value: 'zoho',
+    label: 'Zoho'
+  },
+  {
+    value: 'salesforce',
+    label: 'Salesforce'
+  },
+  {
+    value: 'zendesk',
+    label: 'Zendesk'
+  },
+  {
+    value: 'freshbooks',
+    label: 'Freshbooks'
+  },
+  {
+    value: 'elasticsearch',
+    label: 'Elasticsearch'
+  },
+  {
+    value: 'kibana',
+    label: 'Kibana'
+  },
+  {
+    value: 'onepassword',
+    label: '1Password'
+  },
+  {
+    value: 'lastpass',
+    label: 'LastPass'
+  },
+  {
+    value: 'bitwarden',
+    label: 'Bitwarden'
+  },
+  {
+    value: 'sap',
+    label: 'SAP'
+  },
+  {
+    value: 'jira',
+    label: 'Jira'
+  },
+  {
+    value: 'jamf',
+    label: 'JAMF'
+  },
+  {
+    value: 'duo',
+    label: 'Duo'
+  },
+  {
+    value: 'intune',
+    label: 'Intune'
+  },
+  {
+    value: 'zoom',
+    label: 'Zoom'
+  },
+  {
+    value: 'dropbox',
+    label: 'Dropbox'
+  },
+  {
+    value: 'github',
+    label: 'GitHub'
+  },
+  {
+    value: 'slack',
+    label: 'Slack'
+  },
+  {
+    value: 'msteams',
+    label: 'MS Teams'
+  },
+  {
+    value: 'ms365',
+    label: 'Microsoft 365'
+  },
+  {
+    value: 'gitlab',
+    label: 'GitLab'
+  },
+  {
+    value: 'pagerduty',
+    label: 'PagerDuty'
+  },
+  {
+    value: 'sage',
+    label: 'Sage'
+  },
+  {
+    value: 'virtru',
+    label: 'Virtru'
+  },
+];

frontend_vue/src/components/tokens/fast_redirect/GenerateTokenForm.vue

@@ -3,7 +3,7 @@
     <BaseFormTextField
       id="redirect_url"
       type="text"
-      placeholder="Redirect URL"
+      placeholder="https://www.example.com"
       label="Redirect URL"
       full-width
       required

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

@@ -0,0 +1,28 @@
+<template>
+  <TokenDisplay
+    :token-url="tokenUrl"
+    :entity-id="entityId"
+    :app-type="appType"
+  />
+  <p class="mt-16 text-sm">
+    When the fake app is opened from your IdP dashboard you receive an alert.
+    <ButtonActivateTokenTips @how-to-use="$emit('howToUse')" />
+  </p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TokenDisplay from './TokenDisplay.vue';
+import type { NewTokenBackendType } from '@/components/tokens/types';
+import ButtonActivateTokenTips from '@/components/ui/ButtonActivateTokenTips.vue';
+
+const props = defineProps<{
+  tokenData: NewTokenBackendType;
+}>();
+
+defineEmits(['howToUse']);
+
+const tokenUrl = ref(props.tokenData.token_url || '');
+const entityId = ref(props.tokenData.entity_id || '');
+const appType = ref(props.tokenData.app_type || '');
+</script>

frontend_vue/src/components/tokens/idp_app/GenerateTokenForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <BaseGenerateTokenSettings setting-type="Canarytoken">
+    <div class="flex flex-col gap-8">
+      <BaseFormSelect
+        id="app_type"
+        label="The App I want my Canarytoken to look like"
+        placeholder="Select an app"
+        required
+        :options="IDP_OPTIONS"
+        :searchable="true"
+        height="220px"
+        @select-option="handleSelectedApp"
+      >
+        <template #option="{ option }">
+          <div class="flex flex-row items-center gap-16">
+            <div
+              alt="icon"
+              :style="{
+                backgroundImage: `url(${getImageUrl('idp_icons/' + option.value + '.png')})`,
+              }"
+              class="bg-cover w-[2rem] h-[2rem] duration-100"
+            ></div>
+            {{ option.label }}
+          </div>
+        </template>
+
+        <template #selected-option="{ option }">
+          <div class="flex flex-row items-center gap-8">
+            <div
+              alt="icon"
+              :style="{
+                backgroundImage: `url(${getImageUrl('idp_icons/' + option.value + '.png')})`,
+              }"
+              class="bg-cover w-[1.5rem] h-[1.5rem] duration-100"
+            ></div>
+            {{ option.label }}
+          </div>
+        </template>
+      </BaseFormSelect>
+      <BaseFormTextField
+        id="redirect_url"
+        type="text"
+        label="Send the user to this URL on login (Optional)"
+        placeholder="https://www.example.com"
+        full-width
+      />
+    </div>
+  </BaseGenerateTokenSettings>
+  <GenerateTokenSettingsNotifications
+    memo-helper-example="Fake Salesforce app in Okta"
+  />
+</template>
+
+<script setup lang="ts">
+import GenerateTokenSettingsNotifications from '@/components/ui/GenerateTokenSettingsNotifications.vue';
+import getImageUrl from '@/utils/getImageUrl';
+import { IDP_OPTIONS } from '@/components/constants';
+import { ref } from 'vue';
+
+type SelectedAppType = {
+  value: string;
+  label: string;
+};
+
+const selectedApp = ref<SelectedAppType>();
+
+function handleSelectedApp(selected: string) {
+  selectedApp.value = IDP_OPTIONS.find((o) => o.value === selected);
+}
+</script>