Add interface to block ip-addresses or clients due to abuse (#15484)

* Read IP blocks from database

* begin building general blocking solution

* add new frontend files

* Add UI for managing blockers

* correctly reset local data after creating blocker

* Tweak wording

* Add UI for managing blockers

* restructure admin pages

* improve test coverage

* Improve blocker UI

* add blocker to block emails from registration

* lint fix

* fix

* lint fixes

* fix import

* add new permission for managing blockers

* improve permission check

* fix managing permissions from admin

* improve navbar display for non fullAccess admin

* update block error strings

* lint fix

* add option to errorHandler to skip logging

* validate blocker value during input

* improve blocker form display

* chore(subproj): reconcile habitica-images

* fix(scripts): use same Mongo version for dev/test

* fix(whitespace): eof

* documentation improvements

* remove nconf import

* remove old test

---------

Co-authored-by: Kalista Payne <kalista@habitica.com>
Co-authored-by: Kalista Payne <sabrecat@gmail.com>

package-lock.json

@@ -59,7 +59,6 @@
         "morgan": "^1.10.0",
         "nconf": "^0.12.1",
         "node-gcm": "^1.0.5",
-        "nodemon": "^3.1.9",
         "on-headers": "^1.0.2",
         "passport": "^0.5.3",
         "passport-facebook": "^3.0.0",
@@ -16011,55 +16010,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
-    "node_modules/nodemon": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
-      "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
-      "dependencies": {
-        "chokidar": "^3.5.2",
-        "debug": "^4",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.1.2",
-        "pstree.remy": "^1.1.8",
-        "semver": "^7.5.3",
-        "simple-update-notifier": "^2.0.0",
-        "supports-color": "^5.5.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.5"
-      },
-      "bin": {
-        "nodemon": "bin/nodemon.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nodemon"
-      }
-    },
-    "node_modules/nodemon/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/nodemon/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/noop-logger": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz",
@@ -19423,28 +19373,6 @@
         "is-arrayish": "^0.3.1"
       }
     },
-    "node_modules/simple-update-notifier": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/sinon": {
       "version": "15.2.0",
       "resolved": "https://registry.npmjs.org/sinon/-/sinon-15.2.0.tgz",

package.json

@@ -106,8 +106,8 @@
     "start": "node --watch ./website/server/index.js",
     "start:simple": "node ./website/server/index.js",
     "debug": "node --watch --inspect ./website/server/index.js",
-    "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
-    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
+    "mongo:dev": "run-rs -v 7.0.23 -l ubuntu2404 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:test": "run-rs -v 7.0.23 -l ubuntu2404 --keep --dbpath mongodb-data-testing --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
     "heroku-postbuild": ".heroku/report_deploy.sh"

test/api/unit/middlewares/blocker.test.js

@@ -0,0 +1,197 @@
+import nconf from 'nconf';
+import requireAgain from 'require-again';
+import {
+  generateRes,
+  generateReq,
+  generateNext,
+} from '../../../helpers/api-unit.helper';
+import { Forbidden } from '../../../../website/server/libs/errors';
+import { apiError } from '../../../../website/server/libs/apiError';
+import { model as Blocker } from '../../../../website/server/models/blocker';
+
+function checkIPBlockedErrorThrown (next) {
+  expect(next).to.have.been.calledOnce;
+  const calledWith = next.getCall(0).args;
+  expect(calledWith[0].message).to.equal(apiError('ipAddressBlocked'));
+  expect(calledWith[0] instanceof Forbidden).to.equal(true);
+}
+
+function checkClientBlockedErrorThrown (next) {
+  expect(next).to.have.been.calledOnce;
+  const calledWith = next.getCall(0).args;
+  expect(calledWith[0].message).to.equal(apiError('clientBlocked'));
+  expect(calledWith[0] instanceof Forbidden).to.equal(true);
+}
+
+function checkErrorNotThrown (next) {
+  expect(next).to.have.been.calledOnce;
+  const calledWith = next.getCall(0).args;
+  expect(typeof calledWith[0] === 'undefined').to.equal(true);
+}
+
+describe('Blocker middleware', () => {
+  const pathToBlocker = '../../../../website/server/middlewares/blocker';
+
+  let res; let req; let next;
+
+  beforeEach(() => {
+    res = generateRes();
+    req = generateReq();
+    next = generateNext();
+  });
+
+  describe('Blocking IPs', () => {
+    it('is disabled when the env var is not defined', () => {
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns(undefined);
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('is disabled when the env var is an empty string', () => {
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('');
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('is disabled when the env var contains comma separated empty strings', () => {
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns(' , , ');
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('does not throw when the ip does not match', () => {
+      req.ip = '192.168.1.1';
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('192.168.1.2');
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('does not throw when the blocker IP does not match', async () => {
+      req.ip = '192.168.1.1';
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'ipaddress', area: 'full', value: '192.168.1.2' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('does not throw when a client is blocked', async () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'client', area: 'full', value: '192.168.1.1' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('throws when the blocker IP is blocked', async () => {
+      req.ip = '192.168.1.1';
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'ipaddress', area: 'full', value: '192.168.1.1' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkIPBlockedErrorThrown(next);
+    });
+  });
+
+  describe('Blocking clients', () => {
+    beforeEach(() => {
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('');
+      req.headers['x-client'] = 'test-client';
+    });
+    it('is disabled when no clients are blocked', () => {
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('does not throw when the client does not match', async () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'client', area: 'full', value: 'another-client' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('throws when the client is blocked', async () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'client', area: 'full', value: 'test-client' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkClientBlockedErrorThrown(next);
+    });
+
+    it('does not throw when an ip is blocked', async () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'ipaddress', area: 'full', value: 'test-client' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkErrorNotThrown(next);
+    });
+
+    it('updates the list when data changes', async () => {
+      let blockCallback;
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          blockCallback = callback;
+          if (event === 'change') {
+            callback({ operation: 'add', blocker: { type: 'client', area: 'full', value: 'another-client' } });
+          }
+        },
+      });
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+      checkErrorNotThrown(next);
+      blockCallback({ operation: 'add', blocker: { type: 'client', area: 'full', value: 'test-client' } });
+      attachBlocker(req, res, next);
+      expect(next).to.have.been.calledTwice;
+      const calledWith = next.getCall(1).args;
+      expect(calledWith[0].message).to.equal(apiError('clientBlocked'));
+      expect(calledWith[0] instanceof Forbidden).to.equal(true);
+    });
+  });
+});

test/api/unit/middlewares/ipBlocker.test.js

@@ -1,76 +0,0 @@
-import nconf from 'nconf';
-import requireAgain from 'require-again';
-import {
-  generateRes,
-  generateReq,
-  generateNext,
-} from '../../../helpers/api-unit.helper';
-import { Forbidden } from '../../../../website/server/libs/errors';
-import { apiError } from '../../../../website/server/libs/apiError';
-
-function checkErrorThrown (next) {
-  expect(next).to.have.been.calledOnce;
-  const calledWith = next.getCall(0).args;
-  expect(calledWith[0].message).to.equal(apiError('ipAddressBlocked'));
-  expect(calledWith[0] instanceof Forbidden).to.equal(true);
-}
-
-function checkErrorNotThrown (next) {
-  expect(next).to.have.been.calledOnce;
-  const calledWith = next.getCall(0).args;
-  expect(typeof calledWith[0] === 'undefined').to.equal(true);
-}
-
-describe('ipBlocker middleware', () => {
-  const pathToIpBlocker = '../../../../website/server/middlewares/ipBlocker';
-
-  let res; let req; let next;
-
-  beforeEach(() => {
-    res = generateRes();
-    req = generateReq();
-    next = generateNext();
-  });
-
-  it('is disabled when the env var is not defined', () => {
-    sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns(undefined);
-    const attachIpBlocker = requireAgain(pathToIpBlocker).default;
-    attachIpBlocker(req, res, next);
-
-    checkErrorNotThrown(next);
-  });
-
-  it('is disabled when the env var is an empty string', () => {
-    sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('');
-    const attachIpBlocker = requireAgain(pathToIpBlocker).default;
-    attachIpBlocker(req, res, next);
-
-    checkErrorNotThrown(next);
-  });
-
-  it('is disabled when the env var contains comma separated empty strings', () => {
-    sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns(' , , ');
-    const attachIpBlocker = requireAgain(pathToIpBlocker).default;
-    attachIpBlocker(req, res, next);
-
-    checkErrorNotThrown(next);
-  });
-
-  it('does not throw when the ip does not match', () => {
-    req.ip = '192.168.1.1';
-    sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('192.168.1.2');
-    const attachIpBlocker = requireAgain(pathToIpBlocker).default;
-    attachIpBlocker(req, res, next);
-
-    checkErrorNotThrown(next);
-  });
-
-  it('throws when the ip is blocked', () => {
-    req.ip = '192.168.1.1';
-    sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('192.168.1.1');
-    const attachIpBlocker = requireAgain(pathToIpBlocker).default;
-    attachIpBlocker(req, res, next);
-
-    checkErrorThrown(next);
-  });
-});

test/api/unit/models/user.test.js

@@ -1,9 +1,13 @@
 import moment from 'moment';
+import requireAgain from 'require-again';
 import { model as User } from '../../../../website/server/models/user';
 import { model as NewsPost } from '../../../../website/server/models/newsPost';
 import { model as Group } from '../../../../website/server/models/group';
+import { model as Blocker } from '../../../../website/server/models/blocker';
 import common from '../../../../website/common';
 
+const pathToUserSchema = '../../../../website/server/models/user/schema';
+
 describe('User Model', () => {
   describe('.toJSON()', () => {
     it('keeps user._tmp when calling .toJSON', () => {
@@ -912,4 +916,73 @@ describe('User Model', () => {
       expect(user.toJSON().flags.newStuff).to.equal(true);
     });
   });
+
+  describe('validates email', () => {
+    it('does not throw an error for a valid email', () => {
+      const user = new User();
+      user.auth.local.email = 'hello@example.com';
+      const errors = user.validateSync();
+      expect(errors.errors['auth.local.email']).to.not.exist;
+    });
+
+    it('throws an error if email is not valid', () => {
+      const user = new User();
+      user.auth.local.email = 'invalid-email';
+      const errors = user.validateSync();
+      expect(errors.errors['auth.local.email'].message).to.equal(common.i18n.t('invalidEmail'));
+    });
+
+    it('throws an error if email is using a restricted domain', () => {
+      const user = new User();
+      user.auth.local.email = 'scammer@habitica.com';
+      const errors = user.validateSync();
+      expect(errors.errors['auth.local.email'].message).to.equal(common.i18n.t('invalidEmailDomain', { domains: 'habitica.com, habitrpg.com' }));
+    });
+
+    it('throws an error if email was blocked specifically', () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: 'blocked@example.com' } });
+        },
+      });
+      const schema = requireAgain(pathToUserSchema).UserSchema;
+      const valid = schema.paths['auth.local.email'].options.validate.every(v => v.validator('blocked@example.com'));
+      expect(valid).to.equal(false);
+    });
+
+    it('throws an error if email domain was blocked', () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: '@example.com' } });
+        },
+      });
+      const schema = requireAgain(pathToUserSchema).UserSchema;
+      const valid = schema.paths['auth.local.email'].options.validate.every(v => v.validator('blocked@example.com'));
+      expect(valid).to.equal(false);
+    });
+
+    it('throws an error if user portion of email was blocked', () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: 'blocked@' } });
+        },
+      });
+      const schema = requireAgain(pathToUserSchema).UserSchema;
+      const valid = schema.paths['auth.local.email'].options.validate.every(v => v.validator('blocked@example.com'));
+      expect(valid).to.equal(false);
+    });
+
+    it('does not throw an error if email is not blocked', () => {
+      sandbox.stub(Blocker, 'watchBlockers').returns({
+        on: (event, callback) => {
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: '@example.com' } });
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: 'blocked@' } });
+          callback({ operation: 'add', blocker: { type: 'email', area: 'full', value: 'bad@test.com' } });
+        },
+      });
+      const schema = requireAgain(pathToUserSchema).UserSchema;
+      const valid = schema.paths['auth.local.email'].options.validate.every(v => v.validator('good@test.com'));
+      expect(valid).to.equal(true);
+    });
+  });
 });

