Fix bug on tooltip, fix style, fix typos (#498)

* Fix bug on tooltip, fix style, fix typos * fix comment * fix slow redirect typo * add meta in index
thinkst · Jun 24, 2024 · 0d417ae · 0d417ae
1 parent 90355df
commit 0d417ae
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 33 deletions.
diff --git a/frontend_vue/index.html b/frontend_vue/index.html
@@ -2,6 +2,46 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="Canarytokens is a free tool that helps you discover you’ve been breached by having attackers announce themselves.  The tokens allow you to implant traps around your network and notifies you as soon as they are triggered."
+    />
+    <meta
+      property="og:description"
+      content="Canarytokens is a free tool that helps you discover you’ve been breached by having attackers announce themselves.  The tokens allow you to implant traps around your network and notifies you as soon as they are triggered."
+    />
+    <meta
+      name="author"
+      content="Thinkst Applied Research"
+    />
+    <meta
+      property="og:title"
+      content="Know.  Before it matters"
+    />
+    <meta
+      property="og:url"
+      content="https://canarytokens.org"
+    />
+    <meta
+      property="og:site_name"
+      content="Canarytokens"
+    />
+    <meta
+      property="og:image"
+      content="https://canary.tools/static/images/ico_canary.png"
+    />
+    <meta
+      property="og:image:width"
+      content="52"
+    />
+    <meta
+      property="og:image:height"
+      content="52"
+    />
+    <meta
+      name="keywords"
+      content="Canary token,Canarytokens,Canary token,Canary tokens,Honeytoken,Honeytokens,Web bug,DNS token,URL token,Thinkst,Thinkst Applied Research"
+    />
     <link
       rel="icon"
       href="/favicon.ico"

diff --git a/frontend_vue/src/components/ModalToken.vue b/frontend_vue/src/components/ModalToken.vue
@@ -22,13 +22,14 @@
     </template>
     <!-- How to deploy ? Button-->
     <template #header-btn-right>
-      <BaseButtonHowToDeploy
-        v-if="modalType === ModalType.AddToken"
-        :token-name="tokenServices[props.selectedToken].label"
-        size="big"
-        :is-open="showTooltip"
-        @click="handleHowToUseButton"
-      />
+      <template v-if="!isLoading && modalType === ModalType.AddToken">
+        <BaseButtonHowToDeploy
+          :token-name="tokenServices[props.selectedToken].label"
+          size="big"
+          :is-open="showTooltip"
+          @click="handleHowToUseButton"
+        />
+      </template>
     </template>
     <!-- Content -->
     <Suspense v-if="modalType === ModalType.AddToken">
@@ -156,18 +157,14 @@ const isGenerateTokenError = ref(false);
 const errorMessage = ref('');
 const isLoadngSubmit = ref(false);
 const isLoading = ref(false);
-const showTooltip = ref(true);
+const showTooltip = ref(false);
 // Stack to keep track of loaded components
 // Used for Modal navigation
 const componentStack = ref<string[]>([]);
 
 onMounted(() => {
   // Keep track of loaded components
   componentStack.value.push(modalType.value);
-  // Show tooltip 'How does it work' for 2 seconds on Modal opening
-  setTimeout(() => {
-    showTooltip.value = false;
-  }, 2000);
 });
 
 const title = computed(() => {
@@ -291,4 +288,14 @@ watch(
   },
   { deep: true }
 );
+
+// Show tooltip 'How does it work' for 2 seconds on loaded modal
+watch(isLoading, () => {
+  if (isLoading.value === false) {
+    showTooltip.value = true;
+    setTimeout(() => {
+      showTooltip.value = false;
+    }, 2000);
+  }
+});
 </script>
diff --git a/frontend_vue/src/components/base/BaseButtonHowToDeploy.vue b/frontend_vue/src/components/base/BaseButtonHowToDeploy.vue
@@ -5,10 +5,12 @@
       shown: isOpen,
       triggers: ['hover'],
     }"
-    class="w-24 h-24 text-sm duration-150 bg-transparent border border-solid rounded-full hover:text-white border-grey-300 hover:bg-green-600 hover:border-green-300"
+    class="w-24 h-24 text-sm duration-150 bg-transparent border border-solid rounded-full hover:text-white hover:bg-green-600 hover:border-green-300"
     :class="[
       size === 'small' ? 'w-[0.5rem] h-[0.5rem]' : 'w-24 h-24',
-      isOpen ? 'bg-green-600 border-green-300 text-white' : 'text-grey-300',
+      isOpen
+        ? 'bg-green-600 border-green-300 text-white'
+        : 'text-grey-300 border-grey-300',
     ]"
     :aria-label="`How does ${tokenName} work?`"
     @click="emits('click')"

diff --git a/frontend_vue/src/components/ui/AppFooter.vue b/frontend_vue/src/components/ui/AppFooter.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="footer">
-    <div class="lg:text-left order-1">
+    <div class="order-1 lg:text-left">
       <p>
         By Using This Service, You Agree to
         <RouterLink to="/legal" class="text-green-500 hover:text-green">Our Terms of Use.</RouterLink>
       </p>
     </div>
 
