4.126.0

* feat(subscriber): award mystery items at cron

* fix(mystery): backfill skipped months

* fix(mystery): adjust subscriber text

* fix(mystery): correct moment logic
and remove irrelevant tests

* fix(mystery): build set one month in advance

* fix(mystery): don't add empty set to Time Travelers

* refactor(mystery): readability

.dockerignore

@@ -1,3 +1,2 @@
 node_modules
 .git
-website

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,7 @@
 [//]: # (Note: See http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API for more info)
 
 [//]: # (Put Issue # here, if applicable. This will automatically close the issue if your PR is merged in)
-Fixes put_#_and_issue_numer_here
+Fixes put_#_and_issue_number_here
 
 ### Changes
 [//]: # (Describe the changes that were made in detail here. Include pictures if necessary)

Dockerfile-Dev

@@ -1,5 +1,11 @@
-FROM node:12
-WORKDIR /code
-COPY package*.json /code/
-RUN npm install
-RUN npm install -g gulp-cli mocha
+FROM node:12
+
+# Install global packages
+RUN npm install -g gulp-cli mocha
+
+# Copy Habitica code into container and install dependencies
+WORKDIR /usr/src/habitica
+COPY . /usr/src/habitica
+
+RUN npm install
+RUN npm run postinstall

migrations/archive/2019/20191127_harvest_feast.js

@@ -0,0 +1,126 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20191127_harvest_feast';
+import { v4 as uuid } from 'uuid';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {};
+  let inc;
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  if (typeof user.items.gear.owned.head_special_turkeyHelmGilded !== 'undefined') {
+    inc = {
+      'items.food.Pie_Base': 1,
+      'items.food.Pie_CottonCandyBlue': 1,
+      'items.food.Pie_CottonCandyPink': 1,
+      'items.food.Pie_Desert': 1,
+      'items.food.Pie_Golden': 1,
+      'items.food.Pie_Red': 1,
+      'items.food.Pie_Shade': 1,
+      'items.food.Pie_Skeleton': 1,
+      'items.food.Pie_Zombie': 1,
+      'items.food.Pie_White': 1,
+    }
+  } else if (typeof user.items.gear.owned.armor_special_turkeyArmorBase !== 'undefined') {
+    set['items.gear.owned.head_special_turkeyHelmGilded'] = false;
+    set['items.gear.owned.armor_special_turkeyArmorGilded'] = false;
+    set['items.gear.owned.back_special_turkeyTailGilded'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_turkeyHelmGilded',
+        _id: uuid(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.armor_special_turkeyArmorGilded',
+        _id: uuid(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.back_special_turkeyTailGilded',
+        _id: uuid(),
+      },
+    ];
+  } else if (user.items && user.items.mounts && user.items.mounts['Turkey-Gilded']) {
+    set['items.gear.owned.head_special_turkeyHelmBase'] = false;
+    set['items.gear.owned.armor_special_turkeyArmorBase'] = false;
+    set['items.gear.owned.back_special_turkeyTailBase'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_turkeyHelmBase',
+        _id: uuid(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.armor_special_turkeyArmorBase',
+        _id: uuid(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.back_special_turkeyTailBase',
+        _id: uuid(),
+      },
+    ];
+  } else if (user.items && user.items.pets && user.items.pets['Turkey-Gilded']) {
+    set['items.mounts.Turkey-Gilded'] = true;
+  } else if (user.items && user.items.mounts && user.items.mounts['Turkey-Base']) {
+    set['items.pets.Turkey-Gilded'] = 5;
+  } else if (user.items && user.items.pets && user.items.pets['Turkey-Base']) {
+    set['items.mounts.Turkey-Base'] = true;
+  } else {
+    set['items.pets.Turkey-Base'] = 5;
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  if (inc) {
+    return await User.update({_id: user._id}, {$inc: inc, $set: set}).exec();
+  } else if (push) {
+    return await User.update({_id: user._id}, {$set: set, $push: {pinnedItems: {$each: push}}}).exec();
+  } else {
+    return await User.update({_id: user._id}, {$set: set}).exec();
+  }
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2019-11-01')},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  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(fields)
+      .lean()
+      .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],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2019/20191210_pet_color_achievements.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20191210_pet_color_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  let set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Wolf-White'] > 0
+      && pets['TigerCub-White'] > 0
+      && pets['PandaCub-White'] > 0
+      && pets['LionCub-White'] > 0
+      && pets['Fox-White'] > 0
+      && pets['FlyingPig-White'] > 0
+      && pets['Dragon-White'] > 0
+      && pets['Cactus-White'] > 0
+      && pets['BearCub-White'] > 0) {
+        set['achievements.primedForPainting'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-White']
+      && mounts['TigerCub-White']
+      && mounts['PandaCub-White']
+      && mounts['LionCub-White']
+      && mounts['Fox-White']
+      && mounts['FlyingPig-White']
+      && mounts['Dragon-White']
+      && mounts['Cactus-White']
+      && mounts['BearCub-White'] ) {
+        set['achievements.pearlyPro'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2019-12-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  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(fields)
+      .lean()
+      .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]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/mystery-items-old.js

@@ -1,110 +0,0 @@
-import monk from 'monk';
-import nconf from 'nconf';
-
-const migrationName = 'mystery-items-201808.js'; // Update per month
-const authorName = 'Sabe'; // in case script author needs to know when their ...
-const authorUuid = '7f14ed62-5408-4e1b-be83-ada62d504931'; // ... own data is done
-
-/*
- * Award this month's mystery items to subscribers
- */
-const MYSTERY_ITEMS = ['armor_mystery_201810', 'head_mystery_201810'];
-const CONNECTION_STRING = nconf.get('MIGRATION_CONNECT_STRING');
-
-let dbUsers = monk(CONNECTION_STRING).get('users', { castIds: false });
-let UserNotification = require('../../website/server/models/userNotification').model;
-
-function processUsers (lastId) {
-  // specify a query to limit the affected users (empty for all users):
-  let query = {
-    migration: {$ne: migrationName},
-    'purchased.plan.customerId': { $ne: null },
-    $or: [
-      { 'purchased.plan.dateTerminated': { $gte: new Date() } },
-      { 'purchased.plan.dateTerminated': { $exists: false } },
-      { 'purchased.plan.dateTerminated': { $eq: null } },
-    ],
-  };
-
-  if (lastId) {
-    query._id = {
-      $gt: lastId,
-    };
-  }
-
-  dbUsers.find(query, {
-    sort: {_id: 1},
-    limit: 250,
-    fields: [
-    ], // specify fields we are interested in to limit retrieved data (empty if we're not reading data):
-  })
-    .then(updateUsers)
-    .catch((err) => {
-      console.log(err);
-      return exiting(1, `ERROR! ${  err}`);
-    });
-}
-
-let progressCount = 1000;
-let count = 0;
-
-function updateUsers (users) {
-  if (!users || users.length === 0) {
-    console.warn('All appropriate users found and modified.');
-    displayData();
-    return;
-  }
-
-  let userPromises = users.map(updateUser);
-  let lastUser = users[users.length - 1];
-
-  return Promise.all(userPromises)
-    .then(() => {
-      processUsers(lastUser._id);
-    });
-}
-
-function updateUser (user) {
-  count++;
-
-  const addToSet = {
-    'purchased.plan.mysteryItems': {
-      $each: MYSTERY_ITEMS,
-    },
-  };
-  const push = {
-    notifications: (new UserNotification({
-      type: 'NEW_MYSTERY_ITEMS',
-      data: {
-        MYSTERY_ITEMS,
-      },
-    })).toJSON(),
-  };
-
-  dbUsers.update({_id: user._id}, {$addToSet: addToSet, $push: push});
-
-  if (count % progressCount === 0) console.warn(`${count  } ${  user._id}`);
-  if (user._id === authorUuid) console.warn(`${authorName  } processed`);
-}
-
-function displayData () {
-  console.warn(`\n${  count  } users processed\n`);
-  return exiting(0);
-}
-
-function exiting (code, msg) {
-  code = code || 0; // 0 = success
-  if (code && !msg) {
-    msg = 'ERROR!';
-  }
-  if (msg) {
-    if (code) {
-      console.error(msg);
-    } else      {
-      console.log(msg);
-    }
-  }
-  process.exit(code);
-}
-
-module.exports = processUsers;

migrations/users/bulk-email.js

@@ -16,7 +16,7 @@ async function updateUser (user) {
 
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
-  sendTxn(
+  await sendTxn(
     user,
     EMAIL_SLUG,
     [{ name: 'BASE_URL', content: BASE_URL }], // Add variables from template

migrations/users/mystery-items.js

@@ -1,72 +0,0 @@
-/* eslint-disable no-console */
-import { model as User } from '../../website/server/models/user';
-import { model as UserNotification } from '../../website/server/models/userNotification';
-
-const MIGRATION_NAME = 'mystery_items_201910';
-const MYSTERY_ITEMS = ['armor_mystery_201910', 'head_mystery_201910'];
-
-const progressCount = 1000;
-let count = 0;
-
-async function updateUser (user) {
-  count += 1;
-
-  const addToSet = {
-    'purchased.plan.mysteryItems': {
-      $each: MYSTERY_ITEMS,
-    },
-  };
-  const push = {
-    notifications: (new UserNotification({
-      type: 'NEW_MYSTERY_ITEMS',
-      data: {
-        MYSTERY_ITEMS,
-      },
-    })).toJSON(),
-  };
-  const set = {
-    migration: MIGRATION_NAME,
-  };
-
-  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
-
-  return User.update({ _id: user._id }, { $set: set, $push: push, $addToSet: addToSet }).exec();
-}
-
-export default async function processUsers () {
-  const query = {
-    migration: { $ne: MIGRATION_NAME },
-    'purchased.plan.customerId': { $ne: null },
-    $or: [
-      { 'purchased.plan.dateTerminated': { $gte: new Date() } },
-      { 'purchased.plan.dateTerminated': { $exists: false } },
-      { 'purchased.plan.dateTerminated': { $eq: null } },
-    ],
-  };
-
-  const fields = {
-    _id: 1,
-  };
-
-  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(fields)
-      .lean()
-      .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],
-      };
-    }
-
-    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
-  }
-}

package.json

@@ -1,21 +1,21 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.120.0",
+  "version": "4.126.0",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/register": "^7.6.2",
-    "@google-cloud/trace-agent": "^4.2.2",
+    "@babel/core": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/register": "^7.7.4",
+    "@google-cloud/trace-agent": "^4.2.3",
     "@slack/client": "^3.8.1",
     "accepts": "^1.3.5",
     "amazon-payments": "^0.2.7",
     "amplitude": "^3.5.0",
     "apidoc": "^0.17.5",
     "apn": "^2.2.0",
-    "aws-sdk": "^2.556.0",
-    "bcrypt": "^3.0.6",
+    "aws-sdk": "^2.578.0",
+    "bcrypt": "^3.0.7",
     "body-parser": "^1.18.3",
     "compression": "^1.7.4",
     "cookie-session": "^1.3.3",
@@ -23,17 +23,17 @@
     "csv-stringify": "^5.1.0",
     "cwait": "^1.1.1",
     "domain-middleware": "~0.1.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.7.1",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.0.0",
     "express": "^4.16.3",
     "express-basic-auth": "^1.1.5",
     "express-validator": "^5.2.0",
-    "glob": "^7.1.5",
+    "glob": "^7.1.6",
     "got": "^9.0.0",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
-    "gulp-imagemin": "^6.1.1",
+    "gulp-imagemin": "^6.2.0",
     "gulp-nodemon": "^2.4.1",
     "gulp.spritesmith": "^6.9.0",
     "habitica-markdown": "^1.3.0",
@@ -46,7 +46,7 @@
     "method-override": "^3.0.0",
     "moment": "^2.24.0",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.7.7",
+    "mongoose": "^5.7.12",
     "morgan": "^1.7.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.2",
@@ -61,8 +61,8 @@
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^3.0.0",
     "short-uuid": "^3.0.0",
-    "stripe": "^7.10.0",
-    "superagent": "^5.0.2",
+    "stripe": "^7.13.1",
+    "superagent": "^5.1.1",
     "universal-analytics": "^0.4.17",
     "useragent": "^2.1.9",
     "uuid": "^3.3.3",
@@ -79,7 +79,7 @@
   },
   "scripts": {
     "lint": "eslint --ext .js --fix . && cd website/client && npm run lint",
-    "lint-no-fix": "eslint --ext .js . && cd website/client && npm run lint --no-fix",
+    "lint-no-fix": "eslint --ext .js . && cd website/client && npm run lint-no-fix",
     "test": "npm run lint && gulp test && gulp apidoc",
     "test:build": "gulp test:prepare:build",
     "test:api-v3": "gulp test:api-v3",

scripts/gdpr-delete-users.js

@@ -24,7 +24,13 @@ async function deleteAmplitudeData (userId, email) {
     console.log(err.response.data);
   });
 
-  if (response) console.log(`${response.status} ${response.statusText}`);
+  if (response) {
+    if (response.status === 200) {
+      console.log(`${userId} (${email}) Amplitude deletion request OK.`);
+    } else {
+      console.log(`${userId} (${email}) Amplitude response: ${response.status} ${response.statusText}`);
+    }
+  }
 }
 
 async function deleteHabiticaData (user, email) {
@@ -54,39 +60,46 @@ async function deleteHabiticaData (user, email) {
   });
 
   if (response) {
-    console.log(`${response.status} ${response.statusText}`);
-    if (response.status === 200) console.log(`${user._id} (${email}) removed. Last login: ${user.auth.timestamps.loggedin}`);
+    if (response.status === 200) {
+      console.log(`${user._id} (${email}) removed from Habitica. Last login: ${user.auth.timestamps.loggedin}`);
+    } else {
+      console.log(`${user._id} (${email}) Habitica response: ${response.status} ${response.statusText}`);
+    }
   }
 }
 
 async function processEmailAddress (email) {
   const emailRegex = new RegExp(`^${email}$`, 'i');
-  const users = await User.find({
-    $or: [
-      { 'auth.local.email': emailRegex },
-      { 'auth.facebook.emails.value': emailRegex },
-      { 'auth.google.emails.value': emailRegex },
-    ],
-  },
-  {
-    _id: 1,
-    apiToken: 1,
-    auth: 1,
-  }).exec();
+  const localUsers = await User.find(
+    { 'auth.local.email': emailRegex },
+    { _id: 1, apiToken: 1, auth: 1 },
+  ).exec();
+
+  const socialUsers = await User.find(
+    {
+      $or: [
+        { 'auth.facebook.emails.value': email },
+        { 'auth.google.emails.value': email },
+      ],
+    },
+    { _id: 1, apiToken: 1, auth: 1 },
+  ).collation(
+    { locale: 'en', strength: 1 },
+  ).exec();
+
+  const users = localUsers.concat(socialUsers);
 
   if (users.length < 1) {
-    console.log(`No users found with email address ${email}`);
-  } else {
-    Promise.all(users.map(user => (async () => {
-      await deleteAmplitudeData(user._id, email); // eslint-disable-line no-await-in-loop
-      await deleteHabiticaData(user, email); // eslint-disable-line no-await-in-loop
-    })()));
+    return console.log(`No users found with email address ${email}`);
   }
+
+  return Promise.all(users.map(user => (async () => {
+    await deleteAmplitudeData(user._id, email); // eslint-disable-line no-await-in-loop
+    await deleteHabiticaData(user, email); // eslint-disable-line no-await-in-loop
+  })()));
 }
 
-function deleteUserData (emails) {
+export default function deleteUserData (emails) {
   const emailPromises = emails.map(processEmailAddress);
   return Promise.all(emailPromises);
 }
-
-module.exports = deleteUserData;

test/api/unit/libs/cron.test.js

@@ -88,6 +88,28 @@ describe('cron', () => {
       user.purchased.plan.dateUpdated = moment().subtract(1, 'months').toDate();
     });
 
+    it('awards current mystery items to subscriber', () => {
+      user.purchased.plan.dateUpdated = new Date('2018-12-11');
+      clock = sinon.useFakeTimers(new Date('2019-01-29'));
+      cron({
+        user, tasksByType, daysMissed, analytics,
+      });
+      expect(user.purchased.plan.mysteryItems.length).to.eql(2);
+      const filteredNotifications = user.notifications.filter(n => n.type === 'NEW_MYSTERY_ITEMS');
+      expect(filteredNotifications.length).to.equal(1);
+    });
+
+    it('awards multiple mystery item sets if user skipped months between logins', () => {
+      user.purchased.plan.dateUpdated = new Date('2018-11-11');
+      clock = sinon.useFakeTimers(new Date('2019-01-29'));
+      cron({
+        user, tasksByType, daysMissed, analytics,
+      });
+      expect(user.purchased.plan.mysteryItems.length).to.eql(4);
+      const filteredNotifications = user.notifications.filter(n => n.type === 'NEW_MYSTERY_ITEMS');
+      expect(filteredNotifications.length).to.equal(1);
+    });
+
     it('resets plan.gemsBought on a new month', () => {
       user.purchased.plan.gemsBought = 10;
       cron({

test/api/unit/libs/payments/payments.test.js

@@ -439,31 +439,6 @@ describe('payments/index', () => {
         fakeClock.restore();
       });
 
-      it('does not awards mystery items when not within the timeframe for a mystery item', async () => {
-        const noMysteryItemTimeframe = 1462183920000; // May 2nd 2016
-        const fakeClock = sinon.useFakeTimers(noMysteryItemTimeframe);
-        data = { paymentMethod: 'PaymentMethod', user, sub: { key: 'basic_3mo' } };
-
-        await api.createSubscription(data);
-
-        expect(user.purchased.plan.mysteryItems).to.have.a.lengthOf(0);
-
-        fakeClock.restore();
-      });
-
-      it('does not add a notification for mystery items if none was awarded', async () => {
-        const noMysteryItemTimeframe = 1462183920000; // May 2nd 2016
-        const fakeClock = sinon.useFakeTimers(noMysteryItemTimeframe);
-        data = { paymentMethod: 'PaymentMethod', user, sub: { key: 'basic_3mo' } };
-
-        await api.createSubscription(data);
-
-        expect(user.purchased.plan.mysteryItems).to.have.a.lengthOf(0);
-        expect(user.notifications.find(n => n.type === 'NEW_MYSTERY_ITEMS')).to.be.undefined;
-
-        fakeClock.restore();
-      });
-
       it('does not award mystery item when user already owns the item', async () => {
         const mayMysteryItemTimeframe = 1464725113000; // May 31st 2016
         const fakeClock = sinon.useFakeTimers(mayMysteryItemTimeframe);

test/api/v3/integration/challenges/GET-challenges_challengeId_members.test.js

@@ -206,16 +206,16 @@ describe('GET /challenges/:challengeId/members', () => {
     for (let i = 0; i < 3; i += 1) {
       usersToGenerate.push(generateUser({
         challenges: [challenge._id],
-        'profile.name': `${i}profilename`,
+        'auth.local.username': `${i}username`,
       }));
     }
     const generatedUsers = await Promise.all(usersToGenerate);
-    const profileNames = generatedUsers.map(generatedUser => generatedUser.profile.name);
+    const usernames = generatedUsers.map(generatedUser => generatedUser.auth.local.username);
 
-    const firstProfileName = profileNames[0];
-    const nameToSearch = firstProfileName.substring(0, 4);
+    const firstUsername = usernames[0];
+    const nameToSearch = firstUsername.substring(0, 4);
 
     const response = await user.get(`/challenges/${challenge._id}/members?search=${nameToSearch}`);
-    expect(response[0].profile.name).to.eql(firstProfileName);
+    expect(response[0].auth.local.username).to.eql(firstUsername);
   });
 });

test/api/v3/integration/webhook/PUT-user_update_webhook.test.js

@@ -63,6 +63,26 @@ describe('PUT /user/webhook/:id', () => {
     expect(webhook.options).to.eql(options);
   });
 
+  it('updates a webhook with empty label', async () => {
+    const url = 'http://a-new-url.com';
+    const type = 'groupChatReceived';
+    const label = '';
+    const options = { groupId: generateUUID() };
+
+    await user.put(`/user/webhook/${webhookToUpdate.id}`, {
+      url, type, options, label,
+    });
+
+    await user.sync();
+
+    const webhook = user.webhooks.find(hook => webhookToUpdate.id === hook.id);
+
+    expect(webhook.url).to.equal(url);
+    expect(webhook.label).to.equal(label);
+    expect(webhook.type).to.equal(type);
+    expect(webhook.options).to.eql(options);
+  });
+
   it('returns the updated webhook', async () => {
     const url = 'http://a-new-url.com';
     const type = 'groupChatReceived';

website/client/package-lock.json

@@ -1748,9 +1748,9 @@
       }
     },
     "acorn-jsx": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.2.tgz",
-      "integrity": "sha512-tiNTrP1MP0QrChmD2DdupCr6HWSFeKVw5d/dHTu4Y7rkAkRhU/Dt7dphAfIUyxtHpl/eBVip5uTNSpQJHylpAw=="
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
+      "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw=="
     },
     "acorn-walk": {
       "version": "6.2.0",
@@ -1798,9 +1798,9 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
     },
     "amplitude-js": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-5.6.0.tgz",
-      "integrity": "sha512-XGaM0sTvMOrVYqfHhkKEikjQ/SzhEGbupxYopcrzEpEuNLenSOIBMyB0JycBcFI1hTWR4rGJ2TDRqIeRMmUZvg==",
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-5.7.0.tgz",
+      "integrity": "sha512-nKE5oJhfuGTxUlJje4XJ7hpRmCTkM1G4sKRvk9vFxo/SsgHZ2qofd9a5Bvk/OKO2N4P9RMyLRa0byJ9j6NIAeg==",
       "requires": {
         "@amplitude/ua-parser-js": "0.7.20",
         "blueimp-md5": "^2.10.0",
@@ -1825,17 +1825,17 @@
       "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw=="
     },
     "ansi-escapes": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.2.1.tgz",
-      "integrity": "sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
+      "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
       "requires": {
-        "type-fest": "^0.5.2"
+        "type-fest": "^0.8.1"
       },
       "dependencies": {
         "type-fest": {
-          "version": "0.5.2",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz",
-          "integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw=="
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
         }
       }
     },
@@ -2386,13 +2386,13 @@
       "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
     },
     "bootstrap-vue": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.4.tgz",
-      "integrity": "sha512-/5WXa3ir5uajcs7ze7jz7QXpYuJGWHjvJ8biMq0+e0IIIxw2jSdh4LsiFKD7C7qtgKre28hhXOfx79RmZX4wcQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.1.0.tgz",
+      "integrity": "sha512-dftb5fc42x7QLv814nN+3Cx8MMuCB+xrGQjOmSXH81ET0+yo7KYb4lUN3/pOnf+8Tkv8oaawZ1OOth5/AZfktg==",
       "requires": {
         "@nuxt/opencollective": "^0.3.0",
         "bootstrap": ">=4.3.1 <5.0.0",
-        "popper.js": "^1.15.0",
+        "popper.js": "^1.16.0",
         "portal-vue": "^2.1.6",
         "vue-functional-data-merge": "^3.1.0"
       }
@@ -3120,9 +3120,9 @@
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
     },
     "consola": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.10.1.tgz",
-      "integrity": "sha512-4sxpH6SGFYLADfUip4vuY65f/gEogrzJoniVhNUYkJHtng0l8ZjnDCqxxrSVRHOHwKxsy8Vm5ONZh1wOR3/l/w=="
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.11.0.tgz",
+      "integrity": "sha512-2bcAqHastlPSCvZ+ur8bgHInGAWvUnysWz3h3xRX+/XZoCY7avolJJnVXOPGoVoyCcg1b231XixonoArmgxaoA=="
     },
     "console-browserify": {
       "version": "1.1.0",
@@ -3283,9 +3283,9 @@
       }
     },
     "core-js": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.3.4.tgz",
-      "integrity": "sha512-BtibooaAmSOptGLRccsuX/dqgPtXwNgqcvYA6kOTTMzonRxZ+pJS4e+6mvVutESfXMeTnK8m3M+aBu3bkJbR+w=="
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.4.2.tgz",
+      "integrity": "sha512-bUTfqFWtNKWp73oNIfRkqwYZJeNT3lstzZcAkhhiuvDraRSgOH1/+F9ZklbpR4zpdKuo4cpXN8tKP7s61yjX+g=="
     },
     "core-js-compat": {
       "version": "3.3.4",
@@ -3487,12 +3487,19 @@
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
     "css-tree": {
-      "version": "1.0.0-alpha.33",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.33.tgz",
-      "integrity": "sha512-SPt57bh5nQnpsTBsx/IXbO14sRc9xXu5MtMAVuo0BaQQmyf0NupNPPSoMaqiAF5tDFafYsTkfeH4Q/HCKXkg4w==",
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
       "requires": {
         "mdn-data": "2.0.4",
-        "source-map": "^0.5.3"
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "css-unit-converter": {
@@ -3582,27 +3589,11 @@
       "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q=="
     },
     "csso": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.1.tgz",
-      "integrity": "sha512-vrqULLffYU1Q2tLdJvaCYbONStnfkfimRxXNaGjxMldI0C7JPBC4rB1RyjhfdZ4m1frm8pM9uRPKH3d2knZ8gg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
+      "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
       "requires": {
-        "css-tree": "1.0.0-alpha.29"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.0.0-alpha.29",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.29.tgz",
-          "integrity": "sha512-sRNb1XydwkW9IOci6iB2xmy8IGCj6r/fr+JWitvJ2JxQRPzN3T4AGGVWCMlVmVwM1gtgALJRmGIlWv5ppnGGkg==",
-          "requires": {
-            "mdn-data": "~1.1.0",
-            "source-map": "^0.5.3"
-          }
-        },
-        "mdn-data": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.4.tgz",
-          "integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA=="
-        }
+        "css-tree": "1.0.0-alpha.37"
       }
     },
     "cssom": {
@@ -4266,9 +4257,9 @@
       }
     },
     "eslint": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.6.0.tgz",
