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>

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="admin-panel-content">
+      <h1>{{ $t("adminPanel") }}</h1>
+      <form
+        class="form-inline"
+        @submit.prevent="searchUsers(userIdentifier)"
+      >
+        <div class="input-group col pl-0 pr-0">
+          <input
+            v-model="userIdentifier"
+            class="form-control"
+            type="text"
+            :placeholder="'UserID, username, email, or leave blank for your account'"
+          >
+          <div class="input-group-append">
+            <button
+              class="btn btn-primary"
+              type="button"
+              @click="loadUser(userIdentifier)"
+            >
+              Load User
+            </button>
+            <button
+              class="btn btn-secondary"
+              type="button"
+              @click="searchUsers(userIdentifier)"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+      </form>
+
+      <router-view
+        class="mt-3"
+        @changeUserIdentifier="changeUserIdentifier"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .uidField {
+    min-width: 45ch;
+  }
+
+  .input-group-append {
+    width:auto;
+  }
+
+  .admin-panel-content {
+    flex: 0 0 800px;
+    max-width: 800px;
+  }
+</style>
+
+<script>
+import VueRouter from 'vue-router';
+import { mapState } from '@/libs/store';
+
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+export default {
+  data () {
+    return {
+      userIdentifier: '',
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  mounted () {
+    this.$store.dispatch('common:setTitle', {
+      section: this.$t('adminPanel'),
+    });
+  },
+  methods: {
+    changeUserIdentifier (newId) {
+      // If we've accessed the admin panel from a URL that had a user identifier in it,
+      // this method will insert that identifier into the "Load User" form field
+      // (useful if we want to re-fetch the user after making changes).
+      this.userIdentifier = newId;
+    },
+    async searchUsers (userIdentifier) {
+      if (!userIdentifier || userIdentifier === '') {
+        this.loadUser();
+        return;
+      }
+      this.$router.push({
+        name: 'adminPanelSearch',
+        params: { userIdentifier },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          this.$router.go();
+        }
+      });
+    },
+
+    async loadUser (userIdentifier) {
+      const id = userIdentifier || this.user._id;
+      if (this.$router.currentRoute.name === 'adminPanelUser') {
+        await this.$router.push({
+          name: 'adminPanel',
+        });
+      }
+      await this.$router.push({
+        name: 'adminPanelUser',
+        params: { userIdentifier: id },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          this.$router.go();
+        }
+      });
+    },
+  },
+};
+</script>