website/client/src/components/admin/admin-panel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row standard-page col-12 d-flex justify-content-center">
     <div class="admin-panel-content">
-      <h1>Admin Panel</h1>
+      <h1>{{ $t("adminPanel") }}</h1>
       <form
         class="form-inline"
         @submit.prevent="searchUsers(userIdentifier)"
@@ -72,7 +72,7 @@ export default {
   },
   mounted () {
     this.$store.dispatch('common:setTitle', {
-      section: 'Admin Panel',
+      section: this.$t('adminPanel'),
     });
   },
   methods: {

website/client/src/components/admin/admin-panel/search.vue

@@ -55,7 +55,7 @@
 <script>
 import VueRouter from 'vue-router';
 import { mapState } from '@/libs/store';
-import LoadingSpinner from '../ui/loadingSpinner';
+import LoadingSpinner from '../../ui/loadingSpinner';
 
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 

website/client/src/components/admin/admin-panel/user-support/contributorDetails.vue

@@ -38,12 +38,17 @@
           >
             <div class="custom-control custom-checkbox">
               <input
+                :id="permission.key"
                 v-model="hero.permissions[permission.key]"
-                :disabled="!hasPermission(user, permission.key)"
+                :disabled="!hasPermission(user, permission.key)
+                  || (hero.permissions.fullAccess && permission.key !== 'fullAccess')"
                 class="custom-control-input"
                 type="checkbox"
               >
-              <label class="custom-control-label">
+              <label
+                class="custom-control-label"
+                :for="permission.key"
+              >
                 {{ permission.name }}<br>
                 <small class="text-secondary">{{ permission.description }}</small>
               </label>
@@ -124,7 +129,10 @@
           value="Save"
           class="btn btn-primary mt-1"
         >
-        <b v-if="hasUnsavedChanges" class="text-warning float-right">
+        <b
+          v-if="hasUnsavedChanges"
+          class="text-warning float-right"
+        >
           Unsaved changes
         </b>
       </div>
@@ -147,7 +155,7 @@ import markdownDirective from '@/directives/markdown';
 import saveHero from '../mixins/saveHero';
 
 import { mapState } from '@/libs/store';
-import { userStateMixin } from '../../../mixins/userState';
+import { userStateMixin } from '../../../../mixins/userState';
 
 const permissionList = [
   {
@@ -175,6 +183,11 @@ const permissionList = [
     name: 'Challenge Admin',
     description: 'Can create official habitica challenges and admin all challenges',
   },
+  {
+    key: 'accessControl',
+    name: 'Access Control',
+    description: 'Can manage IP-Address, Client and E-Mail blockers',
+  },
   {
     key: 'coupons',
     name: 'Coupon Creator',

website/client/src/components/admin/admin-panel/user-support/customizationsOwned.vue

@@ -46,7 +46,7 @@
                     :
                     <span :class="{ ownedItem: !item.neverOwned }">{{ item.text }}</span>
                   </span>
-                  - {{ itemType }}.{{item.key}} - <i> {{ item.set }}</i>
+                  - {{ itemType }}.{{ item.key }} - <i> {{ item.set }}</i>
 
                   <div
                     v-if="item.modified"

website/client/src/components/admin/admin-panel/user-support/index.vue

@@ -88,7 +88,7 @@
 
         <contributor-details
           :hero="hero"
-          :hasUnsavedChanges="hasUnsavedChanges(
+          :has-unsaved-changes="hasUnsavedChanges(
             [hero.contributor, unModifiedHero.contributor],
             [hero.permissions, unModifiedHero.permissions],
             [hero.secret, unModifiedHero.secret],
@@ -149,7 +149,7 @@ import Achievements from './achievements.vue';
 import UserHistory from './userHistory.vue';
 import Stats from './stats.vue';
 
-import { userStateMixin } from '../../../mixins/userState';
+import { userStateMixin } from '../../../../mixins/userState';
 
 export default {
   components: {

website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue

@@ -55,7 +55,9 @@
           <strong class="col-sm-9 col-form-label">
             <span v-if="userIsPartyLeader">User is the party leader</span>
             <span v-else>Party leader is
-            <router-link :to="{'name': 'userProfile', 'params': {'userId': groupPartyData.leader}}">
+              <router-link
+                :to="{'name': 'userProfile', 'params': {'userId': groupPartyData.leader}}"
+              >
                 {{ groupPartyData.leader }}
               </router-link>
             </span>
@@ -63,7 +65,10 @@
         </div>
         <div
           class="btn btn-danger"
-        @click="removeFromParty()">Remove from Party</div>
+          @click="removeFromParty()"
+        >
+          Remove from Party
+        </div>
       </div>
       <strong v-else>User is not in a party.</strong>
       <div class="subsection-start">

website/client/src/components/admin/admin-panel/user-support/privilegesAndGems.vue

@@ -1,11 +1,13 @@
 <template>
-  <form @submit.prevent="saveHero({hero: {
+  <form
+    @submit.prevent="saveHero({hero: {
       _id: hero._id,
       flags: hero.flags,
       balance: hero.balance,
       auth: hero.auth,
       secret: hero.secret,
-  }, msg: 'Privileges or Gems or Moderation Notes'})">
+    }, msg: 'Privileges or Gems or Moderation Notes'})"
+  >
     <div class="card mt-2">
       <div class="card-header">
         <h3
@@ -14,7 +16,10 @@
           @click="expand = !expand"
         >
           Privileges, Gem Balance
-          <b v-if="hasUnsavedChanges && !expand" class="text-warning float-right">
+          <b
+            v-if="hasUnsavedChanges && !expand"
+            class="text-warning float-right"
+          >
             Unsaved changes
           </b>
         </h3>