-      "integrity": "sha512-PpEBq7b6qY/qrOmpYQ/jTMDYfuQMELR4g4WI1M/NaSDDD/bdcMb+dj4Hgks7p41kW2caXsPsEZAEAyAgjVVC0g==",
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.7.1.tgz",
+      "integrity": "sha512-UWzBS79pNcsDSxgxbdjkmzn/B6BhsXMfUaOHnNwyE8nD+Q6pyT96ow2MccVayUTV4yMid4qLhMiQaywctRkBLA==",
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "ajv": "^6.10.0",
@@ -4285,7 +4276,7 @@
         "file-entry-cache": "^5.0.1",
         "functional-red-black-tree": "^1.0.1",
         "glob-parent": "^5.0.0",
-        "globals": "^11.7.0",
+        "globals": "^12.1.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
@@ -4298,7 +4289,7 @@
         "minimatch": "^3.0.4",
         "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.8.2",
+        "optionator": "^0.8.3",
         "progress": "^2.0.0",
         "regexpp": "^2.0.1",
         "semver": "^6.1.2",
@@ -4326,15 +4317,36 @@
             "is-glob": "^4.0.1"
           }
         },
+        "globals": {
+          "version": "12.3.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz",
+          "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==",
+          "requires": {
+            "type-fest": "^0.8.1"
+          }
+        },
         "import-fresh": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
