Improve profile menu to implement user identity connected URL (#2055)

#  Improve profile menu to implement user identity connected URL

- Create URL and get user identity
- Check if user is connected or show connexion button
- Improve profile to check before user data and don't display error webpage in menu

front/src/Administration/AnalyticsClient.ts

@@ -9,7 +9,7 @@ class AnalyticsClient {
     constructor() {
         if (POSTHOG_API_KEY && POSTHOG_URL) {
             this.posthogPromise = import("posthog-js").then(({ default: posthog }) => {
-                posthog.init(POSTHOG_API_KEY, { api_host: POSTHOG_URL, disable_cookie: true });
+                posthog.init(POSTHOG_API_KEY, { api_host: POSTHOG_URL });
                 //the posthog toolbar need a reference in window to be able to work
                 window.posthog = posthog;
                 return posthog;

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
     import { gameManager } from "../../Phaser/Game/GameManager";
     import { SelectCompanionScene, SelectCompanionSceneName } from "../../Phaser/Login/SelectCompanionScene";
-    import { menuIconVisiblilityStore, menuVisiblilityStore, userIsConnected } from "../../Stores/MenuStore";
+    import {
+        menuIconVisiblilityStore,
+        menuVisiblilityStore,
+        userIsConnected,
+        profileAvailable,
+        getProfileUrl,
+    } from "../../Stores/MenuStore";
     import { selectCompanionSceneVisibleStore } from "../../Stores/SelectCompanionStore";
     import { LoginScene, LoginSceneName } from "../../Phaser/Login/LoginScene";
     import { loginSceneVisibleStore } from "../../Stores/LoginSceneStore";
@@ -9,7 +15,6 @@
     import { SelectCharacterScene, SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
     import { connectionManager } from "../../Connexion/ConnectionManager";
     import { PROFILE_URL } from "../../Enum/EnvironmentVariable";
-    import { localUserStore } from "../../Connexion/LocalUserStore";
     import { EnableCameraScene, EnableCameraSceneName } from "../../Phaser/Login/EnableCameraScene";
     import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore";
     import btnProfileSubMenuCamera from "../images/btn-menu-profile-camera.svg";
@@ -47,10 +52,6 @@
         return connectionManager.logout();
     }
 
-    function getProfileUrl() {
-        return PROFILE_URL + `?token=${localUserStore.getAuthToken()}`;
-    }
-
     function openEnableCameraScene() {
         disableMenuStores();
         enableCameraSceneVisibilityStore.showEnableCameraScene();
@@ -81,7 +82,7 @@
     </div>
 
     <div class="content">
-        {#if $userIsConnected}
+        {#if $userIsConnected && $profileAvailable}
             <section>
                 {#if PROFILE_URL != undefined}
                     <iframe title="profile" src={getProfileUrl()} />

front/src/Connexion/ConnectionManager.ts

@@ -290,12 +290,12 @@ class ConnectionManager {
             );
 
             connection.onConnectError((error: object) => {
-                console.log("An error occurred while connecting to socket server. Retrying");
+                console.log("onConnectError => An error occurred while connecting to socket server. Retrying");
                 reject(error);
             });
 
             connection.connectionErrorStream.subscribe((event: CloseEvent) => {
-                console.log("An error occurred while connecting to socket server. Retrying");
+                console.log("connectionErrorStream => An error occurred while connecting to socket server. Retrying");
                 reject(
                     new Error(
                         "An error occurred while connecting to socket server. Retrying. Code: " +

front/src/Enum/EnvironmentVariable.ts

@@ -23,6 +23,7 @@ export const DISPLAY_TERMS_OF_USE = getEnvConfig("DISPLAY_TERMS_OF_USE") == "tru
 export const NODE_ENV = getEnvConfig("NODE_ENV") || "development";
 export const CONTACT_URL = getEnvConfig("CONTACT_URL") || undefined;
 export const PROFILE_URL = getEnvConfig("PROFILE_URL") || undefined;
+export const IDENTITY_URL = getEnvConfig("IDENTITY_URL") || undefined;
 export const POSTHOG_API_KEY: string = (getEnvConfig("POSTHOG_API_KEY") as string) || "";
 export const POSTHOG_URL = getEnvConfig("POSTHOG_URL") || undefined;
 export const DISABLE_ANONYMOUS: boolean = getEnvConfig("DISABLE_ANONYMOUS") === "true";

front/src/Stores/MenuStore.ts

@@ -1,17 +1,27 @@
 import { get, writable } from "svelte/store";
 import Timeout = NodeJS.Timeout;
 import { userIsAdminStore } from "./GameStore";
-import { CONTACT_URL } from "../Enum/EnvironmentVariable";
+import { CONTACT_URL, IDENTITY_URL, PROFILE_URL } from "../Enum/EnvironmentVariable";
 import { analyticsClient } from "../Administration/AnalyticsClient";
 import type { Translation } from "../i18n/i18n-types";
+import axios from "axios";
+import { localUserStore } from "../Connexion/LocalUserStore";
 
 export const menuIconVisiblilityStore = writable(false);
 export const menuVisiblilityStore = writable(false);
-menuVisiblilityStore.subscribe((value) => {
-    if (value) analyticsClient.openedMenu();
-});
 export const menuInputFocusStore = writable(false);
 export const userIsConnected = writable(false);
+export const profileAvailable = writable(true);
+
+menuVisiblilityStore.subscribe((value) => {
+    if (value) analyticsClient.openedMenu();
+    if (userIsConnected && value && IDENTITY_URL != null) {
+        axios.get(getMeUrl()).catch((err) => {
+            console.error("menuVisiblilityStore => err => ", err);
+            profileAvailable.set(false);
+        });
+    }
+});
 
 let warningContainerTimeout: Timeout | null = null;
 function createWarningContainerStore() {
@@ -173,3 +183,11 @@ export function handleMenuUnregisterEvent(menuName: string) {
     subMenusStore.removeScriptingMenu(menuName);
     customMenuIframe.delete(menuName);
 }
+
+export function getProfileUrl() {
+    return PROFILE_URL + `?token=${localUserStore.getAuthToken()}`;
+}
+
+export function getMeUrl() {
+    return IDENTITY_URL + `?token=${localUserStore.getAuthToken()}`;
+}