@@ -133,7 +138,10 @@
           value="Save"
           class="btn btn-primary mt-1"
         >
-        <b v-if="hasUnsavedChanges" class="text-warning float-right">
+        <b
+          v-if="hasUnsavedChanges"
+          class="text-warning float-right"
+        >
           Unsaved changes
         </b>
       </div>

website/client/src/components/admin/admin-panel/user-support/stats.vue

@@ -8,7 +8,10 @@
           @click="expand = !expand"
         >
           Stats
-          <b v-if="hasUnsavedChanges && !expand" class="text-warning float-right">
+          <b
+            v-if="hasUnsavedChanges && !expand"
+            class="text-warning float-right"
+          >
             Unsaved changes
           </b>
         </h3>
@@ -18,33 +21,38 @@
         class="card-body"
       >
         <stats-row
+          v-model="hero.stats.hp"
           label="Health"
           color="red-label"
           :max="maxHealth"
-          v-model="hero.stats.hp" />
+        />
         <stats-row
+          v-model="hero.stats.exp"
           label="Experience"
           color="yellow-label"
           min="0"
           :max="maxFieldHardCap"
-          v-model="hero.stats.exp" />
+        />
         <stats-row
+          v-model="hero.stats.mp"
           label="Mana"
           color="blue-label"
           min="0"
           :max="maxFieldHardCap"
-          v-model="hero.stats.mp" />
+        />
         <stats-row
+          v-model="hero.stats.lvl"
           label="Level"
           step="1"
           min="0"
           :max="maxLevelHardCap"
-          v-model="hero.stats.lvl" />
+        />
         <stats-row
+          v-model="hero.stats.gp"
           label="Gold"
           min="0"
           :max="maxFieldHardCap"
-          v-model="hero.stats.gp" />
+        />
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">Selected Class</label>
           <div class="col-sm-9">
@@ -54,10 +62,18 @@
               class="form-control"
               :disabled="hero.stats.lvl < 10"
             >
-                <option value="warrior">Warrior</option>
-                <option value="wizard">Mage</option>
-                <option value="healer">Healer</option>
-                <option value="rogue">Rogue</option>
+              <option value="warrior">
+                Warrior
+              </option>
+              <option value="wizard">
+                Mage
+              </option>
+              <option value="healer">
+                Healer
+              </option>
+              <option value="rogue">
+                Rogue
+              </option>
             </select>
             <small>
               When changing class, players usually need stat points deallocated as well.
@@ -67,50 +83,59 @@
 
         <h3>Stat Points</h3>
         <stats-row
+          v-model="hero.stats.points"
           label="Unallocated"
           min="0"
           step="1"
           :max="maxStatPoints"
-          v-model="hero.stats.points" />
+        />
         <stats-row
+          v-model="hero.stats.str"
           label="Strength"
           color="red-label"
           min="0"
           :max="maxStatPoints"
           step="1"
-          v-model="hero.stats.str" />
+        />
         <stats-row
+          v-model="hero.stats.int"
           label="Intelligence"
           color="blue-label"
           min="0"
           :max="maxStatPoints"
           step="1"
-          v-model="hero.stats.int" />
+        />
         <stats-row
+          v-model="hero.stats.per"
           label="Perception"
           color="purple-label"
           min="0"
           :max="maxStatPoints"
           step="1"
-          v-model="hero.stats.per" />
+        />
         <stats-row
+          v-model="hero.stats.con"
           label="Constitution"
           color="yellow-label"
           min="0"
           :max="maxStatPoints"
           step="1"
-          v-model="hero.stats.con" />
+        />
         <div class="form-group row">
           <div class="offset-sm-3 col-sm-9">
             <button
               type="button"
               class="btn btn-warning btn-sm"
-              @click="deallocateStatPoints">
+              @click="deallocateStatPoints"
+            >
               Deallocate all stat points
             </button>
           </div>
         </div>
-        <div class="form-group row" v-if="statPointsIncorrect">
+        <div
+          v-if="statPointsIncorrect"
+          class="form-group row"
+        >
           <div class="offset-sm-3 col-sm-9 text-danger">
             Error: Sum of stat points should equal the users level
           </div>
@@ -118,35 +143,40 @@
 
         <h3>Buffs</h3>
         <stats-row
+          v-model="hero.stats.buffs.str"
           label="Strength"
           color="red-label"
           min="0"
           step="1"
-          v-model="hero.stats.buffs.str" />
+        />
         <stats-row
+          v-model="hero.stats.buffs.int"
           label="Intelligence"
           color="blue-label"
           min="0"
           step="1"
-          v-model="hero.stats.buffs.int" />
+        />
         <stats-row
+          v-model="hero.stats.buffs.per"
           label="Perception"
           color="purple-label"
           min="0"
           step="1"
-          v-model="hero.stats.buffs.per" />
+        />
         <stats-row
+          v-model="hero.stats.buffs.con"
           label="Constitution"
           color="yellow-label"
           min="0"
           step="1"
-          v-model="hero.stats.buffs.con" />
+        />
         <div class="form-group row">
           <div class="offset-sm-3 col-sm-9">
             <button
               type="button"
               class="btn btn-warning btn-sm"
-              @click="resetBuffs">
+              @click="resetBuffs"
+            >
               Reset Buffs
             </button>
           </div>
@@ -161,7 +191,10 @@
           value="Save"
           class="btn btn-primary mt-1"
         >
-        <b v-if="hasUnsavedChanges" class="text-warning float-right">
+        <b
+          v-if="hasUnsavedChanges"
+          class="text-warning float-right"
+        >
           Unsaved changes
         </b>
       </div>
@@ -189,7 +222,7 @@ import markdownDirective from '@/directives/markdown';
 import saveHero from '../mixins/saveHero';
 
 import { mapState } from '@/libs/store';
-import { userStateMixin } from '../../../mixins/userState';
+import { userStateMixin } from '../../../../mixins/userState';
 
 import StatsRow from './stats-row';
 

website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue

@@ -6,14 +6,19 @@
     }, msg: 'Subscription Perks' })"
   >
     <div class="card mt-2">
-      <div class="card-header"
-          @click="expand = !expand">
+      <div
+        class="card-header"
+        @click="expand = !expand"
+      >
         <h3
           class="mb-0 mt-0"
           :class="{ 'open': expand }"
         >
           Subscription, Monthly Perks
-        <b v-if="hasUnsavedChanges && !expand" class="text-warning float-right">
+          <b
+            v-if="hasUnsavedChanges && !expand"
+            class="text-warning float-right"
+          >
             Unsaved changes
           </b>
         </h3>
@@ -29,10 +34,11 @@
             Payment method:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.paymentMethod"
+            <input
+              v-if="!isRegularPaymentMethod"
+              v-model="hero.purchased.plan.paymentMethod"
               class="form-control"
               type="text"
-              v-if="!isRegularPaymentMethod"
             >
             <select
               v-else
@@ -40,14 +46,30 @@
               class="form-control"
               type="text"
             >
-                <option value="groupPlan">Group Plan</option>
-                <option value="Stripe">Stripe</option>
-                <option value="Apple">Apple</option>
-                <option value="Google">Google</option>
-                <option value="Amazon Payments">Amazon</option>
-                <option value="PayPal">PayPal</option>
-                <option value="Gift">Gift</option>
-                <option value="">Clear out</option>
+              <option value="groupPlan">
+                Group Plan
+              </option>
+              <option value="Stripe">
+                Stripe
+              </option>
+              <option value="Apple">
+                Apple
+              </option>
+              <option value="Google">
+                Google
+              </option>
+              <option value="Amazon Payments">
+                Amazon
+              </option>
+              <option value="PayPal">
+                PayPal
+              </option>
+              <option value="Gift">
+                Gift
+              </option>
+              <option value="">
+                Clear out
+              </option>
             </select>
           </div>
         </div>
@@ -58,10 +80,11 @@
             Payment schedule:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.planId"
+            <input
+              v-if="!isRegularPlanId"
+              v-model="hero.purchased.plan.planId"
               class="form-control"
               type="text"
-              v-if="!isRegularPlanId"
             >
             <select
               v-else
@@ -69,13 +92,27 @@
               class="form-control"
               type="text"
             >
-                <option value="basic_earned">Monthly recurring</option>
-                <option value="basic_3mo">3 Months recurring</option>
-                <option value="basic_6mo">6 Months recurring</option>
-                <option value="basic_12mo">12 Months recurring</option>
-                <option value="group_monthly">Group Plan (legacy)</option>
-                <option value="group_plan_auto">Group Plan (auto)</option>
-                <option value="">Clear out</option>
+              <option value="basic_earned">
+                Monthly recurring
+              </option>
+              <option value="basic_3mo">
+                3 Months recurring
+              </option>
+              <option value="basic_6mo">
+                6 Months recurring
+              </option>
+              <option value="basic_12mo">
+                12 Months recurring
+              </option>
+              <option value="group_monthly">
+                Group Plan (legacy)
+              </option>
+              <option value="group_plan_auto">
+                Group Plan (auto)
+              </option>
+              <option value="">
+                Clear out
+              </option>
             </select>
           </div>
         </div>