-          "integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
           "requires": {
             "parent-module": "^1.0.0",
             "resolve-from": "^4.0.0"
           }
         },
+        "optionator": {
+          "version": "0.8.3",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+          "requires": {
+            "deep-is": "~0.1.3",
+            "fast-levenshtein": "~2.0.6",
+            "levn": "~0.3.0",
+            "prelude-ls": "~1.1.2",
+            "type-check": "~0.3.2",
+            "word-wrap": "~1.2.3"
+          }
+        },
         "resolve-from": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4349,6 +4361,11 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
           "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw=="
+        },
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
         }
       }
     },
@@ -4381,6 +4398,37 @@
           "requires": {
             "ramda": "^0.26.1"
           }
+        },
+        "eslint-plugin-vue": {
+          "version": "5.2.3",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
+          "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
+          "requires": {
+            "vue-eslint-parser": "^5.0.0"
+          }
+        },
+        "espree": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
+          "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
+          "requires": {
+            "acorn": "^6.0.2",
+            "acorn-jsx": "^5.0.0",
+            "eslint-visitor-keys": "^1.0.0"
+          }
+        },
+        "vue-eslint-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
+          "integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
+          "requires": {
+            "debug": "^4.1.0",
+            "eslint-scope": "^4.0.0",
+            "eslint-visitor-keys": "^1.0.0",
+            "espree": "^4.1.0",
+            "esquery": "^1.0.1",
+            "lodash": "^4.17.11"
+          }
         }
       }
     },
@@ -4503,11 +4551,11 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz",
-      "integrity": "sha512-mGwMqbbJf0+VvpGR5Lllq0PMxvTdrZ/ZPjmhkacrCHbubJeJOt+T6E3HUzAifa2Mxi7RSdJfC9HFpOeSYVMMIw==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.0.1.tgz",
+      "integrity": "sha512-5tgFPcxGDKjfVB/6Yi56bKiWxygUibfZmzSh26Np3kuwAk/lfaGbVld+Yt+MPgD84ppvcachtiL4/winsXLjXA==",
       "requires": {
-        "vue-eslint-parser": "^5.0.0"
+        "vue-eslint-parser": "^6.0.5"
       }
     },
     "eslint-scope": {
@@ -4546,11 +4594,6 @@
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
           "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
-        },
-        "acorn-jsx": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
-          "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw=="
         }
       }
     },
