From 130812917062b67f58dda231d6002d7081b1f858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Wed, 9 Oct 2024 12:16:26 +0200
Subject: [PATCH 1/2] Success page for non direct connect

---
 frontend/public/images/logo/lfx.svg           | 11 +++++
 frontend/src/app.vue                          | 11 ++++-
 .../src/modules/auth/services/auth.service.ts |  3 ++
 .../src/modules/auth/store/auth.actions.ts    |  3 --
 .../modules/integration/integration-routes.js | 48 +++++++++++++------
 .../integration-list-page.vue                 |  2 +-
 .../pages/integration-success-page.vue        | 47 ++++++++++++++++++
 .../lf/segments/pages/lf-admin-panel-page.vue |  1 -
 8 files changed, 105 insertions(+), 21 deletions(-)
 create mode 100644 frontend/public/images/logo/lfx.svg
 rename frontend/src/modules/integration/{components => pages}/integration-list-page.vue (98%)
 create mode 100644 frontend/src/modules/integration/pages/integration-success-page.vue

diff --git a/frontend/public/images/logo/lfx.svg b/frontend/public/images/logo/lfx.svg
new file mode 100644
index 0000000000..2b1c15c83c
--- /dev/null
+++ b/frontend/public/images/logo/lfx.svg
@@ -0,0 +1,11 @@
+<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_445_3359)">
+<path d="M8.56833 32.3854V16.4062H0.52655V40.3749H24.5474V32.3854H8.56833Z" fill="#0095FF"/>
+<path d="M40.5265 0.375H0.52655V12.3854H8.51611V8.41677H32.537V32.3854H28.5683V40.375H40.5265V0.375Z" fill="#00347B"/>
+</g>
+<defs>
+<clipPath id="clip0_445_3359">
+<rect width="40" height="40" fill="white" transform="translate(0.52655 0.375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index 9ba37a2a11..ba687dbc32 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div class="sm:hidden md:block lg:block xl:block">
-      <lfx-header-v2 id="lfx-header" product="Community Management" />
+      <lfx-header-v2 v-if="!$route.meta.hideLfxHeader" id="lfx-header" product="Community Management" />
       <router-view v-slot="{ Component }">
         <transition>
           <component :is="Component" v-if="Component" />
