From 00b750eee2730e26b6c9811b7dc32b1ea19e244f Mon Sep 17 00:00:00 2001
From: Joana Maia <joana@crowd.dev>
Date: Fri, 21 Jul 2023 13:32:58 +0100
Subject: [PATCH] Revert "Revert "Integrate LFX header (#1148)""

This reverts commit 6360b6b45adc1b4e21e6ac52a817ebd75288d183.
---
 frontend/index.html                           |   1 +
 frontend/public/images/lf/logo_lfx_cm.svg     |  17 -
 frontend/src/app.vue                          |   4 +
 frontend/src/middleware/auth/auth-guard.js    |   1 +
 frontend/src/modules/auth/auth-routes.js      |  18 -
 frontend/src/modules/auth/auth-service.js     |   1 -
 .../src/modules/auth/components/oauth.vue     |  26 --
 frontend/src/modules/auth/pages/callback.vue  |   1 -
 .../auth/pages/forgot-password-page.vue       | 175 ---------
 .../modules/auth/pages/profile-form-page.vue  | 368 ------------------
 .../src/modules/auth/pages/signin-page.vue    |  29 +-
 .../layout/components/account-dropdown.vue    | 159 --------
 .../src/modules/layout/components/layout.vue  |  17 +-
 .../lf/layout/components/lf-header.vue        |  20 -
 .../modules/lf/layout/components/lf-menu.vue  |   5 +-
 frontend/src/shared/services/auth0.service.ts |   7 +-
 16 files changed, 37 insertions(+), 812 deletions(-)
 delete mode 100644 frontend/public/images/lf/logo_lfx_cm.svg
 delete mode 100644 frontend/src/modules/auth/components/oauth.vue
 delete mode 100644 frontend/src/modules/auth/pages/forgot-password-page.vue
 delete mode 100644 frontend/src/modules/auth/pages/profile-form-page.vue
 delete mode 100644 frontend/src/modules/layout/components/account-dropdown.vue
 delete mode 100644 frontend/src/modules/lf/layout/components/lf-header.vue

diff --git a/frontend/index.html b/frontend/index.html
index 3f65bb0bbf..81c954fefb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -63,6 +63,7 @@
         href="https://cdn.jsdelivr.net/npm/remixicon@3.1.1/fonts/remixicon.css"
       />
     </noscript>
+    <script src="https://cdn.platform.linuxfoundation.org/lfx-header-v2.js"></script>
     <script type="text/javascript">
       let segmentKey =
               '%VUE_APP_SEGMENT_KEY%'
diff --git a/frontend/public/images/lf/logo_lfx_cm.svg b/frontend/public/images/lf/logo_lfx_cm.svg
deleted file mode 100644
index 628b96da2f..0000000000
--- a/frontend/public/images/lf/logo_lfx_cm.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<svg width="82" height="20" viewBox="0 0 82 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="Logo">
-        <path id="Vector" d="M3.97228 16.0277V8.03696H0V20H11.963V16.0277H3.97228Z" fill="#0094FF" />
-        <path id="Vector_2"
-            d="M19.9076 0.0461731H0V6.05079H3.97228V4.06465H15.9353V16.0277H13.9492V20H19.9076V0.0461731Z"
-            fill="#003778" />
-        <path id="Vector_3" d="M23.9261 0H30.0693V14.873H38.9377V20H23.9261V0Z" fill="#003778" />
-        <path id="Vector_4"
-            d="M42.8638 0H58.3372V5.12702H49.0531V7.62124H57.0439V12.3787H49.0531V20H42.8638V0Z"
-            fill="#003778" />
-        <path id="Vector_5"
-            d="M67.4364 9.37642L60.8776 0.0461731H68.0831L71.0854 5.45033L74.0415 0.0461731H80.8314L74.4572 9.42261L81.5704 19.9538H74.1801L70.8083 14.0415L67.2979 20H60.2771L67.4364 9.37642Z"
-            fill="#0094FF" />
-    </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index 75ff8c505a..875532910e 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-show="!loading" id="app">
     <div class="sm:hidden md:block lg:block">
+      <lfx-header-v2 v-if="showLfxMenu" id="lfx-header" product="Community Management" />
       <router-view v-slot="{ Component }">
         <transition>
           <div>
@@ -48,6 +49,9 @@ export default {
           && !config.isCommunityVersion)
       );
     },