@@ -93,27 +130,31 @@
             >
           </div>
         </div>
-        <div class="form-group row"
-          v-if="hero.purchased.plan.planId === 'group_plan_auto'">
+        <div
+          v-if="hero.purchased.plan.planId === 'group_plan_auto'"
+          class="form-group row"
+        >
           <label class="col-sm-3 col-form-label">
             Group Plan Memberships:
           </label>
           <div class="col-sm-9 col-form-label">
             <loading-spinner
               v-if="!groupPlans"
-                dark-color=true
+              dark-color="true"
             />
             <b
               v-else-if="groupPlans.length === 0"
               class="text-danger col-form-label"
             >User is not part of an active group plan!</b>
             <div
-            v-else
               v-for="group in groupPlans"
+              v-else
               :key="group._id"
-              class="card mb-2">
+              class="card mb-2"
+            >
               <div class="card-body">
-                <h6 class="card-title">{{  group.name }}
+                <h6 class="card-title">
+                  {{ group.name }}
                   <small class="float-right">{{ group._id }}</small>
                 </h6>
                 <p class="card-text">
@@ -122,7 +163,10 @@
                     v-if="group.leader !== hero._id"
                     @click="switchUser(group.leader)"
                   >{{ group.leader }}</a>
-                <strong v-else class="text-success">This user</strong>
+                  <strong
+                    v-else
+                    class="text-success"
+                  >This user</strong>
                 </p>
                 <p class="card-text">
                   <strong>Members: </strong> {{ group.memberCount }}
@@ -190,16 +234,21 @@
                 <strong class="input-group-text">
                   {{ dateFormat(hero.purchased.plan.dateTerminated) }}
                 </strong>
-                <a class="btn btn-danger"
-              href="#"
+                <a
+                  v-if="!hero.purchased.plan.dateTerminated && hero.purchased.plan.planId"
                   v-b-modal.sub_termination_modal
-                  v-if="!hero.purchased.plan.dateTerminated && hero.purchased.plan.planId">
+                  class="btn btn-danger"
+                  href="#"
+                >
                   Terminate
                 </a>
               </div>
             </div>
-            <small v-if="!hero.purchased.plan.dateTerminated
-              && hero.purchased.plan.planId" class="text-success">
+            <small
+              v-if="!hero.purchased.plan.dateTerminated
+                && hero.purchased.plan.planId"
+              class="text-success"
+            >
               The subscription does not have a termination date and is active.
             </small>
           </div>
@@ -235,9 +284,11 @@
                 step="any"
               >
               <div class="input-group-append">
-                <a class="btn btn-warning"
+                <a
+                  v-if="hero.purchased.plan.dateTerminated && hero.purchased.plan.extraMonths > 0"
+                  class="btn btn-warning"
                   @click="applyExtraMonths"
-                  v-if="hero.purchased.plan.dateTerminated && hero.purchased.plan.extraMonths > 0">
+                >
                   Apply Credit
                 </a>
               </div>
@@ -339,19 +390,24 @@
             </span>
           </div>
         </div>
-        <div class="form-group row"
-              v-if="!isConvertingToGroupPlan && hero.purchased.plan.planId !== 'group_plan_auto'">
+        <div
+          v-if="!isConvertingToGroupPlan && hero.purchased.plan.planId !== 'group_plan_auto'"
+          class="form-group row"
+        >
           <div class="offset-sm-3 col-sm-9">
             <button
               type="button"
               class="btn btn-secondary btn-sm"
-              @click="beginGroupPlanConvert">
+              @click="beginGroupPlanConvert"
+            >
               Begin converting to group plan subscription
             </button>
           </div>
         </div>
-        <div class="form-group row"
-          v-if="isConvertingToGroupPlan">
+        <div
+          v-if="isConvertingToGroupPlan"
+          class="form-group row"
+        >
           <label class="col-sm-3 col-form-label">
             Group Plan group ID:
           </label>
@@ -374,25 +430,40 @@
           class="btn btn-primary mt-1"
           @click="saveClicked"
         >
-        <b v-if="hasUnsavedChanges" class="text-warning float-right">
+        <b
+          v-if="hasUnsavedChanges"
+          class="text-warning float-right"
+        >
           Unsaved changes
         </b>
       </div>
     </div>
-    <b-modal id="sub_termination_modal" title="Set Termination Date">
+    <b-modal
+      id="sub_termination_modal"
+      title="Set Termination Date"
+    >
       <p>
         You can set the sub benefit termination date to today or to the last
         day of the current billing cycle. Any extra subscription credit will
         then be processed and automatically added onto the selected date.
       </p>
       <template #modal-footer>
-        <div class="mt-3 btn btn-secondary" @click="$bvModal.hide('sub_termination_modal')">
+        <div
+          class="mt-3 btn btn-secondary"
+          @click="$bvModal.hide('sub_termination_modal')"
+        >
           Close
         </div>
-        <div class="mt-3 btn btn-danger" @click="terminateSubscription()">
+        <div
+          class="mt-3 btn btn-danger"
+          @click="terminateSubscription()"
+        >
           Set to Today
         </div>
-        <div class="mt-3 btn btn-danger" @click="terminateSubscription(todayWithRemainingCycle)">
+        <div
+          class="mt-3 btn btn-danger"
+          @click="terminateSubscription(todayWithRemainingCycle)"
+        >
           Set to {{ todayWithRemainingCycle.utc().format('MM/DD/YYYY') }}
         </div>
       </template>
@@ -420,15 +491,15 @@
 import isUUID from 'validator/es/lib/isUUID';
 import moment from 'moment';
 import { getPlanContext } from '@/../../common/script/cron';
+import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
 import saveHero from '../mixins/saveHero';
