Update token display

thinkst · Dec 7, 2024 · f843103 · f843103
1 parent 7afca65
commit f843103
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/frontend_vue/src/components/base/BaseDownloadIconButton.vue b/frontend_vue/src/components/base/BaseDownloadIconButton.vue
@@ -26,7 +26,7 @@
           triggers: tooltipTriggers,
         }"
         :class="{ hidden: props.disabled }"
-        class="absolute w-[2rem] rounded-full h-[2rem] bg-green top-[-.5rem] right-[-.5rem] flex items-center justify-center text-white"
+        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"

diff --git a/frontend_vue/src/components/tokens/idp_app/TokenDisplay.vue b/frontend_vue/src/components/tokens/idp_app/TokenDisplay.vue
@@ -1,5 +1,35 @@
 <template>
+  <BaseMessageBox
+    variant="info"
+    class="mt-6 mb-16"
+    >We have custom instructions for
+    <a style="text-decoration: underline" target="_blank"
+      href="https://docs.canarytokens.org/guide/idp-app-token.html#deploying-to-azure"
+    >
+      Entra ID</a> and
+    <a style="text-decoration: underline" target="_blank"
+      href="https://docs.canarytokens.org/guide/idp-app-token.html#deploying-to-okta"
+    >
+      Okta</a>, in our
+    <a style="text-decoration: underline" target="_blank"
+      href="https://docs.canarytokens.org/guide/idp-app-token.html"
+    >
+      docs</a>.
+  </BaseMessageBox>
   <div class="flex flex-col gap-16">
+    <BaseCodeSnippet
+      lang="javascript"
+      label="ACS / Relay State URL"
+      is-single-line
+      :code="tokenUrl"
+    ></BaseCodeSnippet>
+    <BaseCodeSnippet
+      lang="javascript"
+      label="Entity ID"
+      is-single-line
+      :code="entityId"
+    ></BaseCodeSnippet>
+
     <div class="flex flex-col">
       <label
         id="app_icon"
@@ -21,32 +51,7 @@
         ></BaseCodeSnippet>
       </div>
     </div>
-
-    <BaseCodeSnippet
-      lang="javascript"
-      label="ACS / Relay State URL"
-      is-single-line
-      :code="tokenUrl"
-    ></BaseCodeSnippet>
-    <BaseCodeSnippet
-      lang="javascript"
-      label="Entity ID"
-      is-single-line
-      :code="entityId"
-    ></BaseCodeSnippet>
   </div>
-  <BaseMessageBox
-    variant="info"
-    class="mt-32"
-    >For setup instructions for Entra ID and Okta, head over to our
-    <a
-      style="text-decoration: underline"
-      href="https://docs.canarytokens.org/guide/idp-app-token.html"
-      target="_blank"
-    >
-      docs</a
-    >.
-  </BaseMessageBox>
 </template>
 
 <script setup lang="ts">

diff --git a/frontend_vue/src/utils/tokenServices.ts b/frontend_vue/src/utils/tokenServices.ts
@@ -443,7 +443,7 @@ export const tokenServices: TokenServicesType = {
     documentationLink: 'https://docs.canarytokens.org/guide/idp-app-token.html',
     icon: `${TOKENS_TYPE.IDP_APP}.png`,
     instruction:
-      'Use this login URL and entity ID to create a SAML2 app in your Identity Provider.',
+      'Use these details to create an app in your Identity Provider.',
     howItWorksInstructions: [
       'We give you a “fake” SAML2 app endpoint.',
       'You install it in your Identity Provider as an app.',