Merge pull request #300 from thecodingmachine/authorisationMap

rewrote the authorisation flow

back/src/Controller/AuthenticateController.ts

@@ -1,8 +1,7 @@
-import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
 import { v4 } from 'uuid';
 import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
 import {BaseController} from "./BaseController";
-import {adminApi, AdminApiData} from "../Services/AdminApi";
+import {adminApi} from "../Services/AdminApi";
 import {jwtTokenManager} from "../Services/JWTTokenManager";
 
 export interface TokenInterface {
@@ -13,18 +12,19 @@ export class AuthenticateController extends BaseController {
 
     constructor(private App : TemplatedApp) {
         super();
-        this.login();
+        this.register();
+        this.anonymLogin();
     }
 
-    //permit to login on application. Return token to connect on Websocket IO.
+    //Try to login with an admin token
-    login(){
+    register(){
-        this.App.options("/login", (res: HttpResponse, req: HttpRequest) => {
+        this.App.options("/register", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
 
             res.end();
         });
 
-        this.App.post("/login", (res: HttpResponse, req: HttpRequest) => {
+        this.App.post("/register", (res: HttpResponse, req: HttpRequest) => {
             (async () => {
                 this.addCorsHeaders(res);
 
@@ -36,35 +36,25 @@ export class AuthenticateController extends BaseController {
 
                 //todo: what to do if the organizationMemberToken is already used?
                 const organizationMemberToken:string|null = param.organizationMemberToken;
-                const mapSlug:string|null = param.mapSlug;
+                
-
                 try {
-                    let userUuid;
+                    if (typeof organizationMemberToken != 'string') throw new Error('No organization token');
-                    let mapUrlStart;
+                    const data = await adminApi.fetchMemberDataByToken(organizationMemberToken);
-                    let newUrl: string|null = null;
 
-                    if (organizationMemberToken) {
+                    const userUuid = data.userUuid;
-                        const data = await adminApi.fetchMemberDataByToken(organizationMemberToken);
+                    const organizationSlug = data.organizationSlug;
-
+                    const worldSlug = data.worldSlug;
-                        userUuid = data.userUuid;
+                    const roomSlug = data.roomSlug;
-                        mapUrlStart = data.mapUrlStart;
+                    const mapUrlStart = data.mapUrlStart;
-                        newUrl = this.getNewUrlOnAdminAuth(data)
-                    } else if (mapSlug !== null) {
-                        userUuid = v4();
-                        mapUrlStart = mapSlug;
-                        newUrl = null;
-                    } else {
-                        userUuid = v4();
-                        mapUrlStart = host.replace('api.', 'maps.') + URL_ROOM_STARTED;
-                        newUrl = '_/global/'+mapUrlStart;
-                    }
 
                     const authToken = jwtTokenManager.createJWTToken(userUuid);
                     res.writeStatus("200 OK").end(JSON.stringify({
                         authToken,
                         userUuid,
+                        organizationSlug,
+                        worldSlug,
+                        roomSlug,
                         mapUrlStart,
-                        newUrl,
                     }));
 
                 } catch (e) {
@@ -75,12 +65,30 @@ export class AuthenticateController extends BaseController {
 
             })();
         });
+
     }
 
-    private getNewUrlOnAdminAuth(data:AdminApiData): string {
+    //permit to login on application. Return token to connect on Websocket IO.
-        const organizationSlug = data.organizationSlug;
+    anonymLogin(){
-        const worldSlug = data.worldSlug;
+        this.App.options("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
-        const roomSlug = data.roomSlug;
+            this.addCorsHeaders(res);
-        return '/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug;
+
+            res.end();
+        });
+
+        this.App.post("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
+            this.addCorsHeaders(res);
+
+            res.onAborted(() => {
+                console.warn('Login request was aborted');
+            })
+
+            const userUuid = v4();
+            const authToken = jwtTokenManager.createJWTToken(userUuid);
+            res.writeStatus("200 OK").end(JSON.stringify({
+                authToken,
+                userUuid,
+            }));
+        });
     }
 }

back/src/Controller/IoSocketController.ts

@@ -42,6 +42,7 @@ import {cpuTracker} from "../Services/CpuTracker";
 import {ViewportInterface} from "../Model/Websocket/ViewportMessage";
 import {jwtTokenManager} from "../Services/JWTTokenManager";
 import {adminApi} from "../Services/AdminApi";
+import {RoomIdentifier} from "../Model/RoomIdentifier";
 
 function emitInBatch(socket: ExSocketInterface, payload: SubMessage): void {
     socket.batchedMessages.addPayload(payload);
@@ -88,7 +89,7 @@ export class IoSocketController {
     
 
     ioConnection() {
-        this.app.ws('/room/*', {
+        this.app.ws('/room', {
             /* Options */
             //compression: uWS.SHARED_COMPRESSOR,
             maxPayloadLength: 16 * 1024 * 1024,
@@ -112,7 +113,12 @@ export class IoSocketController {
                         const websocketProtocol = req.getHeader('sec-websocket-protocol');
                         const websocketExtensions = req.getHeader('sec-websocket-extensions');
 
-                        const roomId = req.getUrl().substr(6);
+                        const roomId = query.roomId;
+                        //todo: better validation: /\/_\/.*\/.*/ or /\/@\/.*\/.*\/.*/ 
+                        if (typeof roomId !== 'string') {
+                            throw new Error('Undefined room ID: ');
+                        }
+                        const roomIdentifier = new RoomIdentifier(roomId);
 
                         const token = query.token;
                         const x = Number(query.x);
@@ -140,12 +146,14 @@ export class IoSocketController {
                         const userUuid = await jwtTokenManager.getUserUuidFromToken(token);
                         console.log('uuid', userUuid);
 
-                        const isGranted = await adminApi.memberIsGrantedAccessToRoom(userUuid, roomId);
+                        if (roomIdentifier.anonymous === false) {
-                        if (!isGranted) {
+                            const isGranted = await adminApi.memberIsGrantedAccessToRoom(userUuid, roomIdentifier);
-                            console.log('access not granted for user '+userUuid+' and room '+roomId);
+                            if (!isGranted) {
-                            throw new Error('Client cannot acces this ressource.')
+                                console.log('access not granted for user '+userUuid+' and room '+roomId);
-                        } else {
+                                throw new Error('Client cannot acces this ressource.')
-                            console.log('access granted for user '+userUuid+' and room '+roomId);
+                            } else {
+                                console.log('access granted for user '+userUuid+' and room '+roomId);
+                            }   
                         }
 
                         if (upgradeAborted.aborted) {

back/src/Controller/MapController.ts

@@ -2,6 +2,8 @@ import {OK} from "http-status-codes";
 import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable";
 import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
 import {BaseController} from "./BaseController";
+import {parse} from "query-string";
+import {adminApi} from "../Services/AdminApi";
 
 //todo: delete this
 export class MapController extends BaseController{
@@ -9,26 +11,51 @@ export class MapController extends BaseController{
     constructor(private App : TemplatedApp) {
         super();
         this.App = App;
-        this.getStartMap();
+        this.getMapUrl();
     }
 
 
     // Returns a map mapping map name to file name of the map
-    getStartMap() {
+    getMapUrl() {
-        this.App.options("/start-map", (res: HttpResponse, req: HttpRequest) => {
+        this.App.options("/map", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
 
             res.end();
         });
 
-        this.App.get("/start-map", (res: HttpResponse, req: HttpRequest) => {
+        this.App.get("/map", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
 
-            const url = req.getHeader('host').replace('api.', 'maps.') + URL_ROOM_STARTED;
+            res.onAborted(() => {
-            res.writeStatus("200 OK").end(JSON.stringify({
+                console.warn('/map request was aborted');
-                mapUrlStart: url,
+            })
-                startInstance: "global"
+
-            }));
+            const query = parse(req.getQuery());
+
+            if (typeof query.organizationSlug !== 'string') {
+                console.error('Expected organizationSlug parameter');
+                res.writeStatus("400 Bad request").end("Expected organizationSlug parameter");
+            }
+            if (typeof query.worldSlug !== 'string') {
+                console.error('Expected worldSlug parameter');
+                res.writeStatus("400 Bad request").end("Expected worldSlug parameter");
+            }
+            if (typeof query.roomSlug !== 'string' && query.roomSlug !== undefined) {
+                console.error('Expected only one roomSlug parameter');
+                res.writeStatus("400 Bad request").end("Expected only one roomSlug parameter");
+            }
+
+            (async () => {
+                try {
+                    const mapDetails = await adminApi.fetchMapDetails(query.organizationSlug as string, query.worldSlug as string, query.roomSlug as string|undefined);
+
+                    res.writeStatus("200 OK").end(JSON.stringify(mapDetails));
+                } catch (e) {
+                    console.error(e);
+                    res.writeStatus("500 Internal Server Error").end("An error occurred");
+                }
+            })();
+
         });
     }
 }

back/src/Model/RoomIdentifier.ts

@@ -0,0 +1,14 @@
+export class RoomIdentifier {
+    public anonymous: boolean;
+    public id:string
+    constructor(roomID: string) {
+        if (roomID.startsWith('_/')) {
+            this.anonymous = true;
+        } else if(roomID.startsWith('@/')) {
+            this.anonymous = false;
+        } else {
+            throw new Error('Incorrect room ID: '+roomID);
+        }
+        this.id = roomID; //todo: extract more data from the id (like room slug, organization name, etc);
+    }
+}

back/src/Services/AdminApi.ts

@@ -1,5 +1,6 @@
 import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
-import Axios, {AxiosError} from "axios";
+import Axios from "axios";
+import {RoomIdentifier} from "../Model/RoomIdentifier";
 
 export interface AdminApiData {
     organizationSlug: string
@@ -10,7 +11,30 @@ export interface AdminApiData {
 }
 
 class AdminApi {
-    
+
+    async fetchMapDetails(organizationSlug: string, worldSlug: string, roomSlug: string|undefined): Promise<AdminApiData> {
+        if (!ADMIN_API_URL) {
+            return Promise.reject('No admin backoffice set!');
+        }
+
+        const params: { organizationSlug: string, worldSlug: string, roomSlug?: string } = {
+            organizationSlug,
+            worldSlug
+        };
+
+        if (roomSlug) {
+            params.roomSlug = roomSlug;
+        }
+
+        const res = await Axios.get(ADMIN_API_URL+'/api/map',
+            {
+                headers: {"Authorization" : `${ADMIN_API_TOKEN}`},
+                params
+            }
+        )
+        return res.data;
+    }
+
     async fetchMemberDataByToken(organizationMemberToken: string): Promise<AdminApiData> {
         if (!ADMIN_API_URL) {
             return Promise.reject('No admin backoffice set!');
@@ -22,13 +46,14 @@ class AdminApi {
         return res.data;
     }
 
-    async memberIsGrantedAccessToRoom(memberId: string, roomId: string): Promise<boolean> {
+    async memberIsGrantedAccessToRoom(memberId: string, roomIdentifier: RoomIdentifier): Promise<boolean> {
         if (!ADMIN_API_URL) {
             return Promise.reject('No admin backoffice set!');
         }
         try {
+            //todo: send more specialized data instead of the whole id
             const res = await Axios.get(ADMIN_API_URL+'/api/member/is-granted-access',
-                { headers: {"Authorization" : `${ADMIN_API_TOKEN}`}, params: {memberId, roomIdentifier: roomId} }
+                { headers: {"Authorization" : `${ADMIN_API_TOKEN}`}, params: {memberId, roomIdentifier: roomIdentifier.id} }
             )
             return !!res.data;
         } catch (e) {
@@ -38,4 +63,4 @@ class AdminApi {
     }
 }
 
-export const adminApi = new AdminApi();
+export const adminApi = new AdminApi();

front/dist/index.html

@@ -6,12 +6,6 @@
               content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-        <!-- Include stylesheet -->
-        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
-
-        <!-- Include the Quill library -->
-        <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
-
         <!-- Global site tag (gtag.js) - Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
         <script>

front/package.json

@@ -6,6 +6,7 @@
   "devDependencies": {
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
+    "@types/quill": "^1.3.7",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "eslint": "^6.8.0",
@@ -20,9 +21,9 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@types/axios": "^0.14.0",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
+    "axios": "^0.20.0",
     "generic-type-guard": "^3.2.0",
     "google-protobuf": "^3.13.0",
     "phaser": "^3.22.0",

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -1,7 +1,3 @@
-import {GameScene} from "../Phaser/Game/GameScene";
-
-const Quill = require("quill");
-
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {RoomConnection} from "../Connexion/RoomConnection";
@@ -10,7 +6,6 @@ import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
 export const CLASS_CONSOLE_MESSAGE = 'main-console';
 export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
 export const UPLOAD_CONSOLE_MESSAGE = 'input-upload-music';
-export const BUTTON_CONSOLE_SEND = 'button-send';
 export const INPUT_TYPE_CONSOLE = 'input-type';
 
 export const AUDIO_TYPE = 'audio';
@@ -26,6 +21,7 @@ export class ConsoleGlobalMessageManager {
     private buttonMainConsole: HTMLDivElement;
     private activeConsole: boolean = false;
     private userInputManager!: UserInputManager;
+    private static cssLoaded: boolean = false;
 
     constructor(private Connection: RoomConnection, userInputManager : UserInputManager) {
         this.buttonMainConsole = document.createElement('div');
@@ -123,24 +119,30 @@ export class ConsoleGlobalMessageManager {
         section.appendChild(buttonDiv);
         this.divMainConsole.appendChild(section);
 
-        //TODO refactor
+        (async () => {
-        setTimeout(() => {
+            // Start loading CSS
+            const cssPromise = ConsoleGlobalMessageManager.loadCss();
+            // Import quill
+            const Quill:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
+            // Wait for CSS to be loaded
+            await cssPromise;
+
             const toolbarOptions = [
                 ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                 ['blockquote', 'code-block'],
 
-                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+                [{'header': 1}, {'header': 2}],               // custom button values
-                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                [{'list': 'ordered'}, {'list': 'bullet'}],
-                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+                [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
-                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+                [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
-                [{ 'direction': 'rtl' }],                         // text direction
+                [{'direction': 'rtl'}],                         // text direction
 
-                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+                [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
-                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+                [{'header': [1, 2, 3, 4, 5, 6, false]}],
 
-                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+                [{'color': []}, {'background': []}],          // dropdown with defaults from theme
-                [{ 'font': [] }],
+                [{'font': []}],
-                [{ 'align': [] }],
+                [{'align': []}],
 
                 ['clean'],
 
@@ -154,8 +156,28 @@ export class ConsoleGlobalMessageManager {
                     toolbar: toolbarOptions
                 },
             });
+        })();
+    }
 
-        }, 1000);
+    private static loadCss(): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            if (ConsoleGlobalMessageManager.cssLoaded) {
+                resolve();
+                return;
+            }
+            const fileref = document.createElement("link")
+            fileref.setAttribute("rel", "stylesheet")
+            fileref.setAttribute("type", "text/css")
+            fileref.setAttribute("href", "https://cdn.quilljs.com/1.3.7/quill.snow.css");
+            document.getElementsByTagName("head")[0].appendChild(fileref);
+            ConsoleGlobalMessageManager.cssLoaded = true;
+            fileref.onload = () => {
+                resolve();
+            }
+            fileref.onerror = () => {
+                reject();
+            }
+        });
     }
 
     createUploadAudioPart(){

front/src/Connexion/ConnectionManager.ts

@@ -2,54 +2,73 @@ import Axios from "axios";
 import {API_URL} from "../Enum/EnvironmentVariable";
 import {RoomConnection} from "./RoomConnection";
 import {PositionInterface, ViewportInterface} from "./ConnexionModels";
+import {GameConnexionTypes, urlManager} from "../Url/UrlManager";
+import {localUserStore} from "./LocalUserStore";
+import {LocalUser} from "./LocalUser";
+import {Room} from "./Room";
 
-interface LoginApiData {
+const URL_ROOM_STARTED = '/Floor0/floor0.json';
-    authToken: string
-    userUuid: string
-    mapUrlStart: string
-    newUrl: string
-}
 
 class ConnectionManager {
-    private initPromise!: Promise<LoginApiData>;
+    private localUser!:LocalUser;
-    private mapUrlStart: string|null = null;
 
-    private authToken:string|null = null;
+    /**
-    private userUuid: string|null = null;
+     * Tries to login to the node server and return the starting map url to be loaded
+     */
+    public async initGameConnexion(): Promise<Room> {
 
-    //todo: get map infos from url in anonym case
+        const connexionType = urlManager.getGameConnexionType();
-    public async init(): Promise<void> {
+        if(connexionType === GameConnexionTypes.register) {
-        let organizationMemberToken =  null;
+           const organizationMemberToken = urlManager.getOrganizationToken();
-        let teamSlug =  null;
+            const data = await Axios.post(`${API_URL}/register`, {organizationMemberToken}).then(res => res.data);
-        let mapSlug =  null;
+            this.localUser = new LocalUser(data.userUuid, data.authToken);
-        const match = /\/register\/(.+)/.exec(window.location.toString());
+            localUserStore.saveUser(this.localUser);
-        if (match) {
+           
-            organizationMemberToken = match[1];
+            const organizationSlug = data.organizationSlug;
-        } else {
+            const worldSlug = data.worldSlug;
-            const match = /\/_\/(.+)\/(.+)/.exec(window.location.toString());
+            const roomSlug = data.roomSlug;
-            teamSlug = match ? match[1] : null;
+            urlManager.editUrlForRoom(roomSlug, organizationSlug, worldSlug);
-            mapSlug = match ? match[2] : null;
+            
-        }
+            const room = new Room(window.location.pathname, data.mapUrlStart)
-        this.initPromise = Axios.post(`${API_URL}/login`, {organizationMemberToken, teamSlug, mapSlug}).then(res => res.data);
+            return Promise.resolve(room);
-        const data = await this.initPromise
+        } else if (connexionType === GameConnexionTypes.anonymous) {
-        this.authToken = data.authToken;
+            const localUser = localUserStore.getLocalUser();
-        this.userUuid = data.userUuid;
+            
-        this.mapUrlStart = data.mapUrlStart;
+            if (localUser) {
-        const newUrl = data.newUrl;
+                this.localUser = localUser
-        console.log('u', this.userUuid)
+            } else {
-
+                const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
-        if (newUrl) {
+                this.localUser = new LocalUser(data.userUuid, data.authToken);
-            history.pushState({}, '', newUrl);
+                localUserStore.saveUser(this.localUser);
+            }
+            const room = new Room(window.location.pathname, urlManager.getAnonymousMapUrlStart())
+            return Promise.resolve(room);
+        } else if (connexionType == GameConnexionTypes.organization) {
+            const localUser = localUserStore.getLocalUser();
+
+            if (localUser) {
+                this.localUser = localUser
+                //todo: ask the node api for the correct starting map Url from its slug
+                return Promise.reject('Case not handled: need to get the map\'s url from its slug');
+            } else {
+                //todo: find some kind of fallback?
+                return Promise.reject('Could not find a user in localstorage');
+            }
         }
+        
+        //todo: cleaner way to handle the default case
+        const defaultMapUrl = window.location.host.replace('api.', 'maps.') + URL_ROOM_STARTED;
+        const defaultRoomId = urlManager.editUrlForRoom(URL_ROOM_STARTED, null, null);
+        return Promise.resolve(new Room(defaultRoomId, defaultMapUrl));
     }
 
     public initBenchmark(): void {
-        this.authToken = 'test';
+        this.localUser = new LocalUser('', 'test');
     }
 
     public connectToRoomSocket(roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface): Promise<RoomConnection> {
         return new Promise<RoomConnection>((resolve, reject) => {
-            const connection = new RoomConnection(this.authToken, roomId, name, characterLayers, position, viewport);
+            const connection = new RoomConnection(this.localUser.jwtToken, roomId, name, characterLayers, position, viewport);
             connection.onConnectError((error: object) => {
                 console.log('An error occurred while connecting to socket server. Retrying');
                 reject(error);
@@ -67,15 +86,6 @@ class ConnectionManager {
             });
         });
     }
-
-    public getMapUrlStart(): Promise<string> {
-        return this.initPromise.then(() => {
-            if (!this.mapUrlStart) {
-                throw new Error('No map url set!');
-            }
-            return this.mapUrlStart;
-        })
-    }
 }
 
 export const connectionManager = new ConnectionManager();

front/src/Connexion/LocalUser.ts

@@ -0,0 +1,9 @@
+export class LocalUser {
+    public uuid: string;
+    public jwtToken: string;
+    
+    constructor(uuid:string, jwtToken: string) {
+        this.uuid = uuid;
+        this.jwtToken = jwtToken;
+    }
+}

front/src/Connexion/LocalUserStore.ts

@@ -0,0 +1,16 @@
+import {LocalUser} from "./LocalUser";
+
+class LocalUserStore {
+    
+    saveUser(localUser: LocalUser) {
+        localStorage.setItem('localUser', JSON.stringify(localUser));
+    }
+    
+    getLocalUser(): LocalUser|null {
+        const data = localStorage.getItem('localUser');
+        return data ? JSON.parse(data) : null;
+    }
+     
+}
+
+export const localUserStore = new LocalUserStore();

front/src/Connexion/Room.ts

@@ -0,0 +1,10 @@
+export class Room {
+    public ID: string;
+    public url: string
+    
+    constructor(ID: string, url: string) {
+        this.ID = ID;
+        this.url = url;
+    }
+    
+}

front/src/Connexion/RoomConnection.ts

@@ -56,7 +56,8 @@ export class RoomConnection implements RoomConnection {
      */
     public constructor(token: string|null, roomId: string, name: string, characterLayers: string[], position: PositionInterface, viewport: ViewportInterface) {
         let url = API_URL.replace('http://', 'ws://').replace('https://', 'wss://');
-        url += '/room/'+roomId
+        url += '/room';
+        url += '?roomId='+(roomId ?encodeURIComponent(roomId):'');
         url += '?token='+(token ?encodeURIComponent(token):'');
         url += '&name='+encodeURIComponent(name);
         for (const layer of characterLayers) {

front/src/Phaser/Game/GameManager.ts

@@ -1,10 +1,7 @@
-import {GameScene, GameSceneInitInterface} from "./GameScene";
+import {GameScene} from "./GameScene";
-import {
-    StartMapInterface
-} from "../../Connexion/ConnexionModels";
-import Axios from "axios";
-import {API_URL} from "../../Enum/EnvironmentVariable";
 import {connectionManager} from "../../Connexion/ConnectionManager";
+import {Room} from "../../Connexion/Room";
+import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
 
 export interface HasMovedEvent {
     direction: string;
@@ -13,14 +10,15 @@ export interface HasMovedEvent {
     y: number;
 }
 
-export interface loadMapResponseInterface {
-    key: string,
-    startLayerName: string;
-}
-
 export class GameManager {
     private playerName!: string;
     private characterLayers!: string[];
+    private startRoom!:Room;
+
+    public async init(scenePlugin: Phaser.Scenes.ScenePlugin) {
+        this.startRoom = await connectionManager.initGameConnexion();
+        this.loadMap(this.startRoom.url, this.startRoom.ID, scenePlugin);
+    }
 
     public setPlayerName(name: string): void {
         this.playerName = name;
@@ -42,54 +40,15 @@ export class GameManager {
         return this.characterLayers;
     }
 
-    /**
-     * Returns the map URL and the instance from the current URL
-     */
-    private findMapUrl(): [string, string]|null {
-        const path = window.location.pathname;
-        if (!path.startsWith('/_/')) {
-            return null;
-        }
-        const instanceAndMap = path.substr(3);
-        const firstSlash = instanceAndMap.indexOf('/');
-        if (firstSlash === -1) {
-            return null;
-        }
-        const instance = instanceAndMap.substr(0, firstSlash);
-        return [window.location.protocol+'//'+instanceAndMap.substr(firstSlash+1), instance];
-    }
-    
-     public loadStartingMap(scene: Phaser.Scenes.ScenePlugin): Promise<loadMapResponseInterface> {
-        // Do we have a start URL in the address bar? If so, let's redirect to this address
-        const instanceAndMapUrl = this.findMapUrl();
-        if (instanceAndMapUrl !== null) {
-            const [mapUrl, instance] = instanceAndMapUrl;
-            const key = gameManager.loadMap(mapUrl, scene, instance);
-            const startLayerName = window.location.hash ? window.location.hash.substr(1) : '';
-            return Promise.resolve({key, startLayerName});
-            
-        } else {
-            // If we do not have a map address in the URL, let's ask the server for a start map.
-            return connectionManager.getMapUrlStart().then((mapUrlStart: string) => {
-                const key = gameManager.loadMap(window.location.protocol + "//" + mapUrlStart, scene, 'global');
-                return {key, startLayerName: ''}
-            }).catch((err) => {
-                console.error(err);
-                throw err;
-            });
-        }
-        
-    }
 
-    public loadMap(mapUrl: string, scene: Phaser.Scenes.ScenePlugin, instance: string): string {
+    public loadMap(mapUrl: string, roomID: string, scenePlugin: Phaser.Scenes.ScenePlugin): void {
-        const sceneKey = this.getMapKeyByUrl(mapUrl);
+        console.log('Loading map '+roomID+' at url '+mapUrl);
-
+        const gameIndex = scenePlugin.getIndex(mapUrl);
-        const gameIndex = scene.getIndex(sceneKey);
         if(gameIndex === -1){
-            const game : Phaser.Scene = GameScene.createFromUrl(mapUrl, instance);
+            const game : Phaser.Scene = GameScene.createFromUrl(mapUrl, roomID);
-            scene.add(sceneKey, game, false);
+            console.log('Adding scene '+mapUrl);
+            scenePlugin.add(mapUrl, game, false);
         }
-        return sceneKey;
     }
 
     public getMapKeyByUrl(mapUrlStart: string) : string {
@@ -98,6 +57,11 @@ export class GameManager {
         const endPos = mapUrlStart.indexOf(".json");
         return mapUrlStart.substring(startPos, endPos);
     }
+
+    public goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
+        console.log('Starting scene '+this.startRoom.url);
+        scenePlugin.start(this.startRoom.url, {startLayerName: 'global'});
+    }
 }
 
 export const gameManager = new GameManager();

front/src/Phaser/Game/GameScene.ts

@@ -139,11 +139,11 @@ export class GameScene extends ResizableScene implements CenterListener {
     private userInputManager!: UserInputManager;
 
     static createFromUrl(mapUrlFile: string, instance: string, gameSceneKey: string|null = null): GameScene {
-        const mapKey = gameManager.getMapKeyByUrl(mapUrlFile);
+        // We use the map URL as a key
         if (gameSceneKey === null) {
-            gameSceneKey = mapKey;
+            gameSceneKey = mapUrlFile;
         }
-        return new GameScene(mapKey, mapUrlFile, instance, gameSceneKey);
+        return new GameScene(mapUrlFile, mapUrlFile, instance, gameSceneKey);
     }
 
     constructor(MapKey : string, MapUrlFile: string, instance: string, gameSceneKey: string) {
@@ -419,14 +419,6 @@ export class GameScene extends ResizableScene implements CenterListener {
         context.stroke();
         this.circleTexture.refresh();
 
-        // Let's alter browser history
-        const url = new URL(this.MapUrlFile);
-        let path = '/_/'+this.instance+'/'+url.host+url.pathname;
-        if (this.startLayerName) {
-            path += '#'+this.startLayerName;
-        }
-        window.history.pushState({}, 'WorkAdventure', path);
-
         // Let's pause the scene if the connection is not established yet
         if (this.connection === undefined) {
             // Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking
@@ -686,6 +678,7 @@ export class GameScene extends ResizableScene implements CenterListener {
      * @param tileWidth
      * @param tileHeight
      */
+    //todo: push that into the gameManager
     private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){
         const exitSceneUrl = this.getExitSceneUrl(layer);
         if (exitSceneUrl === undefined) {
@@ -698,7 +691,8 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         // TODO: eventually compute a relative URL
         const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
-        const exitSceneKey = gameManager.loadMap(absoluteExitSceneUrl, this.scene, instance);
+        gameManager.loadMap(absoluteExitSceneUrl, instance, this.scene);
+        const exitSceneKey = instance;
 
         const tiles : number[] = layer.data as number[];
         for (let key=0; key < tiles.length; key++) {
@@ -785,14 +779,6 @@ export class GameScene extends ResizableScene implements CenterListener {
         });
     }
 
-    createCollisionObject(){
-        /*this.Objects.forEach((Object : Phaser.Physics.Arcade.Sprite) => {
-            this.physics.add.collider(this.CurrentPlayer, Object, (object1, object2) => {
-                this.CurrentPlayer.say("Collision with object : " + (object2 as Phaser.Physics.Arcade.Sprite).texture.key)
-            });
-        })*/
-    }
-
     createCurrentPlayer(){
         //initialise player
         //TODO create animation moving between exit and start
@@ -809,7 +795,6 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         //create collision
         this.createCollisionWithPlayer();
-        this.createCollisionObject();
     }
 
     pushPlayerPosition(event: HasMovedEvent) {

front/src/Phaser/Login/EnableCameraScene.ts

@@ -258,7 +258,7 @@ export class EnableCameraScene extends Phaser.Scene {
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
     }
 
-    private async login(): Promise<void> {
+    private login(): void {
         this.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
         this.soundMeter.stop();
         window.removeEventListener('resize', this.repositionCallback);
@@ -266,8 +266,7 @@ export class EnableCameraScene extends Phaser.Scene {
         mediaManager.stopCamera();
         mediaManager.stopMicrophone();
 
-        const {key, startLayerName} = await gameManager.loadStartingMap(this.scene);
+        gameManager.goToStartingMap(this.scene);
-        this.scene.start(key, {startLayerName});
     }
 
     private async getDevices() {

front/src/Phaser/Login/EntryScene.ts

@@ -0,0 +1,40 @@
+import {gameManager} from "../Game/GameManager";
+import {TextField} from "../Components/TextField";
+import {TextInput} from "../Components/TextInput";
+import {ClickButton} from "../Components/ClickButton";
+import Image = Phaser.GameObjects.Image;
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
+import {cypressAsserter} from "../../Cypress/CypressAsserter";
+import {SelectCharacterSceneName} from "./SelectCharacterScene";
+import {ResizableScene} from "./ResizableScene";
+import {Scene} from "phaser";
+import {LoginSceneName} from "./LoginScene";
+import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
+
+export const EntrySceneName = "EntryScene";
+
+/**
+ * The EntryScene is not a real scene. It is the first scene loaded and is only used to initialize the gameManager
+ * and to route to the next correct scene.
+ */
+export class EntryScene extends Scene {
+    constructor() {
+        super({
+            key: EntrySceneName
+        });
+    }
+
+    preload() {
+    }
+
+    create() {
+        gameManager.init(this.scene).then(() => {
+            this.scene.start(LoginSceneName);
+        }).catch(() => {
+            this.scene.start(FourOFourSceneName, {
+                url: window.location.pathname.toString()
+            });
+        });
+    }
+}

front/src/Phaser/Reconnecting/FourOFourScene.ts

@@ -15,7 +15,8 @@ export class FourOFourScene extends Phaser.Scene {
     private fileNameField!: Text;
     private logo!: Image;
     private cat!: Sprite;
-    private file!: string;
+    private file: string|undefined;
+    private url: string|undefined;
 
     constructor() {
         super({
@@ -23,8 +24,9 @@ export class FourOFourScene extends Phaser.Scene {
         });
     }
 
-    init({ file }: { file: string }) {
+    init({ file, url }: { file?: string, url?: string }) {
         this.file = file;
+        this.url = url;
     }
 
     preload() {
@@ -45,11 +47,22 @@ export class FourOFourScene extends Phaser.Scene {
         this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found");
         this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign();
 
-        this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, "Could not load file");
+        let text: string = '';
+        if (this.file !== undefined) {
+            text = "Could not load map"
+        }
+        if (this.url !== undefined) {
+            text = "Invalid URL"
+        }
+
+        this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text);
         this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign();
 
-        this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.file, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' });
+        const url = this.file ? this.file : this.url;
-        this.fileNameField.setOrigin(0.5, 0.5);
+        if (url !== undefined) {
+            this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, url, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' });
+            this.fileNameField.setOrigin(0.5, 0.5);
+        }
 
         this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6);
         this.cat.flipY=true;

front/src/Url/UrlManager.ts

@@ -0,0 +1,54 @@
+
+export enum GameConnexionTypes {
+    anonymous=1,
+    organization,
+    register,
+    unknown,
+}
+
+//this class is responsible with analysing and editing the game's url
+class UrlManager {
+
+    //todo: use that to detect if we can find a token in localstorage
+    public getGameConnexionType(): GameConnexionTypes {
+        const url = window.location.pathname.toString();
+        if (url.includes('_/')) {
+            return GameConnexionTypes.anonymous;
+        } else if (url.includes('@/')) {
+            return GameConnexionTypes.organization;
+        } else if(url.includes('register/')) {
+            return GameConnexionTypes.register
+        } else {
+            return GameConnexionTypes.unknown
+        }
+    }
+
+    public getAnonymousMapUrlStart():string {
+        const match = /\/_\/global\/(.+)/.exec(window.location.pathname.toString())
+        if (!match) throw new Error('Could not extract startmap url from'+window.location.pathname);
+        return window.location.protocol+'//'+match[1];
+
+    }
+
+    public getOrganizationToken(): string|null {
+        const match = /\/register\/(.+)/.exec(window.location.pathname.toString());
+        return match ? match [1] : null;
+    }
+
+
+    //todo: simply use the roomId
+    //todo: test this with cypress
+    public editUrlForRoom(roomSlug: string, organizationSlug: string|null, worldSlug: string |null): string {
+        let  newUrl:string;
+        if (organizationSlug) {
+            newUrl = '/@/'+organizationSlug+'/'+worldSlug+'/'+roomSlug;
+        } else {
+            newUrl = '/_/global/'+roomSlug;
+        }
+        history.pushState({}, 'WorkAdventure', newUrl);
+        return newUrl;
+    }
+
+}
+
+export const urlManager = new UrlManager();

front/src/index.ts

@@ -11,11 +11,11 @@ import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
 import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
 import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
-import {connectionManager} from "./Connexion/ConnectionManager";
+import {gameManager} from "./Phaser/Game/GameManager";
 import {ResizableScene} from "./Phaser/Login/ResizableScene";
+import {EntryScene} from "./Phaser/Login/EntryScene";
 
 //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
-connectionManager.init();
 
 // Load Jitsi if the environment variable is set.
 if (JITSI_URL) {
@@ -31,7 +31,7 @@ const config: GameConfig = {
     width: width / RESOLUTION,
     height: height / RESOLUTION,
     parent: "game",
-    scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
+    scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
     zoom: RESOLUTION,
     physics: {
         default: "arcade",