+    showLfxMenu() {
+      return this.$route.name !== 'reportPublicView';
+    },
   },
 
   async created() {
diff --git a/frontend/src/middleware/auth/auth-guard.js b/frontend/src/middleware/auth/auth-guard.js
index cb00bb0daf..6f560efacf 100644
--- a/frontend/src/middleware/auth/auth-guard.js
+++ b/frontend/src/middleware/auth/auth-guard.js
@@ -24,6 +24,7 @@ export default async function ({ to, store, router }) {
   if (!to.meta || !to.meta.auth) {
     return;
   }
+
   await store.dispatch('auth/doWaitUntilInit');
 
   const currentUser = store.getters['auth/currentUser'];
diff --git a/frontend/src/modules/auth/auth-routes.js b/frontend/src/modules/auth/auth-routes.js
index 1a9caae938..ec3e5f7597 100644
--- a/frontend/src/modules/auth/auth-routes.js
+++ b/frontend/src/modules/auth/auth-routes.js
@@ -3,7 +3,6 @@ import AuthLayout from '@/modules/auth/layouts/auth-layout.vue';
 
 const SigninPage = () => import('@/modules/auth/pages/signin-page.vue');
 
-const ProfileFormPage = () => import('@/modules/auth/pages/profile-form-page.vue');
 const InvitationPage = () => import('@/modules/auth/pages/invitation-page.vue');
 const TermsAndPrivacyPage = () => import('@/modules/auth/pages/terms-and-privacy.vue');
 const EmptyPermissionsPage = () => import('@/modules/auth/pages/empty-permissions-page.vue');
@@ -51,23 +50,6 @@ export default [
       },
     ],
   },
