Bug fixes

- fixed #18 preloaded info messages can't be hidden
- fixed #19 no special character allowed in username

public/javascripts/bingo-web.js

@@ -45,12 +45,12 @@ function spawnNotification(body, title) {
  */
 async function submitUsername() {
     let unameInput = document.querySelector('#input-username');
-    let username = unameInput.value.replace(/^\s+|\s+$/g, '');
+    let username = unameInput.value;
 
-    if (username.length > 1) {
+    if (username.length > 1 && username.length <= 30) {
         return await setUsername(username);
     } else {
-        showError('You need to provide a username (minimum 2 characters)!');
+        showError('You need to provide a username (min. 2 characters, max. 30)!');
         return false;
     }
 }
@@ -61,7 +61,8 @@ async function submitUsername() {
  * @returns {Promise<boolean>}
  */
 async function setUsername(username) {
-    let uname = username.substring(0, 30).replace(/[^\w- ;[\]]/g, '');
+    username = username.replace(/^\s+|\s+$/g, '');
+    let uname = username.replace(/[\n\t👑🌟]|^\s+|\s+$/gu, '');
     if (uname.length === username.length) {
         let response = await postGraphqlQuery(`
         mutation($username:String!) {
@@ -83,7 +84,7 @@ async function setUsername(username) {
             return false;
         }
     } else {
-        showError('Your username contains illegal characters.');
+        showError(`Your username contains illegal characters (${username.replace(uname, '')}).`);
     }
 }
 

routes/bingo.js

@@ -1496,7 +1496,7 @@ router.graphqlResolver = async (req, res) => {
         },
         // mutations
         setUsername: async ({username}) => {
-            username = replaceTagSigns(username.substring(0, 30)).replace(/[^\w- ;[\]]/g, ''); // only allow 30 characters
+            username = replaceTagSigns(username.substring(0, 30)).replace(/[\n\t👑🌟]|^\s+|\s+$/gu, ''); // only allow 30 characters
             if (username.length > 0) {
                 let playerWrapper = new PlayerWrapper(playerId);
 

views/bingo/bingo-create.pug

@@ -7,6 +7,7 @@ block content
                 type='text'
                 placeholder='Enter your name'
                 value=username
+                maxlength=30
                 onkeydown='submitOnEnter(event, () => indicateStatus(submitUsername, "#username-status"))')
             button(
                 id='submit-username'

views/bingo/includes/bingo-chat.pug

@@ -2,7 +2,7 @@ div(id='container-chat')
     style(id='js-style')
     div(id='chat-content')
         for message in messages
-            span.chatMessage(type=message.type msg-id=message.id)
+            span.chatMessage(msg-type=message.type msg-id=message.id)
                 if message.type === 'USER'
                     span.chatUsername= `${message.username}: `
                 span(class=`chatMessageContent ${message.type}`)!= message.htmlContent