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,9 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect DEV to sync profile information and comments on articles.',
+  onboard: {
+    description: '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,9 @@ export default {
   borderColor: '#dee0fc',
   description:
     'Connect Discord to sync messages, threads, forum channels, and new joiners.',
+  onboard: {
+    description: '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,9 @@ export default {
   chartColor: '#FFDE92',
   description:
     'Connect Discourse to sync topics, posts, and replies from your account forums.',
+  onboard: {
+    description: '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,9 @@ export default {
   borderColor: '#FFFFFF',
   description:
     'Connect Git to sync commit activities from your repos.',
+  onboard: {
+    description: 'Sync commit activities from your repos.',
+  },
   image:
     '/images/integrations/git.png',
   connectComponent: GitConnect,

frontend/src/integrations/github/components/github-connect.vue

@@ -6,15 +6,17 @@
 import { computed } from 'vue';
 import config from '@/config';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
+const emit = defineEmits(['inviteColleagues']);
 defineProps({
   integration: {
     type: Object,
     default: () => {},
   },
 });
 
+const route = useRoute();
 const router = useRouter();
 
 // We have 3 GitHub apps: test, test-local and prod
@@ -42,9 +44,13 @@ const connect = () => {
     window.open(githubConnectUrl.value, '_self');
   }).catch((action) => {
     if (action === 'cancel') {
-      router.push({
-        name: 'settings',
-      });
+      if (route.name === 'onboard') {
+        emit('inviteColleagues');
+      } else {
+        router.push({
+          name: 'settings',
+        });
+      }
     }
   });
 };

frontend/src/integrations/github/config.js

@@ -7,6 +7,12 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect GitHub to sync profile information, stars, forks, pull requests, issues, and discussions.',
+  onboard: {
+    description: `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.`,
+    image: '/images/integrations/onboard/onboard-github-preview.png',
+    highlight: 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,9 @@ export default {
   borderColor: '#ffdecf',
   description:
     'Connect Hacker News to get posts as well as their comments mentioning your community.',
+  onboard: {
+    description: '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,9 @@ export default {
   backgroundColor: '#FFFFFF',
   borderColor: '#FFFFFF',
   description: 'Use n8n to connect crowd.dev with 250+ apps and services.',
+  onboard: {
+    description: '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,9 @@ export default {
   borderColor: '#ffd8ca',
   description:
     'Connect Reddit to sync posts and comments from selected subreddits.',
+  onboard: {
+    description: '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,9 @@ export default {
   borderColor: '#E5E7EB',
   description:
     'Connect Slack to sync messages, threads, and new joiners.',
+  onboard: {
+    description: '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,9 @@ export default {
   borderColor: '#FFFFFF',
   description:
     'Connect Stack Overflow to sync questions and answers based on selected tags.',
+  onboard: {
+    description: 'Sync questions and answers based on selected tags.',
+  },
   image:
     'https://cdn-icons-png.flaticon.com/512/2111/2111628.png',
   connectComponent: StackOverflowConnect,

frontend/src/integrations/zapier/config.js

@@ -6,6 +6,9 @@ export default {
   backgroundColor: '#FFFFFF',
   borderColor: '#FFFFFF',
   description: 'Use Zapier to connect crowd.dev with 5,000+ apps.',
+  onboard: {
+    description: '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 }) {