Update to have token when user is connected

- Update menu design

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/Menu/ContactSubMenu.svelte

@@ -1,10 +1,60 @@
 <script lang="ts">
+
+    function goToGettingStarted() {
+        const sparkHost = "https://workadventu.re/getting-started";
+        window.open(sparkHost, "_blank");
+    }
+
+    function goToBuildingMap() {
+        const sparkHost = "https://workadventu.re/map-building/";
+        window.open(sparkHost, "_blank");
+    }
+
     import {contactPageStore} from "../../Stores/MenuStore";
 </script>
 
-<iframe title="contact" src="{$contactPageStore}" allow="clipboard-read; clipboard-write self {$contactPageStore}" allowfullscreen></iframe>
+<div class="create-map-main">
+    <section class="container-overflow">
+        <section>
+            <h3>Getting started</h3>
+            <p>
+                WorkAdventure allows you to create an online space to communicate spontaneously with others.
+                And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
+            </p>
+            <button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
+        </section>
+
+        <section>
+            <h3>Create your map</h3>
+            <p>You can also create your own custom map by following the step of the documentation.</p>
+            <button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
+        </section>
+
+        <iframe title="contact"
+                src="{$contactPageStore}"
+                allow="clipboard-read; clipboard-write self {$contactPageStore}"
+                allowfullscreen></iframe>
+    </section>
+</div>
 
 <style lang="scss">
