Fixed username submission

- setting a username now gives better feedback
- old username appeares in input field on load
- fixed bug where users with expired bingo session but still existent session couldn't set a username
- fixed status indicator

package.json

@@ -30,7 +30,8 @@
   "devDependencies": {
     "eslint": "^5.16.0",
     "eslint-plugin-graphql": "^3.0.3",
-    "eslint-plugin-promise": "^4.1.1"
+    "eslint-plugin-promise": "^4.1.1",
+    "standard": "^12.0.1"
   },
   "eslintConfig": {
     "parserOptions": {

public/javascripts/bingo-web.js

@@ -33,7 +33,7 @@ async function submitUsername() {
     let username = unameInput.value.replace(/^\s+|\s+$/g, '');
 
     if (username.length > 1) {
-        await setUsername(username);
+        return await setUsername(username);
     } else {
         showError('You need to provide a username (minimum 2 characters)!');
         return false;
@@ -58,7 +58,7 @@ async function setUsername(username) {
     if (response.status === 200) {
         return true;
     } else {
-        showError(`Failed to submit username. HTTP Error: ${response.status}`);
+        showError(`Failed to submit username. Error: ${response.errors.join(', ')}`);
         console.error(response);
         return false;
     }

public/stylesheets/sass/bingo/style.sass

@@ -237,6 +237,9 @@
     button
       width: 100%
 
+  #statusbar
+    @include gridPosition(5, 6, 1, 4)
+
 #container-bingo-lobby
   @include fillWindow
   overflow: hidden

routes/bingo.js

@@ -670,7 +670,7 @@ class PlayerWrapper {
 
     /**
      * Loads all player information
-     * @returns {Promise<void>}
+     * @returns {Promise<Boolean>}
      * @private
      */
     async _loadPlayerInfo() {
@@ -680,10 +680,21 @@ class PlayerWrapper {
                 this._uname = result.username;
                 this.expire = result.expire;
                 this._infoLoaded = true;
+                return true;
+            } else {
+                return false;
             }
         }
     }
 
+    /**
+     * Returns if the player exists
+     * @returns {Promise<Boolean>}
+     */
+    async exists() {
+        return await this._loadPlayerInfo();
+    }
+
     /**
      * Returns the grid for a specific lobby
      * @param lobbyId {Number} - the id of the lobby
@@ -1317,7 +1328,7 @@ async function getGridData(lobbyId, playerId) {
     for (let i = 0; i < await lobbyWrapper.gridSize(); i++) {
         fieldGrid[i] = [];
         for (let j = 0; j < await lobbyWrapper.gridSize(); j++) {
-            let field = fields.find(x => (x.row === i && x.column === j))
+            let field = fields.find(x => (x.row === i && x.column === j));
             fieldGrid[i][j] = {
                 row: field.row,
                 column: field.column,
@@ -1349,7 +1360,8 @@ router.get('/', async (req, res) => {
     let playerId = req.session.bingoPlayerId;
     let info = req.session.acceptedCookies? null: globals.cookieInfo;
     let lobbyWrapper = new LobbyWrapper(req.query.g);
-    if (playerId && req.query.g && await lobbyWrapper.exists()) {
+    let playerWrapper = new PlayerWrapper(playerId);
+    if (playerId && await playerWrapper.exists() && req.query.g && await lobbyWrapper.exists()) {
         let lobbyId = req.query.g;
 
         if (!(await lobbyWrapper.roundActive())) {
@@ -1395,7 +1407,10 @@ router.get('/', async (req, res) => {
             }
         }
     } else {
-        res.render('bingo/bingo-create', {info: info});
+        res.render('bingo/bingo-create', {
+            info: info,
+            username: await playerWrapper.username()
+        });
     }
 });
 
@@ -1422,8 +1437,9 @@ router.graphqlResolver = async (req, res) => {
         // mutations
         setUsername: async ({username}) => {
             username = replaceTagSigns(username.substring(0, 30)); // only allow 30 characters
+            let playerWrapper = new PlayerWrapper(playerId);
 
-            if (!playerId) {
+            if (!playerId || !(await playerWrapper.exists())) {
                 req.session.bingoPlayerId = (await bdm.addPlayer(username)).id;
                 playerId = req.session.bingoPlayerId;
             } else {

views/bingo/bingo-create.pug

@@ -6,6 +6,7 @@ block content
             input(id='input-username'
                 type='text'
                 placeholder='Enter your name'
+                value=username
                 onkeydown='submitOnEnter(event, () => indicateStatus(submitUsername, "#username-status"))')
             button(
                 id='submit-username'
@@ -14,3 +15,4 @@ block content
         div(id='lobby-form')
             button(id='join-lobby' onclick='joinLobby()') Join Lobby
             button(id='create-lobby' onclick='createLobby()') Create Lobby
+        include includes/bingo-statusbar