@@ -6321,6 +6364,11 @@
         "through": "^2.3.6"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
         "cli-cursor": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
@@ -6362,13 +6410,23 @@
           }
         },
         "string-width": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz",
-          "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
           "requires": {
             "emoji-regex": "^8.0.0",
             "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^5.2.0"
+            "strip-ansi": "^6.0.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "6.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+              "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+              "requires": {
+                "ansi-regex": "^5.0.0"
+              }
+            }
           }
         }
       }
@@ -9757,9 +9815,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.1.tgz",
-      "integrity": "sha512-zQzJ3UETUWOMd/pJJGH/zvRsBVO97m11RcpfUhcQUHEXf0yHUBgOIE/Nw8aK0m1XyVJPeq228iIK7gVxsJ/Puw==",
+      "version": "1.23.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.7.tgz",
+      "integrity": "sha512-cYgc0fanwIpi0rXisGxl+/wadVQ/HX3RhpdRcjLdj2o2ye/sxUTpAxIhbmJy3PLQgRFbf6Pn8Jsrta2vdXcoOQ==",
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
       }
@@ -10068,9 +10126,9 @@
       }
     },
     "smartbanner.js": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.14.6.tgz",
-      "integrity": "sha512-yAc7ueVIiQ3kyHrQxOZncZiEFv6ubXxWj5E01xj45njFk8XZ8zG3VpAFPl70Yvmv/H0L/qjxOmQqF3H3T0j/SQ=="
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.15.0.tgz",
+      "integrity": "sha512-a82o2llcEB8KLjMaqeeeZxevRiPSiKbXsUoep1wMunkwggDUStkgXI56c6Qt54Elh9qo3ZrRHJTh5HvVm68o+g=="
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -10631,25 +10689,45 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
     },
     "svg-url-loader": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-3.0.2.tgz",
-      "integrity": "sha512-MUJFVU2uuOTZW6Eq6NuXZxhaIyWiuKtZMcT90nCkcvIZPGGc0CYyZWYP/rtXUkja5qagNMpxDwdZ/tuC6ywfWg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/svg-url-loader/-/svg-url-loader-3.0.3.tgz",
+      "integrity": "sha512-MKGiRNDs8fnHcZcPkhGcw9+130IXyFM9H8m6T7u3ScUuZYEeVzX0vNMru30D4MCF6vMYas5iw/Ru9lwFKBjaGw==",
       "requires": {
-        "file-loader": "~4.2.0",
+        "file-loader": "~4.3.0",
         "loader-utils": "~1.2.3"
+      },
+      "dependencies": {
+        "file-loader": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
+          "integrity": "sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==",
+          "requires": {
+            "loader-utils": "^1.2.3",
+            "schema-utils": "^2.5.0"
+          }
+        },
+        "schema-utils": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.5.0.tgz",
+          "integrity": "sha512-32ISrwW2scPXHUSusP8qMg5dLUawKkyV+/qIEV9JdXKx+rsM6mi8vZY8khg2M69Qom16rtroWXD3Ybtiws38gQ==",
+          "requires": {
+            "ajv": "^6.10.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
       }
     },
     "svgo": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
-      "integrity": "sha512-MLfUA6O+qauLDbym+mMZgtXCGRfIxyQoeH6IKVcFslyODEe/ElJNwr0FohQ3xG4C6HK6bk3KYPPXwHVJk3V5NQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
       "requires": {
         "chalk": "^2.4.1",
         "coa": "^2.0.2",
         "css-select": "^2.0.0",
         "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.33",
-        "csso": "^3.5.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "^4.0.2",
         "js-yaml": "^3.13.1",
         "mkdirp": "~0.5.1",
         "object.values": "^1.1.0",
@@ -11265,24 +11343,24 @@
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
     "vue-eslint-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
-      "integrity": "sha512-JlHVZwBBTNVvzmifwjpZYn0oPWH2SgWv5dojlZBsrhablDu95VFD+hriB1rQGwbD+bms6g+rAFhQHk6+NyiS6g==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-6.0.5.tgz",
+      "integrity": "sha512-Bvjlx7rH1Ulvus56KHeLXOjEi3JMOYTa1GAqZr9lBQhd8weK8mV7U7V2l85yokBZEWHJQjLn6X3nosY8TzkOKg==",
       "requires": {
-        "debug": "^4.1.0",
+        "debug": "^4.1.1",
         "eslint-scope": "^4.0.0",
         "eslint-visitor-keys": "^1.0.0",
-        "espree": "^4.1.0",
+        "espree": "^5.0.0",
         "esquery": "^1.0.1",
         "lodash": "^4.17.11"
       },
       "dependencies": {
         "espree": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
-          "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
+          "integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
           "requires": {
-            "acorn": "^6.0.2",
+            "acorn": "^6.0.7",
             "acorn-jsx": "^5.0.0",
             "eslint-visitor-keys": "^1.0.0"
           }
@@ -11798,6 +11876,11 @@
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
       "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
     },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

website/client/package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
     "lint": "vue-cli-service lint .",
+    "lint-no-fix": "vue-cli-service lint --no-fix .",
     "postinstall": "node ./scripts/npm-postinstall.js"
   },
   "dependencies": {
@@ -16,18 +17,18 @@
     "@vue/cli-plugin-unit-mocha": "^4.0.5",
     "@vue/cli-service": "^4.0.5",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^5.6.0",
+    "amplitude-js": "^5.7.0",
     "axios": "^0.19.0",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.0.1",
     "bootstrap": "^4.3.1",
-    "bootstrap-vue": "^2.0.4",
+    "bootstrap-vue": "^2.1.0",
     "chai": "^4.1.2",
-    "core-js": "^3.3.4",
-    "eslint": "^6.6.0",
+    "core-js": "^3.4.2",
+    "eslint": "^6.7.1",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
-    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-vue": "^6.0.1",
     "habitica-markdown": "^1.3.0",
     "hellojs": "^1.18.1",
     "inspectpack": "^4.2.2",
@@ -36,12 +37,12 @@
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "nconf": "^0.10.0",
-    "sass": "^1.23.1",
+    "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
-    "smartbanner.js": "^1.14.5",
+    "smartbanner.js": "^1.15.0",
     "svg-inline-loader": "^0.8.0",
-    "svg-url-loader": "^3.0.2",
-    "svgo": "^1.3.0",
+    "svg-url-loader": "^3.0.3",
+    "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
     "uuid": "^3.3.3",
     "validator": "^11.1.0",

website/client/src/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,30 +1,72 @@
-.promo_armoire_backgrounds_201911 {
+.promo_achievement_white {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -477px 0px;
+  background-position: -928px -465px;
+  width: 204px;
+  height: 102px;
+}
+.promo_armoire_backgrounds_201912 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -928px 0px;
   width: 423px;
   height: 147px;
 }
 .promo_costume_achievement {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -365px;
+  background-position: -1175px -296px;
   width: 144px;
   height: 156px;
 }
-.promo_mystery_201910 {
+.promo_delightful_dinos {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -477px -148px;
+  background-position: 0px -752px;
+  width: 423px;
+  height: 147px;
+}
+.promo_ember_thunderstorm_potions {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -424px -752px;
+  width: 423px;
+  height: 147px;
+}
+.promo_harvest_feast {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -928px -296px;
+  width: 246px;
+  height: 168px;
+}
+.promo_mystery_201912 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -928px -148px;
   width: 282px;
   height: 147px;
 }
 .promo_take_this {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -760px -148px;
+  background-position: -1211px -148px;
   width: 96px;
   height: 69px;
 }
-.scene_seaserpent {
+.scene_habitica_map {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px 0px;
+  width: 450px;
+  height: 450px;
+}
+.scene_office {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -421px -451px;
+  width: 360px;
+  height: 240px;
+}
+.scene_seaserpent {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -451px 0px;
   width: 476px;
   height: 364px;
 }
+.scene_yarn_boss {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -451px;
+  width: 420px;
+  height: 300px;
+}

website/client/src/assets/css/sprites/spritesmith-main-12.css

@@ -1,330 +1,492 @@
+.weapon_warrior_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -1361px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -1270px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -1452px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_6 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -1452px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_0 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -1543px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -1543px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -997px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -1088px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1893px -1088px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -1179px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_6 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -1270px;
+  width: 90px;
+  height: 90px;
+}
 .Pet_Currency_Gem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1269px;
+  background-position: -1921px -444px;
   width: 68px;
   height: 68px;
 }
 .Pet_Currency_Gem1x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1992px -592px;
+  background-position: -1957px -676px;
   width: 15px;
   height: 13px;
 }
 .Pet_Currency_Gem2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1766px -1474px;
+  background-position: -1960px -766px;
   width: 30px;
   height: 26px;
 }
 .PixelPaw-Gold {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1929px -711px;
+  background-position: -1688px -1436px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -1474px;
+  background-position: -1740px -1436px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw002 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1614px;
+  background-position: -220px -203px;
   width: 51px;
   height: 51px;
 }