-import subscriptionBlocks from '../../../../../common/script/content/subscriptionBlocks';
 import LoadingSpinner from '@/components/ui/loadingSpinner';
 
 export default {
-  mixins: [saveHero],
   components: {
     LoadingSpinner,
   },
+  mixins: [saveHero],
   props: {
     hero: {
       type: Object,

website/client/src/components/admin/admin-panel/user-support/transactions.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import PurchaseHistoryTable from '../../ui/purchaseHistoryTable.vue';
-import { userStateMixin } from '../../../mixins/userState';
+import PurchaseHistoryTable from '../../../ui/purchaseHistoryTable.vue';
+import { userStateMixin } from '../../../../mixins/userState';
 
 export default {
   components: {

website/client/src/components/admin/admin-panel/user-support/userHistory.vue

@@ -180,7 +180,7 @@
 
 <script>
 import moment from 'moment';
-import { userStateMixin } from '../../../mixins/userState';
+import { userStateMixin } from '../../../../mixins/userState';
 
 export default {
   filters: {

website/client/src/components/admin/admin-panel/user-support/userProfile.vue

@@ -13,7 +13,10 @@
           @click="expand = !expand"
         >
           User Profile
-          <b v-if="hasUnsavedChanges && !expand" class="text-warning float-right">
+          <b
+            v-if="hasUnsavedChanges && !expand"
+            class="text-warning float-right"
+          >
             Unsaved changes
           </b>
         </h3>
@@ -66,7 +69,10 @@
           value="Save"
           class="btn btn-primary mt-1"
         >
-        <b v-if="hasUnsavedChanges" class="text-warning float-right">
+        <b
+          v-if="hasUnsavedChanges"
+          class="text-warning float-right"
+        >
           Unsaved changes
         </b>
       </div>
@@ -86,7 +92,7 @@ import markdownDirective from '@/directives/markdown';
 import saveHero from '../mixins/saveHero';
 
 import { mapState } from '@/libs/store';
-import { userStateMixin } from '../../../mixins/userState';
+import { userStateMixin } from '../../../../mixins/userState';
 
 function resetData (self) {
   self.expand = false;

website/client/src/components/admin/blocker/blocker_form.vue

@@ -0,0 +1,133 @@
+<template>
+  <div style="display: contents">
+    <td>
+      <select
+        v-model="blocker.type"
+        class="form-control"
+        @change="onTypeChanged"
+      >
+        <option value="ipaddress">
+          IP-Address
+        </option>
+        <option value="client">
+          Client Identifier
+        </option>
+        <option value="email">
+          E-Mail
+        </option>
+      </select>
+    </td>
+    <td>
+      <select
+        v-model="blocker.area"
+        class="form-control"
+      >
+        <option value="full">
+          Full
+        </option>
+      </select>
+    </td>
+    <td>
+      <input
+        v-model="blocker.value"
+        class="form-control"
+        autocorrect="off"
+        autocapitalize="off"
+        :class="{ 'is-invalid input-invalid': !isValid }"
+        @input="validateValue"
+      >
+    </td>
+    <td>
+      <input
+        v-model="blocker.reason"
+        class="form-control"
+      >
+    </td>
+    <td
+      colspan="3"
+      class="text-right"
+    >
+      <button
+        class="btn btn-primary mr-2"
+        :disabled="!isValid"
+        :class="{ disabled: !isValid }"
+        @click="$emit('save', blocker)"
+      >
+        <span>Save</span>
+      </button>
+      <button
+        class="btn btn-danger"
+        @click="$emit('cancel')"
+      >
+        <span>Cancel</span>
+      </button>
+    </td>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+ .btn-primary.disabled {
+    background: #4F2A93;
+    color: white;
+    cursor: not-allowed;
+    opacity: 0.5;
+ }
+</style>
+
+<script>
+import isIP from 'validator/es/lib/isIP';
+
+export default {
+  name: 'BlockerForm',
+  props: {
+    isNew: {
+      type: Boolean,
+      default: false,
+    },
+    blocker: {
+      type: Object,
+      default: () => ({
+        type: '',
+        area: '',
+        value: '',
+        reason: '',
+      }),
+    },
+  },
+  data () {
+    return {
+      isValid: false,
+    };
+  },
+  mounted () {
+    this.validateValue();
+  },
+  methods: {
+    onTypeChanged () {
+      if (this.blocker.type === 'email') {
+        this.blocker.area = 'full';
+      }
+      this.validateValue();
+    },
+    validateValue () {
+      if (this.blocker.type === 'ipaddress') {
+        this.validateValueAsIpAddress();
+      } else if (this.blocker.type === 'client') {
+        this.validateValueAsClient();
+      } else if (this.blocker.type === 'email') {
+        this.validateValueAsEmail();
+      }
+    },
+    validateValueAsEmail () {
+      const emailRegex = /^([a-zA-Z0-9._%+-]*)@(?:[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})?$/;
+      this.isValid = emailRegex.test(this.blocker.value) && this.blocker.value.length > 3;
+    },
+    validateValueAsIpAddress () {
+      this.isValid = isIP(this.blocker.value);
+    },
+    validateValueAsClient () {
+      this.isValid = this.blocker.value.length > 0;
+    },
+  },
+};
+</script>

website/client/src/components/admin/blocker/index.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="blocker-content">
+      <h1>
+        Blockers
+        <button
+          class="btn btn-primary float-right"
+          @click="showCreateForm = true"
+        >
+          Create
+        </button>
+      </h1>
+      <table class="table table-bordered">
+        <thead>
+          <tr>
+            <th>
+              Type <span
+                id="type_tooltip"
+                class="info-icon"
+              >?</span>
+              <b-tooltip
+                target="type_tooltip"
+              >
+                <b>IP-Address</b> - Block access for a specific IP-Address
+                <br>
+                <br>
+                <b>Client</b> - Block access for a client based on the "x-client" header.
+                <br>
+                <br>
+                <b>E-Mail</b> - Blocks e-mails from being used for signup.
+              </b-tooltip>
+            </th>
+            <th>
+              Area <span
+                id="area_tooltip"
+                class="info-icon"
+              >?</span>
+              <b-tooltip
+                target="area_tooltip"
+              >
+                <b>Full</b> - Block access to the entire site.
+                <br>
+                <br>
+                <b>Payments</b> - Block access to any payment related functionality.
+              </b-tooltip>
+            </th>
+            <th>Value</th>
+            <th>Reason</th>
+            <th>Source</th>
+            <th>Created at</th>
+            <th class="btncol"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="showCreateForm">
+            <BlockerForm
+              :is-new="true"
+              :blocker="newBlocker"
+              @save="createBlocker"
+              @cancel="showCreateForm = false"
+            />
+          </tr>
+          <tr
+            v-for="blocker in blockers"
+            :key="blocker._id"
+          >
+            <BlockerForm
+              v-if="blocker._id === editedBlockerId"
+              :blocker="blocker"
+              @save="saveBlocker(blocker)"
+              @cancel="editedBlockerId = null"
+            />
+            <template v-else>
+              <td>{{ getTypeName(blocker.type) }}</td>
+              <td>{{ getAreaName(blocker.area) }}</td>
+              <td>{{ blocker.value }}</td>
+              <td>{{ blocker.reason || "--" }}</td>
+              <td>{{ blocker.blockSource }}</td>
+              <td>{{ blocker.createdAt }}</td>
+              <td>
+                <button
+                  class="btn btn-primary mr-2"
+                  @click="editBlocker(blocker._id)"
+                >
+                  <span
+                    v-once
+                    class="svg-icon icon-16"
+                    v-html="icons.editIcon"
+                  ></span>
+                </button>
+                <button
+                  class="btn btn-danger"
+                  @click="deleteBlocker(blocker._id)"
+                >
+                  <span
+                    v-once
+                    class="svg-icon icon-16"
+                    v-html="icons.deleteIcon"
+                  ></span>
+                </button>
+              </td>
+            </template>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/colors.scss';
+
+  .blocker-content {
+    flex: 0 0 100%;
+    max-width: 1200px;
+  }
+
+  .btn {
+    padding: 0.4rem 0.75rem;
+  }
+
+  .btncol {
+    width: 123px;
+  }
+
+  td {
+    font-size: 1rem;
+  }
+
+  .info-icon {
+    font-size: 0.8rem;
+    color: $purple-400;
+    cursor: pointer;
+    margin-left: 0.5rem;
+    background-color: $gray-500;
+    padding: 0.1rem 0.3rem;
+    border-radius: 0.2rem;
+  }
+
+  .info-icon:hover {
+    background-color: $purple-400;
+    color: white;
+  }
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import editIcon from '@/assets/svg/edit.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
+import BlockerForm from './blocker_form.vue';
+
+export default {
+  components: {
+    BlockerForm,
+  },
+  data () {
+    return {
+      showCreateForm: false,
+      newBlocker: {
+        type: '',
+        area: 'full',
+        value: '',
+        reason: '',
+      },
+      blockers: [],
+      editedBlockerId: null,
+      icons: Object.freeze({
+        editIcon,
+        deleteIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('siteBlockers'),
+    });
+    this.loadBlockers();
+  },
+  methods: {
+    async loadBlockers () {
+      this.blockers = await this.$store.dispatch('blockers:getBlockers');
+    },
+    editBlocker (id) {
+      this.editedBlockerId = id;
+    },
+    async saveBlocker (blocker) {
+      await this.$store.dispatch('blockers:updateBlocker', { blocker });
+      this.editedBlockerId = null;
+      this.loadBlockers();
+    },
+    async deleteBlocker (blockerId) {
+      if (!window.confirm('Are you sure you want to delete this blocker?')) {
+        return;
+      }
+      await this.$store.dispatch('blockers:deleteBlocker', { blockerId });
+      this.loadBlockers();
+    },
+    async createBlocker (blocker) {
+      await this.$store.dispatch('blockers:createBlocker', { blocker });
+      this.showCreateForm = false;
+      this.newBlocker = {
+        type: '',
+        area: 'full',
+        value: '',
+        reason: '',
+      };
+      this.loadBlockers();
+    },
+
+    getTypeName (type) {
+      switch (type) {
+        case 'ipaddress':
+          return 'IP-Address';
+        case 'email':
+          return 'E-Mail';
+        case 'client':
+          return 'Client Identifier';
+        default:
+          return type;
+      }
+    },
+    getAreaName (area) {
+      switch (area) {
+        case 'full':
+          return 'Full';
+        case 'payments':
+          return 'Payments';
+        default:
+          return area;
+      }
+    },
+  },
+};
+</script>

website/client/src/components/admin/container.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="row">
+    <secondary-menu class="col-12">
+      <router-link
+        v-if="hasPermission(user, 'userSupport')"
+        class="nav-link"
+        :to="{name: 'adminPanel'}"
+      >
+        {{ $t('adminPanel') }}
+      </router-link>
+      <router-link
+        v-if="hasPermission(user, 'accessControl')"
+        class="nav-link"
+        :to="{name: 'blockers'}"
+      >
+        {{ $t('siteBlockers') }}
+      </router-link>
+    </secondary-menu><div class="col-12">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from '@/libs/store';
+import SecondaryMenu from '@/components/secondaryMenu';
+import { userStateMixin } from '../../mixins/userState';
+
+export default {
+  components: {
+    SecondaryMenu,
+  },
+  mixins: [
+    userStateMixin,
+  ],
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+};
+</script>

website/client/src/components/appFooter.vue

@@ -276,9 +276,9 @@
       </div>
 
       <div
-        class="time-travel"
         v-if="TIME_TRAVEL_ENABLED && user?.permissions?.fullAccess"
         :key="lastTimeJump"
+        class="time-travel"
       >
         <a
           class="btn btn-secondary mr-1"

website/client/src/components/groups/questSidebarSection.vue

@@ -227,7 +227,8 @@
       <div class="quest-icon">
         <Sprite
           class="quest"
-          :image-name="`inventory_quest_scroll_${questData.key}`" />
+          :image-name="`inventory_quest_scroll_${questData.key}`"
+        />
       </div>
     </div>
     <div

website/client/src/components/hall/heroes.vue

@@ -286,7 +286,7 @@
                       :to="{ name: 'adminPanelUser',
                              params: { userIdentifier: hero._id } }"
                     >
-                      admin panel
+                      {{ $t("adminPanel") }}
                     </router-link>
                   </span>
                 </td>

website/client/src/components/header/menu.vue

@@ -295,14 +295,6 @@
               {{ $t('help') }}
             </router-link>
             <div class="topbar-dropdown">
-              <router-link
-                v-if="user.permissions.fullAccess ||
-                  user.permissions.userSupport"
-                class="topbar-dropdown-item dropdown-item"
-                :to="{name: 'adminPanel'}"
-              >
-                Admin Panel
-              </router-link>
               <router-link
                 class="topbar-dropdown-item dropdown-item"
                 :to="{name: 'faq'}"
@@ -336,6 +328,61 @@
               >{{ $t('requestFeature') }}</a>
             </div>
           </li>
+          <li
+            v-if="hasElevatedPrivileges"
+            class="topbar-item droppable"
+            :class="{
+              'active': $route.path.startsWith('/admin')}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div>
+            <router-link
+              v-if="hasPermission(user, 'userSupport')"
+              class="nav-link"
+              :to="{name: 'adminPanel'}"
+            >
+              {{ $t('admin') }}
+            </router-link>
+            <a
+              v-else
+              href="#"
+              class="nav-link"
+            >
+              {{ $t('admin') }}
+            </a>
+            <div class="topbar-dropdown">
+              <router-link
+                v-if="hasPermission(user, 'userSupport')"
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'adminPanel'}"
+              >
+                {{ $t("adminPanel") }}
+              </router-link>
+              <router-link
+                v-if="hasPermission(user, 'accessControl')"
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'blockers'}"
+              >
+                {{ $t("siteBlockers") }}
+              </router-link>
+              <a
+                v-if="hasPermission(user, 'news')"
+                class="topbar-dropdown-item dropdown-item"
+                target="_blank"
+                href="https://panel.habitica.com"
+              >
+                {{ $t('newsroom') }}
+              </a>
+            </div>
+          </li>
         </b-navbar-nav>
         <div class="currency-tray form-inline">
           <div
@@ -757,6 +804,7 @@ import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
 import userDropdown from './userDropdown';
 import reportBug from '@/mixins/reportBug.js';
+import { userStateMixin } from '../../mixins/userState';
 
 export default {
   components: {
@@ -769,7 +817,7 @@ export default {
     selectUserModal,
     userDropdown,
   },
-  mixins: [sync, reportBug],
+  mixins: [sync, reportBug, userStateMixin],
   data () {
     return {
       isUserDropdownOpen: false,
@@ -802,6 +850,12 @@ export default {
         params: { groupId: this.groupPlans[0]._id },
       };
     },
+    hasElevatedPrivileges () {
+      return this.user.permissions.fullAccess
+        || this.user.permissions.userSupport
+        || this.user.permissions.accessControl
+        || this.user.permissions.news;
+    },
   },
   async mounted () {
     await this.getUserGroupPlans();

website/client/src/components/header/notifications/itemReceived.vue

@@ -15,7 +15,8 @@
     <Sprite
       slot="icon"
       class="mt-3"
-      :image-name="notification.data.icon" />
+      :image-name="notification.data.icon"
+    />
   </base-notification>
 </template>
 

website/client/src/components/header/notifications/newMysteryItems.vue

@@ -12,7 +12,8 @@
     ></div>
     <Sprite
       slot="icon"
-      :image-name="mysteryClass" />
+      :image-name="mysteryClass"
+    />
   </base-notification>
 </template>
 

website/client/src/components/news/newsContent.vue

@@ -81,9 +81,10 @@ import moment from 'moment';
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from '@/libs/store';
 import seasonalNPC from '@/mixins/seasonalNPC';
+import { userStateMixin } from '../../mixins/userState';
 
 export default {
-  mixins: [seasonalNPC],
+  mixins: [seasonalNPC, userStateMixin],
   data () {
     return {
       posts: [],
@@ -107,7 +108,7 @@ export default {
       if (lastPublishedPost) this.posts.push(lastPublishedPost);
 
       // If the user is authorized, show any draft
-      if (this.user && (this.user.permissions.news || this.user.permissions.fullAccess)) {
+      if (this.user && (this.hasPermission(this.user, 'news'))) {
         this.posts.unshift(
           ...postsFromServer
             .filter(p => !p.published || moment().isBefore(p.publishDate)),

website/client/src/components/static/features.vue

@@ -7,10 +7,15 @@
     </div>
     <div class="row">
       <div class="col-12 mb-5 mb-md-0">
-        <img :src="makeUrl('features_taskboard.png')" class="img-fluid">
+        <img
+          :src="makeUrl('features_taskboard.png')"
+          class="img-fluid"
+        >
         <h2>{{ $t('marketing1Lead1Title') }}</h2>
         <div class="row justify-content-md-center">
-          <p class="col col-lg-8 col-xl-6 margin-auto description">{{ $t('marketing1Lead1') }}</p>
+          <p class="col col-lg-8 col-xl-6 margin-auto description">
+            {{ $t('marketing1Lead1') }}
+          </p>
         </div>
       </div>
     </div>
@@ -18,12 +23,16 @@
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_gear.png')">
         <h2>{{ $t('marketing1Lead2Title') }}</h2>
-        <p class="description">{{ $t('marketing1Lead2') }}</p>
+        <p class="description">
+          {{ $t('marketing1Lead2') }}
+        </p>
       </div>
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_items.png')">
         <h2>{{ $t('marketing1Lead3Title') }}</h2>
-        <p class="description">{{ $t('marketing1Lead3') }}</p>
+        <p class="description">
+          {{ $t('marketing1Lead3') }}
+        </p>
       </div>
     </div>
     <hr>
@@ -35,19 +44,26 @@
     <div class="row mb-5">
       <div class="col-12">
         <h2>{{ $t('marketing2Lead1Title') }}</h2>
-        <p class="description">{{ $t('marketing2Lead1') }}</p>
+        <p class="description">
+          {{ $t('marketing2Lead1') }}
+        </p>
       </div>
     </div>
     <div class="row">
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_monsters.png')">
         <h2>{{ $t('marketing2Lead2Title') }}</h2>
-        <p class="description" v-markdown="$t('marketing2Lead2')"></p>
+        <p
+          v-markdown="$t('marketing2Lead2')"
+          class="description"
+        ></p>
       </div>
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_challenges.png')">
         <h2>{{ $t('marketing2Lead3Title') }}</h2>
-        <p class="description">{{ $t('marketing2Lead3') }}</p>
+        <p class="description">
+          {{ $t('marketing2Lead3') }}
+        </p>
       </div>
     </div>
     <hr>
@@ -60,12 +76,18 @@
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_mobile.png')">
         <h2>{{ $t('marketing3Lead1Title') }}</h2>
-        <p class="description" v-markdown="$t('marketing3Lead1')"></p>
+        <p
+          v-markdown="$t('marketing3Lead1')"
+          class="description"
+        ></p>
       </div>
       <div class="col-md-6 mb-5 mb-md-0">
         <img :src="makeUrl('features_opensource.png')">
         <h2>{{ $t('marketing3Lead2Title') }}</h2>
-        <p class="description" v-markdown="$t('marketing3Lead2')"></p>
+        <p
+          v-markdown="$t('marketing3Lead2')"
+          class="description"
+        ></p>
       </div>
     </div>
     <hr>
@@ -80,7 +102,9 @@
           <img src="@/assets/images/marketing/education.png">
           <div class="media-body">
             <h2>{{ $t('marketing4Lead1Title') }}</h2>
-            <p class="description">{{ $t('marketing4Lead1') }}</p>
+            <p class="description">
+              {{ $t('marketing4Lead1') }}
+            </p>
           </div>
         </div>
       </div>
@@ -89,7 +113,9 @@
           <img src="@/assets/images/marketing/wellness.png">
           <div class="media-body">
             <h2>{{ $t('marketing4Lead2Title') }}</h2>
-            <p class="description">{{ $t('marketing4Lead2') }}</p>
+            <p class="description">
+              {{ $t('marketing4Lead2') }}
+            </p>
           </div>
         </div>
       </div>

website/client/src/pages/settings/components/yourBalance.vue

@@ -11,7 +11,7 @@
       class="balance-info"
       :currency-needed="currencyNeeded"
       :amount-needed="amountNeeded"
-      :neededCurrencyOnly="true"
+      :needed-currency-only="true"
     />
   </div>
 </template>

website/client/src/router/index.js

@@ -19,16 +19,12 @@ const HallPage = () => import(/* webpackChunkName: "hall" */'@/components/hall/i
 const PatronsPage = () => import(/* webpackChunkName: "hall" */'@/components/hall/patrons');
 const HeroesPage = () => import(/* webpackChunkName: "hall" */'@/components/hall/heroes');
 
-// Admin Panel
-const AdminPanelPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin-panel');
-const AdminPanelUserPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin-panel/user-support');
-const AdminPanelSearchPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin-panel/search');
-
-// Except for tasks that are always loaded all the other main level
-// All the main level
-// components are loaded in separate webpack chunks.
-// See https://webpack.js.org/guides/code-splitting-async/
-// for docs
+// Admin Pages
+const AdminContainerPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin/container');
+const AdminPanelPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin/admin-panel');
+const AdminPanelUserPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin/admin-panel/user-support');
+const AdminPanelSearchPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin/admin-panel/search');
+const BlockerPage = () => import(/* webpackChunkName: "admin-panel" */'@/components/admin/blocker');
 
 // Tasks
 const UserTasks = () => import(/* webpackChunkName: "userTasks" */'@/components/tasks/user');
@@ -183,9 +179,20 @@ const router = new VueRouter({
       ],
     },
 
+    {
+      name: 'adminSection',
+      path: '/admin',
+      component: AdminContainerPage,
+      meta: {
+        privilegeNeeded: [ // any one of these is enough to give access
+          'userSupport',
+          'accessControl',
+        ],
+      },
+      children: [
         {
           name: 'adminPanel',
-      path: '/admin-panel',
+          path: 'panel',
           component: AdminPanelPage,
           meta: {
             privilegeNeeded: [ // any one of these is enough to give access
@@ -215,6 +222,18 @@ const router = new VueRouter({
             },
           ],
         },
+        {
+          name: 'blockers',
+          path: 'blockers',
+          component: BlockerPage,
+          meta: {
+            privilegeNeeded: [ // any one of these is enough to give access
+              'accessControl',
+            ],
+          },
+        },
+      ],
+    },
 
     // Only used to handle some redirects
     // See router.beforeEach

website/client/src/store/actions/blockers.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export async function getBlockers () {
+  const response = await axios.get('/api/v4/admin/blockers');
+  return response.data.data;
+}
+export async function createBlocker (store, payload) {
+  const response = await axios.post('/api/v4/admin/blockers', payload.blocker);
+  return response.data.data;
+}
+export async function updateBlocker (store, payload) {
+  const response = await axios.put(`/api/v4/admin/blockers/${payload.blocker._id}`, payload.blocker);
+  return response.data.data;
+}
+
+export async function deleteBlocker (store, payload) {
+  const response = await axios.delete(`/api/v4/admin/blockers/${payload.blockerId}`);
+  return response.data.data;
+}

website/client/src/store/actions/index.js

@@ -20,6 +20,7 @@ import * as worldState from './worldState';
 import * as news from './news';
 import * as analytics from './analytics';
 import * as faq from './faq';
+import * as blockers from './blockers';
 
 // Actions should be named as 'actionName' and can be accessed as 'namespace:actionName'
 // Example: fetch in user.js -> 'user:fetch'
@@ -45,6 +46,7 @@ const actions = flattenAndNamespace({
   news,
   analytics,
   faq,
+  blockers,
 });
 
 export default actions;

website/common/locales/en/admin.json

@@ -0,0 +1,7 @@
+{
+    "adminPanel": "Admin Panel",
+    "siteBlockers": "Site Blockers",
+    "newsroom": "Newsroom",
+    "adminBlockerTypeDescription": "<b>IP-Address</b> - Block access for a specific IP-Address\n\nClient - Block access for a client based on the \"x-client\" header.\n\nE-Mail - Blocks e-mails from being used for signup.",
+    "adminBlockerAreaDescription": "A blocker can either apply to the full site, completely blocking any access. Or it can apply to purchases, which still allows the site to be accessed."
+}

website/common/locales/en/front.json

@@ -116,6 +116,7 @@
   "missingPassword": "Missing password.",
   "missingNewPassword": "Missing new password.",
   "invalidEmailDomain": "You cannot register with emails with the following domains: <%= domains %>",
+  "emailBlockedRegistration": "This E-Mail is blocked from registration. If you think this is a mistake, please contact us at admin@habitica.com.",
   "wrongPassword": "Password is incorrect. If you forgot your password, click \"Forgot Password.\"",
   "incorrectDeletePhrase": "Please type <%= magicWord %> in all capital letters to delete your account.",
   "incorrectResetPhrase": "Please type <%= magicWord %> in all capital letters to reset your account.",

website/common/script/errors/apiErrorMessages.js

@@ -32,7 +32,8 @@ export default {
   postIdRequired: '"postId" must be a valid UUID.',
   noNewsPosterAccess: 'You don\'t have news poster access.',
 
-  ipAddressBlocked: 'Your access to Habitica has been blocked. This may be due to a breach of our Terms of Service or for other reasons. For details or to ask to be unblocked, please email admin@habitica.com or ask your parent or guardian to email them. Include your Habitica @Username or User Id in the email if you know it.',
+  ipAddressBlocked: 'Your connection to Habitica has been blocked. For additional information, or to request an appeal, email admin@habitica.com with your Habitica username or User ID.',
+  clientBlocked: 'This client or third-party tool has been blocked. For additional information, email admin@habitica.com with your Habitica username or User ID.',
   clientRateLimited: 'This User ID or IP address has been rate limited due to an excess amount of requests to the Habitica API v3. More info can be found in the response headers and at https://github.com/HabitRPG/habitica/wiki/API-Usage-Guidelines#rate-limiting .',
 
   invalidPlatform: 'Invalid platform specified',

website/server/controllers/api-v4/admin.js

@@ -1,8 +1,11 @@
 import validator from 'validator';
+import merge from 'lodash/merge';
+import { v4 as uuid } from 'uuid';
 import { authWithHeaders } from '../../middlewares/auth';
 import { ensurePermission } from '../../middlewares/ensureAccessRight';
 import { model as User } from '../../models/user';
 import { model as UserHistory } from '../../models/userHistory';
+import { model as Blocker } from '../../models/blocker';
 import {
   NotFound,
 } from '../../libs/errors';
@@ -116,4 +119,73 @@ api.getUserHistory = {
   },
 };
 
+api.getBlockers = {
+  method: 'GET',
+  url: '/admin/blockers',
+  middlewares: [authWithHeaders(), ensurePermission('accessControl')],
+  async handler (req, res) {
+    const blockers = await Blocker
+      .find({ disabled: false })
+      .lean()
+      .exec();
+
+    res.respond(200, blockers);
+  },
+};
+
+api.createBlocker = {
+  method: 'POST',
+  url: '/admin/blockers',
+  middlewares: [authWithHeaders(), ensurePermission('accessControl')],
+  async handler (req, res) {
+    const id = uuid();
+    const blocker = await Blocker({
+      _id: id,
+      ...Blocker.sanitize(req.body),
+    }).save();
+
+    res.respond(200, blocker);
+  },
+};
+
+api.updateBlocker = {
+  method: 'PUT',
+  url: '/admin/blockers/:blockerId',
+  middlewares: [authWithHeaders(), ensurePermission('accessControl')],
+  async handler (req, res) {
+    req.checkParams('blockerId', res.t('blockerIdRequired')).notEmpty().isUUID();
+
+    const validationErrors = req.validationErrors();
+    if (validationErrors) throw validationErrors;
+
+    const blocker = await Blocker.findById(req.params.blockerId).exec();
+    if (!blocker) throw new NotFound(res.t('blockerNotFound'));
+
+    merge(blocker, Blocker.sanitize(req.body));
+    const savedBlocker = await blocker.save();
+
+    res.respond(200, savedBlocker);
+  },
+};
+
+api.deleteBlocker = {
+  method: 'DELETE',
+  url: '/admin/blockers/:blockerId',
+  middlewares: [authWithHeaders(), ensurePermission('accessControl')],
+  async handler (req, res) {
+    req.checkParams('blockerId', res.t('blockerIdRequired')).notEmpty().isUUID();
+
+    const validationErrors = req.validationErrors();
+    if (validationErrors) throw validationErrors;
+
+    const blocker = await Blocker.findById(req.params.blockerId).exec();
+    if (!blocker) throw new NotFound(res.t('blockerNotFound'));
+
+    blocker.disabled = true;
+    const savedBlocker = await blocker.save();
+
+    res.respond(200, savedBlocker);
+  },
+};
+
 export default api;

website/server/middlewares/blocker.js

@@ -0,0 +1,56 @@
+import {
+  Forbidden,
+} from '../libs/errors';
+import { apiError } from '../libs/apiError';
+import { model as Blocker } from '../models/blocker';
+
+// Middleware to block unwanted IP addresses and clients
+
+// NOTE: it's meant to be used behind a proxy (for example a load balancer)
+// that uses the 'x-forwarded-for' header to forward the original IP addresses.
+
+const blockedIps = [];
+const blockedClients = [];
+
+Blocker.watchBlockers({
+  $or: [
+    { type: 'ipaddress' },
+    { type: 'client' },
+  ],
+  area: 'full',
+}, {
+  initial: true,
+}).on('change', async change => {
+  const { operation, blocker } = change;
+  const checkedList = blocker.type === 'ipaddress' ? blockedIps : blockedClients;
+  if (operation === 'add') {
+    if (blocker.value && !checkedList.includes(blocker.value)) {
+      checkedList.push(blocker.value);
+    }
+  } else if (operation === 'delete') {
+    const index = checkedList.indexOf(blocker.value);
+    if (index !== -1) {
+      checkedList.splice(index, 1);
+    }
+  }
+});
+
+export default function ipBlocker (req, res, next) {
+  if (blockedIps.length === 0 && blockedClients.length === 0) return next();
+
+  const ipMatch = blockedIps.find(blockedIp => blockedIp === req.ip) !== undefined;
+  if (ipMatch === true) {
+    const error = new Forbidden(apiError('ipAddressBlocked'));
+    error.skipLogging = true;
+    return next(error);
+  }
+
+  const clientMatch = blockedClients.find(blockedClient => blockedClient === req.headers['x-client']) !== undefined;
+  if (clientMatch === true) {
+    const error = new Forbidden(apiError('clientBlocked'));
+    error.skipLogging = true;
+    return next(error);
+  }
+
+  return next();
+}

website/server/middlewares/errorHandler.js

@@ -66,6 +66,7 @@ export default function errorHandler (err, req, res, next) { // eslint-disable-l
     responseErr = new InternalServerError();
   }
 
+  if (!err.skipLogging) {
     // log the error
     logger.error(err, {
       method: req.method,
@@ -79,6 +80,7 @@ export default function errorHandler (err, req, res, next) { // eslint-disable-l
       httpCode: responseErr.httpCode,
       isHandledError: responseErr.httpCode < 500,
     });
+  }
 
   const jsonRes = {
     success: false,

website/server/middlewares/index.js

@@ -23,7 +23,7 @@ import {
   forceSSL,
   forceHabitica,
 } from './redirects';
-import ipBlocker from './ipBlocker';
+import blocker from './blocker';
 import v1 from './v1';
 import v2 from './v2';
 import appRoutes from './appRoutes';
@@ -81,7 +81,7 @@ export default function attachMiddlewares (app, server) {
 
   app.use(maintenanceMode);
 
-  app.use(ipBlocker);
+  app.use(blocker);
 
   app.use(cors);
   app.use(forceSSL);

website/server/middlewares/ipBlocker.js

@@ -1,38 +0,0 @@
-import nconf from 'nconf';
-import {
-  Forbidden,
-} from '../libs/errors';
-import { apiError } from '../libs/apiError';
-
-// Middleware to block unwanted IP addresses
-
-// NOTE: it's meant to be used behind a proxy (for example a load balancer)
-// that uses the 'x-forwarded-for' header to forward the original IP addresses.
-
-// A list of comma separated IPs to block
-// It works fine as long as the list is short,
-// if the list becomes too long for an env variable we'll switch to Redis.
-const BLOCKED_IPS_RAW = nconf.get('BLOCKED_IPS');
-
-const blockedIps = BLOCKED_IPS_RAW
-  ? BLOCKED_IPS_RAW
-    .trim()
-    .split(',')
-    .map(blockedIp => blockedIp.trim())
-    .filter(blockedIp => Boolean(blockedIp))
-  : [];
-
-export default function ipBlocker (req, res, next) {
-  // If there are no IPs to block, skip the middleware
-  if (blockedIps.length === 0) return next();
-
-  // Is the client IP, req.ip, blocked?
-  const match = blockedIps.find(blockedIp => blockedIp === req.ip) !== undefined;
-
-  if (match === true) {
-    // Not translated because no user is loaded at this point
-    return next(new Forbidden(apiError('ipAddressBlocked')));
-  }
-
-  return next();
-}

website/server/models/blocker.js

@@ -0,0 +1,103 @@
+/* eslint-disable camelcase */
+
+import mongoose from 'mongoose';
+import EventEmitter from 'events';
+import baseModel from '../libs/baseModel';
+
+export const blockTypes = [
+  'ipaddress',
+  'email',
+  'client',
+];
+
+export const blockArea = [
+  'full',
+  'payments',
+];
+
+export const schema = new mongoose.Schema({
+  disabled: {
+    $type: Boolean, default: false, // If true, the block is disabled
+  },
+  type: {
+    $type: String, enum: blockTypes, required: true,
+  },
+  area: {
+    $type: String, enum: blockArea, default: 'full', // full or payment
+  },
+  value: {
+    $type: String, required: true, // e.g. IP address
+  },
+  blockSource: {
+    $type: String, enum: ['administrator', 'system', 'worker'], default: 'administrator', // who created the block
+  },
+  reason: {
+    $type: String, required: false, // e.g. 'abusive behavior'
+  },
+}, {
+  strict: true,
+  minimize: false, // So empty objects are returned
+  typeKey: '$type', // So that we can use fields named `type`
+});
+
+schema.plugin(baseModel, {
+  timestamps: true,
+});
+
+schema.statics.watchBlockers = function watchBlockers (query, options) {
+  const emitter = new EventEmitter();
+  const matchQuery = {
+    $match: {},
+  };
+  if (query) {
+    if (query.type) {
+      matchQuery.$match['fullDocument.type'] = query.type;
+    }
+    if (query.area) {
+      matchQuery.$match['fullDocument.area'] = query.area;
+    }
+  }
+  process.nextTick(() => {
+    this.watch([matchQuery], {
+      fullDocument: 'updateLookup',
+    })
+      .on('change', change => {
+        if (!change.fullDocument) {
+          return; // Ignore changes that don't have a fullDocument
+        }
+        if (change.operationType === 'insert' || !change.fullDocument.disabled) {
+          emitter.emit('change', {
+            operation: 'add',
+            blocker: change.fullDocument,
+          });
+        } else if (change.operationType === 'update' && change.fullDocument.disabled) {
+          emitter.emit('change', {
+            operation: 'delete',
+            blocker: change.fullDocument,
+          });
+        }
+      })
+      .on('error', error => {
+        emitter.emit('error', error);
+      });
+    if (options.initial) {
+      const initialQuery = {
+        disabled: false,
+        ...query,
+      };
+      this.find(initialQuery).then(docs => {
+        for (const doc of docs) {
+          emitter.emit('change', {
+            operation: 'add',
+            blocker: doc,
+          });
+        }
+      }).catch(error => {
+        emitter.emit('error', error);
+      });
+    }
+  });
+  return emitter;
+};
+
+export const model = mongoose.model('Blocker', schema);

website/server/models/user/schema.js

@@ -9,9 +9,31 @@ import { schema as SubscriptionPlanSchema } from '../subscriptionPlan';
 import { schema as TagSchema } from '../tag';
 import { schema as UserNotificationSchema } from '../userNotification';
 import { schema as WebhookSchema } from '../webhook';
+import { model as Blocker } from '../blocker';
 
 const RESTRICTED_EMAIL_DOMAINS = Object.freeze(['habitica.com', 'habitrpg.com']);
 
+const BLOCKED_EMAILS = [];
+
+Blocker.watchBlockers({
+  type: 'email',
+  area: 'full',
+}, {
+  initial: true,
+}).on('change', async change => {
+  const { operation, blocker: { value } } = change;
+  if (operation === 'add') {
+    if (value && !BLOCKED_EMAILS.includes(value)) {
+      BLOCKED_EMAILS.push(value);
+    }
+  } else if (operation === 'delete') {
+    const index = BLOCKED_EMAILS.indexOf(value);
+    if (index !== -1) {
+      BLOCKED_EMAILS.splice(index, 1);
+    }
+  }
+});
+
 // User schema definition
 export const UserSchema = new Schema({
   apiToken: {
@@ -43,6 +65,12 @@ export const UserSchema = new Schema({
             return RESTRICTED_EMAIL_DOMAINS.every(domain => !lowercaseEmail.endsWith(`@${domain}`));
           },
           message: shared.i18n.t('invalidEmailDomain', { domains: RESTRICTED_EMAIL_DOMAINS.join(', ') }),
+        }, {
+          validator (email) {
+            const lowercaseEmail = email.toLowerCase();
+            return BLOCKED_EMAILS.every(block => lowercaseEmail.indexOf(block) === -1);
+          },
+          message: shared.i18n.t('emailBlockedRegistration'),
         }],
       },
       username: {
@@ -196,6 +224,7 @@ export const UserSchema = new Schema({
     userSupport: Boolean, // access User Support feature in Admin Panel
     challengeAdmin: Boolean, // Can manage and administrate challenges
     moderator: Boolean, // Can ban, flag users and manage social spaces
+    accessControl: Boolean, // Can manage IP and client blockers
     coupons: Boolean, // Can generate and request coupons
   },
   balance: { $type: Number, default: 0 },