-  {
-    name: '',
-    path: '',
-    component: Layout,
-    meta: {
-      auth: true,
-      title: 'Profile Settings',
-    },
-    children: [
-      {
-        name: 'editProfile',
-        path: '/auth/edit-profile',
-        component: ProfileFormPage,
-        meta: { auth: true },
-      },
-    ],
-  },
   {
     name: 'callback',
     path: '/auth/callback',
diff --git a/frontend/src/modules/auth/auth-service.js b/frontend/src/modules/auth/auth-service.js
index 2ac70e073d..6bc6e51ca7 100644
--- a/frontend/src/modules/auth/auth-service.js
+++ b/frontend/src/modules/auth/auth-service.js
@@ -87,7 +87,6 @@ export class AuthService {
           : undefined,
       })
       .then((response) => {
-        console.log(response);
         AuthInvitationToken.clear();
 
         return response.data;
diff --git a/frontend/src/modules/auth/components/oauth.vue b/frontend/src/modules/auth/components/oauth.vue
deleted file mode 100644
index 32b72d5f0f..0000000000
--- a/frontend/src/modules/auth/components/oauth.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <a
-    id="googleLogin"
-    class="btn btn--secondary btn--lg w-full"
-    @click="socialLogin('google-oauth2')"
-  >
-    <app-svg name="google" class="h-5 w-5" />
-    <span class="pl-3 text-gray-600">Sign in with Google</span>
-  </a>
-</template>
-
-<script setup lang="ts">
-
-import AppSvg from '@/shared/svg/svg.vue';
-import { Auth0Service } from '@/shared/services/auth0.service';
-
-const socialLogin = (type: string) => {
-  Auth0Service.authorize(type);
-};
-</script>
-
-<script lang="ts">
-export default {
-  name: 'CrAuthOauth',
-};
-</script>
diff --git a/frontend/src/modules/auth/pages/callback.vue b/frontend/src/modules/auth/pages/callback.vue
index 703e578044..f67ae80335 100644
--- a/frontend/src/modules/auth/pages/callback.vue
+++ b/frontend/src/modules/auth/pages/callback.vue
@@ -11,7 +11,6 @@
 import { onMounted } from 'vue';
 import { Auth0Service } from '@/shared/services/auth0.service';
 import { mapActions } from '@/shared/vuex/vuex.helpers';
-import { useRoute, useRouter } from 'vue-router';
 
 const { doSigninWithAuth0 } = mapActions('auth');
 
diff --git a/frontend/src/modules/auth/pages/forgot-password-page.vue b/frontend/src/modules/auth/pages/forgot-password-page.vue
deleted file mode 100644
index a878f7ff1d..0000000000
--- a/frontend/src/modules/auth/pages/forgot-password-page.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div v-show="!success">
-    <h3 class="text-2xl leading-12 font-semibold mb-1">
-      Password recovery
-    </h3>
-    <p class="text-gray-500 text-xs leading-5">
-      Enter your e-mail and we’ll send the instructions to
-      reset your password
-    </p>
-    <div class="pt-10">
-      <el-form
-        ref="form"
-        :model="model"
-        :rules="rules"
-        class="form"
-        label-position="left"
-        label-width="0px"
-        @submit.prevent="doSubmit"
-      >
-        <el-form-item
-          :prop="fields.email.name"
-          class="mb-4"
-        >
-          <label
-            for="email"
-            class="text-xs mb-1 font-semibold leading-5"
-          >{{ fields.email.label }}</label>
-          <el-input
-            id="email"
-            ref="focus"
-            v-model="model[fields.email.name]"
-            autocomplete="email"
-            type="text"
-          />
-          <template #error="{ error }">
-            <div class="flex items-center mt-1">
-              <i
-                class="h-4 flex items-center ri-error-warning-line text-base text-red-500"
-              />
-              <span
-                class="pl-1 text-2xs text-red-500 leading-4.5"
-              >{{ error }}</span>
-            </div>
-          </template>
-        </el-form-item>
-
-        <el-form-item class="mb-4">
-          <el-button
-            id="submit"
-            :loading="loadingPasswordResetEmail"
-            native-type="submit"
-            class="w-full btn btn--primary btn--lg"
-          >
-            <app-i18n
-              code="auth.passwordResetEmail.message"
-            />
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <div class="pt-3 flex justify-center">
-        <router-link
-          :to="{ name: 'signin' }"
-          class="flex items-center"
-        >
-          <i
-            class="ri-arrow-left-line text-lg text-gray-600"
-          />
-          <span
-            class="text-base text-gray-600 font-medium leading-6 pl-2"
-          >Back to sign in</span>
-        </router-link>
-      </div>
-    </div>
-  </div>
-  <!-- success state -->
-  <div v-show="success">
-    <h3 class="text-2xl leading-12 font-semibold mb-10">
-      Check your e-mail
-    </h3>
-    <div class="flex items-center pb-8">
-      <div>
-        <i
-          class="ri-mail-send-line text-5xl text-brand-200"
-        />
-      </div>
-      <div class="pl-6">
-        <p class="text-base leading-6">
-          We sent the password recovery instructions to
-          <span class="font-medium">{{ model.email }}</span>
-        </p>
-      </div>
-    </div>
-    <p class="text-xs text-gray-500 leading-5 pb-8">
-      Didn’t receive the e-mail? Check your spam folder or
-      ask to resend
-    </p>
-    <el-button
-      :loading="loadingPasswordResetEmail"
-      class="btn btn--primary btn--lg w-full"
-      @click="resend()"
-    >
-      Resend e-mail
-    </el-button>
-    <div class="pt-11 flex justify-center">
-      <router-link
-        :to="{ name: 'signin' }"
-        class="flex items-center"
-      >
-        <i
-          class="ri-arrow-left-line text-lg text-gray-600"
-        />
-        <span
-          class="text-base text-gray-600 font-medium leading-6 pl-2"
-        >Back to sign in</span>
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapActions } from 'vuex';
-import { UserModel } from '@/modules/user/user-model';
-import Message from '@/shared/message/message';
-import { i18n } from '@/i18n';
-import AppI18n from '@/shared/i18n/i18n.vue';
-import { Auth0Service } from '@/shared/services/auth0.service';
-
-const { fields } = UserModel;
-
-export default {
-  name: 'AppForgotPasswordPage',
-  components: { AppI18n },
-  data() {
-    return {
-      rules: {
-        email: fields.email.forFormRules(),
-      },
-      model: {},
-      success: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters('auth', ['loadingPasswordResetEmail']),
-
-    fields() {
-      return fields;
-    },
-  },
-
-  methods: {
-    ...mapActions('auth', ['doSendPasswordResetEmail']),
-    doSubmit() {
-      return this.$refs.form
-        .validate()
-        .then(() => Auth0Service.changePassword(
-          this.model.email,
-        ))
-        .then(() => {
-          this.success = true;
-          return Promise.resolve();
-        });
-    },
-    resend() {
-      this.doSubmit().then(() => {
-        Message.success(
-          i18n('auth.passwordResetEmailSuccess'),
-        );
-      });
-    },
-  },
-};
-</script>
-
-<style></style>
diff --git a/frontend/src/modules/auth/pages/profile-form-page.vue b/frontend/src/modules/auth/pages/profile-form-page.vue
deleted file mode 100644
index 02206287ec..0000000000
--- a/frontend/src/modules/auth/pages/profile-form-page.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<template>
-  <app-page-wrapper size="narrow">
-    <div class="profile-form-page">
-      <h4 class="mb-6">
-        Profile settings
-      </h4>
-      <el-container
-        class="bg-white rounded-lg shadow shadow-black/15 mb-6"
-      >
-        <el-main class="p-6">
-          <el-form
-            ref="profileFormRef"
-            label-position="top"
-            :model="profileModel"
-            :rules="profileRules"
-            class="form"
-            @submit.prevent="doSubmit"
-          >
-            <div class="grid gap-x-12 grid-cols-3">
-              <h6>Personal details</h6>
-              <div class="col-span-2">
-                <el-form-item
-                  :label="computedFields.email.label"
-                  :prop="computedFields.email.name"
-                  :required="computedFields.email.required"
-                >
-                  <el-input
-                    ref="focus"
-                    v-model="
-                      profileModel[
-                        computedFields.email.name
-                      ]
-                    "
-                    disabled
-                  />
-                </el-form-item>
-                <div class="flex gap-6">
-                  <el-form-item
-                    class="grow"
-                    :label="computedFields.firstName.label"
-                    :prop="computedFields.firstName.name"
-                    :required="
-                      computedFields.firstName.required
-                    "
-                  >
-                    <el-input
-                      ref="focus"
-                      v-model="
-                        profileModel[
-                          computedFields.firstName.name
-                        ]
-                      "
-                    />
-                  </el-form-item>
-
-                  <el-form-item
-                    class="grow"
-                    :label="computedFields.lastName.label"
-                    :prop="computedFields.lastName.name"
-                    :required="
-                      computedFields.lastName.required
-                    "
-                  >
-                    <el-input
-                      v-model="
-                        profileModel[
-                          computedFields.lastName.name
-                        ]
-                      "
-                    />
-                  </el-form-item>
-                </div>
-              </div>
-            </div>
-          </el-form>
-        </el-main>
-        <el-footer
-          class="bg-gray-50 flex items-center p-6 h-fit rounded-b-lg"
-          :class="
-            hasFormChanged
-              ? 'justify-between'
-              : 'justify-end'
-          "
-        >
-          <el-button
-            v-if="hasFormChanged"
-            class="btn btn-link btn-link--primary"
-            :disabled="saveLoading"
-            @click="doReset"
-          >
-            <i class="ri-arrow-go-back-line" />
-            <span>Reset changes</span>
-          </el-button>
-          <div class="flex gap-4">
-            <el-button
-              :disabled="saveLoading"
-              class="btn btn--md btn--secondary"
-              @click="doCancel"
-            >
-              Cancel
-            </el-button>
-            <el-button
-              class="btn btn--md btn--primary"
-              :disabled="
-                saveLoading
-                  || !hasFormChanged
-                  || !isFormValid
-              "
-              @click="doSubmit"
-            >
-              <app-i18n code="common.save" />
-            </el-button>
-          </div>
-        </el-footer>
-      </el-container>
-      <el-container
-        class="bg-white rounded-lg shadow shadow-black/15"
-      >
-        <el-main class="p-6">
-          <el-form
-            ref="passwordFormRef"
-            label-position="top"
-            class="form"
-            @submit.prevent="doSubmit"
-          >
-            <div class="grid gap-x-12 grid-cols-3">
-              <h6>Change password</h6>
-              <div class="col-span-2">
-                <app-form-item label="E-mail" :validation="$v.email">
-                  <el-input
-                    ref="focus"
-                    v-model="passwordResetForm.email"
-                    type="email"
-                    disabled
-                  />
-                </app-form-item>
-              </div>
-            </div>
-          </el-form>
-        </el-main>
-        <el-footer
-          class="bg-gray-50 flex items-center justify-end p-6 h-fit rounded-b-lg"
-        >
-          <el-button
-            class="btn btn--md btn--primary"
-            :disabled="$v.$invalid"
-            @click="changePassword"
-          >
-            Change password
-          </el-button>
-        </el-footer>
-      </el-container>
-    </div>
-  </app-page-wrapper>
-</template>
-
-<script setup>
-import { useStore } from 'vuex';
-import {
-  ref, computed, onBeforeMount, reactive,
-} from 'vue';
-import isEqual from 'lodash/isEqual';
-import { useRouter } from 'vue-router';
-import { i18n } from '@/i18n';
-import { FormSchema } from '@/shared/form/form-schema';
-import { UserModel } from '@/modules/user/user-model';
-import useVuelidate from '@vuelidate/core';
-import { email, required } from '@vuelidate/validators';
-import AppFormItem from '@/shared/form/form-item.vue';
-import AppI18n from '@/shared/i18n/i18n.vue';
-import { Auth0Service } from '@/shared/services/auth0.service';
-import Message from '@/shared/message/message';
-
-const { fields } = UserModel;
-const store = useStore();
-const router = useRouter();
-
-const profileFormSchema = computed(
-  () => new FormSchema([
-    fields.email,
-    fields.firstName,
-    fields.lastName,
-  ]),
-);
-const passwordFormSchema = computed(
-  () => new FormSchema([
-    fields.oldPassword,
-    fields.newPassword,
-    fields.newPasswordConfirmation,
-  ]),
-);
-
-const currentUser = computed(
-  () => store.getters['auth/currentUser'],
-);
-const saveLoading = computed(
-  () => store.getters['auth/loadingUpdateProfile']
-    || store.getters['auth/loadingPasswordChange'],
-);
-
-const computedFields = computed(() => fields);
-
-const passwordResetForm = reactive({
-  email: currentUser.value.email,
-});
-
-const rules = {
-  email: {
-    required,
-    email,
-  },
-};
-
-const $v = useVuelidate(rules, passwordResetForm);
-// Form references
-const profileFormRef = ref(null);
-const passwordFormRef = ref(null);
-
-// Form models
-const profileModel = ref(null);
-const passwordModel = ref(null);
-
-// Form rules
-const profileRules = ref(profileFormSchema.value.rules());
-const passwordRules = computed(() => {
-  const rules = passwordFormSchema.value.rules();
-
-  const passwordConfirmationValidator = (
-    _rule,
-    value,
-    callback,
-  ) => {
-    if (
-      value !== passwordModel.value[fields.newPassword.name]
-    ) {
-      callback(
-        new Error(i18n('auth.passwordChange.mustMatch')),
-      );
-    } else {
-      callback();
-    }
-  };
-
-  return {
-    ...rules,
-    [fields.newPasswordConfirmation.name]: [
-      ...rules[fields.newPasswordConfirmation.name],
-      {
-        validator: passwordConfirmationValidator,
-        trigger: 'blur',
-      },
-    ],
-  };
-});
-
-// Form validations
-const hasProfileModelChanged = computed(() => !isEqual(
-  profileFormSchema.value.initialValues(
-    currentUser.value,
-  ),
-  profileModel.value,
-));
-const hasPasswordModelChanged = computed(
-  () => !isEqual(
-    passwordFormSchema.value.initialValues(
-      currentUser.value,
-    ),
-    passwordModel.value,
-  ),
-);
-const hasFormChanged = computed(
-  () => hasProfileModelChanged.value
-    || hasPasswordModelChanged.value,
-);
-
-const isProfileFormValid = computed(() => profileFormSchema.value.isValidSync(profileModel.value));
-const isPasswordFormValid = computed(() => passwordFormSchema.value.isValidSync(passwordModel.value));
-
-const isFormValid = computed(
-  () => ((hasPasswordModelChanged.value
-      && isPasswordFormValid.value)
-      || !hasPasswordModelChanged.value)
-    && ((hasProfileModelChanged.value
-      && isProfileFormValid.value)
-      || !hasProfileModelChanged.value),
-);
-
-onBeforeMount(() => {
-  profileModel.value = profileFormSchema.value.initialValues(currentUser.value);
-  passwordModel.value = passwordFormSchema.value.initialValues(
-    currentUser.value,
-  );
-});
-
-const doCancel = () => {
-  router.push({ path: '/' });
-};
-
-const doReset = () => {
-  profileModel.value = profileFormSchema.value.initialValues(currentUser.value);
-
-  passwordModel.value = passwordFormSchema.value.initialValues(
-    currentUser.value,
-  );
-};
-
-const changePassword = () => {
-  if ($v.value.$invalid) {
-    return;
-  }
-  Auth0Service.changePassword(passwordResetForm.email)
-    .then(() => {
-      Message.success('Password change link has been send to your email address');
-    })
-    .catch(() => {
-      Message.error('There was an error changing password');
-    });
-};
-
-const doSubmit = async () => {
-  // Submit for profile changes
-  if (hasProfileModelChanged.value) {
-    try {
-      await profileFormRef.value.validate();
-    } catch (error) {
-      return;
-    }
-
-    const values = profileFormSchema.value.cast(
-      profileModel.value,
-    );
-
-    store.dispatch('auth/doUpdateProfile', values);
-    router.push('/');
-  }
-
-  // Submit for password changes
-  if (hasPasswordModelChanged.value) {
-    try {
-      await passwordFormRef.value.validate();
-    } catch (error) {
-      return;
-    }
-
-    const values = passwordFormSchema.value.cast(
-      passwordModel.value,
-    );
-
-    store.dispatch('auth/doChangePassword', values);
-  }
-};
-</script>
-
-<script>
-export default {
-  name: 'AppProfileFormPage',
-};
-</script>
-
-<style lang="scss">
-.profile-form-page {
-  .el-form .el-form-item__content,
-  .el-form--default.el-form--label-top
-    .el-form-item__content {
-    @apply mb-6;
-  }
-}
-</style>
diff --git a/frontend/src/modules/auth/pages/signin-page.vue b/frontend/src/modules/auth/pages/signin-page.vue
index a65cbc0097..0c81bb6370 100644
--- a/frontend/src/modules/auth/pages/signin-page.vue
+++ b/frontend/src/modules/auth/pages/signin-page.vue
@@ -1,21 +1,9 @@
 <template>
-  <div class="flex flex-col items-center gap-16">
-    <div class="flex gap-4 items-center">
-      <img src="/images/lf/logo_lfx_cm.svg" alt="lf logo" class="h-5" />
-      <el-divider direction="vertical" class="h-5 !m-0" />
-      <div class="text-xl text-brand-500">
-        Community Management
-      </div>
-    </div>
-    <div class="flex gap-4 items-center">
-      <div
-        v-loading="true"
-        class="app-page-spinner h-10 w-10 !relative !min-h-10"
-      />
-      <div class="font-semibold text-lg">
-        Signing you in...
-      </div>
-    </div>
+  <div class="flex items-center bg-white h-full w-full justify-center">
+    <div
+      v-loading="true"
+      class="app-page-spinner h-20 w-20 !relative !min-h-20 custom"
+    />
   </div>
 </template>
 
@@ -30,4 +18,9 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss">
+.app-page-spinner.custom .el-loading-spinner .circular {
+  height: 12rem;
+  width: 12rem;
+}
+</style>
diff --git a/frontend/src/modules/layout/components/account-dropdown.vue b/frontend/src/modules/layout/components/account-dropdown.vue
deleted file mode 100644
index 3de5460649..0000000000
--- a/frontend/src/modules/layout/components/account-dropdown.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <el-popover
-    :disabled="!currentTenant?.onboardedAt"
-    placement="right-start"
-    :width="230"
-    trigger="click"
-    popper-class="account-popover"
-    class="h-min"
-    @show="isDropdownOpen = true"
-    @hide="isDropdownOpen = false"
-  >
-    <template #reference>
-      <div
-        id="accountDropdown"
-        class="cursor-pointer flex w-full h-16 items-center hover:bg-gray-200 account-btn"
-        :class="isDropdownOpen ? 'bg-brand-50' : 'bg-brand-25'"
-      >
-        <div class="flex items-center">
-          <app-avatar
-            :entity="computedAvatarEntity"
-            size="sm"
-            :class="isCollapsed ? '' : 'mr-3'"
-          />
-          <div
-            v-if="!isCollapsed"
-            class="text-sm account-btn-info"
-          >
-            <div class="text-gray-900">
-              {{ currentUserNameOrEmailPrefix }}
-            </div>
-            <div class="text-gray-500 text-2xs">
-              {{ currentTenant.name }}
-            </div>
-          </div>
-        </div>
-
-        <i
-          v-if="!isCollapsed"
-          class="ri-more-2-fill text-gray-300 text-lg"
-        />
-      </div>
-    </template>
-
-    <!-- Popover content -->
-    <div>
-      <div class="popover-item" @click="doEditProfile">
-        <i
-          class="text-base text-gray-400 ri-account-circle-line"
-        />
-        <span class="text-xs text-gray-900">Profile settings</span>
-      </div>
-      <div
-        id="logout"
-        class="popover-item"
-        @click="doSignout"
-      >
-        <i
-          class="text-base text-gray-400 ri-logout-box-r-line"
-        />
-        <span class="text-xs text-gray-900">Sign out</span>
-      </div>
-    </div>
-  </el-popover>
-</template>
-
-<script setup>
-import { useStore } from 'vuex';
-import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const store = useStore();
-const router = useRouter();
-
-const isDropdownOpen = ref(false);
-
-const isCollapsed = computed(
-  () => store.getters['layout/menuCollapsed'],
-);
-
-const currentUserNameOrEmailPrefix = computed(
-  () => store.getters['auth/currentUserNameOrEmailPrefix'],
-);
-const currentUserAvatar = computed(
-  () => store.getters['auth/currentUserAvatar'],
-);
-const currentTenant = computed(
-  () => store.getters['auth/currentTenant'] || {},
-);
-
-const computedAvatarEntity = computed(() => ({
-  avatar: currentUserAvatar.value,
-  displayName: currentUserNameOrEmailPrefix.value,
-}));
-
-function doSignout() {
-  store.dispatch('auth/doSignout');
-}
-
-function doEditProfile() {
-  return router.push('/auth/edit-profile');
-}
-</script>
-
-<script>
-export default {
-  name: 'AppAccountDropdown',
-};
-</script>
-
-<style lang="scss">
-.popover-item {
-  @apply h-10 hover:cursor-pointer flex items-center gap-2 px-3 rounded hover:bg-gray-50;
-
-  a,
-  a[href]:hover {
-    @apply text-gray-900;
-  }
-
-  &:hover {
-    i:not(.ri-external-link-line) {
-      @apply text-gray-500;
-    }
-
-    use {
-      fill: #6b7280;
-    }
-  }
-}
-
-// Override inline style in popover
-.account-popover {
-  padding: 8px !important;
-  transform: translateY(-10px);
-  border-radius: 8px !important;
-  border: none !important;
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2) !important;
-  height: min-content !important;
-}
-
-// Smooth disappearance of account information on collapse
-.app-menu {
-  .account-btn {
-    @apply justify-between px-3;
-
-    &:hover .ri-more-2-fill {
-      @apply text-gray-400;
-    }
-  }
-
-  :not(.horizontal-collapse-transition).el-menu--collapse {
-    @apply justify-center;
-  }
-
-  .horizontal-collapse-transition .account-btn-info {
-    transition: opacity 0.3s ease;
-    opacity: 0;
-  }
-}
-</style>
diff --git a/frontend/src/modules/layout/components/layout.vue b/frontend/src/modules/layout/components/layout.vue
index cda1ce9c03..20cab1a2f1 100644
--- a/frontend/src/modules/layout/components/layout.vue
+++ b/frontend/src/modules/layout/components/layout.vue
@@ -1,7 +1,6 @@
 <template>
   <el-container v-if="currentTenant" class="flex-col">
-    <app-lf-header />
-    <el-container style="height: calc(100vh - 60px);">
+    <el-container style="height: calc(100vh - 60px); margin-top: 60px;">
       <!-- App menu -->
       <app-lf-menu />
 
@@ -20,7 +19,7 @@ import { mapActions, mapGetters } from 'vuex';
 import identify from '@/shared/monitoring/identify';
 import AppLfMenu from '@/modules/lf/layout/components/lf-menu.vue';
 import AppLfBanners from '@/modules/lf/layout/components/lf-banners.vue';
-import AppLfHeader from '@/modules/lf/layout/components/lf-header.vue';
+import { Auth0Service } from '@/shared/services/auth0.service';
 
 export default {
   name: 'AppLayout',
@@ -28,7 +27,6 @@ export default {
   components: {
     AppLfMenu,
     AppLfBanners,
-    AppLfHeader,
   },
 
   computed: {
@@ -63,6 +61,17 @@ export default {
   },
 
   async mounted() {
+    try {
+      const user = await Auth0Service.getUser();
+      const lfxHeader = document.getElementById('lfx-header');
+
+      if (lfxHeader) {
+        lfxHeader.authuser = user;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+
     identify(this.currentUser);
     this.initPendo();
   },
diff --git a/frontend/src/modules/lf/layout/components/lf-header.vue b/frontend/src/modules/lf/layout/components/lf-header.vue
deleted file mode 100644
index b33c1cf21a..0000000000
--- a/frontend/src/modules/lf/layout/components/lf-header.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <div
-    class="sticky top-0 flex items-center bg-brand-25"
-    style="height: 60px;"
-  >
-    <div class="px-5">
-      <router-link to="/" class="flex gap-4 items-center">
-        <img src="/images/lf/logo_lfx_cm.svg" alt="lf logo" class="h-5" />
-        <el-divider direction="vertical" class="h-5 !m-0" />
-        <div class="text-xl text-brand-500">
-          Community Management
-        </div>
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
diff --git a/frontend/src/modules/lf/layout/components/lf-menu.vue b/frontend/src/modules/lf/layout/components/lf-menu.vue
index c7d3f4918c..22ea20686b 100644
--- a/frontend/src/modules/lf/layout/components/lf-menu.vue
+++ b/frontend/src/modules/lf/layout/components/lf-menu.vue
@@ -257,11 +257,9 @@
           </el-tooltip>
         </div>
       </div>
-
-      <app-account-dropdown />
     </el-menu>
     <div
-      class="absolute bg-gray-600 right-0 rounded-l-md h-8 w-6 flex items-center justify-center bottom-64 cursor-pointer hover:bg-gray-700"
+      class="absolute bg-gray-600 right-0 rounded-l-md h-8 w-6 flex items-center justify-center bottom-48 cursor-pointer hover:bg-gray-700"
       @click="toggleMenu"
     >
       <i
@@ -282,7 +280,6 @@ import { useActivityTypeStore } from '@/modules/activity/store/type';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { storeToRefs } from 'pinia';
 import AppLfMenuProjectGroupSelection from '@/modules/lf/layout/components/lf-menu-project-group-selection.vue';
-import AppAccountDropdown from '@/modules/layout/components/account-dropdown.vue';
 import { ActivityTypeService } from '@/modules/activity/services/activity-type-service';
 import { EagleEyePermissions } from '@/premium/eagle-eye/eagle-eye-permissions';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
diff --git a/frontend/src/shared/services/auth0.service.ts b/frontend/src/shared/services/auth0.service.ts
index 2afbc6ca11..61bd6fef37 100644
--- a/frontend/src/shared/services/auth0.service.ts
+++ b/frontend/src/shared/services/auth0.service.ts
@@ -1,6 +1,6 @@
 import { LocalStorageEnum } from '@/shared/types/LocalStorage';
 import config from '@/config';
-import { Auth0Client } from '@auth0/auth0-spa-js';
+import { Auth0Client, User } from '@auth0/auth0-spa-js';
 
 const baseUrl = `${config.frontendUrl.protocol}://${config.frontendUrl.host}`;
 const authCallback = `${baseUrl}/auth/callback`;
@@ -15,6 +15,7 @@ class Auth0ServiceClass {
       authorizationParams: {
         redirect_uri: authCallback,
       },
+      cacheLocation: 'localstorage',
     });
   }
 
@@ -63,6 +64,10 @@ class Auth0ServiceClass {
     Auth0ServiceClass.localLogout();
     this.webAuth.logout();
   }
+
+  public getUser(): Promise<User> {
+    return this.webAuth.getUser().then((user) => user);
+  }
 }
 
 export const Auth0Service = new Auth0ServiceClass();