feat: new data analytics page to show admins on first login

2024-02-19 13:22:41 +05:30
parent 55a94bdccc
commit 5c59e55e53
3 changed files with 136 additions and 45 deletions
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -1,54 +1,53 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'

-export {};
+export {}

 declare module '@vue/runtime-core' {
  export interface GlobalComponents {
-    AppHeader: typeof import('./components/app/Header.vue')['default'];
-    AppLogin: typeof import('./components/app/Login.vue')['default'];
-    AppLogout: typeof import('./components/app/Logout.vue')['default'];
-    AppModal: typeof import('./components/app/Modal.vue')['default'];
-    AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
-    AppToast: typeof import('./components/app/Toast.vue')['default'];
-    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default'];
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
-    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder'];
-    HoppSmartSelectWrapper: typeof import('@hoppscotch/ui')['HoppSmartSelectWrapper'];
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'];
-    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable'];
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs'];
-    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle'];
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'];
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'];
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
-    IconLucideUser: typeof import('~icons/lucide/user')['default'];
-    SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default'];
-    SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default'];
-    SettingsReset: typeof import('./components/settings/Reset.vue')['default'];
-    SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default'];
-    SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default'];
-    TeamsAdd: typeof import('./components/teams/Add.vue')['default'];
-    TeamsDetails: typeof import('./components/teams/Details.vue')['default'];
-    TeamsInvite: typeof import('./components/teams/Invite.vue')['default'];
-    TeamsMembers: typeof import('./components/teams/Members.vue')['default'];
-    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'];
-    Tippy: typeof import('vue-tippy')['Tippy'];
-    UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default'];
-    UsersDetails: typeof import('./components/users/Details.vue')['default'];
-    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
-    UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default'];
+    AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
+    AppModal: typeof import('./components/app/Modal.vue')['default']
+    AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
+    AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
+    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
+    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
+    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
+    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
+    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
+    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
+    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
+    IconLucideUser: typeof import('~icons/lucide/user')['default']
+    SettingsAuthProvider: typeof import('./components/settings/AuthProvider.vue')['default']
+    SettingsConfigurations: typeof import('./components/settings/Configurations.vue')['default']
+    SettingsReset: typeof import('./components/settings/Reset.vue')['default']
+    SettingsServerRestart: typeof import('./components/settings/ServerRestart.vue')['default']
+    SettingsSmtpConfiguration: typeof import('./components/settings/SmtpConfiguration.vue')['default']
+    TeamsAdd: typeof import('./components/teams/Add.vue')['default']
+    TeamsDetails: typeof import('./components/teams/Details.vue')['default']
+    TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
+    TeamsMembers: typeof import('./components/teams/Members.vue')['default']
+    TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
+    Tippy: typeof import('vue-tippy')['Tippy']
+    UiAutoResetIcon: typeof import('./components/ui/AutoResetIcon.vue')['default']
+    UsersDetails: typeof import('./components/users/Details.vue')['default']
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
+    UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']
  }
+
 }
--- a/packages/hoppscotch-sh-admin/src/pages/data.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/data.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-screen">
+    <div class="text-center">
+      <h2 class="text-lg">Welcome to</h2>
+      <img src="/assets/images/hoppscotch-title.svg" alt="" class="mt-2 w-56" />
+    </div>
+    <div
+      class="bg-primaryLight mt-10 p-10 border-2 border-dividerLight rounded-lg"
+    >
+      <div>
+        <div class="">
+          <p class="text-lg font-bold text-white">Make Hoppscotch Better</p>
+          <p class="text-sm font-light">
+            Share anonymous data usage to improve Hoppscotch
+          </p>
+          <HoppSmartToggle
+            :on="shareData"
+            @change="shareData = !shareData"
+            class="my-5 text-white"
+          >
+            Share data and make Hoppscotch better
+          </HoppSmartToggle>
+        </div>
+
+        <div class="mt-5">
+          <p class="text-lg font-bold text-white">Stay in Touch</p>
+          <p class="text-sm font-light">Get updates about our latest news</p>
+          <HoppSmartToggle
+            :on="shareEmail"
+            @change="shareEmail = !shareEmail"
+            class="my-5 text-white"
+          >
+            Get updates about the latest at Hoppscotch
+          </HoppSmartToggle>
+        </div>
+      </div>
+
+      <div class="flex flex-col w-48 mx-auto mt-5">
+        <HoppButtonPrimary
+          :icon="IconMoveUpRight"
+          label="Continue to Dashboard"
+          @click="router.push('/')"
+        />
+        <a href="http://docs.hoppscotch.io">
+          <HoppButtonSecondary
+            outline
+            filled
+            :icon="IconBookOpenText"
+            label="Read Documentation"
+            class="mt-3 px-5"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HoppButtonPrimary } from '@hoppscotch/ui';
+import IconMoveUpRight from '~icons/lucide/move-up-right';
+import IconBookOpenText from '~icons/lucide/book-open-text';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+
+const router = useRouter();
+
+const shareData = ref(true);
+const shareEmail = ref(true);
+</script>
+
+<style scoped></style>
+
+<route lang="yaml">
+meta:
+  layout: empty
+</route>