@@ -71,11 +71,18 @@ export default {
 
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
-    this.init();
+    const queryParameters = new URLSearchParams(window.location.search);
+    if (queryParameters.get('state') === 'noconnect' && window.location.pathname.includes('/integration')) {
+      return;
+    }
     this.listProjectGroups({
       limit: null,
       reset: true,
     });
+    if (['/auth/callback'].includes(window.location.pathname)) {
+      return;
+    }
+    this.init();
   },
 
   unmounted() {
diff --git a/frontend/src/modules/auth/services/auth.service.ts b/frontend/src/modules/auth/services/auth.service.ts
index bbb2672268..cc8c80af67 100644
--- a/frontend/src/modules/auth/services/auth.service.ts
+++ b/frontend/src/modules/auth/services/auth.service.ts
@@ -1,3 +1,5 @@
+import { Auth0Service } from '@/modules/auth/services/auth0.service';
+
 class AuthServiceClass {
   setToken(token: string) {
     localStorage.setItem('jwt', token);
@@ -18,6 +20,7 @@ class AuthServiceClass {
   logout() {
     localStorage.removeItem('jwt');
     localStorage.removeItem('currentTenant');
+    Auth0Service.logout();
   }
 
   isDevmode() {
diff --git a/frontend/src/modules/auth/store/auth.actions.ts b/frontend/src/modules/auth/store/auth.actions.ts
index 9d07f4a33c..1d85b91b1a 100644
--- a/frontend/src/modules/auth/store/auth.actions.ts
+++ b/frontend/src/modules/auth/store/auth.actions.ts
@@ -12,9 +12,6 @@ import useSessionTracking from '@/shared/modules/monitoring/useSessionTracking';
 
 export default {
   init() {
-    if (window.location.pathname === '/auth/callback') {
-      return;
-    }
     Auth0Service.isAuthenticated()
       .then((isAuthenticated: boolean) => {
         if (!isAuthenticated) {
diff --git a/frontend/src/modules/integration/integration-routes.js b/frontend/src/modules/integration/integration-routes.js
index 7f928f42f1..f9147b7ee3 100644
--- a/frontend/src/modules/integration/integration-routes.js
+++ b/frontend/src/modules/integration/integration-routes.js
@@ -4,7 +4,10 @@ import { PermissionGuard } from '@/shared/modules/permissions/router/PermissionG
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 
 const IntegrationListPage = () => import(
-  '@/modules/integration/components/integration-list-page.vue'
+  '@/modules/integration/pages/integration-list-page.vue'
+);
+const IntegrationSuccessPage = () => import(
+  '@/modules/integration/pages/integration-success-page.vue'
 );
 
 export default [
@@ -14,7 +17,6 @@ export default [
     component: Layout,
     exact: true,
     meta: {
-      auth: true,
       title: 'Integrations',
       eventKey: PageEventKey.INTEGRATIONS,
       hideBanner: true,
@@ -25,25 +27,34 @@ export default [
         path: '/integrations',
         exact: true,
         meta: {
-          auth: true,
         },
         beforeEnter: [
-          PermissionGuard(LfPermission.integrationRead),
           (to, from, next) => {
             const segmentId = localStorage.getItem('segmentId');
             const segmentGrandparentId = localStorage.getItem('segmentGrandparentId');
+            console.log(to.query.state);
+            const state = to.query.state ?? '';
 
             // Redirect to integrations list page with correct id
-            if (segmentId && Object.keys(to.query).length) {
-              next({
-                name: 'integration',
-                params: {
-                  id: segmentId,
-                  grandparentId: segmentGrandparentId,
-                },
-                query: to.query,
-              });
-              return;
+            if (Object.keys(to.query).length) {
+              if (state === 'noconnect') {
+                next({
+                  name: 'integrationSuccess',
+                  query: to.query,
+                });
+                return;
+              }
+              if (segmentId !== 'null') {
+                next({
+                  name: 'integration',
+                  params: {
+                    id: segmentId,
+                    grandparentId: segmentGrandparentId,
+                  },
+                  query: to.query,
+                });
+                return;
+              }
             }
 
             localStorage.setItem('segmentId', null);
@@ -71,4 +82,13 @@ export default [
       },
     ],
   },
+  {
+    name: 'integrationSuccess',
+    path: '/integrations/success',
+    component: IntegrationSuccessPage,
+    exact: true,
+    meta: {
+      hideLfxHeader: true,
+    },
+  },
 ];
diff --git a/frontend/src/modules/integration/components/integration-list-page.vue b/frontend/src/modules/integration/pages/integration-list-page.vue
similarity index 98%
rename from frontend/src/modules/integration/components/integration-list-page.vue
rename to frontend/src/modules/integration/pages/integration-list-page.vue
index 6bcf05ff3c..2ec1fc1492 100644
--- a/frontend/src/modules/integration/components/integration-list-page.vue
+++ b/frontend/src/modules/integration/pages/integration-list-page.vue
@@ -92,7 +92,7 @@ import { mapGetters } from 'vuex';
 import AppLfIntegrationsPageHeader from '@/modules/lf/layout/components/lf-integrations-page-header.vue';
 import ConfirmDialog from '@/shared/dialog/confirm-dialog';
 import Message from '@/shared/message/message';
-import AppIntegrationList from './integration-list.vue';
+import AppIntegrationList from '../components/integration-list.vue';
 
 export default {
   name: 'AppIntegrationListPage',
diff --git a/frontend/src/modules/integration/pages/integration-success-page.vue b/frontend/src/modules/integration/pages/integration-success-page.vue
new file mode 100644
index 0000000000..b0f09565bd
--- /dev/null
+++ b/frontend/src/modules/integration/pages/integration-success-page.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="py-10 h-screen w-full flex flex-col items-center justify-center">
+    <section class="flex justify-center items-center pb-10">
+      <div class="w-20 h-20 bg-white shadow-md rounded-full flex items-center justify-center mr-4">
+        <lf-icon name="git-repository-line" :size="40" />
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+      </div>
+      <div class="px-2">
+        <lf-icon name="checkbox-circle-fill" :size="20" class="text-green-500" />
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+        <div class="w-1 h-1 rounded-full bg-gray-300" />
+      </div>
+      <div class="w-20 h-20 bg-white shadow-md rounded-full flex items-center justify-center ml-4">
+        <div>
+          <img alt="LFX logo" src="/images/logo/lfx.svg" />
+        </div>
+      </div>
+    </section>
+    <section>
+      <h4 class="text-center pb-6">
+        LFX CM successfully installed
+      </h4>
+      <p class="text-medium">
+        You have successfully connected LFX CM app with your GitHub repository.
+      </p>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LfIcon from '@/ui-kit/icon/Icon.vue';
+</script>
+
+<script lang="ts">
+export default {
+  name: 'LfIntegrationSuccessPage',
+};
+</script>
diff --git a/frontend/src/modules/lf/segments/pages/lf-admin-panel-page.vue b/frontend/src/modules/lf/segments/pages/lf-admin-panel-page.vue
index 03f10336ab..279fd1108b 100644
--- a/frontend/src/modules/lf/segments/pages/lf-admin-panel-page.vue
+++ b/frontend/src/modules/lf/segments/pages/lf-admin-panel-page.vue
@@ -53,7 +53,6 @@ import AppLfAuditLogsPage from '@/modules/lf/segments/pages/lf-audit-logs-page.v
 import LfDevmode from '@/modules/lf/segments/components/dev/devmode.vue';
 import { LfRole } from '@/shared/modules/permissions/types/Roles';
 import AppOrganizationCommonPage from '@/modules/organization/pages/organization-common-page.vue';
-// import AppOrganizationCommonPage from '@/modules/organization/pages/organization-common-page.vue';
 
 const route = useRoute();
 const router = useRouter();

From 3a7767e2859ac065129601d566c44567d5885b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Wed, 9 Oct 2024 14:04:36 +0200
Subject: [PATCH 2/2] Update design of success page

---
 .../pages/integration-success-page.vue            | 15 +++++++++++----
 frontend/tailwind.config.js                       |  3 ++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/modules/integration/pages/integration-success-page.vue b/frontend/src/modules/integration/pages/integration-success-page.vue
index b0f09565bd..c73c4e0873 100644
--- a/frontend/src/modules/integration/pages/integration-success-page.vue
+++ b/frontend/src/modules/integration/pages/integration-success-page.vue
@@ -25,13 +25,20 @@
         </div>
       </div>
     </section>
-    <section>
-      <h4 class="text-center pb-6">
+    <section class="flex flex-col items-center">
+      <h4 class="text-center pb-10">
         LFX CM successfully installed
       </h4>
-      <p class="text-medium">
-        You have successfully connected LFX CM app with your GitHub repository.
+      <p class="text-medium text-center pb-10 max-w-148">
+        To finalize the process of connecting this GitHub organization to LFX Community Management,
+        each repository must be mapped to its corresponding sub-project.
       </p>
+      <div class="bg-primary-50 border border-primary-100 flex items-center px-3 py-1.5 rounded-md">
+        <lf-icon name="information-line" :size="20" class="text-primary-800" />
+        <p class="ml-2 text-small text-primary-800">
+          You must have a LF account and permissions to access Community Management in order to complete this final step.
+        </p>
+      </div>
     </section>
   </div>
 </template>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index bed2cd4191..92cc8116da 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -53,7 +53,8 @@ const spacing = {
   88: '22rem',
   96: '24rem',
   100: '25rem',
-  120: '30rem'
+  120: '30rem',
+  148: '37rem'
 }
 
 module.exports = {