New onboarding flow

backend/src/api/tenant/tenantCreate.ts

@@ -16,8 +16,7 @@ export default async (req, res) => {
     {
       id: payload.id,
       name: payload.name,
-      integrationsRequired: payload.integrationsRequired.map((i) => i.toLowerCase()),
-      communitySize: payload.communitySize,
+      onboard: !!payload.onboard,
     },
     { ...req },
   )

frontend/src/app.vue

@@ -66,15 +66,6 @@ export default {
     this.handleResize();
   },
 
-  mounted() {
-    this.$router.isReady().then(() => {
-      const { ref } = this.$route.query;
-      if (ref && ref === 'eagle-eye') {
-        localStorage.setItem('onboardType', 'eagle-eye');
-      }
-    });
-  },
-
   unmounted() {
     window.removeEventListener('resize', this.handleResize);
   },

frontend/src/integrations/devto/config.js

@@ -7,6 +7,7 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect DEV to sync profile information and comments on articles.',
+  onboardDescription: 'Sync profile information and comments on articles.',
   image:
     'https://cdn-icons-png.flaticon.com/512/5969/5969051.png',
   connectComponent: DevtoConnect,

frontend/src/integrations/discord/config.js

@@ -7,6 +7,8 @@ export default {
   borderColor: '#dee0fc',
   description:
     'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  onboardDescription:
+    'Sync messages, threads, forum channels, and new joiners.',
   image:
     'https://cdn-icons-png.flaticon.com/512/5968/5968756.png',
   connectComponent: DiscordConnect,

frontend/src/integrations/discourse/components/discourse-connect-drawer.vue

@@ -286,7 +286,7 @@ const rules = {
 
 const $externalResults = ref({});
 
-const $v = useVuelidate(rules, form, { $externalResults });
+const $v = useVuelidate(rules, form, { $externalResults, $stopPropagation: true });
 
 // validate method
 async function validate() {

frontend/src/integrations/discourse/config.js

@@ -8,6 +8,8 @@ export default {
   chartColor: '#FFDE92',
   description:
     'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  onboardDescription:
+    'Sync topics, posts, and replies from your account forums.',
   image: '/images/integrations/discourse.png',
   connectComponent: DiscourseConnect,
   activityDisplay: {

frontend/src/integrations/git/components/git-connect-drawer.vue

@@ -92,7 +92,7 @@ const form = reactive({
 });
 
 const { hasFormChanged, formSnapshot } = formChangeDetector(form);
-const $v = useVuelidate({}, form);
+const $v = useVuelidate({}, form, { $stopPropagation: true });
 
 const { doGitConnect } = mapActions('integration');
 const isVisible = computed({

frontend/src/integrations/git/config.js

@@ -9,6 +9,8 @@ export default {
   borderColor: '#FFFFFF',
   description:
     'Connect Git to sync commit activities from your repos.',
+  onboardDescription:
+    'Sync commit activities from your repos.',
   image:
     '/images/integrations/git.png',
   connectComponent: GitConnect,

frontend/src/integrations/github/config.js

@@ -7,6 +7,10 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  onboardDescription: `GitHub is one of the richest places for developer activity and information. 
+  Connect GitHub to track all relevant activities with no historical import limitations like repo stars, discussions, comments, and more.`,
+  onboardImage: '/images/integrations/onboard/onboard-github-preview.png',
+  onboardHighlight: true,
   image:
     'https://cdn-icons-png.flaticon.com/512/25/25231.png',
   connectComponent: GithubConnect,

frontend/src/integrations/groupsio/components/groupsio-connect-drawer.vue

@@ -241,7 +241,7 @@ const removeGroup = (index) => {
   form.groups.splice(index, 1);
 };
 
-const $v = useVuelidate(rules, form);
+const $v = useVuelidate(rules, form, { $stopPropagation: true });
 
 const validateAccount = async () => {
   isVerifyingAccount.value = true;

frontend/src/integrations/hackernews/config.js

@@ -7,6 +7,7 @@ export default {
   borderColor: '#ffdecf',
   description:
     'Connect Hacker News to get posts as well as their comments mentioning your community.',
+  onboardDescription: 'Get posts as well as their comments mentioning your community.',
   image: '/images/integrations/hackernews.svg',
   connectComponent: HackerNewsConnect,
   url: ({ username }) => (username ? `https://news.ycombinator.com/user?id=${username}` : null),

frontend/src/integrations/n8n/config.js

@@ -6,6 +6,7 @@ export default {
   backgroundColor: '#FFFFFF',
   borderColor: '#FFFFFF',
   description: 'Use n8n to connect crowd.dev with 250+ apps and services.',
+  onboardDescription: 'Connect crowd.dev with 250+ apps and services.',
   image:
     'https://asset.brandfetch.io/idO6_6uqJ9/id9y5Acqtx.svg',
   connectComponent: N8nConnect,

frontend/src/integrations/reddit/config.js

@@ -7,6 +7,8 @@ export default {
   borderColor: '#ffd8ca',
   description:
     'Connect Reddit to sync posts and comments from selected subreddits.',
+  onboardDescription:
+    'Sync posts and comments from selected subreddits.',
   image: '/images/integrations/reddit.svg',
   connectComponent: RedditConnect,
   url: ({ username }) => (username ? `https://reddit.com/user/${username}` : null),

frontend/src/integrations/slack/config.js

@@ -7,6 +7,8 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect Slack to sync messages, threads, and new joiners.',
+  onboardDescription:
+    'Sync messages, threads, and new joiners.',
   image:
     'https://cdn-icons-png.flaticon.com/512/3800/3800024.png',
   connectComponent: SlackConnect,

frontend/src/integrations/stackoverflow/config.js

@@ -7,6 +7,8 @@ export default {
   borderColor: '#FFFFFF',
   description:
     'Connect Stack Overflow to sync questions and answers based on selected tags.',
+  onboardDescription:
+    'Sync questions and answers based on selected tags.',
   image:
     'https://cdn-icons-png.flaticon.com/512/2111/2111628.png',
   connectComponent: StackOverflowConnect,

frontend/src/integrations/twitter/config.js

@@ -7,6 +7,8 @@ export default {
   borderColor: '#d2ebfc',
   description:
     'Connect Twitter to sync profile information, followers, and relevant tweets.',
+  onboardDescription:
+    'Sync profile information, followers, and relevant tweets.',
   image:
     'https://cdn-icons-png.flaticon.com/512/733/733579.png',
   connectComponent: TwitterConnect,

frontend/src/integrations/zapier/config.js

@@ -6,6 +6,7 @@ export default {
   backgroundColor: '#FFFFFF',
   borderColor: '#FFFFFF',
   description: 'Use Zapier to connect crowd.dev with 5,000+ apps.',
+  onboardDescription: 'Connect crowd.dev with 5,000+ apps.',
   image:
     'https://www.seekpng.com/png/full/67-672759_zapiers-new-cli-tool-for-creating-apps-zapier.png',
   connectComponent: ZapierConnect,

frontend/src/middleware/auth/auth-guard.js

@@ -22,7 +22,9 @@ function isGoingToIntegrationsPage(to) {
  * @param router
  * @returns {Promise<*>}
  */
-export default async function ({ to, store, router }) {
+export default async function ({
+  to, from, store, router,
+}) {
   if (!to.meta || !to.meta.auth) {
     return;
   }
@@ -71,6 +73,16 @@ export default async function ({ to, store, router }) {
     )
     && !tenantSubdomain.isSubdomain
   ) {
+    // Protect onboard routes if user is already onboarded
+    if ((to.path === '/onboard' || (from.path !== '/onboard' && to.path === '/onboard/demo'))
+      && (!permissionChecker.isEmptyTenant && store.getters['auth/currentTenant'].onboardedAt)) {
+      router.push('/');
+    }
+
+    if (to.path === '/onboard/demo' && (permissionChecker.isEmptyTenant || !store.getters['auth/currentTenant'].onboardedAt)) {
+      router.push('/onboard');
+    }
+
     if (
       to.path !== '/onboard'
       && permissionChecker.isEmailVerified
@@ -80,10 +92,7 @@ export default async function ({ to, store, router }) {
       router.push({
         path: '/onboard',
         query: isGoingToIntegrationsPage(to)
-          ? {
-            selectedDataType: 'real',
-            ...to.query,
-          }
+          ? to.query
           : undefined,
       });
     }

frontend/src/modules/auth/pages/invitation-page.vue

@@ -91,7 +91,7 @@ export default {
         token,
         forceAcceptOtherEmail,
       )
-        .then((tenant) => this.doSelectTenant(tenant))
+        .then((tenant) => this.doSelectTenant({ tenant }))
         .then(() => {
           this.warningMessage = null;
           this.loading = false;

frontend/src/modules/auth/store/actions.js

@@ -248,7 +248,7 @@ export default {
       });
   },
 
-  async doSelectTenant({ dispatch }, tenant) {
+  async doSelectTenant({ dispatch }, { tenant, redirect = true }) {
     if (tenantSubdomain.isEnabled) {
       tenantSubdomain.redirectAuthenticatedTo(tenant.url);
       return;
@@ -261,7 +261,9 @@ export default {
 
     store.replaceState(initialState);
 
-    router.push('/');
+    if (redirect) {
+      router.push('/');
+    }
   },
 
   clearTenant({ commit }) {