+.avatar_floral_healer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1887px -576px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_rogue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -697px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_warrior {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -897px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_wizard {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -797px;
+  width: 99px;
+  height: 99px;
+}
+.empty_bottles {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1921px -513px;
+  width: 64px;
+  height: 54px;
+}
+.ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1802px -997px;
+  width: 90px;
+  height: 90px;
+}
 .inventory_present {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1935px -854px;
+  background-position: -1696px -608px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_01 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1902px -797px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_02 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1902px -897px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_03 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1627px -470px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_04 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1627px -539px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_05 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1696px -539px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_06 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1627px -884px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_07 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1696px -884px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_08 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1627px -953px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_09 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1696px -1367px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_10 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1902px -697px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_11 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1200px;
+  background-position: -1696px -470px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_12 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1269px;
+  background-position: -1627px -608px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -993px;
+  background-position: -1627px -746px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_congrats {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1338px;
+  background-position: -1696px -746px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_fortify {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1407px;
+  background-position: -1627px -815px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_getwell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1476px;
+  background-position: -1696px -953px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_goodluck {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1929px -642px;
+  background-position: -1627px -1367px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_greeting {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1935px -763px;
+  background-position: -1696px -1298px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1062px;
+  background-position: -1627px -1298px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_opaquePotion {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1131px;
+  background-position: -1696px -1229px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_seafoam {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1338px;
+  background-position: -1627px -1229px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_shinySeed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1545px;
+  background-position: -1696px -1160px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_snowball {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1614px;
+  background-position: -1627px -1160px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_spookySparkles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -993px;
+  background-position: -1696px -1091px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_thankyou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1062px;
+  background-position: -1627px -1091px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_trinket {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1131px;
+  background-position: -1696px -1022px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_valentine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1200px;
+  background-position: -1627px -1022px;
   width: 68px;
   height: 68px;
 }
 .knockout {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -945px;
+  background-position: -1627px -422px;
   width: 120px;
   height: 47px;
 }
 .pet_key {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1545px;
+  background-position: -1696px -815px;
   width: 68px;
   height: 68px;
 }
 .rebirth_orb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1476px;
+  background-position: -1696px -677px;
   width: 68px;
   height: 68px;
 }
 .seafoam_star {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -854px;
+  background-position: -1893px -1179px;
   width: 90px;
   height: 90px;
 }
 .shop_armoire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1913px -1407px;
+  background-position: -1627px -677px;
   width: 68px;
   height: 68px;
 }
 .snowman {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -763px;
+  background-position: -1802px -1361px;
   width: 90px;
   height: 90px;
 }
 .zzz {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1963px -551px;
+  background-position: -220px -255px;
   width: 40px;
   height: 40px;
 }
 .zzz_light {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1963px -510px;
+  background-position: -1748px -422px;
   width: 40px;
   height: 40px;
 }
 .notif_inventory_present_01 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1981px -711px;
+  background-position: -1953px -229px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_02 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1965px -945px;
+  background-position: -1953px -200px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_03 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1965px -1614px;
+  background-position: -1953px -171px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_04 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -1683px;
+  background-position: -1953px -142px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_05 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1873px -1683px;
+  background-position: -1931px -766px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_06 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1902px -1683px;
+  background-position: -1902px -766px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_07 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1737px -1474px;
+  background-position: -1953px -409px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_08 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1960px -1683px;
+  background-position: -1953px -380px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_09 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1679px -1474px;
+  background-position: -1953px -351px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_10 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1963px -592px;
+  background-position: -1953px -322px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_11 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1708px -1474px;
+  background-position: -1953px -258px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_12 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1931px -1683px;
+  background-position: -1953px -293px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_special_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1131px;
+  background-position: -1971px -797px;
   width: 20px;
   height: 24px;
 }
 .notif_inventory_special_congrats {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1156px;
+  background-position: -1927px -866px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_getwell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1981px -740px;
+  background-position: -1948px -866px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_goodluck {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1020px;
+  background-position: -1971px -697px;
   width: 20px;
   height: 26px;
 }
 .notif_inventory_special_greeting {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1200px;
+  background-position: -1969px -866px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -993px;
+  background-position: -1902px -866px;
   width: 24px;
   height: 26px;
 }
 .notif_inventory_special_thankyou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1087px;
+  background-position: -1971px -724px;
   width: 20px;
   height: 24px;
 }
 .notif_inventory_special_valentine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1982px -1062px;
+  background-position: -1971px -822px;
   width: 20px;
   height: 24px;
 }
 .npc_bailey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -203px;
+  background-position: -1627px -1436px;
   width: 60px;
   height: 72px;
 }
 .npc_justin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -642px;
+  background-position: -1802px -576px;
   width: 84px;
   height: 120px;
 }
 .npc_matt {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1155px -1315px;
+  background-position: -208px -1529px;
   width: 195px;
   height: 138px;
 }
@@ -336,22 +498,28 @@
 }
 .banner_flair_dysheartener {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1935px -832px;
+  background-position: -1887px -676px;
   width: 69px;
   height: 18px;
 }
 .phobia_dysheartener {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -1278px;
+  background-position: -307px -220px;
   width: 201px;
   height: 195px;
 }
 .quest_alligator {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -862px;
+  background-position: -967px -660px;
   width: 201px;
   height: 213px;
 }
+.quest_amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1187px -660px;
+  width: 219px;
+  height: 219px;
+}
 .quest_armadillo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
   background-position: -527px 0px;
@@ -360,73 +528,73 @@
 }
 .quest_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -445px -1315px;
+  background-position: -1335px -1315px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -947px -1315px;
+  background-position: 0px -1529px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -967px -660px;
+  background-position: -433px -1315px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: 0px -655px;
+  background-position: -660px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_badger {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -880px -875px;
+  background-position: 0px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -191px -1529px;
+  background-position: -1802px 0px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -1076px;
+  background-position: -747px -440px;
   width: 204px;
   height: 201px;
 }
 .quest_bronze {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1187px -660px;
+  background-position: -880px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1187px -880px;
+  background-position: -222px -1315px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1407px 0px;
+  background-position: -1187px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1407px -660px;
+  background-position: 0px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -307px -220px;
+  background-position: -1627px 0px;
   width: 174px;
   height: 213px;
 }
@@ -438,31 +606,31 @@
 }
 .quest_dilatoryDistress1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -651px;
+  background-position: -1187px -880px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -208px;
+  background-position: -1802px -293px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1100px -1095px;
+  background-position: -1407px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1407px -440px;
+  background-position: -880px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_dolphin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -880px -1095px;
+  background-position: -1407px -660px;
   width: 219px;
   height: 219px;
 }
@@ -474,31 +642,31 @@
 }
 .quest_egg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px 0px;
+  background-position: -1627px -214px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -510px;
+  background-position: -1802px -444px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -440px -1095px;
+  background-position: -1407px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -1095px;
+  background-position: -1100px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: 0px -1095px;
+  background-position: -440px -875px;
   width: 219px;
   height: 219px;
 }
@@ -510,19 +678,19 @@
 }
 .quest_ghost_stag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1187px -440px;
+  background-position: -440px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1187px -220px;
+  background-position: -220px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -696px -1315px;
+  background-position: -1084px -1315px;
   width: 250px;
   height: 150px;
 }
@@ -534,49 +702,49 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -747px -440px;
+  background-position: -867px -1315px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1407px -880px;
+  background-position: -1187px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -660px -875px;
+  background-position: -1187px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1407px -1100px;
+  background-position: -527px -220px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -440px -875px;
+  background-position: -660px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -875px;
+  background-position: -307px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: 0px -875px;
+  background-position: -220px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -527px -220px;
+  background-position: -650px -1315px;
   width: 216px;
   height: 177px;
 }
@@ -600,31 +768,31 @@
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1844px -359px;
+  background-position: -1802px -142px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -660px -655px;
+  background-position: -440px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -440px -655px;
+  background-position: -220px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -655px;
+  background-position: 0px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -217px;
+  background-position: -1407px -880px;
   width: 216px;
   height: 216px;
 }
@@ -660,37 +828,7 @@
 }
 .quest_nudibranch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px -434px;
+  background-position: -1407px -1097px;
   width: 216px;
   height: 216px;
 }
-.quest_octopus {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -222px -1315px;
-  width: 222px;
-  height: 177px;
-}
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -307px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1627px 0px;
-  width: 216px;
-  height: 216px;
-}
-.quest_penguin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: 0px -1529px;
-  width: 190px;
-  height: 183px;
-}
-.quest_pterodactyl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1187px 0px;
-  width: 219px;
-  height: 219px;
-}

website/client/src/assets/scss/tiers.scss

@@ -1,41 +1,83 @@
 .tier1 {
   color: #c42870;
+
+  &:hover, &:active, &:focus {
+    color: #c42870;
+  }
 }
 
 .tier2 {
   color: #b01515;
+
+  &:hover, &:active, &:focus {
+    color: #b01515;
+  }
 }
 
 .tier3 {
   color: #d70e14;
+
+  :hover, :active, :focus {
+    color: #d70e14;
+  }
 }
 
 .tier4 {
   color: #c24d00;
+
+  &:hover, &:active, :focus {
+    color: #c24d00;
+  }
 }
 
 .tier5 {
   color: #9e650f;
+
+  :hover, :active, :focus {
+    color: #9e650f;
+  }
 }
 
 .tier6 {
   color: #2b8363;
+
+  :hover, :active, &:focus {
+    color: #2b8363;
+  }
 }
 
 .tier7 {
   color: #167e87;
+
+  &:hover, &:active, &:focus {
+    color: #167e87;
+  }
 }
 
 .tier8 {
   color: #277eab;
+
+  &:hover, &:active, &:focus {
+    color: #277eab;
+  }
 }
 
 .tier9 {
   color: #6133b4;
+
+  &:hover, &:active, &:focus {
+    color: #6133b4;
+  }
 }
 
 .tierNPC, .npc {
   color: #77f4c7;
   fill: #77f4c7;
   stroke: #005737;
+
+  &:hover, &:active, &:focus {
+    color: #77f4c7;
+    fill: #77f4c7;
+    stroke: #005737;
+  }
 }

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

@@ -33,8 +33,9 @@
             v-model="user.preferences.suppressModals.streak"
             type="checkbox"
             @change="suppressModals"
+            id="user-preferences-suppressModals-streak"
           >
-          <label>{{ $t('dontShowAgain') }}</label>
+          <label for="user-preferences-suppressModals-streak">{{ $t('dontShowAgain') }}</label>
         </div>
       </div>
     </div>

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

@@ -151,7 +151,13 @@ export default {
         'blackTopFrame', 'blueTopFrame', 'greenTopFrame', 'pinkTopFrame', 'redTopFrame', 'whiteTopFrame', 'yellowTopFrame',
         'blackHalfMoon', 'blueHalfMoon', 'greenHalfMoon', 'pinkHalfMoon', 'redHalfMoon', 'whiteHalfMoon', 'yellowHalfMoon',
       ];
