fix(lint): leave out unused imports

This reverts commit 215e768e90.

.github/workflows/test.yml

@@ -19,7 +19,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -41,7 +42,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -63,7 +65,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -72,7 +75,7 @@ jobs:
         CI: true
         NODE_ENV: test
     - run: npm run test:sanity
-  
+
   common:
     runs-on: ubuntu-latest
     strategy:
@@ -86,7 +89,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -108,7 +112,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -117,13 +122,13 @@ jobs:
         CI: true
         NODE_ENV: test
     - run: npm run test:content
-  
+
   api-unit:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [4.2]
+        mongodb-version: [7.0]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -132,12 +137,15 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
+
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.3.0
+      uses: supercharge/mongodb-github-action@1.11.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -145,15 +153,19 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
+
+    #- run: npm run mongo:dev -- -d
     - run: npm run test:api:unit
       env:
         REQUIRES_SERVER=true: true
+
+    #- run: npm run mongo:dev:down
   api-v3-integration:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [4.2]
+        mongodb-version: [7.0]
     steps:
     - uses: actions/checkout@v4
       with:
@@ -163,11 +175,13 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.3.0
+      uses: supercharge/mongodb-github-action@1.11.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -175,15 +189,20 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
+
+    #- run: npm run mongo:dev -- -d
     - run: npm run test:api-v3:integration
       env:
         REQUIRES_SERVER=true: true
+
+    #- run: npm run mongo:dev:down
   api-v4-integration:
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [21.x]
-        mongodb-version: [4.2]
+        mongodb-version: [7.0]
+
     steps:
     - uses: actions/checkout@v4
       with:
@@ -193,11 +212,13 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Start MongoDB ${{ matrix.mongodb-version }} Replica Set
-      uses: supercharge/mongodb-github-action@1.3.0
+      uses: supercharge/mongodb-github-action@1.11.0
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -205,10 +226,13 @@ jobs:
       env:
         CI: true
         NODE_ENV: test
+    #- run: npm run mongo:dev -- -d
     - run: npm run test:api-v4:integration
       env:
         REQUIRES_SERVER=true: true
 
+
+    #- run: npm run mongo:dev:down
   client-unit:
     runs-on: ubuntu-latest
     strategy:
@@ -222,7 +246,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -246,7 +271,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |

.gitignore

@@ -47,5 +47,5 @@ webpack.webstorm.config
 
 # mongodb replica set for local dev
 mongodb-*.tgz
-/mongodb-data
+/mongodb-data*
 /.nyc_output

.heroku/report_deploy.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+DEVELOPER="someone"
+if git rev-parse --git-dir > /dev/null 2>&1; then
+    DEVELOPERS=$(git log -5 --pretty=format:'%an')
+    IFS=$'\n'
+    DEVELOPER=""
+    for dev in $DEVELOPERS
+    do
+        if [ "$DEVELOPER" == "someone" ]; then
+            if [[ ${dev} != *"[bot]"* ]]; then
+                DEVELOPER=$dev
+                continue
+            fi
+            continue
+        fi
+    done
+fi
+
+PARTS=$(cut -d"." -f1 <<< $BASE_URL)
+SERVER_NAME=$(cut -d"/" -f3 <<< ${PARTS[0]})
+
+SERVER_NAME=":$SERVER_EMOJI: $SERVER_NAME"
+
+wget $SLACK_DEPLOY_URL --post-data="{\"server_name\": \"$SERVER_NAME\", \"developer\": \"$DEVELOPER\", \"base_url\": \"$BASE_URL\"}" -O /dev/null

README.md

