- Custom background colors for the badge

- Fix critical security alter on nmp install
- relative paths for resources in README.md

Dockerfile

@@ -4,5 +4,6 @@ EXPOSE 3000
 
 COPY . /slack-invite-automation
 WORKDIR /slack-invite-automation
+RUN npm i npm@latest -g
 RUN npm install
 CMD node ./bin/www

README.md

@@ -75,7 +75,7 @@ $ npm start
 
 You can access <http://localhost:3000> on your web browser.
 
-![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/join-page.jpg)
+![](screenshots/join-page.jpg)
 
 ## Run with Docker
 
@@ -105,24 +105,24 @@ There are two ways to issue the access token.
 1. Visit <https://api.slack.com/custom-integrations/legacy-tokens>.
 1. Click `Create token`.
 
-    ![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/legacy-token.gif)
+    ![](screenshots/legacy-token.gif)
 
 ### OAuth tokens
 1. Visit <https://api.slack.com/apps> and Create New App.
 
-    ![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/oauth1.gif)
+    ![](screenshots/oauth1.gif)
 
 1. Click "Permissions".
 
-    ![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/oauth2.gif)
+    ![](screenshots/oauth2.gif)
 
 1. In "OAuth & Permissions" page, select `admin` scope under "Permission Scopes" menu and save changes.
 
-    ![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/oauth3.gif)
+    ![](screenshots/oauth3.gif)
 
 1. Click "Install App to Team".
 
-    ![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/oauth4.gif)
+    ![](screenshots/oauth4.gif)
 
 1. Visit <https://slack.com/oauth/authorize?&client_id=CLIENT_ID&team=TEAM_ID&install_redirect=install-on-team&scope=admin+client> in your browser and authorize it.
     * It authorizes the `client` permission. Otherwise, you can see `{"ok":false,"error":"missing_scope","needed":"client","provided":"admin"}` error.
@@ -131,11 +131,20 @@ There are two ways to issue the access token.
 
 ## Badge
 
-![](https://raw.github.com/outsideris/slack-invite-automation/master/screenshots/badge.png)
+![](screenshots/badge.png)
 
 You can use the badge to show status of user in your slack.
 
-```
-<img src="https://your.domain/badge.svg">
-```
-
+* With default colors:
+    ```
+    <img src="https://your.domain/badge.svg">
+    ```
+
+* With custom colors:
+    
+    * `?colorA=abcdef`	Set background of the left part (hex color only)
+    * `?colorB=fedcba`	Set background of the right part (hex color only)
+    
+    ```
+    <img src="https://your.domain/badge.svg?colorA=155799&colorB=159957">
+    ```

lib/badge.js

@@ -1,7 +1,6 @@
-const pug = require('pug')
+const pug = require('pug');
 
 const title = 'slack';
-const color = '#39AE85';
 
 function width(str) {
   return 6 * str.length;
@@ -15,8 +14,8 @@ const svgTmpl =
   `  clipPath#a\n` +
   `    rect(width=wd height="20" rx="3" fill="#fff")\n` +
   `  g(clip-path="url(#a)")\n` +
-  `    path(fill="#555" d='M0 0h' + left + 'v20H0z')\n` +
-  `    path(fill="${color}" d='M'+left + ' 0h' + (wd-left) + 'v20H' + left +'z')\n` +
+  `    path(fill='#' + colorA d='M0 0h' + left + 'v20H0z')\n` +
+  `    path(fill='#' + colorB d='M'+left + ' 0h' + (wd-left) + 'v20H' + left +'z')\n` +
   `    path(fill="url(#b)" d='M0 0h' + wd + 'v20H0z')\n` +
   `  g(fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110")\n` +
   `    text(x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="${title.length*54}") ${title}\n` +
@@ -25,11 +24,13 @@ const svgTmpl =
   `    text(x=(wd * 5 + 195) y="140" transform="scale(.1)" textLength=(value.length*60)) #{value}\n`;
 
 module.exports = {
-  badge: function(presence, total) {
+  badge: function(presence, total, customColorA, customColorB) {
     const fn = pug.compile(svgTmpl);
     const value = `${presence}/${total}`;
     const left = width(title) + 8;
     const wd = left + width(value) + 22;
-    return fn({ value, wd, left });
+    const colorA = customColorA || '555';
+    const colorB = customColorB || '39AE85';
+    return fn({ value, wd, left, colorA, colorB });
   },
 };

package.json

@@ -16,6 +16,7 @@
     "morgan": "^1.6.0",
     "pug": "^2.0.0-rc.4",
     "request": "^2.62.0",
-    "serve-favicon": "^2.3.0"
+    "serve-favicon": "^2.3.0",
+    "sanitize": "^2.1.0"
   }
 }

routes/index.js

@@ -5,6 +5,8 @@ const request = require('request');
 const config = require('../config');
 const { badge } = require('../lib/badge');
 
+const sanitize = require('sanitize');
+
 router.get('/', function(req, res) {
   res.setLocale(config.locale);
   res.render('index', { community: config.community,
@@ -132,10 +134,20 @@ router.get('/badge.svg', (req, res) => {
       return m.presence === 'active';
     }).length;
 
+    const hexColor = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    sanitize.middleware.mixinFilters(req);
+
     res.type('svg');
     res.set('Cache-Control', 'max-age=0, no-cache');
     res.set('Pragma', 'no-cache');
-    res.send(badge(presence, total));
+    res.send(
+        badge(
+            presence,
+            total,
+            req.queryPattern('colorA', hexColor),
+            req.queryPattern('colorB', hexColor)
+        )
+    );
   });
 });