-      const options = keys.map(key => {
+      const noneOption = this.createGearItem(0, 'eyewear', 'base');
+      noneOption.none = true;
+      const options = [
+        noneOption,
+      ];
+
+      for (const key of keys) {
         const newKey = `eyewear_special_${key}`;
         const option = {};
         option.key = key;
@@ -164,8 +170,9 @@ export default {
 
           return this.equip(newKey, type);
         };
-        return option;
-      });
+        options.push(option);
+      }
+
       return options;
     },
     freeShirts () {
@@ -179,20 +186,18 @@ export default {
     },
     headbands () {
       const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      const options = keys.map(key => {
-        const newKey = `headAccessory_special_${key}`;
-        const option = {};
-        option.key = key;
-        option.active = this.user.preferences.costume
-          ? this.user.items.gear.costume.headAccessory === newKey
-          : this.user.items.gear.equipped.headAccessory === newKey;
-        option.class = `headAccessory_special_${option.key} headband`;
-        option.click = () => {
-          const type = this.user.preferences.costume ? 'costume' : 'equipped';
-          return this.equip(newKey, type);
-        };
-        return option;
-      });
+      const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
+      noneOption.none = true;
+      const options = [
+        noneOption,
+      ];
+
+      for (const key of keys) {
+        const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+
+        options.push(option);
+      }
+
       return options;
     },
     chairs () {
@@ -234,7 +239,14 @@ export default {
       // user purchases object, this is not recomputed. Hack for now
         let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
       const keys = this.animalItemKeys[category];
-      const options = keys.map(key => {
+
+      const noneOption = this.createGearItem(0, category, 'base', category);
+      noneOption.none = true;
+      const options = [
+        noneOption,
+      ];
+
+      for (const key of keys) {
         const newKey = `${category}_special_${key}`;
         const userPurchased = this.user.items.gear.owned[newKey];
 
@@ -265,8 +277,10 @@ export default {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
           return this.equip(newKey, type);
         };
-        return option;
-      });
+
+        options.push(option);
+      }
+
       return options;
     },
     animalItemsUnlockString (category) {
@@ -285,6 +299,44 @@ export default {
       });
       return own;
     },
+    createGearItem (key, gearType, subGearType, additionalClass) {
+      const newKey = `${gearType}_${subGearType ? `${subGearType}_` : ''}${key}`;
+      const option = {};
+      option.key = key;
+      const visibleGearType = this.user.preferences.costume ? 'costume' : 'equipped';
+      const currentlyEquippedValue = this.user.items.gear[visibleGearType][gearType];
+
+      option.active = currentlyEquippedValue === newKey;
+
+      if (key === 0) {
+        // if key is the "none" option check if a property
+        // doesn't have a value and mark it as active
+        option.active = option.active || !currentlyEquippedValue;
+      }
+
+      option.class = `${newKey} ${additionalClass}`;
+      option.click = () => {
+        const type = this.user.preferences.costume ? 'costume' : 'equipped';
+        const currentlyEquipped = this.user.items.gear[type][gearType];
+
+        // no need to call api/equip-op if its already selected
+        if (currentlyEquipped === newKey || (key === 0 && !currentlyEquipped)) {
+          return;
+        }
+
+        let keyToEquip = newKey;
+
+        if (option.none) {
+          // you need to "equip" the current selected AGAIN in order to un-equip it
+          // the "none-key" isn't allowed to be sent
+          keyToEquip = currentlyEquipped;
+        }
+
+        this.equip(keyToEquip, type);
+      };
+
+      return option;
+    },
   },
 };
 </script>

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

@@ -256,12 +256,18 @@ export default {
         none: true,
       };
 
+      sets.push({
+        options: [
+          emptyHairBase,
+          ...this.baseHair1.map(key => this.mapKeysToFreeOption(key, 'hair', 'base')),
+        ],
+      });
+
       if (this.editing) {
         sets.push({
           fullSet: !this.userOwnsSet('hair', this.baseHair3Keys, 'base'),
           unlock: () => this.unlock(`hair.base.${this.baseHair3Keys.join(',hair.base.')}`),
           options: [
-            emptyHairBase,
             ...this.baseHair3,
           ],
         });
@@ -275,13 +281,6 @@ export default {
         });
       }
 