+    div.create-map-main {
+      height: calc(100% - 56px);
+
+      text-align: center;
+
+      section {
+        margin-bottom: 50px;
+      }
+
+      section.container-overflow {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+      }
+    }
+
     iframe {
       border: none;
       height: calc(100% - 56px);

front/src/Components/Menu/CreateMapSubMenu.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-
-    function goToGettingStarted() {
-        const sparkHost = "https://workadventu.re/getting-started";
-        window.open(sparkHost, "_blank");
-    }
-
-    function goToBuildingMap() {
-        const sparkHost = "https://workadventu.re/map-building/";
-        window.open(sparkHost, "_blank");
-    }
-
-</script>
-
-<div class="create-map-main">
-    <section class="container-overflow">
-        <section>
-            <h3>Getting started</h3>
-            <p>
-                WorkAdventure allows you to create an online space to communicate spontaneously with others.
-                And it all starts with creating your own space. Choose from a large selection of prefabricated maps by our team.
-            </p>
-            <button type="button" class="nes-btn is-primary" on:click={goToGettingStarted}>Getting started</button>
-        </section>
-        <section>
-            <h3>Create your map</h3>
-            <p>You can also create your own custom map by following the step of the documentation.</p>
-            <button type="button" class="nes-btn" on:click={goToBuildingMap}>Create your map</button>
-        </section>
-    </section>
-</div>
-
-<style lang="scss">
-    div.create-map-main {
-      height: calc(100% - 56px);
-
-      text-align: center;
-
-      section {
-        margin-bottom: 50px;
-      }
-
-      section.container-overflow {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: auto;
-      }
-    }
-
-</style>

front/src/Components/Menu/GuestSubMenu.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    let HTMLShareLink: HTMLInputElement;
+
+    function copyLink() {
+        HTMLShareLink.select();
+        document.execCommand('copy');
+    }
+
+    async function shareLink() {
+        const shareData = {url: location.toString()};
+
+        try {
+            await navigator.share(shareData);
+        } catch (err) {
+            console.error('Error: ' + err);
+            copyLink();
+        }
+    }
+</script>
+
+<div class="guest-main">
+    <section class="container-overflow">
+        <section class="share-url not-mobile">
+            <h3>Share the link of the room !</h3>
+            <input type="text" readonly bind:this={HTMLShareLink} value={location.toString()}>
+            <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
+        </section>
+        <section class="is-mobile">
+            <h3>Share the link of the room !</h3>
+            <input type="hidden" readonly bind:this={HTMLShareLink} value={location.toString()}>
+            <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
+        </section>
+    </section>
+</div>
+
+<style lang="scss">
+    div.guest-main {
+      height: calc(100% - 56px);
+
+      text-align: center;
+
+      section {
+        margin-bottom: 50px;
+      }
+
+      section.container-overflow {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+      }
+
+      section.is-mobile {
+        display: none;
+      }
+    }
+
+    @media only screen and (max-width: 900px), only screen and (max-height: 600px) {
+      div.guest-main {
+        section.share-url.not-mobile {
+          display: none;
+        }
+
+        section.is-mobile {
+          display: block;
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        section.container-overflow {
+          height: calc(100% - 120px);
+        }
+      }
+    }
+</style>

front/src/Components/Menu/Menu.svelte

@@ -2,11 +2,11 @@
     import {fly} from "svelte/transition";
     import SettingsSubMenu from "./SettingsSubMenu.svelte";
     import ProfileSubMenu from "./ProfileSubMenu.svelte";
-    import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
     import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
     import CustomSubMenu from "./CustomSubMenu.svelte"
+    import GuestSubMenu from "./GuestSubMenu.svelte";
     import {
         checkSubMenuToShow,
         customMenuIframe,
@@ -19,21 +19,21 @@
     import type {Unsubscriber} from "svelte/store";
     import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
 
-    let activeSubMenu: string = SubMenusInterface.settings;
+    let activeSubMenu: string = SubMenusInterface.profile;
-    let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
+    let activeComponent: typeof ProfileSubMenu | typeof CustomSubMenu = ProfileSubMenu;
     let props: { url: string, allowApi: boolean };
     let unsubscriberSubMenuStore: Unsubscriber;
 
     onMount(() => {
         unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
             if(!get(subMenusStore).includes(activeSubMenu)) {
-                switchMenu(SubMenusInterface.settings);
+                switchMenu(SubMenusInterface.profile);
             }
         })
 
         checkSubMenuToShow();
 
-        switchMenu(SubMenusInterface.settings);
+        switchMenu(SubMenusInterface.profile);
     })
 
     onDestroy(() => {
@@ -52,8 +52,8 @@
                 case SubMenusInterface.profile:
                     activeComponent = ProfileSubMenu;
                     break;
-                case SubMenusInterface.createMap:
+                case SubMenusInterface.invite:
-                    activeComponent = CreateMapSubMenu;
+                    activeComponent = GuestSubMenu;
                     break;
                 case SubMenusInterface.aboutRoom:
                     activeComponent = AboutRoomSubMenu;

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -55,54 +55,73 @@
 </script>
 
 <div class="customize-main">
-    {#if $userIsConnected}
+    <div class="submenu">
         <section>
-            {#if PROFILE_URL != undefined}
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
-                <iframe title="profile" src="{getProfileUrl()}"></iframe>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
-            {/if}
+            <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
         </section>
         <section>
-            <button type="button" class="nes-btn" on:click|preventDefault={logOut}>Log out</button>
+            <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
         </section>
-    {:else}
+    </div>
-        <section>
+
-            <a type="button" class="nes-btn" href="/login">Sign in</a>
+    <div class="content">
-        </section>
+        {#if $userIsConnected}
-    {/if}
+            <section>
-    <section>
+                {#if PROFILE_URL != undefined}
-        <button type="button" class="nes-btn" on:click|preventDefault={openEditNameScene}>Edit Name</button>
+                    <iframe title="profile" src="{getProfileUrl()}"></iframe>
-        <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
+                {/if}
-        <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
+            </section>
-    </section>
+            <section>
-    <section>
+                <button type="button" class="nes-btn" on:click|preventDefault={logOut}>Log out</button>
-        <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
+            </section>
-    </section>
+        {:else}
+            <section>
+                <a type="button" class="nes-btn" href="/login">Sign in</a>
+            </section>
+        {/if}
+    </div>
 </div>
 
 <style lang="scss">
+    div.customize-submenu{
+
+    }
     div.customize-main{
-      section {
+      width: 100%;
-        display: flex;
+      display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-        margin-bottom: 20px;
 
-        iframe{
+      div.submenu{
-          width: 100%;
+        height: 100%;
-          height: 50vh;
+        width: 180px;
-          border: none;
+      }
-        }
 
-        button {
+      div.content {
-          height: 50px;
+        width: 100%;
-          width: 250px;
+        section {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-wrap: wrap;
+          margin-bottom: 20px;
+
+          iframe {
+            width: 100%;
+            height: 50vh;
+            border: none;
+          }
+
+          button {
+            height: 50px;
+            width: 250px;
+          }
         }
       }
     }
 
     @media only screen and (max-width: 800px) {
-      div.customize-main section button {
+      div.customize-main.content section button {
         width: 130px;
       }
     }

front/src/Connexion/ConnectionManager.ts

@@ -41,7 +41,6 @@ class ConnectionManager {
         const nonce = localUserStore.generateNonce();
         localUserStore.setAuthToken(null);
 
-        //TODO fix me to redirect this URL by pusher
         if (!this._currentRoom || !this._currentRoom.iframeAuthentication) {
             loginSceneVisibleIframeStore.set(false);
             return null;
@@ -79,6 +78,16 @@ class ConnectionManager {
         const connexionType = urlManager.getGameConnexionType();
         this.connexionType = connexionType;
         this._currentRoom = null;
+
+        const urlParams = new URLSearchParams(window.location.search);
+        const token = urlParams.get("token");
+        if (token) {
+            this.authToken = token;
+            localUserStore.setAuthToken(token);
+            //token was saved, clear url
+            urlParams.delete("token");
+        }
+
         if (connexionType === GameConnexionTypes.login) {
             this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
             if (this.loadOpenIDScreen() !== null) {
@@ -88,26 +97,18 @@ class ConnectionManager {
         } else if (connexionType === GameConnexionTypes.jwt) {
             const urlParams = new URLSearchParams(window.location.search);
 
-            //TODO if jwt is defined, state and nonce can to be deleted
+            if (!token) {
-            const code = urlParams.get("code");
+                const code = urlParams.get("code");
-            const state = urlParams.get("state");
+                const state = urlParams.get("state");
-            const jwt = urlParams.get("jwt");
+                if (!state || !localUserStore.verifyState(state)) {
-
+                    throw "Could not validate state!";
-            if (jwt) {
-                this.authToken = jwt;
-                localUserStore.setAuthToken(jwt);
-                //if we use jwt we can update new state from openid provider
-                if (state) {
-                    localUserStore.setState(state);
                 }
+                if (!code) {
+                    throw "No Auth code provided";
+                }
+                localUserStore.setCode(code);
             }
-            if (!state || !localUserStore.verifyState(state)) {
+
-                throw "Could not validate state!";
-            }
-            if (!code) {
-                throw "No Auth code provided";
-            }
-            localUserStore.setCode(code);
             this._currentRoom = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
             try {
                 await this.checkAuthUserConnexion();
@@ -291,16 +292,19 @@ class ConnectionManager {
         //set connected store for menu at false
         userIsConnected.set(false);
 
+        const token = localUserStore.getAuthToken();
         const state = localUserStore.getState();
         const code = localUserStore.getCode();
-        if (!state || !localUserStore.verifyState(state)) {
-            throw "Could not validate state!";
-        }
-        if (!code) {
-            throw "No Auth code provided";
-        }
         const nonce = localUserStore.getNonce();
-        const token = localUserStore.getAuthToken();
+
+        if (!token) {
+            if (!state || !localUserStore.verifyState(state)) {
+                throw "Could not validate state!";
+            }
+            if (!code) {
+                throw "No Auth code provided";
+            }
+        }
         const { authToken } = await Axios.get(`${PUSHER_URL}/login-callback`, { params: { code, nonce, token } }).then(
             (res) => res.data
         );

front/src/Stores/MenuStore.ts

@@ -34,20 +34,20 @@ export const warningContainerStore = createWarningContainerStore();
 export enum SubMenusInterface {
     settings = "Settings",
     profile = "Profile",
-    createMap = "Create a Map",
+    invite = "Invite",
-    aboutRoom = "About the Room",
+    aboutRoom = "Credit",
     globalMessages = "Global Messages",
     contact = "Contact",
 }
 
 function createSubMenusStore() {
     const { subscribe, update } = writable<string[]>([
-        SubMenusInterface.settings,
         SubMenusInterface.profile,
-        SubMenusInterface.createMap,
-        SubMenusInterface.aboutRoom,
         SubMenusInterface.globalMessages,
         SubMenusInterface.contact,
+        SubMenusInterface.settings,
+        SubMenusInterface.invite,
+        SubMenusInterface.aboutRoom,
     ]);
 
     return {