-    <div class="flex flex-col justify-center items-center order-3 lg:order-3">
-      <div class="flex justify-center items-center text-base">
+    <div class="flex flex-col items-center justify-center order-3 lg:order-3">
+      <div class="flex items-center justify-center text-base">
         We also build
         <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
         <a href="https://canary.tools/" target="_blank">
@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <div class="lg:text-right order-2 lg:order-3">
+    <div class="order-2 lg:text-right lg:order-3">
       <p>
         Read Our
         <base-link href="https://docs.canarytokens.org/guide/" target="_blank">Canarytokens Documentation</base-link>
@@ -39,6 +39,6 @@ const BUILD_ID = import.meta.env.VITE_GITHUB_SHA;
 
 <style scoped>
 .footer {
-  @apply lg:max-w-screen-2xl m-auto flex items-center flex-col lg:flex-row justify-center lg:justify-between gap-y-4 p-16 mb-24 text-xs text-center text-grey-400;
+  @apply lg:max-w-screen-2xl m-auto flex items-center flex-col lg:flex-row justify-center lg:justify-between gap-y-4 p-16 mb-24 mx-16 text-xs text-center text-grey-400;
 }
 </style>
diff --git a/frontend_vue/src/components/ui/AppNavbarLinks.vue b/frontend_vue/src/components/ui/AppNavbarLinks.vue
@@ -45,7 +45,7 @@
           <component
             :is="item.icon || 'font-awesome-icon'"
             :icon="item.FontAwesomeIcon"
-            class="w-[1rem] h-[1rem]"
+            class="w-[1rem] h-[1rem] max-w-[1rem]"
             :class="
               !props.isMobile
                 ? 'fill-green-50 group-hover:fill-white'

diff --git a/frontend_vue/src/router/index.ts b/frontend_vue/src/router/index.ts
@@ -9,17 +9,11 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView,
-      meta: {
-        title: 'Generate New Canarytoken',
-      },
     },
     {
       path: '/generate',
       name: 'generate',
       component: HomeView,
-      meta: {
-        title: 'Generate New Canarytoken',
-      },
     },
     {
       path: '/manage/:auth/:token',

diff --git a/frontend_vue/src/utils/tokenServices.ts b/frontend_vue/src/utils/tokenServices.ts
@@ -101,7 +101,7 @@ export const tokenServices: TokenServicesType = {
   [TOKENS_TYPE.FAST_REDIRECT]: {
     label: 'Fast redirect',
     description:
-      'Get an alert when an attacker visits your URL (then rediret them).',
+      'Get an alert when an attacker visits your URL (then redirect them).',
     documentationLink:
       'https://docs.canarytokens.org/guide/fast-redirect-token.html',
     icon: `${TOKENS_TYPE.FAST_REDIRECT}.png`,
@@ -116,7 +116,7 @@ export const tokenServices: TokenServicesType = {
   [TOKENS_TYPE.SLOW_REDIRECT]: {
     label: 'Slow redirect',
     description:
-      'Get an alert when an attacker visits your URL (then rediret them and collect more info).',
+      'Get an alert when an attacker visits your URL (then redirect them and collect more info).',
     documentationLink:
       'https://docs.canarytokens.org/guide/slow-redirect-token.html',
     icon: `${TOKENS_TYPE.SLOW_REDIRECT}.png`,
@@ -216,7 +216,7 @@ export const tokenServices: TokenServicesType = {
   [TOKENS_TYPE.UNIQUE_EMAIL]: {
     label: 'Unique email address',
     description:
-      'Get an alert when an attacker send an email to this unique address.',
+      'Get an alert when an attacker sends an email to this unique address.',
     documentationLink: '',
     icon: `${TOKENS_TYPE.UNIQUE_EMAIL}.png`,
     instruction: 'Here is a unique email address:',
@@ -260,7 +260,7 @@ export const tokenServices: TokenServicesType = {
   [TOKENS_TYPE.PDF]: {
     label: 'Acrobat Reader PDF document',
     description:
-      'Get an alert when an attacker open your PDF document in Acrobat Reader.',
+      'Get an alert when an attacker opens your PDF document in Acrobat Reader.',
     documentationLink:
       'https://docs.canarytokens.org/guide/adobe-pdf-token.html',
     icon: `${TOKENS_TYPE.PDF}.png`,
@@ -288,8 +288,8 @@ export const tokenServices: TokenServicesType = {
     category: TOKEN_CATEGORY.MICROSOFT,
   },
   [TOKENS_TYPE.CLONED_WEBSITE]: {
-    label: 'Cloned website',
-    description: 'Get an alert when an attacker clones your website.',
+    label: 'JS Cloned website',
+    description: 'Get an alert (using Javascript) when an attacker clones your website.',
     documentationLink:
       'https://docs.canarytokens.org/guide/cloned-web-token.html',
     icon: `${TOKENS_TYPE.CLONED_WEBSITE}.png`,
@@ -304,7 +304,7 @@ export const tokenServices: TokenServicesType = {
   [TOKENS_TYPE.CSS_CLONED_SITE]: {
     label: 'CSS cloned website',
     description:
-      'Get an alert when an attacker clones your website (using CSS).',
+      'Get an alert (using CSS) when an attacker clones your website.',
     documentationLink:
       'https://docs.canarytokens.org/guide/css-cloned-site-token.html',
     icon: `${TOKENS_TYPE.CSS_CLONED_SITE}.png`,