-      sets.push({
-        options: [
-          emptyHairBase,
-          ...this.baseHair1.map(key => this.mapKeysToFreeOption(key, 'hair', 'base')),
-        ],
-      });
-
       if (this.editing) {
         sets.push({
           fullSet: !this.userOwnsSet('hair', this.baseHair2Keys, 'base'),

website/client/src/components/challenges/challengeDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row">
     <challenge-modal @updatedChallenge="updatedChallenge" />
-    <leave-challenge-modal :challenge-id="challenge._id" />
+    <leave-challenge-modal :challenge-id="challenge._id" @update-challenge="updateChallenge" />
     <close-challenge-modal
       :members="members"
       :challenge-id="challenge._id"
@@ -68,7 +68,7 @@
               class="svg-icon gem-icon"
               v-html="icons.gemIcon"
             ></div>
-            {{ challenge.prize }}
+            {{ challenge.prize || 0 }}
             <div
               v-once
               class="details"
@@ -123,7 +123,7 @@
           class="col-12 col-sm-6"
           :type="column"
           :task-list-override="tasksByType[column]"
-          :show-options="showOptions"
+          :challenge="challenge"
           @editTask="editTask"
           @taskDestroyed="taskDestroyed"
         />
@@ -386,9 +386,6 @@ export default {
     canJoin () {
       return !this.isMember;
     },
-    showOptions () {
-      return this.isLeader;
-    },
   },
   mounted () {
     if (!this.searchId) this.searchId = this.challengeId;
@@ -417,7 +414,12 @@ export default {
       return cleansedTask;
     },
     async loadChallenge () {
-      this.challenge = await this.$store.dispatch('challenges:getChallenge', { challengeId: this.searchId });
+      try {
+        this.challenge = await this.$store.dispatch('challenges:getChallenge', { challengeId: this.searchId });
+      } catch (e) {
+        this.$router.push('/challenges/findChallenges');
+        return;
+      }
       this.members = await this
         .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
       const tasks = await this.$store.dispatch('tasks:getChallengeTasks', { challengeId: this.searchId });
@@ -491,12 +493,20 @@ export default {
     },
     async joinChallenge () {
       this.user.challenges.push(this.searchId);
-      await this.$store.dispatch('challenges:joinChallenge', { challengeId: this.searchId });
+      this.challenge = await this.$store.dispatch('challenges:joinChallenge', { challengeId: this.searchId });
+      this.members = await this
+        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+
       await this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true });
     },
     async leaveChallenge () {
       this.$root.$emit('bv::show::modal', 'leave-challenge-modal');
     },
+    async updateChallenge () {
+      this.challenge = await this.$store.dispatch('challenges:getChallenge', { challengeId: this.searchId });
+      this.members = await this
+        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+    },
     closeChallenge () {
       this.$root.$emit('bv::show::modal', 'close-challenge-modal');
     },

website/client/src/components/challenges/challengeItem.vue

@@ -6,7 +6,7 @@
           class="svg-icon"
           v-html="icons.gemIcon"
         ></span>
-        <span class="value">{{ challenge.prize }}</span>
+        <span class="value">{{ challenge.prize || 0 }}</span>
       </div>
       <div class="label">
         {{ $t('prize') }}

website/client/src/components/challenges/challengeModal.vue

@@ -2,6 +2,8 @@
   <b-modal
     id="challenge-modal"
     :title="title"
+    :no-close-on-esc="true"
+    :no-close-on-backdrop="true"
     size="lg"
     @shown="shown"
   >

website/client/src/components/challenges/leaveChallengeModal.vue

@@ -54,6 +54,7 @@ export default {
       this.close();
     },
     close () {
+      this.$emit('update-challenge');
       this.$root.$emit('bv::hide::modal', 'leave-challenge-modal');
     },
   },

website/client/src/components/group-plans/taskInformation.vue

@@ -75,7 +75,6 @@
         class="col-12 col-md-3"
         :type="column"
         :task-list-override="tasksByType[column]"
-        :show-options="showOptions"
         :group="group"
         :search-text="searchText"
         @editTask="editTask"
@@ -199,9 +198,6 @@ export default {
       return (this.group.leader && this.group.leader._id === this.user._id)
         || (this.group.managers && Boolean(this.group.managers[this.user._id]));
     },
-    showOptions () {
-      return this.canCreateTasks;
-    },
   },
   watch: {
     // call again the method if the route changes (when this route is already active)

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

@@ -160,7 +160,7 @@
           </div>
         </div>
       </div>
-      <div>
+      <div class="px-3 py-3">
         <quest-sidebar-section
           v-if="isParty"
           :group="group"
@@ -255,11 +255,10 @@
   .sidebar {
     background-color: $gray-600;
     padding-bottom: 2em;
-
   }
 
   .buttons-wrapper {
-    padding-top: 2.8em;
+    padding: 2.8em 24px 0em 24px;
   }
 
   .card {

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

@@ -229,7 +229,7 @@
           -info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
           -->
         </div>
-        <div class="sleep below-header-sections">
+        <div class="sleep px-4 py-3">
           <strong v-once>{{ $t('sleepDescription') }}</strong>
           <ul>
             <li v-once>
@@ -263,7 +263,7 @@
           </button>
         </div>
       </div>
-      <div class="px-3">
+      <div class="px-4">
         <sidebar-section :title="$t('staffAndModerators')">
           <div class="row">
             <div
@@ -511,10 +511,6 @@
   .sidebar {
     background-color: $gray-600;
     padding: 0em;
-
-    .below-header-sections {
-      padding: 1em 1.75em 1em 1.75em;
-    }
   }
 
   .pause-button {

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

@@ -169,7 +169,7 @@ export default {
       openStatus: undefined,
       actionableNotifications: [
         'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
-        'QUEST_INVITATION', 'GROUP_TASK_NEEDS_WORK', 'GROUP_TASK_APPROVAL',
+        'QUEST_INVITATION', 'GROUP_TASK_NEEDS_WORK',
       ],
       // A list of notifications handled by this component,
       // listed in the order they should appear in the notifications panel.

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -70,7 +70,8 @@
     }
 
     .text {
-      height: 60px;
+      height: auto;
+      min-height: 60px;
       font-size: 14px;
       line-height: 1.43;
       text-align: center;

website/client/src/components/inventory/stable/index.vue

@@ -767,7 +767,6 @@ export default {
         case 'sortByHatchable': {
           if (isPetList) {
             const sortFunc = i => (i.isHatchable() ? 0 : 1);
-
             animals = _sortBy(animals, [sortFunc]);
           }
           break;
@@ -800,6 +799,8 @@ export default {
         groupKey = 'potionKey';
       } else if (sortBy === 'AZ') {
         groupKey = '';
+      } else if (sortBy === 'sortByHatchable') {
+        groupKey = i => (i.isHatchable() ? 0 : 1);
       }
 
       return groupBy(pets, groupKey);

website/client/src/components/members/memberSearchDropdown.vue

@@ -19,7 +19,7 @@
       :key="member._id"
       @click="selectMember(member)"
     >
-      {{ member.profile.name }}
+      @{{ member.auth.local.username }}
     </b-dropdown-item>
   </b-dropdown>
 </template>

website/client/src/components/notifications.vue

@@ -184,11 +184,19 @@ const NOTIFICATIONS = {
     achievement: true,
     label: $t => `${$t('achievement')}: ${$t('achievementPartyUp')}`,
     modalId: 'generic-achievement',
+    data: {
+      message: $t => $t('achievement'),
+      modalText: $t => $t('achievementPartyUp'),
+    },
   },
   ACHIEVEMENT_PARTY_ON: {
     achievement: true,
     label: $t => `${$t('achievement')}: ${$t('achievementPartyOn')}`,
     modalId: 'generic-achievement',
+    data: {
+      message: $t => $t('achievement'),
+      modalText: $t => $t('achievementPartyOn'),
+    },
   },
   ACHIEVEMENT_BEAST_MASTER: {
     achievement: true,
@@ -196,7 +204,7 @@ const NOTIFICATIONS = {
     modalId: 'generic-achievement',
     data: {
       message: $t => $t('achievement'),
-      modalText: $t => $t('mountAchievement'),
+      modalText: $t => $t('beastAchievement'),
     },
   },
   ACHIEVEMENT_MOUNT_MASTER: {
@@ -227,6 +235,16 @@ const NOTIFICATIONS = {
     label: $t => `${$t('achievement')}: ${$t('achievementUndeadUndertaker')}`,
     modalId: 'generic-achievement',
   },
+  ACHIEVEMENT_PRIMED_FOR_PAINTING: {
+    achievement: true,
+    label: $t => `${$t('achievement')}: ${$t('achievementPrimedForPainting')}`,
+    modalId: 'generic-achievement',
+  },
+  ACHIEVEMENT_PEARLY_PRO: {
+    achievement: true,
+    label: $t => `${$t('achievement')}: ${$t('achievementPearlyPro')}`,
+    modalId: 'generic-achievement',
+  },
 };
 
 export default {
@@ -283,7 +301,8 @@ export default {
       'CRON', 'SCORED_TASK', 'LOGIN_INCENTIVE', 'ACHIEVEMENT_ALL_YOUR_BASE', 'ACHIEVEMENT_BACK_TO_BASICS',
       'GENERIC_ACHIEVEMENT', 'ACHIEVEMENT_PARTY_UP', 'ACHIEVEMENT_PARTY_ON', 'ACHIEVEMENT_BEAST_MASTER',
       'ACHIEVEMENT_MOUNT_MASTER', 'ACHIEVEMENT_TRIAD_BINGO', 'ACHIEVEMENT_DUST_DEVIL', 'ACHIEVEMENT_ARID_AUTHORITY',
-      'ACHIEVEMENT_MONSTER_MAGUS', 'ACHIEVEMENT_UNDEAD_UNDERTAKER', 'GENERIC_ACHIEVEMENT',
+      'ACHIEVEMENT_MONSTER_MAGUS', 'ACHIEVEMENT_UNDEAD_UNDERTAKER', 'ACHIEVEMENT_PRIMED_FOR_PAINTING',
+      'ACHIEVEMENT_PEARLY_PRO', 'GENERIC_ACHIEVEMENT',
     ].forEach(type => {
       handledNotifications[type] = true;
     });
@@ -445,10 +464,10 @@ export default {
         data = notification.data;
       }
 
-      if (!data.modalText && config.data.modalText) {
+      if (!data.modalText && config && config.data && config.data.modalText) {
         data.modalText = config.data.modalText(this.$t);
       }
-      if (!data.message && config.data.message) {
+      if (!data.message && config && config.data && config.data.message) {
         data.message = config.data.message(this.$t);
       }
 
@@ -689,6 +708,8 @@ export default {
           case 'ACHIEVEMENT_TRIAD_BINGO':
           case 'ACHIEVEMENT_MONSTER_MAGUS':
           case 'ACHIEVEMENT_UNDEAD_UNDERTAKER':
+          case 'ACHIEVEMENT_PRIMED_FOR_PAINTING':
+          case 'ACHIEVEMENT_PEARLY_PRO':
           case 'GENERIC_ACHIEVEMENT':
             this.showNotificationWithModal(notification);
             break;

website/client/src/components/settings/api.vue

@@ -32,14 +32,8 @@
             <br>
             {{ $t('beeminderDesc') }}
           </li>
-          <li>
-            <a
-              target="_blank"
-              href="https://chrome.google.com/webstore/detail/habitrpg-chat-client/hidkdfgonpoaiannijofifhjidbnilbb"
-            >{{ $t('chromeChatExtension') }}</a>
-            <br>
-            {{ $t('chromeChatExtensionDesc') }}
-          </li>
+          <li v-html="$t('chatExtension')"></li>
+          <span>{{ $t('chatExtensionDesc') }}</span>
           <li>
             <a
               target="_blank"
@@ -48,10 +42,8 @@
             <br>
             {{ $t('dataToolDesc') }}
           </li>
-          <li v-html="$t('otherExtensions')">
-            <br>
-            {{ $t('otherDesc') }}
-          </li>
+          <li v-html="$t('otherExtensions')"></li>
+          <span>{{ $t('otherDesc') }}</span>
         </ul>
         <hr>
       </div>

website/client/src/components/snackbars/notification.vue

@@ -215,8 +215,12 @@ export default {
     },
   },
   created () {
-    const timeout = this.notification && this.notification.timeout
-      ? this.notification.timeout : true;
+    const timeout = (
+      this.notification
+      && this.notification.timeout !== undefined
+      && this.notification.timeout !== null
+    ) ? this.notification.timeout : true;
+
     if (timeout) {
       let delay = this.notification.delay || 1500;
       delay += this.$store.state.notificationStore.length * 1000;

website/client/src/components/tasks/column.vue

@@ -90,8 +90,8 @@
           :key="task.id"
           :task="task"
           :is-user="isUser"
-          :show-options="showOptions"
           :group="group"
+          :challenge="challenge"
           @editTask="editTask"
           @moveTo="moveTo"
           @taskDestroyed="taskDestroyed"
@@ -372,10 +372,7 @@ export default {
     selectedTags: {},
     taskListOverride: {},
     group: {},
-    showOptions: {
-      type: Boolean,
-      default: true,
-    },
+    challenge: {},
   }, // @TODO: maybe we should store the group on state?
   data () {
     const icons = Object.freeze({

website/client/src/components/tasks/task.vue

@@ -99,6 +99,7 @@
                 </div>
                 <div slot="dropdown-content">
                   <div
+                    v-if="showEdit"
                     ref="editTaskItem"
                     class="dropdown-item edit-task-item"
                   >
@@ -137,7 +138,7 @@
                     </span>
                   </div>
                   <div
-                    v-if="canDelete(task)"
+                    v-if="showDelete"
                     class="dropdown-item"
                     @click="destroy"
                   >
@@ -371,7 +372,7 @@
 
     &:hover {
       box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
-      z-index: 10;
+      z-index: 11;
     }
   }
 
@@ -789,6 +790,7 @@ import moment from 'moment';
 import axios from 'axios';
 import Vue from 'vue';
 import uuid from 'uuid';
+import isEmpty from 'lodash/isEmpty';
 import { mapState, mapGetters, mapActions } from '@/libs/store';
 import scoreTask from '@/../../common/script/ops/scoreTask';
 import * as Analytics from '@/libs/analytics';
@@ -825,7 +827,7 @@ export default {
     markdown: markdownDirective,
   },
   mixins: [notifications],
-  props: ['task', 'isUser', 'group', 'dueDate', 'showOptions'], // @TODO: maybe we should store the group on state?
+  props: ['task', 'isUser', 'group', 'challenge', 'dueDate'], // @TODO: maybe we should store the group on state?
   data () {
     return {
       random: uuid.v4(), // used to avoid conflicts between checkboxes ids
@@ -859,6 +861,7 @@ export default {
       getTagsFor: 'tasks:getTagsFor',
       getTaskClasses: 'tasks:getTaskClasses',
       canDelete: 'tasks:canDelete',
+      canEdit: 'tasks:canEdit',
     }),
     hasChecklist () {
       return this.task.checklist && this.task.checklist.length > 0;
@@ -937,6 +940,27 @@ export default {
 
       return this.task.challenge.shortName ? this.task.challenge.shortName.toString() : '';
     },
+    isChallangeTask () {
+      return !isEmpty(this.task.challenge);
+    },
+    isGroupTask () {
+      return this.task.group.taskId || this.task.group.id;
+    },
+    taskCategory () {
+      let taskCategory = 'default';
+      if (this.isGroupTask) taskCategory = 'group';
+      else if (this.isChallangeTask) taskCategory = 'challenge';
+      return taskCategory;
+    },
+    showDelete () {
+      return this.canDelete(this.task, this.taskCategory, this.isUser, this.group, this.challenge);
+    },
+    showEdit () {
+      return this.canEdit(this.task, this.taskCategory, this.isUser, this.group, this.challenge);
+    },
+    showOptions () {
+      return this.showEdit || this.showDelete || this.isUser;
+    },
   },
   methods: {
     ...mapActions({
@@ -950,7 +974,7 @@ export default {
       this.scoreChecklistItem({ taskId: this.task._id, itemId: item.id });
     },
     edit (e, task) {
-      if (this.isRunningYesterdailies) return;
+      if (this.isRunningYesterdailies || !this.showEdit) return;
 
       // Prevent clicking on a link from opening the edit modal
       const target = e.target || e.srcElement;

website/client/src/components/tasks/taskModal.vue

@@ -1437,6 +1437,10 @@ export default {
         this.task.group.sharedCompletion = this.sharedCompletion;
       }
 
+      if (this.task.type === 'reward' && this.task.value === '') {
+        this.task.value = 0;
+      }
+
       if (this.purpose === 'create') {
         if (this.challengeId) {
           const response = await this.$store.dispatch('tasks:createChallengeTasks', {

website/client/src/components/tasks/user.vue

@@ -246,6 +246,8 @@
   @import '~@/assets/scss/create-task.scss';
 
   .user-tasks-page {
+    padding-left: 12px;
+    padding-right: 12px;
     padding-top: 16px;
   }
 

website/client/src/components/ui/filterDropdown.vue

@@ -3,7 +3,7 @@
     <span class="dropdown-label">{{ label }}</span>
     <b-dropdown right="right">
       <span
-        slot="text"
+        slot="button-content"
         :class="{'dropdown-icon-item': withIcon}"
       >
         <slot

website/client/src/components/userMenu/profile.vue

@@ -756,6 +756,7 @@ export default {
   },
   mounted () {
     this.loadUser();
+    this.selectPage(this.startingPage);
   },
   methods: {
     async loadUser () {

website/client/src/store/getters/tasks.js

@@ -34,12 +34,75 @@ function getTaskColor (task) {
   return 'best';
 }
 
-export function canDelete () {
-  return task => {
-    const isUserChallenge = Boolean(task.userId);
-    const activeChallenge = isUserChallenge
-      && task.challenge && task.challenge.id && !task.challenge.broken;
-    return !activeChallenge;
+export function canDelete (store) {
+  return (task, taskCategory, onUserDashboard, group, challenge) => {
+    const user = store.state.user.data;
+    const userId = user.id || user._id;
+
+    const isUserAdmin = user.contributor && !!user.contributor.admin;
+    const isUserGroupLeader = group && (group.leader
+      && group.leader._id === userId);
+    const isUserGroupManager = group && (group.managers
+        && Boolean(group.managers[userId]));
+    const isUserChallenge = userId === (challenge && challenge.leader.id);
+
+    let isUserCanDeleteTask = onUserDashboard;
+
+    switch (taskCategory) {
+      case 'challenge':
+        if (!onUserDashboard) {
+          isUserCanDeleteTask = isUserChallenge || isUserAdmin;
+        } else {
+          isUserCanDeleteTask = isUserAdmin;
+        }
+        break;
+      case 'group':
+        if (!onUserDashboard) {
+          isUserCanDeleteTask = isUserGroupLeader || isUserGroupManager || isUserAdmin;
+        } else {
+          isUserCanDeleteTask = isUserAdmin;
+        }
+        break;
+      default:
+        break;
+    }
+    return Boolean(isUserCanDeleteTask);
+  };
+}
+
+export function canEdit (store) {
+  return (task, taskCategory, onUserDashboard, group, challenge) => {
+    let isUserCanEditTask = onUserDashboard;
+    const user = store.state.user.data;
+    const userId = user.id || user._id;
+
+    const isUserAdmin = user.contributor && !!user.contributor.admin;
+    const isUserGroupLeader = group && (group.leader
+      && group.leader._id === userId);
+    const isUserGroupManager = group && (group.managers
+        && Boolean(group.managers[userId]));
+    const isUserChallenge = userId === (challenge && challenge.leader.id);
+
+
+    switch (taskCategory) {
+      case 'challenge':
+        if (!onUserDashboard) {
+          isUserCanEditTask = isUserChallenge || isUserAdmin;
+        } else {
+          isUserCanEditTask = true;
+        }
+        break;
+      case 'group':
+        if (!onUserDashboard) {
+          isUserCanEditTask = isUserGroupLeader || isUserGroupManager || isUserAdmin;
+        } else {
+          isUserCanEditTask = true;
+        }
+        break;
+      default:
+        break;
+    }
+    return Boolean(isUserCanEditTask);
   };
 }
 

website/client/tests/unit/store/getters/tasks/canDelete.spec.js

@@ -1,19 +1,73 @@
 import generateStore from '@/store';
 
+
 describe('canDelete getter', () => {
-  it('cannot delete active challenge task', () => {
-    const store = generateStore();
+  let store;
+  let group;
+  let challenge;
+  let task;
 
+  beforeEach(() => {
+    store = generateStore();
 
-    const task = { userId: 1, challenge: { id: 2 } };
-    expect(store.getters['tasks:canDelete'](task)).to.equal(false);
+    store.state.user.data = {
+      id: 10,
+      contributor: {
+        admin: false,
+      },
+    };
+
+    group = {
+      leader: {
+        _id: 123,
+      },
+      managers: {
+        123984: {},
+      },
+    };
+
+    challenge = {
+      leader: {
+        id: 123,
+      },
+    };
+
+    task = { userId: 1, challenge: { id: 2 } };
+  });
+  it('cannot Delete challenge or group task in own dashboard', () => {
+    expect(store.getters['tasks:canDelete'](task, 'challenge', true, null, challenge)).to.equal(false);
+    expect(store.getters['tasks:canDelete'](task, 'group', true, group, null)).to.equal(false);
   });
 
-  it('can delete broken challenge task', () => {
-    const store = generateStore();
+  it('can Delete any challenge task as admin', () => {
+    store.state.user.data.contributor.admin = true;
 
+    expect(store.getters['tasks:canDelete'](task, 'challenge', true, null, challenge)).to.equal(true);
+  });
 
-    const task = { userId: 1, challenge: { id: 2, broken: true } };
-    expect(store.getters['tasks:canDelete'](task)).to.equal(true);
+  it('can Delete own challenge task if leader', () => {
+    store.state.user.data.id = 123;
+
+    expect(store.getters['tasks:canDelete'](task, 'challenge', false, null, challenge)).to.equal(true);
+  });
+
+  it('cannot Delete challenge task if non leader on challenge page', () => {
+    expect(store.getters['tasks:canDelete'](task, 'challenge', false, null, challenge)).to.equal(false);
+  });
+
+  it('can Delete group task as leader on group page', () => {
+    store.state.user.data.id = 123;
+
+    expect(store.getters['tasks:canDelete'](task, 'group', false, group)).to.equal(true);
+  });
+
+  it('can Delete group task if manager on group page', () => {
+    store.state.user.data.id = 123984;
+
+    expect(store.getters['tasks:canDelete'](task, 'group', false, group)).to.equal(true);
+  });
+
+  it('cannot Delete group task if not a leader on group page', () => {
+    expect(store.getters['tasks:canDelete'](task, 'group', false, group)).to.equal(false);
   });
 });

website/client/tests/unit/store/getters/tasks/canEdit.spec.js

@@ -0,0 +1,75 @@
+import generateStore from '@/store';
+
+
+describe('canEdit getter', () => {
+  let store;
+  let group;
+  let challenge;
+  let task;
+
+  beforeEach(() => {
+    store = generateStore();
+
+    store.state.user.data = {
+      id: 10,
+      contributor: {
+        admin: false,
+      },
+    };
+
+    group = {
+      leader: {
+        _id: 123,
+      },
+      managers: {
+        123984: {},
+      },
+    };
+
+    challenge = {
+      leader: {
+        id: 123,
+      },
+    };
+
+    task = { userId: 1, challenge: { id: 2 } };
+  });
+  it('can Edit task in own dashboard', () => {
+    expect(store.getters['tasks:canEdit'](task, 'challenge', true, null, challenge)).to.equal(true);
+    expect(store.getters['tasks:canEdit'](task, 'group', true, group, null)).to.equal(true);
+  });
+
+  it('can Edit any challenge task if admin', () => {
+    store.state.user.data.contributor.admin = true;
+
+    expect(store.getters['tasks:canEdit'](task, 'challenge', true, null, challenge)).to.equal(true);
+    expect(store.getters['tasks:canEdit'](task, 'challenge', false, null, challenge)).to.equal(true);
+  });
+
+  it('can Edit own challenge task if leader', () => {
+    store.state.user.data.id = 123;
+
+    expect(store.getters['tasks:canEdit'](task, 'challenge', true, null, challenge)).to.equal(true);
+    expect(store.getters['tasks:canEdit'](task, 'challenge', false, null, challenge)).to.equal(true);
+  });
+
+  it('cannot Edit challenge task if not leader on challenge page', () => {
+    expect(store.getters['tasks:canEdit'](task, 'challenge', false, null, challenge)).to.equal(false);
+  });
+
+  it('can Edit group task as leader on group page', () => {
+    store.state.user.data.id = 123;
+
+    expect(store.getters['tasks:canEdit'](task, 'group', false, group)).to.equal(true);
+  });
+
+  it('can Edit group task if manager on group page', () => {
+    store.state.user.data.id = 123984;
+
+    expect(store.getters['tasks:canEdit'](task, 'group', false, group)).to.equal(true);
+  });
+
+  it('cannot Edit group task if not leader on group page', () => {
+    expect(store.getters['tasks:canEdit'](task, 'group', false, group)).to.equal(false);
+  });
+});