Add icons and update UI

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

@@ -12,7 +12,7 @@
   <BaseMessageBox
     variant="info"
     class="mt-32"
-    >Some info here to tell user what the Preview is about</BaseMessageBox
+    >Select an app to download an icon to use for the fake app on your IdP dashboard.</BaseMessageBox
   >
   <CreateAppPreview />
 </template>

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

@@ -3,7 +3,7 @@
     class="flex flex-col gap-16 p-16 mt-24 mb-32 border border-grey-200 rounded-xl"
   >
     <h3 class="flex flex-row text-sm font-semibold text-left text-grey-400">
-      App appareance
+      App appearance
     </h3>
     <base-form-select
       id="idp-app-look"
@@ -98,18 +98,131 @@ type SelectedAppType = {
 
 const selectedApp = ref<SelectedAppType>();
 
+
 const idpOptions = [
   {
-    value: 'Custom app',
-    iconUrl: 'pwa_icons/pwa_facebook.png',
+    value: 'Gmail',
+    iconUrl: 'idp_icons/gmail.png'
+  },
+  {
+    value: 'Outlook',
+    iconUrl: 'idp_icons/outlook.png'
+  },
+  {
+    value: 'Google Drive',
+    iconUrl: 'idp_icons/gdrive.png'
+  },
+  {
+    value: 'OneDrive',
+    iconUrl: 'idp_icons/onedrive.png'
+  },
+  {
+    value: 'AWS',
+    iconUrl: 'idp_icons/aws.png'
+  },
+  {
+    value: 'Azure',
+    iconUrl: 'idp_icons/azure.png'
+  },
+  {
+    value: 'Google Cloud',
+    iconUrl: 'idp_icons/gcloud.png'
+  },
+  {
+    value: 'Zoho',
+    iconUrl: 'idp_icons/zoho.png'
+  },
+  {
+    value: 'Salesforce',
+    iconUrl: 'idp_icons/salesforce.png'
+  },
+  {
+    value: 'Zendesk',
+    iconUrl: 'idp_icons/zendesk.png'
+  },
+  {
+    value: 'Freshbooks',
+    iconUrl: 'idp_icons/freshbooks.png'
+  },
+  {
+    value: 'Elasticsearch',
+    iconUrl: 'idp_icons/elasticsearch.png'
+  },
+  {
+    value: 'Kibana',
+    iconUrl: 'idp_icons/kibana.png'
+  },
+  {
+    value: '1Password',
+    iconUrl: 'idp_icons/1password.png'
+  },
+  {
+    value: 'LastPass',
+    iconUrl: 'idp_icons/lastpass.png'
+  },
+  {
+    value: 'Bitwarden',
+    iconUrl: 'idp_icons/bitwarden.png'
+  },
+  {
+    value: 'SAP',
+    iconUrl: 'idp_icons/sap.png'
+  },
+  {
+    value: 'Jira',
+    iconUrl: 'idp_icons/jira.png'
+  },
+  {
+    value: 'JAMF',
+    iconUrl: 'idp_icons/jamf.png'
+  },
+  {
+    value: 'Duo',
+    iconUrl: 'idp_icons/duo.png'
+  },
+  {
+    value: 'Intune',
+    iconUrl: 'idp_icons/intune.png'
+  },
+  {
+    value: 'Zoom',
+    iconUrl: 'idp_icons/zoom.png'
+  },
+  {
+    value: 'Dropbox',
+    iconUrl: 'idp_icons/dropbox.png'
+  },
+  {
+    value: 'GitHub',
+    iconUrl: 'idp_icons/github.png'
+  },
+  {
+    value: 'Slack',
+    iconUrl: 'idp_icons/slack.png'
+  },
+  {
+    value: 'MS Teams',
+    iconUrl: 'idp_icons/ms-teams.png'
+  },
+  {
+    value: 'Microsoft 365',
+    iconUrl: 'idp_icons/ms-365.png'
+  },
+  {
+    value: 'GitLab',
+    iconUrl: 'idp_icons/gitlab.png'
+  },
+  {
+    value: 'PagerDuty',
+    iconUrl: 'idp_icons/pagerduty.png'
   },
   {
-    value: 'Gmail app',
-    iconUrl: 'pwa_icons/pwa_rbc.png',
+    value: 'Sage',
+    iconUrl: 'idp_icons/sage.png'
   },
   {
-    value: 'Outlook app',
-    iconUrl: 'pwa_icons/pwa_snapchat.png',
+    value: 'Virtru',
+    iconUrl: 'idp_icons/virtru.png'
   },
 ];
 

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

@@ -8,7 +8,7 @@
   <BaseMessageBox
     variant="info"
     class="mt-32"
-    >Some info here to tell user what the Preview is about</BaseMessageBox
+    >Select an app to download an icon to use for the fake app on your IdP dashboard.</BaseMessageBox
   >
   <CreateAppPreview />
 </template>

frontend_vue/src/utils/tokenServices.ts

@@ -413,7 +413,7 @@ export const tokenServices: TokenServicesType = {
     documentationLink: '',
     icon: `${TOKENS_TYPE.IDP_APP}.png`,
     instruction:
-      'Use this login URL and entity ID to create a SAML2 app in your Identity Provider. [sth about suggested name-icon combinations?]',
+      'Use this login URL and entity ID to create a SAML2 app in your Identity Provider.',
     howItWorksInstructions: [
       'We give you a “fake” SAML2 app endpoint.',
       'You install it in your Identity Provider as an app.',