@@ -1,14 +1,20 @@
-Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg) [![Code Climate](https://codeclimate.com/github/HabitRPG/habitrpg.svg)](https://codeclimate.com/github/HabitRPG/habitrpg) [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=68393)](https://www.bountysource.com/trackers/68393-habitrpg?utm_source=68393&utm_medium=shield&utm_campaign=TRACKER_BADGE)
+Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg)
 ===============
 
-[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn money to buy weapons and armor.
+[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn Gold to buy weapons and armor!
 
-**We need more programmers!** Your assistance will be greatly appreciated. The wiki pages below and the additional pages they link to will tell you how to get started on contributing code and where you can go to seek further help or ask questions:
+**Want to contribute code to Habitica?** We're always looking for assistance on any issues in our repo with the "Help Wanted" label. The wiki pages below and the additional linked pages will tell you how to start contributing code and where you can seek further help or ask questions:
 * [Guidance for Blacksmiths](https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths) - an introduction to the technologies used and how the software is organized.
-* [Setting up Habitica Locally](https://habitica.fandom.com/wiki/Setting_up_Habitica_Locally) - how to set up a local install of Habitica for development and testing on various platforms.
+* [Setting up Habitica Locally](https://github.com/HabitRPG/habitica/wiki/Setting-Up-Habitica-for-Local-Development) - how to set up a local install of Habitica for development and testing.
+
+**Interested in contributing to Habitica’s mobile apps?** Visit the links below for our mobile repositories.
+* **Android:** https://github.com/HabitRPG/habitica-android
+* **iOS:** https://github.com/HabitRPG/habitica-ios
 
 Habitica's code is licensed as described at https://github.com/HabitRPG/habitica/blob/develop/LICENSE
 
-**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than creating an issue (an admin will advise you if a new issue is necessary; usually it is not).
+**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than create an issue (an admin will advise you if a new issue is necessary; usually it is not).
 
-**Have any questions about Habitica or its community?** See the links in the [habitica.com](https://habitica.com) website's Help menu or drop in to [Guilds > Tavern Chat](https://habitica.com/groups/tavern) to ask questions or chat socially!
+**Creating a third-party tool?** Please review our [API Usage Guidelines](https://github.com/HabitRPG/habitica/wiki/API-Usage-Guidelines) to ensure that your tool is compliant and maintains the best experience for Habitica players.
+
+**Have any questions about Habitica or contributing?** See the links in the [Habitica](https://habitica.com) website's Help menu. There’s FAQ’s, guides, and the option to reach out to us with any further questions!

config.json.example

@@ -34,9 +34,10 @@
   "LOGGLY_TOKEN": "example-token",
   "LOG_REQUESTS_EXCESSIVE_MODE": "false",
   "MAINTENANCE_MODE": "false",
-  "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs",
-  "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs",
+  "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs&directConnection=true&readPreference=secondary",
+  "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs&directConnection=true&readPreference=secondary",
   "MONGODB_POOL_SIZE": "10",
+  "MONGODB_SOCKET_TIMEOUT": "20000",
   "NODE_ENV": "development",
   "PATH": "bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin",
   "PAYPAL_BILLING_PLANS_basic_12mo": "basic_12mo",

docker-compose.dev.yml

@@ -22,7 +22,8 @@ services:
       dockerfile: ./Dockerfile-Dev
     command: ["npm", "start"]
     depends_on:
-      - mongo
+      mongo:
+        condition: service_healthy
     environment:
       - NODE_DB_URI=mongodb://mongo/habitrpg
     networks:
@@ -33,7 +34,16 @@ services:
       - .:/usr/src/habitica
       - /usr/src/habitica/node_modules
   mongo:
-    image: mongo:3.6
+    image: mongo:7.0
+    restart: unless-stopped
+    command: ["--replSet", "rs", "--bind_ip_all", "--port", "27017"]
+    healthcheck:
+      test: echo "try { rs.status() } catch (err) { rs.initiate() }" | mongosh --port 27017 --quiet
+      interval: 10s
+      timeout: 30s
+      start_period: 0s
+      start_interval: 1s
+      retries: 30
     networks:
       - habitica
     ports:

docker-compose.mongo-local.yml

@@ -0,0 +1,37 @@
+# big thanks to https://pakisan.github.io/posts/docker-compose-mongodb-single-node-replica-set/ <3
+
+version: "3.9"
+networks:
+  mongodb-network:
+    name: "mongodb-network"
+    driver: bridge
+services:
+  mongodb:
+    image: "mongo:7.0"
+    container_name: "mongodb"
+    networks:
+      - mongodb-network
+    hostname: "mongodb"
+    ports:
+      - "27017:27017"
+    restart: "unless-stopped"
+    volumes:
+      - "./mongodb-data:/data/db"
+    entrypoint: [ "/usr/bin/mongod", "--bind_ip_all", "--replSet", "rs" ]
+  mongoinit:
+    image: "mongo:7.0"
+    container_name: "mongodb_replSet_initializer"
+    restart: "on-failure" # WITHOUT THIS, the initializer tries only once and fails
+    depends_on:
+      - mongodb
+    networks:
+      - mongodb-network
+
+    command: >
+      mongosh --host mongodb:27017 --eval "rs.initiate({
+       _id: \"rs\",
+       members: [
+         {_id: 0, host: \"mongodb\"}
+       ]
+      })"
+

docker-compose.yml

@@ -25,7 +25,7 @@ services:
       - mongo
 
   mongo:
-    image: mongo:3.6
+    image: mongo:7.0
     ports:
       - "27017:27017"
     networks:

gulp/gulp-build.js

@@ -5,8 +5,8 @@ import path from 'path';
 import babel from 'gulp-babel';
 import os from 'os';
 import fs from 'fs';
-import spawn from 'cross-spawn'; // eslint-disable-line import/no-extraneous-dependencies
-import clean from 'rimraf';
+/* import spawn from 'cross-spawn'; // eslint-disable-line import/no-extraneous-dependencies
+import clean from 'rimraf'; */
 
 gulp.task('build:babel:server', () => gulp.src('website/server/**/*.js')
   .pipe(babel())
@@ -51,7 +51,7 @@ gulp.task('build:prepare-mongo', async () => {
   console.log('MongoDB data folder is missing, setting up.'); // eslint-disable-line no-console
 
   // use run-rs without --keep, kill it as soon as the replica set starts
-  const runRsProcess = spawn('run-rs', ['-v', '4.1.1', '-l', 'ubuntu1804', '--dbpath', 'mongodb-data', '--number', '1', '--quiet']);
+  /* const runRsProcess = spawn('node', ['../scripts/start-local-mongo.mjs --build-db']);
 
   for await (const chunk of runRsProcess.stdout) {
     const stringChunk = chunk.toString();
@@ -79,6 +79,8 @@ gulp.task('build:prepare-mongo', async () => {
 
     throw new Error(`Error running run-rs: ${error}`);
   }
+
+   */
 });
 
 gulp.task('build:dev', gulp.series(

gulp/gulp-sprites.js

@@ -42,10 +42,41 @@ function cssVarMap (sprite) {
   }
 }
 
-function createSpritesStream (name, src) {
+function filterFile (file) {
+  if (file.relative.indexOf('Mount_Icon_') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('shop/') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/eggs') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/food') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/potions') !== -1) {
+    return false;
+  }
+  if (file.relative.indexOf('shop_') === 0) {
+    return false;
+  }
+  if (file.relative.indexOf('icon_background') === 0) {
+    return false;
+  }
+  return true;
+}
+
+async function createSpritesStream (name, src) {
   const stream = mergeStream();
+  // need to import this way bc of weird dependency things
+  // eslint-disable-next-line global-require
+  const filter = require('gulp-filter');
+
+  const f = filter(filterFile);
 
   const spriteData = gulp.src(src)
+    .pipe(f)
     .pipe(spritesmith({
       imgName: `spritesmith-${name}.png`,
       cssName: `spritesmith-${name}.css`,
@@ -63,7 +94,7 @@ function createSpritesStream (name, src) {
   return stream;
 }
 
-gulp.task('sprites:main', () => {
+gulp.task('sprites:main', async () => {
   const mainSrc = sync('habitica-images/**/*.png');
   return createSpritesStream('main', mainSrc);
 });

gulp/gulp-tests.js

@@ -59,6 +59,11 @@ gulp.task('test:prepare:mongo', cb => {
   const mongooseOptions = getDefaultConnectionOptions();
   const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);
 
+  console.info({
+    mongooseOptions,
+    connectionUrl,
+  });
+
   mongoose.connect(connectionUrl, mongooseOptions)
     .then(() => mongoose.connection.dropDatabase())
     .then(() => mongoose.connection.close()).then(() => {

migrations/archive/2024/2024_purge_invite_accepted.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import { model as User } from '../../../website/server/models/user';
+
+const MIGRATION_NAME = '2024_purge_invite_accepted';
+const progressCount = 1000;
+let count = 0;
+
+async function updateUsers (userIds) {
+  count += userIds.length;
+  if (count % progressCount === 0) console.warn(`${count} ${userIds[0]}`);
+
+  return await User.updateMany(
+    { _id: { $in: userIds } },
+    { $pull: { notifications: { type: 'GROUP_INVITE_ACCEPTED' } } },
+  ).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'notifications.type': 'GROUP_INVITE_ACCEPTED',
+    'auth.timestamps.loggedin': { $gt: new Date('2024-06-25') },
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({ _id: 1 })
+      .select({ _id: 1 })
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    const userIds = users.map(user => user._id);
+
+    await updateUsers(userIds); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/users/naming-day.js

@@ -1,14 +1,12 @@
 /* eslint-disable no-console */
-const MIGRATION_NAME = '20230731_naming_day';
-import { v4 as uuid } from 'uuid';
-
-import { model as User } from '../../../website/server/models/user';
+import { model as User } from '../../website/server/models/user';
 
+const MIGRATION_NAME = '20240731_naming_day';
 const progressCount = 1000;
 let count = 0;
 
 async function updateUser (user) {
-  count++;
+  count += 1;
 
   let set;
   let push;
@@ -115,16 +113,16 @@ async function updateUser (user) {
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
   if (push) {
-    return await user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
-  } else {
-    return await user.updateOne({ $set: set, $inc: inc }).exec();
+    return user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
   }
+
+  return user.updateOne({ $set: set, $inc: inc }).exec();
 }
 
 export default async function processUsers () {
-  let query = {
+  const query = {
     migration: { $ne: MIGRATION_NAME },
-    'auth.timestamps.loggedin': { $gt: new Date('2023-07-01') },
+    'auth.timestamps.loggedin': { $gt: new Date('2024-07-01') },
   };
 
   const fields = {
@@ -136,7 +134,7 @@ export default async function processUsers () {
     const users = await User // eslint-disable-line no-await-in-loop
       .find(query)
       .limit(250)
-      .sort({_id: 1})
+      .sort({ _id: 1 })
       .select(fields)
       .exec();
 
@@ -152,4 +150,4 @@ export default async function processUsers () {
 
     await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
   }
-};
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.26.0",
+  "version": "5.28.8",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -15,6 +15,7 @@
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
     "apple-auth": "^1.0.9",
+    "babel-preset-env": "^1.7.0",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "bootstrap": "^4.6.2",
@@ -35,6 +36,7 @@
     "got": "^11.8.6",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
+    "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-nodemon": "^2.5.0",
     "gulp.spritesmith": "^6.13.0",
@@ -74,6 +76,7 @@
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
     "validator": "^13.11.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "winston": "^3.10.0",
     "winston-loggly-bulk": "^3.3.0",
     "xml2js": "^0.6.2"
@@ -104,24 +107,28 @@
     "client:build": "cd website/client && npm run build",
     "client:unit": "cd website/client && npm run test:unit",
     "start": "gulp nodemon",
+    "start:simple": "node ./website/server/index.js",
     "debug": "gulp nodemon --inspect",
-    "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:dev_": "node scripts/start-local-mongo.mjs",
+    "mongo:dev": "docker compose -f docker-compose.mongo-local.yml up",
+    "mongo:dev:down": "docker compose -f docker-compose.mongo-local.yml down",
+    "mongo:test": "node scripts/start-local-mongo.mjs --test-db",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
-    "heroku-postbuild": "npm run client:build"
+    "heroku-postbuild": ".heroku/report_deploy.sh"
   },
   "devDependencies": {
-    "axios": "^1.4.0",
+    "axios": "^1.7.4",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
     "chalk": "^5.3.0",
     "cross-spawn": "^7.0.3",
     "mocha": "^5.1.1",
+    "mongodb-memory-server": "^10.1.2",
     "monk": "^7.3.4",
     "nyc": "^15.1.0",
     "require-again": "^2.0.0",
-    "run-rs": "^0.7.7",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   }

scripts/start-local-mongo.mjs

@@ -0,0 +1,54 @@
+/* eslint-disable-file */
+import { MongoMemoryReplSet } from 'mongodb-memory-server';
+
+import { dirname } from 'node:path';
+import { existsSync, mkdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+const TEST_MODE = process.argv.includes('--test-db');
+const BUILD_MODE = process.argv.includes('--build-db');
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const pathSuffix = TEST_MODE ? '-test' : BUILD_MODE ? '-build' : '';
+
+const mongoDbPath = `${__dirname}/../mongodb-data`+pathSuffix;
+
+if (!existsSync(mongoDbPath)) {
+  mkdirSync(mongoDbPath);
+}
+
+(async () => {
+  // async code in where
+
+  // This will create an new instance of "MongoMemoryServer" and automatically start it
+  const mongod = await MongoMemoryReplSet.create({
+    replSet: {
+      count: 3,
+      dbName: TEST_MODE ? 'habitica-test' : 'habitica-dev',
+      dbPath: mongoDbPath,
+      name: 'rs',
+    },
+    instanceOpts: [
+      {
+        port: 27017,
+      },
+      {
+        port: 27018,
+      },
+      {
+        port: 27019,
+      },
+    ],
+    dispose: {
+      cleanup: !BUILD_MODE && !TEST_MODE,
+    }
+  });
+
+  const uri = mongod.getUri();
+
+  console.log(`MongoDB running at ${uri}`, mongod.state);
+
+  // Keep the Node.js process running
+  setInterval(() => {}, 1000);
+})();

test/api/unit/middlewares/rateLimiter.test.js

@@ -54,6 +54,7 @@ describe('rateLimiter middleware', () => {
 
   it('does not throw when there are available points', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
     await attachRateLimiter(req, res, next);
 
@@ -71,6 +72,7 @@ describe('rateLimiter middleware', () => {
 
   it('does not throw when an unknown error is thrown by the rate limiter', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     sandbox.stub(logger, 'error');
     sandbox.stub(RateLimiterMemory.prototype, 'consume')
       .returns(Promise.reject(new Error('Unknown error.')));
@@ -104,6 +106,7 @@ describe('rateLimiter middleware', () => {
   it('limits when LIVELINESS_PROBE_KEY is incorrect', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns('abc');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.query.liveliness = 'das';
@@ -120,6 +123,7 @@ describe('rateLimiter middleware', () => {
   it('limits when LIVELINESS_PROBE_KEY is not set', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns(undefined);
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     await attachRateLimiter(req, res, next);
@@ -135,6 +139,7 @@ describe('rateLimiter middleware', () => {
   it('throws when LIVELINESS_PROBE_KEY is blank', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns('');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.query.liveliness = '';
@@ -150,6 +155,7 @@ describe('rateLimiter middleware', () => {
 
   it('throws when there are no available points remaining', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     // call for 31 times
@@ -173,6 +179,7 @@ describe('rateLimiter middleware', () => {
 
   it('uses the user id if supplied or the ip address', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.ip = 1;
@@ -199,4 +206,51 @@ describe('rateLimiter middleware', () => {
       'X-RateLimit-Reset': sinon.match(Date),
     });
   });
+
+  it('applies increased cost for registration calls with and without user id', async () => {
+    nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_REGISTRATION_COST').returns(3);
+    const attachRateLimiter = requireAgain(pathToRateLimiter).default;
+    req.path = '/api/v4/user/auth/local/register';
+
+    req.ip = 1;
+    await attachRateLimiter(req, res, next);
+
+    req.headers['x-api-user'] = 'user-1';
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    // user id an ip are counted as separate sources
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 27, // 2 calls with user id
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+
+    req.headers['x-api-user'] = undefined;
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 24, // 3 calls with only ip
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+  });
+
+  it('applies increased cost for unauthenticated API calls', async () => {
+    nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(10);
+    const attachRateLimiter = requireAgain(pathToRateLimiter).default;
+
+    req.ip = 1;
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 10,
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+  });
 });

test/api/v3/integration/chat/GET-chat.test.js

@@ -3,6 +3,7 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
+import { model as Group } from '../../../../../website/server/models/group';
 
 describe('GET /groups/:groupId/chat', () => {
   let user;
@@ -37,4 +38,34 @@ describe('GET /groups/:groupId/chat', () => {
       });
     });
   });
+
+  context('public Guild', () => {
+    let group;
+    before(async () => {
+      ({ group } = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'test group',
+          type: 'guild',
+          privacy: 'private',
+        },
+        members: 1,
+        upgradeToGroupPlan: true,
+        chat: [
+          'Hello',
+          'Welcome to the Guild',
+        ],
+      }));
+
+      // Creation API is shut down, we need to simulate an extant public group
+      await Group.updateOne({ _id: group._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
+    });
+
+    it('returns error if user attempts to fetch a sunset Guild', async () => {
+      await expect(user.get(`/groups/${group._id}/chat`)).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
+      });
+    });
+  });
 });

test/api/v3/integration/chat/POST-chat.like.test.js

@@ -4,6 +4,7 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
+import { model as Group } from '../../../../../website/server/models/group';
 
 describe('POST /chat/:chatId/like', () => {
   let user;
@@ -111,4 +112,18 @@ describe('POST /chat/:chatId/like', () => {
         message: t('groupNotFound'),
       });
   });
+
+  it('does not like a message that belongs to a sunset public group', async () => {
+    const message = await anotherUser.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
+
+    // Creation API is shut down, we need to simulate an extant public group
+    await Group.updateOne({ _id: groupWithChat._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
+
+    await expect(user.post(`/groups/${groupWithChat._id}/chat/${message.message.id}/like`))
+      .to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
+      });
+  });
 });

test/api/v3/integration/debug/POST-debug_boss-rage.test.js

@@ -0,0 +1,73 @@
+import nconf from 'nconf';
+import {
+  generateUser,
+  createAndPopulateGroup,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /debug/boss-rage', () => {
+  let user;
+  let nconfStub;
+
+  beforeEach(async () => {
+    user = await generateUser();
+  });
+
+  beforeEach(() => {
+    nconfStub = sandbox.stub(nconf, 'get');
+    nconfStub.withArgs('DEBUG_ENABLED').returns(true);
+    nconfStub.withArgs('BASE_URL').returns('https://example.com');
+  });
+
+  afterEach(() => {
+    nconfStub.restore();
+  });
+
+  it('errors if user is not in a party', async () => {
+    await expect(user.post('/debug/boss-rage'))
+      .to.eventually.be.rejected.and.deep.equal({
+        code: 400,
+        error: 'BadRequest',
+        message: 'User not in a party.',
+      });
+  });
+
+  it('returns error when not in production mode', async () => {
+    nconfStub.withArgs('DEBUG_ENABLED').returns(false);
+
+    await expect(user.post('/debug/boss-rage'))
+      .to.eventually.be.rejected.and.deep.equal({
+        code: 404,
+        error: 'NotFound',
+        message: 'Not found.',
+      });
+  });
+
+  context('user is in a party', async () => {
+    let party;
+
+    beforeEach(async () => {
+      const { group, groupLeader } = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Party',
+          type: 'party',
+        },
+        members: 2,
+      });
+      party = group;
+      user = groupLeader;
+    });
+
+    it('increases boss rage to 50', async () => {
+      await user.post('/debug/boss-rage');
+      await party.sync();
+      expect(party.quest.progress.rage).to.eql(50);
+    });
+
+    it('increases boss rage to 100', async () => {
+      await user.post('/debug/boss-rage');
+      await user.post('/debug/boss-rage');
+      await party.sync();
+      expect(party.quest.progress.rage).to.eql(100);
+    });
+  });
+});

test/api/v3/integration/debug/POST-debug_jumpTime.test.js

@@ -34,9 +34,11 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: 1 })).time);
-    expect(newResultDate.getDate()).to.eql(today.getDate() + 1);
-    expect(newResultDate.getMonth()).to.eql(today.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
+    const tomorrow = new Date(today.valueOf());
+    tomorrow.setDate(today.getDate() + 1);
+    expect(newResultDate.getDate()).to.eql(tomorrow.getDate());
+    expect(newResultDate.getMonth()).to.eql(tomorrow.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(tomorrow.getFullYear());
   });
 
   it('jumps back', async () => {
@@ -45,9 +47,11 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: -1 })).time);
-    expect(newResultDate.getDate()).to.eql(today.getDate() - 1);
-    expect(newResultDate.getMonth()).to.eql(today.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
+    const yesterday = new Date(today.valueOf());
+    yesterday.setDate(today.getDate() - 1);
+    expect(newResultDate.getDate()).to.eql(yesterday.getDate());
+    expect(newResultDate.getMonth()).to.eql(yesterday.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(yesterday.getFullYear());
   });
 
   it('can jump a lot', async () => {

test/api/v3/integration/groups/POST-groups_groupId_join.test.js

@@ -85,22 +85,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 1);
       });
 
-      it('notifies inviting user that their invitation was accepted', async () => {
-        await invitedUser.post(`/groups/${guild._id}/join`);
-
-        const inviter = await user.get('/user');
-        const expectedData = {
-          headerText: t('invitationAcceptedHeader'),
-          bodyText: t('invitationAcceptedBody', {
-            username: invitedUser.auth.local.username,
-            groupName: guild.name,
-          }),
-        };
-
-        expect(inviter.notifications[1].type).to.eql('GROUP_INVITE_ACCEPTED');
-        expect(inviter.notifications[1].data).to.eql(expectedData);
-      });
-
       it('awards Joined Guild achievement', async () => {
         await invitedUser.post(`/groups/${guild._id}/join`);
 
@@ -155,23 +139,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(invitedUser.get('/user')).to.eventually.have.nested.property('party._id', party._id);
       });
 
-      it('notifies inviting user that their invitation was accepted', async () => {
-        await invitedUser.post(`/groups/${party._id}/join`);
-
-        const inviter = await user.get('/user');
-
-        const expectedData = {
-          headerText: t('invitationAcceptedHeader'),
-          bodyText: t('invitationAcceptedBody', {
-            username: invitedUser.auth.local.username,
-            groupName: party.name,
-          }),
-        };
-
-        expect(inviter.notifications[0].type).to.eql('GROUP_INVITE_ACCEPTED');
-        expect(inviter.notifications[0].data).to.eql(expectedData);
-      });
-
       it('clears invitation from user when joining party', async () => {
         await invitedUser.post(`/groups/${party._id}/join`);
 

test/api/v3/integration/tasks/POST-tasks_id_score_direction.test.js

@@ -125,6 +125,90 @@ describe('POST /tasks/:id/score/:direction', () => {
         expect(body.finalLvl).to.eql(user.stats.lvl);
       });
     });
+
+    context('handles drops', async () => {
+      let randomStub;
+
+      afterEach(() => {
+        randomStub.restore();
+      });
+      it('gives user a drop', async () => {
+        user = await generateUser({
+          'stats.gp': 100,
+          'achievements.completedTask': true,
+          'items.eggs': {
+            Wolf: 1,
+          },
+        });
+        randomStub = sandbox.stub(Math, 'random').returns(0.1);
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        const res = await user.post(`/tasks/${task.id}/score/up`);
+        expect(res._tmp.drop).to.be.ok;
+      });
+
+      it('does not give a drop when non-sub drop cap is reached', async () => {
+        user = await generateUser({
+          'stats.gp': 100,
+          'achievements.completedTask': true,
+          'items.eggs': {
+            Wolf: 1,
+          },
+          'items.lastDrop.count': 5,
+        });
+        randomStub = sandbox.stub(Math, 'random').returns(0.1);
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        const res = await user.post(`/tasks/${task.id}/score/up`);
+        expect(res._tmp.drop).to.be.undefined;
+      });
+
+      it('gives a drop when subscriber is over regular cap but under subscriber cap', async () => {
+        user = await generateUser({
+          'stats.gp': 100,
+          'achievements.completedTask': true,
+          'items.eggs': {
+            Wolf: 1,
+          },
+          'items.lastDrop.count': 6,
+          'purchased.plan.customerId': '123',
+        });
+        randomStub = sandbox.stub(Math, 'random').returns(0.1);
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        const res = await user.post(`/tasks/${task.id}/score/up`);
+        expect(res._tmp.drop).to.be.ok;
+      });
+
+      it('does not give a drop when subscriber is at subscriber drop cap', async () => {
+        user = await generateUser({
+          'stats.gp': 100,
+          'achievements.completedTask': true,
+          'items.eggs': {
+            Wolf: 1,
+          },
+          'items.lastDrop.count': 10,
+          'purchased.plan.customerId': '123',
+        });
+        randomStub = sandbox.stub(Math, 'random').returns(0.1);
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        const res = await user.post(`/tasks/${task.id}/score/up`);
+        expect(res._tmp.drop).to.be.undefined;
+      });
+    });
   });
 
   context('todos', () => {

test/api/v3/integration/tasks/groups/POST-tasks_group_id_assign_user_id.test.js

@@ -105,9 +105,9 @@ describe('POST /tasks/:taskId/assign/:memberId', () => {
 
     const groupTask = await user.get(`/tasks/group/${guild._id}`);
 
-    expect(member.notifications.length).to.equal(2);
-    expect(member.notifications[1].type).to.equal('GROUP_TASK_ASSIGNED');
-    expect(member.notifications[1].taskId).to.equal(groupTask._id);
+    const lastNotification = member.notifications[member.notifications.length - 1];
+    expect(lastNotification.type).to.equal('GROUP_TASK_ASSIGNED');
+    expect(lastNotification.taskId).to.equal(groupTask._id);
   });
 
   it('assigns a task to multiple users', async () => {

test/api/v3/integration/tasks/groups/POST-tasks_task_id_unassign.test.js

@@ -89,10 +89,12 @@ describe('POST /tasks/:taskId/unassign/:memberId', () => {
   });
 
   it('removes task assignment notification from unassigned user', async () => {
+    await member.sync();
+    const oldNotificationCount = member.notifications.length;
     await user.post(`/tasks/${task._id}/unassign/${member._id}`);
 
     await member.sync();
-    expect(member.notifications.length).to.equal(1); // mystery items
+    expect(member.notifications.length).to.equal(oldNotificationCount - 1);
   });
 
   it('unassigns a user and only that user from a task', async () => {

test/api/v3/integration/world-state/GET-world-state.test.js

@@ -123,7 +123,7 @@ describe('GET /world-state', () => {
 
       const res = await requester().get('/world-state');
 
-      expect(res.npcImageSuffix).to.equal('winter');
+      expect(res.npcImageSuffix).to.equal('fall');
     });
   });
 });

test/api/v4/user/GET-user.test.js

@@ -40,6 +40,24 @@ describe('GET /user', () => {
     expect(returnedUser.stats).to.not.exist;
   });
 
+  it('returns when ALWAYS_LOADED paths are requested', async () => {
+    const returnedUser = await user.get('/user?userFields=_id,notifications,preferences,auth,flags,permissions');
+
+    expect(returnedUser._id).to.equal(user._id);
+    expect(returnedUser.notifications).to.exist;
+    expect(returnedUser.preferences).to.exist;
+    expect(returnedUser.auth).to.exist;
+    expect(returnedUser.flags).to.exist;
+    expect(returnedUser.permissions).to.exist;
+  });
+
+  it('returns when subpaths paths are requested', async () => {
+    const returnedUser = await user.get('/user?userFields=auth.local.username');
+
+    expect(returnedUser._id).to.equal(user._id);
+    expect(returnedUser.auth.local.username).to.exist;
+  });
+
   it('does not return requested private properties', async () => {
     const returnedUser = await user.get('/user?userFields=apiToken,secret.text');
 

test/common/libs/shops.test.js

@@ -47,15 +47,17 @@ describe('shops', () => {
 
     describe('premium hatching potions', () => {
       it('contains current scheduled premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(2);
+        expect(potions.items.length).to.eql(3);
       });
 
       it('does not contain past scheduled premium hatching potions', async () => {
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length).to.eql(0);
+        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length, 'Aquatic or Celestial found').to.eql(0);
       });
+
       it('returns end date for scheduled premium potions', async () => {
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
         potions.items.forEach(potion => {
@@ -73,9 +75,9 @@ describe('shops', () => {
       });
 
       it('does not contain locked quest premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(2);
+        expect(potions.items.length).to.eql(3);
         expect(potions.items.filter(x => x.key === 'Bronze' || x.key === 'BlackPearl').length).to.eql(0);
       });
 
@@ -341,6 +343,16 @@ describe('shops', () => {
       const backgrounds = shopCategories.find(cat => cat.identifier === 'backgrounds').items;
       expect(backgrounds.length).to.be.greaterThan(0);
     });
+
+    it('does not add an end date to steampunk gear', () => {
+      const categories = shopCategories.filter(cat => cat.identifier.startsWith('30'));
+      categories.forEach(category => {
+        expect(category.end).to.not.exist;
+        category.items.forEach(item => {
+          expect(item.end).to.not.exist;
+        });
+      });
+    });
   });
 
   describe('customizationShop', () => {

test/common/ops/buy/purchase.test.js

@@ -233,6 +233,17 @@ describe('shared.ops.purchase', () => {
       expect(user.items.hatchingPotions[key]).to.eql(1);
     });
 
+    it('purchases event hatching potion', async () => {
+      clock.restore();
+      clock = sandbox.useFakeTimers(moment('2022-04-10').valueOf());
+      const type = 'hatchingPotions';
+      const key = 'Veggie';
+
+      await purchase(user, { params: { type, key } });
+
+      expect(user.items.hatchingPotions[key]).to.eql(1);
+    });
+
     it('purchases hatching potion if user completed quest', async () => {
       const type = 'hatchingPotions';
       const key = 'Bronze';

test/content/events.test.js

@@ -10,7 +10,7 @@ describe('events', () => {
   });
 
   it('returns empty array when no events are active', () => {
-    clock = sinon.useFakeTimers(new Date('2024-01-06'));
+    clock = sinon.useFakeTimers(new Date('2024-01-08'));
     const events = getRepeatingEvents();
     expect(events).to.be.empty;
   });
@@ -27,14 +27,14 @@ describe('events', () => {
   it('returns nye event at beginning of the year', () => {
     clock = sinon.useFakeTimers(new Date('2025-01-01'));
     const events = getRepeatingEvents();
-    expect(events).to.have.length(1);
+    expect(events).to.have.length(2);
     expect(events[0].key).to.equal('nye');
   });
 
   it('returns nye event at end of the year', () => {
     clock = sinon.useFakeTimers(new Date('2024-12-30'));
     const events = getRepeatingEvents();
-    expect(events).to.have.length(1);
+    expect(events).to.have.length(2);
     expect(events[0].key).to.equal('nye');
   });
 });

test/content/food.test.js

@@ -72,7 +72,7 @@ describe('food', () => {
     });
 
     it('sets canDrop for pie if it is pie season', () => {
-      clock = sinon.useFakeTimers(new Date(2024, 2, 14));
+      clock = sinon.useFakeTimers(new Date(2024, 2, 15));
       const datedContent = require('../../website/common/script/content').default;
       each(datedContent.food, foodItem => {
         if (foodItem.key.indexOf('Pie_') !== -1) {

test/content/hatching-potions.test.js

@@ -5,7 +5,7 @@ import {
   expectValidTranslationString,
 } from '../helpers/content.helper';
 
-import { all } from '../../website/common/script/content/hatching-potions';
+import hatchingPotions from '../../website/common/script/content/hatching-potions';
 
 describe('hatchingPotions', () => {
   let clock;
@@ -25,7 +25,7 @@ describe('hatchingPotions', () => {
   potionTypes.forEach(potionType => {
     describe(potionType, () => {
       it('contains basic information about each potion', () => {
-        each(all, (potion, key) => {
+        each(hatchingPotions.all, (potion, key) => {
           expectValidTranslationString(potion.text);
           expectValidTranslationString(potion.notes);
           expect(potion.canBuy).to.be.a('function');
@@ -35,4 +35,20 @@ describe('hatchingPotions', () => {
       });
     });
   });
+
+  it('does not contain unreleased potions', () => {
+    clock = sinon.useFakeTimers(new Date('2024-05-20'));
+    const premiumPotions = hatchingPotions.premium;
+    expect(premiumPotions.Koi).to.not.exist;
+  });
+
+  it('Releases potions when appropriate without needing restarting', () => {
+    clock = sinon.useFakeTimers(new Date('2024-05-20'));
+    const mayPotions = hatchingPotions.premium;
+    clock.restore();
+    clock = sinon.useFakeTimers(new Date('2024-06-20'));
+    const junePotions = hatchingPotions.premium;
+    expect(junePotions.Koi).to.exist;
+    expect(Object.keys(mayPotions).length).to.equal(Object.keys(junePotions).length - 1);
+  });
 });

test/content/index.test.js

@@ -42,23 +42,23 @@ describe('content index', () => {
     expect(Object.keys(juneGear).length, '').to.equal(Object.keys(julyGear).length - 3);
   });
 
-  it('Releases pets gear when appropriate without needing restarting', () => {
+  it('Releases pets when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const junePets = content.petInfo;
     expect(junePets['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-10'));
+    clock = sinon.useFakeTimers(new Date('2024-07-18'));
     const julyPets = content.petInfo;
     expect(julyPets['Chameleon-Base']).to.exist;
     expect(Object.keys(junePets).length, '').to.equal(Object.keys(julyPets).length - 10);
   });
 
-  it('Releases mounts gear when appropriate without needing restarting', () => {
+  it('Releases mounts when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const juneMounts = content.mountInfo;
     expect(juneMounts['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-10'));
+    clock = sinon.useFakeTimers(new Date('2024-07-18'));
     const julyMounts = content.mountInfo;
     expect(julyMounts['Chameleon-Base']).to.exist;
     expect(Object.keys(juneMounts).length, '').to.equal(Object.keys(julyMounts).length - 10);
@@ -131,7 +131,7 @@ describe('content index', () => {
   });
 
   it('marks pie as buyable and droppable during pi day', () => {
-    clock = sinon.useFakeTimers(new Date('2024-03-14'));
+    clock = sinon.useFakeTimers(new Date('2024-03-15'));
     const { food } = content;
     Object.keys(food).forEach(key => {
       if (key === 'Saddle') {

test/content/quests.test.js

@@ -0,0 +1,42 @@
+import {
+  each,
+} from 'lodash';
+import {
+  expectValidTranslationString,
+} from '../helpers/content.helper';
+
+import { quests } from '../../website/common/script/content/quests';
+
+describe('quests', () => {
+  let clock;
+
+  afterEach(() => {
+    if (clock) {
+      clock.restore();
+    }
+  });
+
+  it('contains basic information about each quest', () => {
+    each(quests, (quest, key) => {
+      expectValidTranslationString(quest.text);
+      expectValidTranslationString(quest.notes);
+      expectValidTranslationString(quest.completion);
+      expect(quest.key, key).to.equal(key);
+      expect(quest.category, key).to.be.a('string');
+      if (quest.boss) {
+        expectValidTranslationString(quest.boss.name);
+        expect(quest.boss.hp, key).to.be.a('number');
+        expect(quest.boss.str, key).to.be.a('number');
+      }
+      expect(quest.drop).to.be.an('object');
+      expect(quest.drop.gp, key).to.be.a('number');
+      expect(quest.drop.exp, key).to.be.a('number');
+      if (quest.drop.items) {
+        quest.drop.items.forEach(drop => {
+          expectValidTranslationString(drop.text);
+          expect(drop.type, key).to.exist;
+        });
+      }
+    });
+  });
+});

test/content/schedule.test.js

@@ -7,7 +7,7 @@ import {
 import QUEST_PETS from '../../website/common/script/content/quests/pets';
 import QUEST_HATCHINGPOTIONS from '../../website/common/script/content/quests/potions';
 import QUEST_BUNDLES from '../../website/common/script/content/bundles';
-import { premium } from '../../website/common/script/content/hatching-potions';
+import potions from '../../website/common/script/content/hatching-potions';
 import SPELLS from '../../website/common/script/content/spells';
 import QUEST_SEASONAL from '../../website/common/script/content/quests/seasonal';
 
@@ -18,12 +18,19 @@ function validateMatcher (matcher, checkedDate) {
 
 describe('Content Schedule', () => {
   let switchoverTime;
+  let clock;
 
   beforeEach(() => {
     switchoverTime = nconf.get('CONTENT_SWITCHOVER_TIME_OFFSET') || 0;
     clearCachedMatchers();
   });
 
+  afterEach(() => {
+    if (clock) {
+      clock.restore();
+    }
+  });
+
   it('assembles scheduled items on january 15th', () => {
     const date = new Date('2024-01-15');
     const matchers = getAllScheduleMatchingGroups(date);
@@ -105,8 +112,14 @@ describe('Content Schedule', () => {
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
-  it('sets the end date if its on the release day', () => {
-    const date = new Date('2024-05-07T07:00:00.000Z');
+  it('sets the end date if its on the release day before switchover', () => {
+    const date = new Date('2024-05-07T07:00:00.000+00:00');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+  });
+
+  it('sets the end date if its on the release day after switchover', () => {
+    const date = new Date('2024-05-07T09:00:00.000+00:00');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-06-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
@@ -123,12 +136,54 @@ describe('Content Schedule', () => {
     expect(matchers.seasonalGear.end).to.eql(moment.utc(`2024-06-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
+  it('sets the end date for a winter gala', () => {
+    const date = new Date('2024-12-22');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+  });
+
+  it('uses correct date for first hours of the month', () => {
+    // if the date is checked before CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the previous month
+    const date = new Date('2024-05-01T02:00:00.000Z');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.true;
+    expect(matchers.timeTravelers.match('202404'), '202404').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.false;
+  });
+
+  it('uses correct date after switchover time', () => {
+    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the current
+    const date = new Date('2024-05-01T09:00:00.000Z');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
+    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
+  });
+
+  it('uses UTC timezone', () => {
+    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the current
+    clock = sinon.useFakeTimers(new Date('2024-05-01T05:00:00.000-04:00'));
+    const matchers = getAllScheduleMatchingGroups();
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
+    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
+  });
+
   it('contains content for repeating events', () => {
     const date = new Date('2024-04-15');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.premiumHatchingPotions).to.exist;
-    expect(matchers.premiumHatchingPotions.items.length).to.equal(4);
-    expect(matchers.premiumHatchingPotions.items.indexOf('Garden')).to.not.equal(-1);
+    expect(matchers.premiumHatchingPotions.items.length).to.equal(5);
+    expect(matchers.premiumHatchingPotions.items.indexOf('Veggie')).to.not.equal(-1);
     expect(matchers.premiumHatchingPotions.items.indexOf('Porcelain')).to.not.equal(-1);
   });
 
@@ -167,7 +222,7 @@ describe('Content Schedule', () => {
     });
 
     it('premium hatching potions', () => {
-      const potionKeys = Object.keys(premium);
+      const potionKeys = Object.keys(potions.premium);
       Object.keys(MONTHLY_SCHEDULE).forEach(key => {
         const monthlyPotions = MONTHLY_SCHEDULE[key][21].find(item => item.type === 'premiumHatchingPotions');
         for (const potion of monthlyPotions.items) {
@@ -245,27 +300,33 @@ describe('Content Schedule', () => {
     it('allows sets matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202307')).to.be.true;
-      expect(matcher.match('202207')).to.be.true;
+      expect(matcher.match('202307'), '202307').to.be.true;
+      expect(matcher.match('202207'), '202207').to.be.true;
     });
 
     it('disallows sets not matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202306')).to.be.false;
-      expect(matcher.match('202402')).to.be.false;
+      expect(matcher.match('202306'), '202306').to.be.false;
+      expect(matcher.match('202402'), '202402').to.be.false;
     });
 
     it('disallows sets from current month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202407')).to.be.false;
+      expect(matcher.match('202407'), '202407').to.be.false;
     });
 
     it('disallows sets from the future', () => {
       const date = new Date('2024-07-08');
-      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
-      expect(matcher.match('202507')).to.be.false;
+      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
+      expect(matcher.match('202507'), '202507').to.be.false;
+    });
+
+    it('matches sets released in the earlier half of the year', () => {
+      const date = new Date('2024-07-08');
+      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
+      expect(matcher.match('202401'), '202401').to.be.true;
     });
   });
 });

test/content/time-travelers.test.js

@@ -45,7 +45,7 @@ describe('time-travelers store', () => {
 
   describe('on may 1st', () => {
     beforeEach(() => {
-      date = new Date('2024-05-01');
+      date = new Date('2024-05-01T09:00:00.000Z');
     });
     it('returns the correct gear', () => {
       const items = timeTravelers.timeTravelerStore(user, date);

test/helpers/mongo.js

@@ -21,6 +21,7 @@ export async function getProperty (collectionName, id, path) {
 // Specifically helpful for the GET /groups tests,
 // resets the db to an empty state and creates a tavern document
 export async function resetHabiticaDB () {
+  console.info('Resetting Habitica DB');
   const groups = mongoose.connection.db.collection('groups');
   const users = mongoose.connection.db.collection('users');
   return mongoose.connection.dropDatabase()

website/client/package-lock.json

@@ -23,7 +23,6 @@
         "bootstrap": "^4.6.0",
         "bootstrap-vue": "^2.23.1",
         "core-js": "^3.33.1",
-        "dompurify": "^3.0.3",
         "eslint": "7.32.0",
         "eslint-config-habitrpg": "6.2.0",
         "eslint-plugin-mocha": "5.3.0",
@@ -39,7 +38,6 @@
         "sass": "^1.63.4",
         "sass-loader": "^14.1.1",
         "sinon": "^17.0.1",
-        "smartbanner.js": "^1.19.3",
         "stopword": "^2.0.8",
         "timers-browserify": "^2.0.12",
         "uuid": "^9.0.1",
@@ -59,7 +57,7 @@
         "chai": "^5.1.0",
         "inspectpack": "^4.7.1",
         "terser-webpack-plugin": "^5.3.10",
-        "webpack": "^5.89.0"
+        "webpack": "^5.94.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2307,15 +2305,6 @@
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3129,9 +3118,9 @@
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA=="
     },
     "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
-      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
+      "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
@@ -3148,9 +3137,9 @@
       "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
+      "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw=="
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.6",
@@ -3168,14 +3157,14 @@
       "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
-      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
+      "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6"
+        "@webassemblyjs/wasm-gen": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/ieee754": {
@@ -3200,26 +3189,26 @@
       "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
-      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
+      "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
-        "@webassemblyjs/helper-wasm-section": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-opt": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6",
-        "@webassemblyjs/wast-printer": "1.11.6"
+        "@webassemblyjs/helper-wasm-section": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-opt": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1",
+        "@webassemblyjs/wast-printer": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
-      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
+      "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
         "@webassemblyjs/ieee754": "1.11.6",
         "@webassemblyjs/leb128": "1.11.6",
@@ -3227,22 +3216,22 @@
       }
     },
     "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
-      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
+      "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
-        "@webassemblyjs/helper-buffer": "1.11.6",
-        "@webassemblyjs/wasm-gen": "1.11.6",
-        "@webassemblyjs/wasm-parser": "1.11.6"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1"
       }
     },
     "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
-      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
+      "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/ast": "1.12.1",
         "@webassemblyjs/helper-api-error": "1.11.6",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
         "@webassemblyjs/ieee754": "1.11.6",
@@ -3251,11 +3240,11 @@
       }
     },
     "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.6",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
-      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
+      "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/ast": "1.12.1",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -3326,10 +3315,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -4046,11 +4035,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5398,11 +5387,6 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/dompurify": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
-      "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w=="
-    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -5496,9 +5480,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6871,9 +6855,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9008,11 +8992,11 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -12095,17 +12079,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/smartbanner.js": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.22.0.tgz",
-      "integrity": "sha512-JhERLgwEPuzVdwAHds1J6txWBVq9BwmlAn+5VicrAfIOMO3ehNA7VHu8IIJNnW1LsElSCaLWxjdLjlEwLDqAvA==",
-      "engines": {
-        "node": ">=10.24.1 <22.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ain"
-      }
-    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -13342,9 +13315,9 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -13378,33 +13351,32 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.89.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
-      "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
-        "@types/estree": "^1.0.0",
-        "@webassemblyjs/ast": "^1.11.5",
-        "@webassemblyjs/wasm-edit": "^1.11.5",
-        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.12.1",
+        "@webassemblyjs/wasm-edit": "^1.12.1",
+        "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
-        "browserslist": "^4.14.5",
+        "acorn-import-attributes": "^1.9.5",
+        "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.15.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
         "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.9",
+        "graceful-fs": "^4.2.11",
         "json-parse-even-better-errors": "^2.3.1",
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
         "schema-utils": "^3.2.0",
         "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.7",
-        "watchpack": "^2.4.0",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.1",
         "webpack-sources": "^3.2.3"
       },
       "bin": {

website/client/package.json

@@ -25,7 +25,6 @@
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "core-js": "^3.33.1",
-    "dompurify": "^3.0.3",
     "eslint": "7.32.0",
     "eslint-config-habitrpg": "6.2.0",
     "eslint-plugin-mocha": "5.3.0",
@@ -41,7 +40,6 @@
     "sass": "^1.63.4",
     "sass-loader": "^14.1.1",
     "sinon": "^17.0.1",
-    "smartbanner.js": "^1.19.3",
     "stopword": "^2.0.8",
     "timers-browserify": "^2.0.12",
     "uuid": "^9.0.1",
@@ -61,6 +59,6 @@
     "chai": "^5.1.0",
     "inspectpack": "^4.7.1",
     "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.89.0"
+    "webpack": "^5.94.0"
   }
 }

website/client/public/index.html

@@ -7,18 +7,6 @@
     <title>Habitica - Gamify Your Life</title>
     <meta name="description" content="Habitica is a free habit and productivity app that treats your real life like a game. Habitica can help you achieve your goals to become healthy and happy.">
     <meta name="keywords" content="Habits,Goals,Todo,Gamification,Health,Fitness,School,Work">
-    <meta name="smartbanner:title" content="Habitica">
-    <meta name="smartbanner:author" content="HabitRPG, Inc.">
-    <meta name="smartbanner:price" content="FREE">
-    <meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
-    <meta name="smartbanner:price-suffix-google" content=" - In Google Play">
-    <meta name="smartbanner:icon-apple" content="/static/presskit/Logo/iOS.png">
-    <meta name="smartbanner:icon-google" content="/static/presskit/Logo/Android.png">
-    <meta name="smartbanner:button" content="VIEW">
-    <meta name="smartbanner:button-url-apple" content="https://itunes.apple.com/us/app/habitica-gamified-taskmanager/id994882113">
-    <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica">
-    <meta name="smartbanner:enabled-platforms" content="android,ios">
-    <meta name="smartbanner:hide-ttl" content="2592000000">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
     <link rel="shortcut icon" sizes="48x48" href="/static/icons/favicon.ico">
     <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">

website/client/src/app.vue

@@ -27,73 +27,15 @@
         </div>
       </div>
     </div>
-    <div
-      id="app"
-      :class="{
-        'casting-spell': castingSpell,
-      }"
-    >
-      <!-- <banned-account-modal /> -->
-      <amazon-payments-modal v-if="!isStaticPage" />
-      <payments-success-modal />
-      <sub-cancel-modal-confirm v-if="isUserLoaded" />
-      <sub-canceled-modal v-if="isUserLoaded" />
-      <bug-report-modal v-if="isUserLoaded" />
-      <bug-report-success-modal v-if="isUserLoaded" />
-      <external-link-modal />
-      <birthday-modal />
-      <snackbars />
-      <router-view v-if="!isUserLoggedIn || isStaticPage" />
-      <template v-else>
-        <template v-if="isUserLoaded">
-          <chat-banner />
-          <damage-paused-banner />
-          <gems-promo-banner />
-          <gift-promo-banner />
-          <birthday-banner />
-          <notifications-display />
-          <app-menu />
-          <div
-            class="container-fluid"
-            :class="{'no-margin': noMargin}"
-          >
-            <app-header />
-            <buyModal
-              :item="selectedItemToBuy || {}"
-              :with-pin="true"
-              :generic-purchase="genericPurchase(selectedItemToBuy)"
-              @buyPressed="customPurchase($event)"
-            />
-            <selectMembersModal
-              :item="selectedSpellToBuy || {}"
-              :group="user.party"
-              @memberSelected="memberSelected($event)"
-            />
-            <div :class="{sticky: user.preferences.stickyHeader}">
-              <router-view />
-            </div>
-          </div>
-          <app-footer v-if="!hideFooter" />
-          <audio
-            id="sound"
-            ref="sound"
-            autoplay="autoplay"
-          ></audio>
-        </template>
-      </template>
-    </div>
+    <snackbars />
+    <router-view v-if="!isUserLoggedIn || isStaticPage" />
+    <user-main v-else />
   </div>
 </template>
 
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
-  #app {
-    display: flex;
-    flex-direction: column;
-    overflow-x: hidden;
-  }
-
   #loading-screen-inapp {
     #melior {
       color: $white;
@@ -163,68 +105,20 @@
 
 <script>
 import axios from 'axios';
-import { loadProgressBar } from 'axios-progress-bar';
 
-import birthdayModal from '@/components/news/birthdayModal';
-import AppMenu from './components/header/menu';
-import AppHeader from './components/header/index';
-import ChatBanner from './components/header/banners/chatBanner';
-import DamagePausedBanner from './components/header/banners/damagePaused';
-import GemsPromoBanner from './components/header/banners/gemsPromo';
-import GiftPromoBanner from './components/header/banners/giftPromo';
-import BirthdayBanner from './components/header/banners/birthdayBanner';
-import AppFooter from './components/appFooter';
-import notificationsDisplay from './components/notifications';
-import snackbars from './components/snackbars/notifications';
-import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
-import BuyModal from './components/shops/buyModal.vue';
-import SelectMembersModal from '@/components/selectMembersModal.vue';
-import notifications from '@/mixins/notifications';
-import { setup as setupPayments } from '@/libs/payments';
-import amazonPaymentsModal from '@/components/payments/amazonModal';
-import paymentsSuccessModal from '@/components/payments/successModal';
-import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
-import subCanceledModal from '@/components/payments/canceledModal';
-import externalLinkModal from '@/components/externalLinkModal.vue';
-
-import spellsMixin from '@/mixins/spells';
-import {
-  CONSTANTS,
-  getLocalSetting,
-  removeLocalSetting,
-} from '@/libs/userlocalManager';
-
-const bugReportModal = () => import(/* webpackChunkName: "bug-report-modal" */'@/components/bugReportModal');
-const bugReportSuccessModal = () => import(/* webpackChunkName: "bug-report-success-modal" */'@/components/bugReportSuccessModal');
+import { mapState } from '@/libs/store';
+import userMain from '@/pages/user-main';
+import snackbars from '@/components/snackbars/notifications';
 
 const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   name: 'App',
   components: {
-    AppMenu,
-    AppHeader,
-    AppFooter,
-    birthdayModal,
-    ChatBanner,
-    DamagePausedBanner,
-    GemsPromoBanner,
-    GiftPromoBanner,
-    BirthdayBanner,
-    notificationsDisplay,
     snackbars,
-    BuyModal,
-    SelectMembersModal,
-    amazonPaymentsModal,
-    paymentsSuccessModal,
-    subCancelModalConfirm,
-    subCanceledModal,
-    bugReportModal,
-    bugReportSuccessModal,
-    externalLinkModal,
+    userMain,
   },
-  mixins: [notifications, spellsMixin],
   data () {
     return {
       selectedItemToBuy: null,
@@ -238,71 +132,25 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isUserLoggedIn', 'browserTimezoneUtcOffset', 'isUserLoaded', 'notificationsRemoved']),
+    ...mapState(['isUserLoggedIn', 'isUserLoaded', 'notificationsRemoved']),
     ...mapState({ user: 'user.data' }),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
     },
-    castingSpell () {
-      return this.$store.state.spellOptions.castingSpell;
-    },
-    noMargin () {
-      return ['privateMessages'].includes(this.$route.name);
-    },
-    hideFooter () {
-      return ['privateMessages'].includes(this.$route.name);
-    },
   },
   created () {
-    this.$root.$on('playSound', sound => {
-      const theme = this.user.preferences.sound;
-
-      if (!theme || theme === 'off') {
-        return;
-      }
-
-      const file = `/static/audio/${theme}/${sound}`;
-
-      if (this.audioSuffix === null) {
-        this.audioSource = document.createElement('source');
-        if (this.$refs.sound.canPlayType('audio/ogg')) {
-          this.audioSuffix = '.ogg';
-          this.audioSource.type = 'audio/ogg';
-        } else {
-          this.audioSuffix = '.mp3';
-          this.audioSource.type = 'audio/mp3';
-        }
-        this.audioSource.src = file + this.audioSuffix;
-        this.$refs.sound.appendChild(this.audioSource);
-      } else {
-        this.audioSource.src = file + this.audioSuffix;
-      }
-
-      this.$refs.sound.load();
+    // Setup listener for title
+    this.$store.watch(state => state.title, title => {
+      document.title = title;
     });
-
-    // @TODO: I'm not sure these should be at the app level.
-    // Can we move these back into shop/inventory or maybe they need a lateral move?
-    this.$root.$on('buyModal::showItem', item => {
-      this.selectedItemToBuy = item;
-      this.$root.$emit('bv::show::modal', 'buy-modal');
-    });
-
-    this.$root.$on('bv::modal::hidden', event => {
-      if (event.componentId === 'buy-modal') {
-        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+    this.$store.watch(state => state.isUserLoaded, () => {
+      if (this.isUserLoaded) {
+        this.hideLoadingScreen();
       }
     });
-
-    this.$root.$on('selectMembersModal::showItem', item => {
-      this.selectedSpellToBuy = item;
-      this.$root.$emit('bv::show::modal', 'select-member-modal');
-    });
-
-    // @TODO split up this file, it's too big
-
-    loadProgressBar({
-      showSpinner: false,
+    this.$nextTick(() => {
+      // Load external scripts after the app has been rendered
+      Analytics.load();
     });
 
     axios.interceptors.response.use(response => { // Set up Response interceptors
@@ -414,79 +262,20 @@ export default {
 
       return Promise.reject(error);
     });
-
-    // Setup listener for title
-    this.$store.watch(state => state.title, title => {
-      document.title = title;
-    });
-    this.$nextTick(() => {
-      // Load external scripts after the app has been rendered
-      Analytics.load();
-    });
-
-    if (this.isUserLoggedIn && !this.isStaticPage) {
-      // Load the user and the user tasks
-      Promise.all([
-        this.$store.dispatch('user:fetch'),
-        this.$store.dispatch('tasks:fetchUserTasks'),
-      ]).then(() => {
-        this.$store.state.isUserLoaded = true;
-        Analytics.setUser();
-        Analytics.updateUser();
-        return axios.get(
-          '/api/v4/i18n/browser-script',
-          {
-            language: this.user.preferences.language,
-            headers: {
-              'Cache-Control': 'no-cache',
-              Pragma: 'no-cache',
-              Expires: '0',
-            },
-          },
-        );
-      }).then(() => {
-        const i18nData = window && window['habitica-i18n'];
-        this.$loadLocale(i18nData);
-        this.hideLoadingScreen();
-
-        // Adjust the timezone offset
-        const browserTimezoneOffset = -this.browserTimezoneUtcOffset;
-        if (this.user.preferences.timezoneOffset !== browserTimezoneOffset) {
-          this.$store.dispatch('user:set', {
-            'preferences.timezoneOffset': browserTimezoneOffset,
-          });
-        }
-
-        let appState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
-        if (appState) {
-          appState = JSON.parse(appState);
-          if (appState.paymentCompleted) {
-            removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
-            this.$root.$emit('habitica:payment-success', appState);
-          }
-        }
-        this.$nextTick(() => {
-          // Load external scripts after the app has been rendered
-          setupPayments();
-        });
-      }).catch(err => {
-        console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
-      });
-    } else {
-      this.hideLoadingScreen();
-    }
-  },
-  beforeDestroy () {
-    this.$root.$off('playSound');
-    this.$root.$off('buyModal::showItem');
-    this.$root.$off('selectMembersModal::showItem');
   },
   mounted () {
     // Remove the index.html loading screen and now show the inapp loading
     const loadingScreen = document.getElementById('loading-screen');
     if (loadingScreen) document.body.removeChild(loadingScreen);
+
+    if (this.isStaticPage || !this.isUserLoggedIn) {
+      this.hideLoadingScreen();
+    }
   },
   methods: {
+    hideLoadingScreen () {
+      this.loading = false;
+    },
     checkForBannedUser (error) {
       const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
       const parseSettings = JSON.parse(AUTH_SETTINGS);
@@ -507,57 +296,9 @@ export default {
       this.$store.dispatch('auth:logout', { redirectToLogin: true });
       return true;
     },
-    itemSelected (item) {
-      this.selectedItemToBuy = item;
-    },
-    genericPurchase (item) {
-      if (!item) return false;
-
-      if (['card', 'debuffPotion'].includes(item.purchaseType)) return false;
-
-      return true;
-    },
-    customPurchase (item) {
-      if (item.purchaseType === 'card') {
-        this.selectedSpellToBuy = item;
-
-        // hide the dialog
-        this.$root.$emit('bv::hide::modal', 'buy-modal');
-        // remove the dialog from our modal-stack,
-        // the default hidden event is delayed
-        this.$root.$emit('bv::modal::hidden', {
-          target: {
-            id: 'buy-modal',
-          },
-        });
-
-        this.$root.$emit('bv::show::modal', 'select-member-modal');
-      }
-
-      if (item.purchaseType === 'debuffPotion') {
-        this.castStart(item, this.user);
-      }
-    },
-    async memberSelected (member) {
-      await this.castStart(this.selectedSpellToBuy, member);
-
-      this.selectedSpellToBuy = null;
-
-      if (this.user.party._id) {
-        this.$store.dispatch('party:getMembers', { forceLoad: true });
-      }
-
-      this.$root.$emit('bv::hide::modal', 'select-member-modal');
-    },
-    hideLoadingScreen () {
-      this.loading = false;
-    },
   },
 };
 </script>
 
-<style src="intro.js/minified/introjs.min.css"></style>
-<style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
 <style src="@/assets/scss/sprites.scss" lang="scss"></style>
-<style src="smartbanner.js/dist/smartbanner.min.css"></style>

website/client/src/assets/scss/button.scss

@@ -174,6 +174,30 @@
   }
 }
 
+.btn-warning {
+  background: $orange-10;
+  color: $white !important;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: $orange-100;
+    color: $white;
+  }
+
+  &:focus {
+    background: $orange-10;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $orange-10;
+  }
+}
+
 .btn-success {
   background: $green-50;
   border: 1px solid transparent;

website/client/src/assets/scss/colors.scss

@@ -78,3 +78,15 @@ $gold-color: #FFA624;
 $hourglass-color: #2995CD;
 
 $purple-task: #925cf3;
+
+.gray-200 {
+  color: $gray-200 !important;
+}
+
+.purple-300 {
+  color: $purple-300 !important;
+}
+
+.white {
+  color: $white !important;
+}

website/client/src/components/achievements/firstDrops.vue

@@ -23,16 +23,14 @@
         {{ $t('foundNewItems') }}
       </h2>
       <div class="d-flex justify-content-center">
-        <div
+        <Sprite
           class="item-box ml-auto mr-3"
-          :class="eggClass"
-        >
-        </div>
-        <div
+          :image-name="eggClass"
+        />
+        <Sprite
           class="item-box mr-auto"
-          :class="potionClass"
-        >
-        </div>
+          :image-name="potionClass"
+        />
       </div>
       <p
         v-once
@@ -103,8 +101,12 @@
 
 <script>
 import closeIcon from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   data () {
     return {
       icons: Object.freeze({

website/client/src/components/achievements/genericAchievement.vue

@@ -19,10 +19,10 @@
       </div>
       <div class="inner-content">
         <div class="achievement-background d-flex align-items-center">
-          <div
+          <Sprite
             class="icon"
-            :class="achievementClass"
-          ></div>
+            :image-name="achievementClass"
+          />
         </div>
         <h4
           class="title"
@@ -99,8 +99,12 @@
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
 import svgClose from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: ['data'],
   data () {
     return {

website/client/src/components/achievements/questCompleted.vue

@@ -10,10 +10,10 @@
     @hide="hide"
   >
     <div class="modal-body text-center">
-      <div
+      <Sprite
         class="quest"
-        :class="`quest_${user.party.quest.completed}`"
-      ></div>
+        :image-name="`quest_${user.party.quest.completed}`"
+      />
       <p
         v-if="questData.completion && typeof questData.completion === 'function'"
         v-html="questData.completion()"
@@ -58,10 +58,12 @@ import percent from '@/../../common/script/libs/percent';
 import { MAX_HEALTH as maxHealth } from '@/../../common/script/constants';
 import { mapState } from '@/libs/store';
 import QuestRewards from '../shops/quests/questRewards';
+import Sprite from '../ui/sprite';
 
 export default {
   components: {
     QuestRewards,
+    Sprite,
   },
   data () {
     return {

website/client/src/components/achievements/questInvitation.vue

@@ -11,10 +11,11 @@
     </div>
     <div class="modal-body">
       <div class="pull-right-sm text-center">
-        <div
-          class="col-centered"
-          :class="`quest_${quests[user.party.quest.key].key}`"
-        ></div>
+        <div class="col-centered">
+          <Sprite
+            :image-name="`quest_${quests[user.party.quest.key].key}`"
+          />
+        </div>
         <div ng-if="quests[user.party.quest.key].boss">
           <h4>{{ quests[user.party.quest.key].boss.name() }}</h4>
           <p>
@@ -93,8 +94,12 @@ import * as quests from '@/../../common/script/content/quests';
 import percent from '@/../../common/script/libs/percent';
 import { MAX_HEALTH as maxHealth } from '@/../../common/script/constants';
 import { mapState } from '@/libs/store';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: [
+    Sprite,
+  ],
   data () {
     return {
       maxHealth,

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

@@ -1,30 +1,41 @@
 <template>
-  <div class="row standard-page">
-    <div class="well col-12">
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="admin-panel-content">
       <h1>Admin Panel</h1>
-
-      <div>
-        <form
-          class="form-inline"
-          @submit.prevent="loadHero(userIdentifier)"
-        >
+      <form
+        class="form-inline"
+        @submit.prevent="searchUsers(userIdentifier)"
+      >
+        <div class="input-group col pl-0 pr-0">
           <input
             v-model="userIdentifier"
-            class="form-control uidField"
+            class="form-control"
             type="text"
-            :placeholder="'User ID or Username; blank for your account'"
+            :placeholder="'UserID, username, email, or leave blank for your account'"
           >
-          <input
-            type="submit"
-            value="Load User"
-            class="btn btn-secondary"
-          >
-        </form>
-      </div>
+          <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>
 
-      <div>
-        <router-view @changeUserIdentifier="changeUserIdentifier" />
-      </div>
+      <router-view
+        class="mt-3"
+        @changeUserIdentifier="changeUserIdentifier"
+      />
     </div>
   </div>
 </template>
@@ -33,6 +44,15 @@
   .uidField {
     min-width: 45ch;
   }
+
+  .input-group-append {
+    width:auto;
+  }
+
+  .admin-panel-content {
+    flex: 0 0 800px;
+    max-width: 800px;
+  }
 </style>
 
 <script>
@@ -62,7 +82,24 @@ export default {
       // (useful if we want to re-fetch the user after making changes).
       this.userIdentifier = newId;
     },
-    async loadHero (userIdentifier) {
+    async searchUsers (userIdentifier) {
+      if (!userIdentifier || userIdentifier === '') {
+        this.loadUser();
+        return;
+      }
+      this.$router.push({
+        name: 'adminPanelSearch',
+        params: { userIdentifier },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          // the admin has requested that the same user be displayed again so reload the page
+          // (e.g., if they changed their mind about changes they were making)
+          this.$router.go();
+        }
+      });
+    },
+
+    async loadUser (userIdentifier) {
       const id = userIdentifier || this.user._id;
 
       this.$router.push({

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

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div
+      v-if="noUsersFound"
+      class="alert alert-warning"
+      role="alert"
+    >
+      Could not find any matching users.
+    </div>
+    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
+    <div
+      v-if="users.length > 0"
+      class="list-group"
+    >
+      <a
+        v-for="user in users"
+        :key="user._id"
+        href="#"
+        class="list-group-item list-group-item-action"
+        @click="loadUser(user._id)"
+      >
+        <div class="d-flex w-100 justify-content-between">
+          <h5 class="mb-1">{{ user.profile.name }}</h5>
+          <small>{{ user._id }}</small>
+        </div>
+        <p
+          class="mb-1"
+          :class="{'highlighted-value': matchValueToIdentifier(user.auth.local.username)}"
+        >
+          @{{ user.auth.local.username }}</p>
+        <p class="mb-0">
+          <span
+            v-for="email in userEmails(user)"
+            :key="email"
+            :class="{'highlighted-value': matchValueToIdentifier(email)}"
+          >
+            {{ email }}
+          </span>
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .highlighted-value {
+    font-weight: bold;
+  }
+</style>
+
+<script>
+import VueRouter from 'vue-router';
+import { mapState } from '@/libs/store';
+import LoadingSpinner from '../ui/loadingSpinner';
+
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+export default {
+  components: {
+    LoadingSpinner,
+  },
+  data () {
+    return {
+      userIdentifier: '',
+      users: [],
+      noUsersFound: false,
+      isSearching: false,
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  beforeRouteUpdate (to, from, next) {
+    this.userIdentifier = to.params.userIdentifier;
+    next();
+  },
+  watch: {
+    userIdentifier () {
+      this.isSearching = true;
+      this.$store.dispatch('adminPanel:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
+        this.isSearching = false;
+        if (users.length === 1) {
+          this.loadUser(users[0]._id);
+        } else {
+          const matchIndex = users.findIndex(user => this.isExactMatch(user));
+          if (matchIndex !== -1) {
+            users.splice(0, 0, users.splice(matchIndex, 1)[0]);
+          }
+          this.users = users;
+          this.noUsersFound = users.length === 0;
+        }
+      });
+      this.$emit('changeUserIdentifier', this.userIdentifier); // change user identifier in Admin Panel's form
+    },
+  },
+  mounted () {
+    this.userIdentifier = this.$route.params.userIdentifier;
+  },
+  methods: {
+    matchValueToIdentifier (value) {
+      return value.toLowerCase().includes(this.userIdentifier.toLowerCase());
+    },
+    userEmails (user) {
+      const allEmails = [];
+      if (user.auth.local.email) allEmails.push(user.auth.local.email);
+      if (user.auth.google && user.auth.google.emails) {
+        const emails = user.auth.google.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      if (user.auth.apple && user.auth.apple.emails) {
+        const emails = user.auth.apple.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      if (user.auth.facebook && user.auth.facebook.emails) {
+        const emails = user.auth.facebook.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      return allEmails;
+    },
+    findSocialEmails (emails) {
+      if (typeof emails === 'string') return [emails];
+      if (Array.isArray(emails)) return emails.map(email => email.value);
+      if (typeof emails === 'object') return [emails.value];
+      return [];
+    },
+    async loadUser (userIdentifier) {
+      const id = userIdentifier || this.user._id;
+
+      this.$router.push({
+        name: 'adminPanelUser',
+        params: { userIdentifier: id },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          // the admin has requested that the same user be displayed again so reload the page
+          // (e.g., if they changed their mind about changes they were making)
+          this.$router.go();
+        }
+      });
+    },
+    isExactMatch (user) {
+      return user._id === this.userIdentifier
+        || user.auth.local.username === this.userIdentifier
+        || (user.auth.google && user.auth.google.emails && user.auth.google.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1)
+        || (user.auth.apple && user.auth.apple.emails && user.auth.apple.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1)
+        || (user.auth.facebook && user.auth.facebook.emails && user.auth.facebook.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1);
+    },
+  },
+};
+</script>

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Achievements
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Achievements
-    </h3>
-    <div v-if="expand">
       <ul>
         <li
           v-for="item in achievements"

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Current Avatar Appearance, Drop Count Today
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Current Avatar Appearance, Drop Count Today
-    </h3>
-    <div v-if="expand">
       <div>Drops Today: {{ items.lastDrop.count }}</div>
       <div>Most Recent Drop: {{ items.lastDrop.date | formatDate }}</div>
       <div>Use Costume: {{ preferences.costume ? 'on' : 'off' }}</div>

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

@@ -1,160 +1,129 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Contributor Details
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Contributor details', clearData: true})">
-        <div>
-          <label>Permissions</label>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.fullAccess"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Full Admin Access (Allows access to everything. EVERYTHING)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.userSupport"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              User Support (Access this form, access purchase history)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.news"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              News poster (Bailey CMS)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.moderator"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Community Moderator (ban and mute users, access chat flags, manage social spaces)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.challengeAdmin"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Challenge Admin (can create official habitica challenges and admin all challenges)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.coupons"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Coupon Creator (can manage coupon codes)
-            </label>
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Title</label>
-          <input
-            v-model="hero.contributor.text"
-            class="form-control textField"
-            type="text"
-          >
-          <small>
-            Common titles:
-            <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
-              Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
-            <br>
-            Rare titles:
-            Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
-            Statistician, Tinker, Transcriber, Troubadour.
-          </small>
-        </div>
-        <div class="form-group form-inline">
-          <label>Tier</label>
-          <input
-            v-model="hero.contributor.level"
-            class="form-control levelField"
-            type="number"
-          >
-          <small>
-            1-7 for normal contributors, 8 for moderators, 9 for staff.
-            This determines which items, pets, mounts are available, and name-tag coloring.
-            Tiers 8 and 9 are automatically given admin status.
-          </small>
-        </div>
-        <div
-          v-if="hero.secret.text"
-          class="form-group"
+  <form @submit.prevent="saveHero({ hero, msg: 'Contributor details', clearData: true })">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{ 'open': expand }"
+          @click="expand = !expand"
         >
-          <label>Moderation Notes</label>
+          Contributor Details
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
+        <div class="mb-4">
+          <h3 class="mt-0">
+            Permissions
+          </h3>
           <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+            v-for="permission in permissionList"
+            :key="permission.key"
+            class="col-sm-9 offset-sm-3"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                v-model="hero.permissions[permission.key]"
+                :disabled="!hasPermission(user, permission.key)"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label class="custom-control-label">
+                {{ permission.name }}<br>
+                <small class="text-secondary">{{ permission.description }}</small>
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Contributions</label>
-          <textarea
-            v-model="hero.contributor.contributions"
-            class="form-control"
-            cols="5"
-            rows="5"
-          ></textarea>
-          <div
-            v-markdown="hero.contributor.contributions"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Title</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.contributor.text"
+              class="form-control textField"
+              type="text"
+            >
+            <small>
+              Common titles:
+              <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
+                Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
+              <br>
+              Rare titles:
+              Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
+              Statistician, Tinker, Transcriber, Troubadour.
+            </small>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Edit Moderation Notes</label>
-          <textarea
-            v-model="hero.secret.text"
-            class="form-control"
-            cols="5"
-            rows="3"
-          ></textarea>
-          <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Tier</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.contributor.level"
+              class="form-control levelField"
+              type="number"
+            >
+            <small>
+              1-7 for normal contributors, 8 for moderators, 9 for staff.
+              This determines which items, pets, mounts are available, and name-tag coloring.
+            </small>
+          </div>
         </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Contributions</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.contributor.contributions"
+              class="form-control"
+              cols="5"
+              rows="5"
+            >
+              </textarea>
+            <div
+              v-markdown="hero.contributor.contributions"
+              class="markdownPreview"
+            ></div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.secret.text"
+              class="form-control"
+              cols="5"
+              rows="3"
+            ></textarea>
+            <div
+              v-markdown="hero.secret.text"
+              class="markdownPreview"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
-          value="Save and Clear Data"
-          class="btn btn-primary"
+          value="Save"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>
-  .levelField {
-    min-width: 10ch;
-  }
-  .textField {
-    min-width: 50ch;
-  }
+.levelField {
+  min-width: 10ch;
+}
+
+.textField {
+  min-width: 50ch;
+}
 </style>
 
 <script>
@@ -164,6 +133,39 @@ import saveHero from '../mixins/saveHero';
 import { mapState } from '@/libs/store';
 import { userStateMixin } from '../../../mixins/userState';
 
+const permissionList = [
+  {
+    key: 'fullAccess',
+    name: 'Full Admin Access',
+    description: 'Allows access to everything. EVERYTHING',
+  },
+  {
+    key: 'userSupport',
+    name: 'User Support',
+    description: 'Access this form, access purchase history',
+  },
+  {
+    key: 'news',
+    name: 'News Poster',
+    description: 'Bailey CMS',
+  },
+  {
+    key: 'moderator',
+    name: 'Community Moderator',
+    description: 'Ban and mute users, access chat flags, manage social spaces',
+  },
+  {
+    key: 'challengeAdmin',
+    name: 'Challenge Admin',
+    description: 'Can create official habitica challenges and admin all challenges',
+  },
+  {
+    key: 'coupons',
+    name: 'Coupon Creator',
+    description: 'Can manage coupon codes',
+  },
+];
+
 function resetData (self) {
   self.expand = self.hero.contributor.level;
 }
@@ -192,6 +194,7 @@ export default {
   data () {
     return {
       expand: false,
+      permissionList,
     };
   },
   watch: {

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

@@ -1,145 +1,187 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Timestamps, Time Zone, Authentication, Email Address
-      <span
-        v-if="errorsOrWarningsExist"
-      >- ERRORS / WARNINGS EXIST</span>
-    </h3>
-    <div v-if="expand">
-      <p
-        v-if="errorsOrWarningsExist"
-        class="errorMessage"
+  <form @submit.prevent="saveHero({ hero, msg: 'Authentication' })">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          Timestamps, Time Zone, Authentication, Email Address
+          <span
+            v-if="errorsOrWarningsExist"
+          >- ERRORS / WARNINGS EXIST</span>
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
       >
-        See error(s) below.
-      </p>
-
-      <div>
-        Account created:
-        <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
-      </div>
-      <div v-if="hero.flags.thirdPartyTools">
-        User has employed <strong>third party tools</strong>. Last known usage:
-        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
-      </div>
-      <div v-if="cronError">
-        "lastCron" value:
-        <strong>{{ hero.lastCron | formatDate }}</strong>
-        <br>
-        <span class="errorMessage">
-          ERROR: cron probably crashed before finishing
-          ("auth.timestamps.loggedin" and "lastCron" dates are different).
-        </span>
-      </div>
-      <div class="form-inline">
-        <div>
-          Most recent cron:
-          <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
-          ("auth.timestamps.loggedin")
-        </div>
-        <button
-          class="btn btn-primary ml-2"
-          @click="resetCron()"
+        <p
+          v-if="errorsOrWarningsExist"
+          class="errorMessage"
         >
-          Reset Cron to Yesterday
-        </button>
-      </div>
-      <div class="subsection-start">
-        Time zone:
-        <strong>{{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
-      </div>
-      <div>
-        Custom Day Start time (CDS):
-        <strong>{{ hero.preferences.dayStart }}</strong>
-      </div>
-      <div v-if="timezoneDiffError || timezoneMissingError">
-        Time zone at previous cron:
-        <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
+          See error(s) below.
+        </p>
 
-        <div class="errorMessage">
-          <div v-if="timezoneDiffError">
-            ERROR: the player's current time zone is different than their time zone when
-            their previous cron ran. This can be because:
-            <ul>
-              <li>daylight savings started or stopped <sup>*</sup></li>
-              <li>the player changed zones due to travel <sup>*</sup></li>
-              <li>the player has devices set to different zones <sup>**</sup></li>
-              <li>the player uses a VPN with varying zones <sup>**</sup></li>
-              <li>something similarly unpleasant is happening. <sup>**</sup></li>
-            </ul>
-            <p>
-              <em>* The problem should fix itself in about a day.</em><br>
-              <em>** One of these causes is probably happening if the time zones stay
-                different for more than a day.</em>
-            </p>
-          </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Account created:</label>
+          <strong class="col-sm-9 col-form-label">
+            {{ hero.auth.timestamps.created | formatDate }}</strong>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Used third party tools:</label>
 
-          <div v-if="timezoneMissingError">
-            ERROR: One of the player's time zones is missing.
-            This is expected and okay if it's the "Time zone at previous cron"
-            AND if it's their first day in Habitica.
-            Otherwise an error has occurred.
+          <div class="col-sm-9 col-form-label">
+            <strong v-if="hero.flags.thirdPartyTools">
+              Yes - {{ hero.flags.thirdPartyTools | formatDate }}</strong>
+            <strong v-else>No</strong>
           </div>
         </div>
-      </div>
-
-      <div class="subsection-start form-inline">
-        API Token: &nbsp;
-        <form @submit.prevent="changeApiToken()">
-          <input
-            type="submit"
-            value="Change API Token"
-            class="btn btn-primary"
-          >
-        </form>
-        <div
-          v-if="tokenModified"
-          class="form-inline"
-        >
-          <strong>API Token has been changed. Tell the player something like this:</strong>
+        <div v-if="cronError" class="form-group row">
+          <label class="col-sm-3 col-form-label">lastCron value:</label>
+          <strong>{{ hero.lastCron | formatDate }}</strong>
           <br>
-          I've given you a new API Token.
-          You'll need to log out of the website and mobile app then log back in
-          otherwise they won't work correctly.
-          If you have trouble logging out, for the website go to
-          https://habitica.com/static/clear-browser-data and click the red button there,
-          and for the Android app, clear its data.
-          For the iOS app, if you can't log out you might need to uninstall it,
-          reboot your phone, then reinstall it.
+          <span class="errorMessage">
+            ERROR: cron probably crashed before finishing
+            ("auth.timestamps.loggedin" and "lastCron" dates are different).
+          </span>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Most recent cron:</label>
+
+          <div class="col-sm-9 col-form-label">
+            <strong>
+              {{ hero.auth.timestamps.loggedin | formatDate }}</strong>
+            <button
+              class="btn btn-warning btn-sm ml-4"
+              @click="resetCron()"
+            >
+              Reset Cron to Yesterday
+            </button>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Time zone:</label>
+          <strong class="col-sm-9 col-form-label">
+            {{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Custom Day Start time (CDS)</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.preferences.dayStart"
+              class="form-control levelField"
+              type="number"
+            >
+          </div>
+        </div>
+        <div v-if="timezoneDiffError || timezoneMissingError">
+          Time zone at previous cron:
+          <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
+
+          <div class="errorMessage">
+            <div v-if="timezoneDiffError">
+              ERROR: the player's current time zone is different than their time zone when
+              their previous cron ran. This can be because:
+              <ul>
+                <li>daylight savings started or stopped <sup>*</sup></li>
+                <li>the player changed zones due to travel <sup>*</sup></li>
+                <li>the player has devices set to different zones <sup>**</sup></li>
+                <li>the player uses a VPN with varying zones <sup>**</sup></li>
+                <li>something similarly unpleasant is happening. <sup>**</sup></li>
+              </ul>
+              <p>
+                <em>* The problem should fix itself in about a day.</em><br>
+                <em>** One of these causes is probably happening if the time zones stay
+                  different for more than a day.</em>
+              </p>
+            </div>
+
+            <div v-if="timezoneMissingError">
+              ERROR: One of the player's time zones is missing.
+              This is expected and okay if it's the "Time zone at previous cron"
+              AND if it's their first day in Habitica.
+              Otherwise an error has occurred.
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">API Token</label>
+          <div class="col-sm-9">
+            <button
+              value="Change API Token"
+              class="btn btn-danger"
+              @click="changeApiToken()"
+            >
+              Change API Token
+            </button>
+            <div
+              v-if="tokenModified"
+            >
+              <strong>API Token has been changed. Tell the player something like this:</strong>
+              <br>
+              I've given you a new API Token.
+              You'll need to log out of the website and mobile app then log back in
+              otherwise they won't work correctly.
+              If you have trouble logging out, for the website go to
+              https://habitica.com/static/clear-browser-data and click the red button there,
+              and for the Android app, clear its data.
+              For the iOS app, if you can't log out you might need to uninstall it,
+              reboot your phone, then reinstall it.
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Local Authentication E-Mail</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.auth.local.email"
+              class="form-control"
+              type="text"
+            >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Google authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Facebook authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Apple ID authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="subsection-start">
+          Full "auth" object for checking above is correct:
+          <pre>{{ hero.auth }}</pre>
         </div>
       </div>
-
-      <div class="subsection-start">
-        Local authentication:
-        <span v-if="hero.auth.local.email">Yes, &nbsp;
-          <strong>{{ hero.auth.local.email }}</strong></span>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Google authentication:
-        <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Facebook authentication:
-        <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Apple ID authentication:
-        <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div class="subsection-start">
-        Full "auth" object for checking above is correct:
-        <pre>{{ hero.auth }}</pre>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        >
       </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <script>

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Customizations
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Customizations
-    </h3>
-    <div v-if="expand">
       <div
         v-for="itemType in itemTypes"
         :key="itemType"

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Items
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Items
-    </h3>
-    <div v-if="expand">
       <div>
         The sections below display each item's key (bolded if the player has ever owned it),
         followed by the item's English name.

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

@@ -1,16 +1,21 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Party, Quest
+        <span
+          v-if="errorsOrWarningsExist"
+        >- ERRORS / WARNINGS EXIST</span>
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Party, Quest
-      <span
-        v-if="errorsOrWarningsExist"
-      >- ERRORS / WARNINGS EXIST</span>
-    </h3>
-    <div v-if="expand">
       <div
         v-if="errorsOrWarningsExist"
         class="errorMessage"

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

@@ -1,87 +1,132 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Privileges, Gem Balance
-    </h3>
-    <div v-if="expand">
-      <p
-        v-if="errorsOrWarningsExist"
-        class="errorMessage"
+  <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          Priviliges, Gem Balance
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
       >
-        Player has had privileges removed or has moderation notes.
-      </p>
-
-      <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
-        <div class="checkbox">
-          <label>
-            <input
-              v-if="hero.flags"
-              v-model="hero.flags.chatShadowMuted"
-              type="checkbox"
-            > Shadow Mute
-          </label>
+        <p
+          v-if="errorsOrWarningsExist"
+          class="errorMessage"
+        >
+          Player has had privileges removed or has moderation notes.
+        </p>
+        <div
+          v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatShadowMuted"
+                v-model="hero.flags.chatShadowMuted"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="chatShadowMuted"
+              >
+                Shadow Mute
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-if="hero.flags"
-              v-model="hero.flags.chatRevoked"
-              type="checkbox"
-            > Mute (Revoke Chat Privileges)
-          </label>
+        <div
+          v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatRevoked"
+                v-model="hero.flags.chatRevoked"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="chatRevoked"
+              >
+                Mute (Revoke Chat Privileges)
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="hero.auth.blocked"
-              type="checkbox"
-            > Ban / Block
-          </label>
+        <div class="form-group row">
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="blocked"
+                v-model="hero.auth.blocked"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="blocked"
+              >
+                Ban / Block
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Balance
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.balance"
               class="form-control balanceField"
               type="number"
               step="0.25"
             >
-          </label>
-          <span>
             <small>
               Balance is in USD, not in Gems.
               E.g., if this number is 1, it means 4 Gems.
               Arrows change Balance by 0.25 (i.e., 1 Gem per click).
               Do not use when awarding tiers; tier gems are automatic.
             </small>
-          </span>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Moderation Notes</label>
-          <textarea
-            v-model="hero.secret.text"
-            class="form-control"
-            cols="5"
-            rows="5"
-          ></textarea>
-          <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.secret.text"
+              class="form-control"
+              cols="5"
+              rows="5"
+            ></textarea>
+            <div
+              v-markdown="hero.secret.text"
+              class="markdownPreview"
+            ></div>
+          </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,14 +1,19 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Subscription, Monthly Perks
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
+  <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{ 'open': expand }"
+          @click="expand = !expand"
+        >
+          Subscription, Monthly Perks
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <div v-if="hero.purchased.plan.paymentMethod">
           Payment method:
           <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -23,46 +28,72 @@
         </div>
         <div
           v-if="hero.purchased.plan.dateCreated"
-          class="form-inline"
+          class="form-group row"
         >
-          <label>
+          <label class="col-sm-3 col-form-label">
             Creation date:
-            <input
-              v-model="hero.purchased.plan.dateCreated"
-              class="form-control"
-              type="text"
-            > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
           </label>
+          <div class="col-sm-9">
+            <div class="input-group">
+              <input
+                v-model="hero.purchased.plan.dateCreated"
+                class="form-control"
+                type="text"
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateCreated) }}
+                </strong>
+              </div>
+            </div>
+          </div>
         </div>
         <div
           v-if="hero.purchased.plan.dateCurrentTypeCreated"
-          class="form-inline"
+          class="form-group row"
         >
-          <label>
-            Start date for current subscription type:
-            <input
-              v-model="hero.purchased.plan.dateCurrentTypeCreated"
-              class="form-control"
-              type="text"
-            >
+          <label class="col-sm-3 col-form-label">
+            Current sub start date:
           </label>
-          <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+          <div class="col-sm-9">
+            <div class="input-group">
+              <input
+                v-model="hero.purchased.plan.dateCurrentTypeCreated"
+                class="form-control"
+                type="text"
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
+                </strong>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Termination date:
-            <div>
+          </label>
+          <div class="col-sm-9">
+            <div class="input-group">
               <input
                 v-model="hero.purchased.plan.dateTerminated"
                 class="form-control"
                 type="text"
-              > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateTerminated) }}
+                </strong>
+              </div>
             </div>
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Consecutive months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.count"
               class="form-control"
@@ -70,11 +101,13 @@
               min="0"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Perk offset months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.offset"
               class="form-control"
@@ -82,26 +115,34 @@
               min="0"
               step="1"
             >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Perk month count:
           </label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
+          </div>
         </div>
-        <div class="form-inline">
-          Perk month count:
-          <input
-            v-model="hero.purchased.plan.perkMonthCount"
-            class="form-control"
-            type="number"
-            min="0"
-            max="2"
-            step="1"
-          >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Next Mystic Hourglass:
+          </label>
+          <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
         </div>
-        <div>
-          Next Mystic Hourglass:
-          <strong>{{ nextHourglassDate }}</strong>
-        </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Mystic Hourglasses:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.trinkets"
               class="form-control"
@@ -109,11 +150,13 @@
               min="0"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gem cap increase:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.gemCapExtra"
               class="form-control"
@@ -122,15 +165,21 @@
               max="25"
               step="5"
             >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Total Gem cap:
           </label>
+          <strong class="col-sm-9 col-form-label">
+            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
+          </strong>
         </div>
-        <div>
-          Total Gem cap:
-          <strong>{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}</strong>
-        </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gems bought this month:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.gemsBought"
               class="form-control"
@@ -139,43 +188,64 @@
               :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div
-          v-if="hero.purchased.plan.extraMonths > 0"
-        >
+        <div v-if="hero.purchased.plan.extraMonths > 0">
           Additional credit (applied upon cancellation):
           <strong>{{ hero.purchased.plan.extraMonths }}</strong>
         </div>
-        <div>
-          Mystery Items:
-          <span
-            v-if="hero.purchased.plan.mysteryItems.length > 0"
-          >
-            <span
-              v-for="(item, index) in hero.purchased.plan.mysteryItems"
-              :key="index"
-            >
-              <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
-                {{ item }},
-              </strong>
-              <strong v-else> {{ item }} </strong>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Mystery Items:
+          </label>
+          <div class="col-sm-9 col-form-label">
+            <span v-if="hero.purchased.plan.mysteryItems.length > 0">
+              <span
+                v-for="(item, index) in hero.purchased.plan.mysteryItems"
+                :key="index"
+              >
+                <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
+                  {{ item }},
+                </strong>
+                <strong v-else> {{ item }} </strong>
+              </span>
             </span>
-          </span>
-          <span v-else>
-            <strong>None</strong>
-          </span>
+            <span v-else>
+              <strong>None</strong>
+            </span>
+          </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+.input-group-append {
+  width: auto;
+
+  .input-group-text {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    font-weight: 600;
+    font-size: 0.8rem;
+    color: $gray-200;
+  }
+}
+</style>
+
 <script>
 import moment from 'moment';
 import { getPlanContext } from '@/../../common/script/cron';

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="toggleTransactionsOpen"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="toggleTransactionsOpen"
+      >
+        Transactions
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Transactions
-    </h3>
-    <div v-if="expand">
       <purchase-history-table
         :gem-transactions="gemTransactions"
         :hourglass-transactions="hourglassTransactions"

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

@@ -1,52 +1,66 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Users Profile
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
-        <div class="form-group">
-          <label>Display name</label>
-          <input
-            v-model="hero.profile.name"
-            class="form-control textField"
-            type="text"
-          >
+  <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          User Profile
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Display name</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.profile.name"
+              class="form-control"
+              type="text"
+            >
+          </div>
         </div>
-        <div class="form-group">
-          <label>Photo URL</label>
-          <input
-            v-model="hero.profile.imageUrl"
-            class="form-control textField"
-            type="text"
-          >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Photo URL</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.profile.imageUrl"
+              class="form-control"
+              type="text"
+            >
+          </div>
         </div>
-        <div class="form-group">
-          <label>About</label>
-          <div class="row about-row">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">About</label>
+          <div class="col-sm-9">
             <textarea
               v-model="hero.profile.blurb"
-              class="form-control col"
+              class="form-control"
               rows="10"
             ></textarea>
             <div
               v-markdown="hero.profile.blurb"
-              class="markdownPreview col"
+              class="markdownPreview"
             ></div>
           </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>

website/client/src/components/appFooter.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <buy-gems-modal v-if="user" />
-    <!--modify-inventory(v-if="isUserLoaded")-->
     <footer>
       <!-- Product -->
       <div class="product">
@@ -22,7 +21,7 @@
             </a>
           </li>
           <li>
-            <router-link to="/group-plans">
+            <router-link :to="user ? '/group-plans' : '/static/group-plans'">
               {{ $t('groupPlans') }}
             </router-link>
           </li>
@@ -291,7 +290,8 @@
       </div>
 
       <div
-        v-if="TIME_TRAVEL_ENABLED && user.permissions && user.permissions.fullAccess"
+        class="time-travel"
+        v-if="TIME_TRAVEL_ENABLED && user?.permissions?.fullAccess"
         :key="lastTimeJump"
       >
         <a
@@ -309,9 +309,11 @@
         <div class="my-2">
           Time Traveling! It is {{ new Date().toLocaleDateString() }}
           <a
-            class="btn btn-warning mr-1"
+            class="btn btn-warning btn-small"
             @click="resetTime()"
-          >Reset</a>
+          >
+            Reset
+        </a>
         </div>
         <a
           class="btn btn-secondary mr-1"
@@ -399,6 +401,10 @@
               tooltip="+1000 to boss quests. 300 items to collection quests"
               @click="addQuestProgress()"
             >Quest Progress Up</a>
+            <a
+              class="btn btn-secondary"
+              @click="bossRage()"
+            >+ Boss Rage 😡</a>
             <a
               class="btn btn-secondary"
               @click="makeAdmin()"
@@ -506,6 +512,8 @@ li {
   grid-area: debug-pop;
    }
 
+.time-travel { grid-area: time-travel;}
+
 footer {
   background-color: $gray-500;
   color: $gray-50;
@@ -526,7 +534,8 @@ footer {
     "donate-text donate-text donate-text donate-button social"
     "hr hr hr hr hr"
     "copyright copyright melior privacy-terms privacy-terms"
-    "debug-toggle debug-toggle debug-toggle blank blank";
+    "time-travel time-travel time-travel time-travel time-travel"
+    "debug-toggle debug-toggle debug-toggle debug-toggle debug-toggle";
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
 
@@ -730,6 +739,7 @@ h3 {
       "privacy-policy privacy-policy"
       "mobile-terms mobile-terms"
       "melior melior"
+      "time-travel time-travel"
       "debug-toggle debug-toggle";
     grid-template-columns: repeat(2, 2fr);
     grid-template-rows: auto;
@@ -960,6 +970,10 @@ export default {
       //  @TODO:  Notification.text('Quest progress increased');
       //  @TODO:  User.sync();
     },
+    async bossRage () {
+      await axios.post('/api/v4/debug/boss-rage');
+    },
+
     async makeAdmin () {
       await axios.post('/api/v4/debug/make-admin');
       // @TODO: Notification.text('You are now an admin!

website/client/src/components/auth/authForm.vue

@@ -224,7 +224,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import googleIcon from '@/assets/svg/google.svg';

website/client/src/components/auth/registerLoginReset.vue

@@ -607,11 +607,10 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
-import DOMPurify from 'dompurify';
+import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
-
+import sanitizeRedirect from '@/mixins/sanitizeRedirect';
 import exclamation from '@/assets/svg/exclamation.svg';
 import gryphon from '@/assets/svg/gryphon.svg';
 import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
@@ -619,6 +618,7 @@ import googleIcon from '@/assets/svg/google.svg';
 import appleIcon from '@/assets/svg/apple_black.svg';
 
 export default {
+  mixins: [sanitizeRedirect],
   data () {
     const data = {
       username: '',
@@ -747,11 +747,6 @@ export default {
         }
       });
     }, 500),
-    sanitizeRedirect (redirect) {
-      if (!redirect) return '/';
-      const sanitizedString = DOMPurify.sanitize(redirect).replace(/\\|\/\/|\./g, '');
-      return sanitizedString;
-    },
     async register () {
       // @TODO do not use alert
       if (!this.email) {

website/client/src/components/avatarModal/customize-options.vue

@@ -6,6 +6,7 @@
     <div
       v-for="option in items"
       :key="option.key"
+      :id="option.imageName"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -14,18 +15,28 @@
         hide: option.hide }"
       @click="option.click(option)"
     >
+      <b-popover
+        :target="option.imageName"
+        triggers="hover focus"
+        placement="bottom"
+        :prevent-overflow="false"
+      >
+        <strong> {{ option.text }} </strong>
+      </b-popover>
       <div class="option">
-        <div
-          class="sprite customize-option"
-          :class="option.class"
-        >
+        <Sprite
+          v-if="!option.none"
+          class="sprite"
+          :prefix="option.isGear ? 'shop' : 'icon'"
+          :imageName="option.imageName"
+          :image-name="option.imageName"
+        />
           <div
-            v-if="option.none"
+            v-else
             class="redline-outer"
           >
             <div class="redline"></div>
           </div>
-        </div>
       </div>
     </div>
   </div>
@@ -35,8 +46,12 @@
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [
     avatarEditorUtilities,
   ],
@@ -75,7 +90,7 @@ export default {
     cursor: pointer;
 
     &.premium {
-      height: 112px;
+      height: 120px;
       width: 96px;
       margin-left: 8px;
       margin-right: 8px;
@@ -92,21 +107,9 @@ export default {
       box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
       background-color: $white;
 
-      .sprite.customize-option.shirt {
-        margin-left: -3px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
-      .sprite.customize-option.skin {
-        margin-left: -8px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
       .option {
         border: none;
         border-radius: 2px;
-        padding-left: 6px;
-        padding-top: 4px;
       }
 
       &:hover {
@@ -132,14 +135,14 @@ export default {
       }
 
       .redline-outer {
-        height: 60px;
-        width: 60px;
+        height: 68px;
+        width: 68px;
         position: absolute;
         bottom: 0;
         margin: 0 auto 0 0;
 
         .redline {
-          width: 60px;
+          width: 68px;
           height: 4px;
           display: block;
           background: red;
@@ -148,7 +151,6 @@ export default {
           top: 0;
           margin-top: 30px;
           margin-bottom: 20px;
-          margin-left: -1px;
         }
       }
     }
@@ -164,10 +166,9 @@ export default {
   }
   .option {
     vertical-align: bottom;
-    height: 64px;
-    width: 64px;
+    height: 76px;
+    width: 76px;
 
-    margin: 12px 8px;
     border: 4px solid transparent;
     border-radius: 10px;
     position: relative;
@@ -182,44 +183,6 @@ export default {
     .sprite.customize-option {
       margin-top: 0;
       margin-left: 0;
-
-      &.skin {
-        margin-top: -4px;
-        margin-left: -4px;
-      }
-      &.chair {
-        margin-left: -1px;
-        margin-top: -1px;
-
-        &.button_chair_black {
-          // different sprite margin?
-          margin-top: -3px;
-        }
-
-        &.handleless {
-          margin-left: -5px;
-          margin-top: -5px;
-        }
-      }
-      &.color, &.bangs, &.beard, &.flower, &.mustache {
-        background-position-x: -6px;
-        background-position-y: -12px;
-      }
-
-      &.hair.base {
-        background-position-x: -6px;
-        background-position-y: -4px;
-      }
-
-      &.headAccessory {
-        margin-top: 0;
-        margin-left: -4px;
-      }
-
-      &.headband {
-        margin-top: -6px;
-        margin-left: -27px;
-      }
     }
   }
 </style>

website/client/src/components/avatarModal/extra-settings.vue

@@ -75,6 +75,7 @@
 
 <script>
 import appearance from '@/../../common/script/content/appearance';
+import upperFirst from 'lodash/upperFirst';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
@@ -82,9 +83,6 @@ import customizeBanner from './customize-banner';
 import customizeOptions from './customize-options';
 import subMenu from './sub-menu';
 
-const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
-const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
-
 export default {
   components: {
     customizeBanner,
@@ -106,17 +104,6 @@ export default {
         headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
       },
       chairKeys: ['none', 'black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
-      specialShirtKeys,
-      items: [
-        {
-          id: 'size',
-          label: this.$t('size'),
-        },
-        {
-          id: 'shirt',
-          label: this.$t('shirt'),
-        },
-      ],
     };
   },
   computed: {
@@ -167,6 +154,7 @@ export default {
       ];
       const noneOption = this.createGearItem(0, 'eyewear', 'base');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -178,42 +166,36 @@ export default {
         option.active = this.user.preferences.costume
           ? this.user.items.gear.costume.eyewear === newKey
           : this.user.items.gear.equipped.eyewear === newKey;
-        option.class = `eyewear_special_${key}`;
+        option.imageName = `eyewear_special_${key}`;
+        option.isGear = true;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
 
           return this.equip(newKey, type);
         };
+        option.text = this.$t(`eyewearSpecial${upperFirst(key)}Text`);
         options.push(option);
       }
 
       return options;
     },
-    freeShirts () {
-      return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
-    },
-    specialShirts () {
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      const keys = this.specialShirtKeys;
-      const options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
-      return options;
-    },
     headbands () {
       const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
+      const noneOption = this.createGearItem(0, 'headAccessory', 'base');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
 
       for (const key of keys) {
-        const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+        const option = this.createGearItem(key, 'headAccessory', 'special');
         const newKey = `headAccessory_special_${key}`;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
           return this.equip(newKey, type);
         };
-
+        option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
         options.push(option);
       }
 
@@ -227,8 +209,9 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.chair === key;
-        option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
+        option.imageName = `chair_${key}`;
         option.click = () => this.set({ 'preferences.chair': key });
+        option.text = appearance.chair[key].text();
         return option;
       });
       return options;
@@ -242,8 +225,11 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.hair.flower === key;
-        option.class = `icon_hair_flower_${key} flower`;
+        if (key !== 0) {
+          option.imageName = `hair_flower_${key}`;
+        }
         option.click = () => this.set({ 'preferences.hair.flower': key });
+        option.text = appearance.hair.flower[key].text();
         return option;
       });
       return options;
@@ -271,6 +257,7 @@ export default {
 
       const noneOption = this.createGearItem(0, category, 'base', category);
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -284,10 +271,15 @@ export default {
           option.active = this.user.preferences.costume
             ? this.user.items.gear.costume[category] === newKey
             : this.user.items.gear.equipped[category] === newKey;
-          option.class = `headAccessory_special_${option.key} ${category}`;
+
           if (category === 'back') {
-            option.class = `icon_back_special_${option.key} back`;
+            option.text = this.$t(`back${upperFirst(key)}Text`);
+            option.imageName = `back_special_${option.key}`;
+          } else {
+            option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
+            option.imageName = `headAccessory_special_${option.key}`;
           }
+          option.isGear = true;
           option.click = () => {
             const type = this.user.preferences.costume ? 'costume' : 'equipped';
             return this.equip(newKey, type);
@@ -303,7 +295,7 @@ export default {
 
       return keys.join(',');
     },
-    createGearItem (key, gearType, subGearType, additionalClass) {
+    createGearItem (key, gearType, subGearType) {
       const newKey = `${gearType}_${subGearType ? `${subGearType}_` : ''}${key}`;
       const option = {};
       option.key = key;
@@ -311,6 +303,7 @@ export default {
       const currentlyEquippedValue = this.user.items.gear[visibleGearType][gearType];
 
       option.active = currentlyEquippedValue === newKey;
+      option.isGear = true;
 
       if (key === 0) {
         // if key is the "none" option check if a property
@@ -318,7 +311,7 @@ export default {
         option.active = option.active || !currentlyEquippedValue;
       }
 
-      option.class = `${newKey} ${additionalClass}`;
+      option.imageName = `${newKey}`;
       option.click = () => {
         const type = this.user.preferences.costume ? 'costume' : 'equipped';
         const currentlyEquipped = this.user.items.gear[type][gearType];