4.74.5

also remove Kafka

.nvmrc

@@ -1 +1 @@
-8
+10

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '8'
+  - '10'
 services:
   - mongodb
 cache:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8
+FROM node:10
 
 ENV ADMIN_EMAIL admin@habitica.com
 ENV AMAZON_PAYMENTS_CLIENT_ID amzn1.application-oa2-client.68ed9e6904ef438fbc1bf86bf494056e

Dockerfile-Dev

@@ -1,4 +1,4 @@
-FROM node:8
+FROM node:10
 
 # Install global packages
 RUN npm install -g gulp-cli mocha

config.json.example

@@ -44,7 +44,8 @@
         "SELLER_ID": "SELLER_ID",
         "CLIENT_ID": "CLIENT_ID",
         "MWS_KEY": "",
-        "MWS_SECRET": ""
+        "MWS_SECRET": "",
+        "MODE": "sandbox"
     },
     "FLAG_REPORT_EMAIL": "email@mod.com,email2@mod.com",
     "EMAIL_SERVER": {

migrations/archive/mystery-items-old.js

@@ -0,0 +1,110 @@
+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/migration-runner.js

@@ -17,7 +17,7 @@ function setUpServer () {
 setUpServer();
 
 // Replace this with your migration
-const processUsers = require('../scripts/gdpr-delete-users.js');
+const processUsers = require('./users/20181122_turkey_day.js');
 processUsers()
   .then(function success () {
     process.exit(0);

migrations/users/20181023_veteran_pet_ladder.js

@@ -2,56 +2,15 @@
 const MIGRATION_NAME = '20181023_veteran_pet_ladder';
 import { model as User } from '../../website/server/models/user';
 
-function processUsers (lastId) {
-  let query = {
-    migration: {$ne: MIGRATION_NAME},
-    'flags.verifiedUsername': true,
-  };
-
-  let fields = {
-    'items.pets': 1,
-  };
-
-  if (lastId) {
-    query._id = {
-      $gt: lastId,
-    };
-  }
-
-  return User.find(query)
-    .limit(250)
-    .sort({_id: 1})
-    .select(fields)
-    .then(updateUsers)
-    .catch((err) => {
-      console.log(err);
-      return exiting(1, `ERROR! ${err}`);
-    });
-}
-
-let progressCount = 1000;
+const 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) {
+async function updateUser (user) {
   count++;
 
-  let set = {migration: MIGRATION_NAME};
+  const set = {};
+
+  set.migration = MIGRATION_NAME;
 
   if (user.items.pets['Bear-Veteran']) {
     set['items.pets.Fox-Veteran'] = 5;
@@ -67,27 +26,41 @@ function updateUser (user) {
 
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
-  return user.update({_id: user._id}, {$set: set}).exec();
+  return await User.update({_id: user._id}, {$set: set}).exec();
 }
 
-function displayData () {
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'flags.verifiedUsername': true,
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+    migration: 1,
+    flags: 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`);
-  return exiting(0);
-}
-
-function exiting (code, msg) {
-  code = code || 0; // 0 = success
-  if (code && !msg) {
-    msg = 'ERROR!';
-  }
-  if (msg) {
-    if (code) {
-      console.error(msg);
+      break;
     } else {
-      console.log(msg);
-    }
-  }
-  process.exit(code);
+      query._id = {
+        $gt: users[users.length - 1],
+      };
     }
 
-module.exports = processUsers;
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/users/20181122_turkey_day.js

@@ -0,0 +1,109 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20181122_turkey_day';
+import mongoose from 'mongoose';
+import { model as User } from '../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {};
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  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: new mongoose.Types.ObjectId(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.armor_special_turkeyArmorGilded',
+        _id: new mongoose.Types.ObjectId(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.back_special_turkeyTailGilded',
+        _id: new mongoose.Types.ObjectId(),
+      },
+    ];
+  } 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: new mongoose.Types.ObjectId(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.armor_special_turkeyArmorBase',
+        _id: new mongoose.Types.ObjectId(),
+      },
+      {
+        type: 'marketGear',
+        path: 'gear.flat.back_special_turkeyTailBase',
+        _id: new mongoose.Types.ObjectId(),
+      },
+    ];
+  } 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 (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},
+  };
+
+  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/users/mystery-items.js

@@ -1,70 +1,13 @@
-import monk from 'monk';
-import nconf from 'nconf';
+/* eslint-disable no-console */
+const MIGRATION_NAME = 'mystery_items_201811';
+const MYSTERY_ITEMS = ['head_mystery_201811', 'weapon_mystery_201811'];
+import { model as User } from '../../website/server/models/user';
+import { model as UserNotification } from '../../website/server/models/userNotification';
 
-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;
+const 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) {
+async function updateUser (user) {
   count++;
 
   const addToSet = {
@@ -80,31 +23,49 @@ function updateUser (user) {
       },
     })).toJSON(),
   };
-
-  dbUsers.update({_id: user._id}, {$addToSet: addToSet, $push: push});
+  const set = {
+    migration: MIGRATION_NAME,
+  };
 
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
-  if (user._id === authorUuid) console.warn(`${authorName  } processed`);
+
+  return await User.update({_id: user._id}, {$set: set, $push: push, $addToSet: addToSet}).exec();
 }
 
-function displayData () {
+module.exports = async function processUsers () {
+  let 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`);
-  return exiting(0);
-}
-
-function exiting (code, msg) {
-  code = code || 0; // 0 = success
-  if (code && !msg) {
-    msg = 'ERROR!';
-  }
-  if (msg) {
-    if (code) {
-      console.error(msg);
+      break;
     } else {
-      console.log(msg);
-    }
-  }
-  process.exit(code);
+      query._id = {
+        $gt: users[users.length - 1],
+      };
     }
 
-module.exports = processUsers;
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.69.2",
+  "version": "4.74.5",
   "main": "./website/server/index.js",
   "dependencies": {
     "@slack/client": "^3.8.1",
@@ -33,7 +33,7 @@
     "compression": "^1.7.2",
     "cookie-session": "^1.2.0",
     "coupon-code": "^0.4.5",
-    "cross-env": "^5.1.5",
+    "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
     "csv-stringify": "^4.3.1",
     "cwait": "^1.1.1",
@@ -46,7 +46,7 @@
     "got": "^9.0.0",
     "gulp": "^4.0.0",
     "gulp-babel": "^7.0.1",
-    "gulp-imagemin": "^4.1.0",
+    "gulp-imagemin": "^5.0.3",
     "gulp-nodemon": "^2.4.1",
     "gulp.spritesmith": "^6.9.0",
     "habitica-markdown": "^1.3.0",
@@ -80,17 +80,17 @@
     "ps-tree": "^1.0.0",
     "pug": "^2.0.3",
     "rimraf": "^2.4.3",
-    "sass-loader": "^7.0.0",
+    "sass-loader": "^7.0.3",
     "shelljs": "^0.8.2",
     "short-uuid": "^3.0.0",
     "smartbanner.js": "^1.9.1",
     "stripe": "^5.9.0",
-    "superagent": "^3.8.3",
+    "superagent": "^4.0.0",
     "svg-inline-loader": "^0.8.0",
     "svg-url-loader": "^2.3.2",
     "svgo": "^1.0.5",
     "svgo-loader": "^2.1.0",
-    "universal-analytics": "^0.4.16",
+    "universal-analytics": "^0.4.17",
     "update": "^0.7.4",
     "upgrade": "^1.1.0",
     "url-loader": "^1.0.0",
@@ -107,15 +107,15 @@
     "vuedraggable": "^2.15.0",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#5d237615463a84a23dd6f3f77c6ab577d68593ec",
     "webpack": "^3.12.0",
-    "webpack-merge": "^4.0.0",
-    "winston": "^2.4.2",
+    "webpack-merge": "^4.1.3",
+    "winston": "^2.4.3",
     "winston-loggly-bulk": "^2.0.2",
     "xml2js": "^0.4.4"
   },
   "private": true,
   "engines": {
-    "node": "^8.9.4",
-    "npm": "^5.6.0"
+    "node": "^10",
+    "npm": "^6"
   },
   "scripts": {
     "lint": "eslint --ext .js,.vue .",
@@ -144,13 +144,13 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.16",
+    "@vue/test-utils": "^1.0.0-beta.19",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-object-rest-spread": "^6.13.0",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "chalk": "^2.4.1",
-    "chromedriver": "^2.38.3",
+    "chromedriver": "^2.40.0",
     "connect-history-api-fallback": "^1.1.0",
     "coveralls": "^3.0.1",
     "cross-spawn": "^6.0.5",
@@ -180,7 +180,7 @@
     "mocha": "^5.1.1",
     "monk": "^6.0.6",
     "nightwatch": "^0.9.21",
-    "puppeteer": "^1.4.0",
+    "puppeteer": "^1.5.0",
     "require-again": "^2.0.0",
     "selenium-server": "^3.12.0",
     "sinon": "^6.3.5",
@@ -190,8 +190,5 @@
     "webpack-dev-middleware": "^2.0.5",
     "webpack-hot-middleware": "^2.22.2"
   },
-  "optionalDependencies": {
-    "memwatch-next": "^0.3.0",
-    "node-rdkafka": "^2.3.0"
-  }
+  "optionalDependencies": {}
 }

test/api/unit/libs/password.test.js

@@ -245,7 +245,9 @@ describe('Password Utilities', () => {
 
     it('returns false if the user has no local auth', async () => {
       let user = await generateUser({
-        auth: 'not an object with valid fields',
+        auth: {
+          facebook: {},
+        },
       });
       let res = await validatePasswordResetCodeAndFindUser(encrypt(JSON.stringify({
         userId: user._id,

test/api/unit/models/group.test.js

@@ -569,7 +569,7 @@ describe('Group Model', () => {
       });
 
       it('throws an error if no uuids or emails are passed in', async () => {
-        await expect(Group.validateInvitations(null, null, res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({}, res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
@@ -579,7 +579,7 @@ describe('Group Model', () => {
       });
 
       it('throws an error if only uuids are passed in, but they are not an array', async () => {
-        await expect(Group.validateInvitations({ uuid: 'user-id'}, null, res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({ uuids: 'user-id'}, res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
@@ -589,7 +589,7 @@ describe('Group Model', () => {
       });
 
       it('throws an error if only emails are passed in, but they are not an array', async () => {
-        await expect(Group.validateInvitations(null, { emails: 'user@example.com'}, res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({emails: 'user@example.com'}, res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
@@ -599,27 +599,27 @@ describe('Group Model', () => {
       });
 
       it('throws an error if emails are not passed in, and uuid array is empty', async () => {
-        await expect(Group.validateInvitations([], null, res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({uuids: []},  res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
         });
         expect(res.t).to.be.calledOnce;
-        expect(res.t).to.be.calledWith('inviteMissingUuid');
+        expect(res.t).to.be.calledWith('inviteMustNotBeEmpty');
       });
 
       it('throws an error if uuids are not passed in, and email array is empty', async () => {
-        await expect(Group.validateInvitations(null, [], res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({emails: []},  res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
         });
         expect(res.t).to.be.calledOnce;
-        expect(res.t).to.be.calledWith('inviteMissingEmail');
+        expect(res.t).to.be.calledWith('inviteMustNotBeEmpty');
       });
 
       it('throws an error if uuids and emails are passed in as empty arrays', async () => {
-        await expect(Group.validateInvitations([], [], res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({emails: [], uuids: []}, res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
@@ -639,7 +639,7 @@ describe('Group Model', () => {
 
         uuids.push('one-more-uuid'); // to put it over the limit
 
-        await expect(Group.validateInvitations(uuids, emails, res)).to.eventually.be.rejected.and.eql({
+        await expect(Group.validateInvitations({uuids, emails}, res)).to.eventually.be.rejected.and.eql({
           httpCode: 400,
           message: 'Bad request.',
           name: 'BadRequest',
@@ -657,33 +657,33 @@ describe('Group Model', () => {
           emails.push(`user-${i}@example.com`);
         }
 
-        await Group.validateInvitations(uuids, emails, res);
+        await Group.validateInvitations({uuids, emails}, res);
         expect(res.t).to.not.be.called;
       });
 
 
       it('does not throw an error if only user ids are passed in', async () => {
-        await Group.validateInvitations(['user-id', 'user-id2'], null, res);
+        await Group.validateInvitations({uuids: ['user-id', 'user-id2']}, res);
         expect(res.t).to.not.be.called;
       });
 
       it('does not throw an error if only emails are passed in', async () => {
-        await Group.validateInvitations(null, ['user1@example.com', 'user2@example.com'], res);
+        await Group.validateInvitations({emails: ['user1@example.com', 'user2@example.com']}, res);
         expect(res.t).to.not.be.called;
       });
 
       it('does not throw an error if both uuids and emails are passed in', async () => {
-        await Group.validateInvitations(['user-id', 'user-id2'], ['user1@example.com', 'user2@example.com'], res);
+        await Group.validateInvitations({uuids: ['user-id', 'user-id2'], emails: ['user1@example.com', 'user2@example.com']}, res);
         expect(res.t).to.not.be.called;
       });
 
       it('does not throw an error if uuids are passed in and emails are an empty array', async () => {
-        await Group.validateInvitations(['user-id', 'user-id2'], [], res);
+        await Group.validateInvitations({uuids: ['user-id', 'user-id2'], emails: []}, res);
         expect(res.t).to.not.be.called;
       });
 
       it('does not throw an error if emails are passed in and uuids are an empty array', async () => {
-        await Group.validateInvitations([], ['user1@example.com', 'user2@example.com'], res);
+        await Group.validateInvitations({uuids: [], emails: ['user1@example.com', 'user2@example.com']}, res);
         expect(res.t).to.not.be.called;
       });
     });
@@ -1843,6 +1843,62 @@ describe('Group Model', () => {
         expect(options.chat).to.eql(chat);
       });
 
+      it('sends webhooks for users with webhooks triggered by system messages', async () => {
+        let guild = new Group({
+          name: 'some guild',
+          type: 'guild',
+        });
+
+        let memberWithWebhook = new User({
+          guilds: [guild._id],
+          webhooks: [{
+            type: 'groupChatReceived',
+            url: 'http://someurl.com',
+            options: {
+              groupId: guild._id,
+            },
+          }],
+        });
+        let memberWithoutWebhook = new User({
+          guilds: [guild._id],
+        });
+        let nonMemberWithWebhooks = new User({
+          webhooks: [{
+            type: 'groupChatReceived',
+            url: 'http://a-different-url.com',
+            options: {
+              groupId: generateUUID(),
+            },
+          }],
+        });
+
+        await Promise.all([
+          memberWithWebhook.save(),
+          memberWithoutWebhook.save(),
+          nonMemberWithWebhooks.save(),
+        ]);
+
+        guild.leader = memberWithWebhook._id;
+
+        await guild.save();
+
+        const groupMessage = guild.sendChat('Test message.');
+        await groupMessage.save();
+
+        await sleep();
+
+        expect(groupChatReceivedWebhook.send).to.be.calledOnce;
+
+        let args = groupChatReceivedWebhook.send.args[0];
+        let webhooks = args[0].webhooks;
+        let options = args[1];
+
+        expect(webhooks).to.have.a.lengthOf(1);
+        expect(webhooks[0].id).to.eql(memberWithWebhook.webhooks[0].id);
+        expect(options.group).to.eql(guild);
+        expect(options.chat).to.eql(groupMessage);
+      });
+
       it('sends webhooks for each user with webhooks in group', async () => {
         let guild = new Group({
           name: 'some guild',

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

@@ -47,6 +47,14 @@ describe('GET /challenges/:challengeId', () => {
         _id: groupLeader._id,
         id: groupLeader._id,
         profile: {name: groupLeader.profile.name},
+        auth: {
+          local: {
+            username: groupLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(chal.group).to.eql({
         _id: group._id,
@@ -105,6 +113,14 @@ describe('GET /challenges/:challengeId', () => {
         _id: challengeLeader._id,
         id: challengeLeader._id,
         profile: {name: challengeLeader.profile.name},
+        auth: {
+          local: {
+            username: challengeLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(chal.group).to.eql({
         _id: group._id,
@@ -131,6 +147,14 @@ describe('GET /challenges/:challengeId', () => {
         _id: challengeLeader._id,
         id: challengeLeader._id,
         profile: {name: challengeLeader.profile.name},
+        auth: {
+          local: {
+            username: challengeLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
   });
@@ -179,6 +203,14 @@ describe('GET /challenges/:challengeId', () => {
         _id: challengeLeader._id,
         id: challengeLeader._id,
         profile: {name: challengeLeader.profile.name},
+        auth: {
+          local: {
+            username: challengeLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(chal.group).to.eql({
         _id: group._id,
@@ -205,6 +237,14 @@ describe('GET /challenges/:challengeId', () => {
         _id: challengeLeader._id,
         id: challengeLeader._id,
         profile: {name: challengeLeader.profile.name},
+        auth: {
+          local: {
+            username: challengeLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
   });

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

@@ -60,6 +60,14 @@ describe('GET /challenges/:challengeId/members', () => {
       _id: groupLeader._id,
       id: groupLeader._id,
       profile: {name: groupLeader.profile.name},
+      auth: {
+        local: {
+          username: groupLeader.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
   });
 
@@ -73,8 +81,16 @@ describe('GET /challenges/:challengeId/members', () => {
       _id: leader._id,
       id: leader._id,
       profile: {name: leader.profile.name},
+      auth: {
+        local: {
+          username: leader.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
-    expect(res[0]).to.have.all.keys(['_id', 'id', 'profile']);
+    expect(res[0]).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
     expect(res[0].profile).to.have.all.keys(['name']);
   });
 
@@ -88,8 +104,16 @@ describe('GET /challenges/:challengeId/members', () => {
       _id: anotherUser._id,
       id: anotherUser._id,
       profile: {name: anotherUser.profile.name},
+      auth: {
+        local: {
+          username: anotherUser.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
-    expect(res[0]).to.have.all.keys(['_id', 'id', 'profile']);
+    expect(res[0]).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
     expect(res[0].profile).to.have.all.keys(['name']);
   });
 
@@ -107,7 +131,7 @@ describe('GET /challenges/:challengeId/members', () => {
     let res = await user.get(`/challenges/${challenge._id}/members?includeAllMembers=not-true`);
     expect(res.length).to.equal(30);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   });
@@ -126,7 +150,7 @@ describe('GET /challenges/:challengeId/members', () => {
     let res = await user.get(`/challenges/${challenge._id}/members`);
     expect(res.length).to.equal(30);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   });
@@ -145,7 +169,7 @@ describe('GET /challenges/:challengeId/members', () => {
     let res = await user.get(`/challenges/${challenge._id}/members?includeAllMembers=true`);
     expect(res.length).to.equal(32);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   });

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

@@ -81,7 +81,7 @@ describe('GET /challenges/:challengeId/members/:memberId', () => {
     await groupLeader.post(`/tasks/challenge/${challenge._id}`, [{type: 'habit', text: taskText}]);
 
     let memberProgress = await user.get(`/challenges/${challenge._id}/members/${groupLeader._id}`);
-    expect(memberProgress).to.have.all.keys(['_id', 'id', 'profile', 'tasks']);
+    expect(memberProgress).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile', 'tasks']);
     expect(memberProgress.profile).to.have.all.keys(['name']);
     expect(memberProgress.tasks.length).to.equal(1);
   });

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

@@ -39,6 +39,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -46,6 +54,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
 
@@ -58,6 +74,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -65,6 +89,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
 
@@ -125,6 +157,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: privateGuild.leader._id,
         id: privateGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -132,6 +172,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: privateGuild.leader._id,
         id: privateGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
   });
@@ -235,6 +283,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: party.leader._id,
         id: party.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -242,6 +298,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: party.leader._id,
         id: party.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
 
@@ -254,6 +318,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: party.leader._id,
         id: party.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -261,6 +333,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: party.leader._id,
         id: party.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
   });
@@ -288,6 +368,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: user._id,
         id: user._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -295,6 +383,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: user._id,
         id: user._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
 
@@ -307,6 +403,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: user._id,
         id: user._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       let foundChallenge2 = _.find(challenges, { _id: challenge2._id });
       expect(foundChallenge2).to.exist;
@@ -314,6 +418,14 @@ describe('GET challenges/groups/:groupId', () => {
         _id: user._id,
         id: user._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
     });
   });

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

@@ -40,6 +40,14 @@ describe('GET challenges/user', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(foundChallenge.group).to.eql({
         _id: publicGuild._id,
@@ -62,6 +70,14 @@ describe('GET challenges/user', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(foundChallenge1.group).to.eql({
         _id: publicGuild._id,
@@ -79,6 +95,14 @@ describe('GET challenges/user', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(foundChallenge2.group).to.eql({
         _id: publicGuild._id,
@@ -101,6 +125,14 @@ describe('GET challenges/user', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(foundChallenge1.group).to.eql({
         _id: publicGuild._id,
@@ -118,6 +150,14 @@ describe('GET challenges/user', () => {
         _id: publicGuild.leader._id,
         id: publicGuild.leader._id,
         profile: {name: user.profile.name},
+        auth: {
+          local: {
+            username: user.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(foundChallenge2.group).to.eql({
         _id: publicGuild._id,

test/api/v3/integration/challenges/POST-challenges_challengeId_join.test.js

@@ -79,6 +79,14 @@ describe('POST /challenges/:challengeId/join', () => {
         _id: groupLeader._id,
         id: groupLeader._id,
         profile: {name: groupLeader.profile.name},
+        auth: {
+          local: {
+            username: groupLeader.auth.local.username,
+          },
+        },
+        flags: {
+          verifiedUsername: true,
+        },
       });
       expect(res.name).to.equal(challenge.name);
     });

test/api/v3/integration/challenges/PUT-challenges_challengeId.test.js

@@ -79,6 +79,14 @@ describe('PUT /challenges/:challengeId', () => {
       _id: member._id,
       id: member._id,
       profile: {name: member.profile.name},
+      auth: {
+        local: {
+          username: member.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
     expect(res.name).to.equal('New Challenge Name');
     expect(res.description).to.equal('New challenge description.');

test/api/v3/integration/groups/GET-groups_groupId_invites.test.js

@@ -50,6 +50,14 @@ describe('GET /groups/:groupId/invites', () => {
       _id: invited._id,
       id: invited._id,
       profile: {name: invited.profile.name},
+      auth: {
+        local: {
+          username: invited.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
   });
 
@@ -58,7 +66,7 @@ describe('GET /groups/:groupId/invites', () => {
     let invited = await generateUser();
     await user.post(`/groups/${group._id}/invite`, {uuids: [invited._id]});
     let res = await user.get('/groups/party/invites');
-    expect(res[0]).to.have.all.keys(['_id', 'id', 'profile']);
+    expect(res[0]).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
     expect(res[0].profile).to.have.all.keys(['name']);
   });
 
@@ -76,7 +84,7 @@ describe('GET /groups/:groupId/invites', () => {
     let res = await leader.get(`/groups/${group._id}/invites`);
     expect(res.length).to.equal(30);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   }).timeout(10000);

test/api/v3/integration/groups/GET-groups_groupId_members.test.js

@@ -56,13 +56,21 @@ describe('GET /groups/:groupId/members', () => {
       _id: user._id,
       id: user._id,
       profile: {name: user.profile.name},
+      auth: {
+        local: {
+          username: user.auth.local.username,
+        },
+      },
+      flags: {
+        verifiedUsername: true,
+      },
     });
   });
 
   it('populates only some fields', async () => {
     await generateGroup(user, {type: 'party', name: generateUUID()});
     let res = await user.get('/groups/party/members');
-    expect(res[0]).to.have.all.keys(['_id', 'id', 'profile']);
+    expect(res[0]).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
     expect(res[0].profile).to.have.all.keys(['name']);
   });
 
@@ -74,7 +82,7 @@ describe('GET /groups/:groupId/members', () => {
       '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
       'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
     ]);
-    expect(Object.keys(memberRes.auth)).to.eql(['timestamps']);
+    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
     expect(Object.keys(memberRes.preferences).sort()).to.eql([
       'size', 'hair', 'skin', 'shirt',
       'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',
@@ -95,7 +103,7 @@ describe('GET /groups/:groupId/members', () => {
       '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
       'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
     ]);
-    expect(Object.keys(memberRes.auth)).to.eql(['timestamps']);
+    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
     expect(Object.keys(memberRes.preferences).sort()).to.eql([
       'size', 'hair', 'skin', 'shirt',
       'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',
@@ -120,7 +128,7 @@ describe('GET /groups/:groupId/members', () => {
     let res = await user.get('/groups/party/members');
     expect(res.length).to.equal(30);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   });
@@ -137,7 +145,7 @@ describe('GET /groups/:groupId/members', () => {
     let res = await user.get('/groups/party/members?includeAllMembers=true');
     expect(res.length).to.equal(30);
     res.forEach(member => {
-      expect(member).to.have.all.keys(['_id', 'id', 'profile']);
+      expect(member).to.have.all.keys(['_id', 'auth', 'flags', 'id', 'profile']);
       expect(member.profile).to.have.all.keys(['name']);
     });
   });

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

@@ -23,6 +23,73 @@ describe('Post /groups/:groupId/invite', () => {
     });
   });
 
+  describe('username invites', () => {
+    it('returns an error when invited user is not found', async () => {
+      const fakeID = 'fakeuserid';
+
+      await expect(inviter.post(`/groups/${group._id}/invite`, {
+        usernames: [fakeID],
+      }))
+        .to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('userWithUsernameNotFound', {username: fakeID}),
+        });
+    });
+
+    it('returns an error when inviting yourself to a group', async () => {
+      await expect(inviter.post(`/groups/${group._id}/invite`, {
+        usernames: [inviter.auth.local.lowerCaseUsername],
+      }))
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: t('cannotInviteSelfToGroup'),
+        });
+    });
+
+    it('invites a user to a group by username', async () => {
+      const userToInvite = await generateUser();
+
+      await expect(inviter.post(`/groups/${group._id}/invite`, {
+        usernames: [userToInvite.auth.local.lowerCaseUsername],
+      })).to.eventually.deep.equal([{
+        id: group._id,
+        name: groupName,
+        inviter: inviter._id,
+        publicGuild: false,
+      }]);
+
+      await expect(userToInvite.get('/user'))
+        .to.eventually.have.nested.property('invitations.guilds[0].id', group._id);
+    });
+
+    it('invites multiple users to a group by uuid', async () => {
+      const userToInvite = await generateUser();
+      const userToInvite2 = await generateUser();
+
+      await expect(inviter.post(`/groups/${group._id}/invite`, {
+        usernames: [userToInvite.auth.local.lowerCaseUsername, userToInvite2.auth.local.lowerCaseUsername],
+      })).to.eventually.deep.equal([
+        {
+          id: group._id,
+          name: groupName,
+          inviter: inviter._id,
+          publicGuild: false,
+        },
+        {
+          id: group._id,
+          name: groupName,
+          inviter: inviter._id,
+          publicGuild: false,
+        },
+      ]);
+
+      await expect(userToInvite.get('/user')).to.eventually.have.nested.property('invitations.guilds[0].id', group._id);
+      await expect(userToInvite2.get('/user')).to.eventually.have.nested.property('invitations.guilds[0].id', group._id);
+    });
+  });
+
   describe('user id invites', () => {
     it('returns an error when inviter has no chat privileges', async () => {
       let inviterMuted = await inviter.update({'flags.chatRevoked': true});
@@ -93,7 +160,7 @@ describe('Post /groups/:groupId/invite', () => {
         .to.eventually.be.rejected.and.eql({
           code: 400,
           error: 'BadRequest',
-          message: t('inviteMissingUuid'),
+          message: t('inviteMustNotBeEmpty'),
         });
     });
 
@@ -228,7 +295,7 @@ describe('Post /groups/:groupId/invite', () => {
         .to.eventually.be.rejected.and.eql({
           code: 400,
           error: 'BadRequest',
-          message: t('inviteMissingEmail'),
+          message: t('inviteMustNotBeEmpty'),
         });
     });
 

test/api/v3/integration/members/GET-members_id.test.js

@@ -34,7 +34,7 @@ describe('GET /members/:memberId', () => {
       '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
       'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
     ]);
-    expect(Object.keys(memberRes.auth)).to.eql(['timestamps']);
+    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
     expect(Object.keys(memberRes.preferences).sort()).to.eql([
       'size', 'hair', 'skin', 'shirt',
       'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',

test/api/v3/integration/user/GET-user_anonymized.test.js

@@ -18,7 +18,12 @@ describe('GET /user/anonymized', () => {
       'profile.name': 'profile',
       'purchased.plan': 'purchased plan',
       contributor: 'contributor',
-      invitations: 'invitations',
+      invitations: {
+        guilds: ['guild1', 'guild2'],
+        party: {
+          _id: 'partyid',
+        },
+      },
       'items.special.nyeReceived': 'some',
       'items.special.valentineReceived': 'some',
       webhooks: [{url: 'https://somurl.com'}],

test/api/v3/integration/user/auth/POST-auth_reset-password-set-new-one.js

@@ -94,9 +94,6 @@ describe('POST /user/auth/reset-password-set-new-one', () => {
       userId: user._id,
       expiresAt: moment().add({days: 1}),
     }));
-    await user.update({
-      auth: 'not an object with valid fields',
-    });
 
     await expect(api.post(`${endpoint}`, {
       code,

test/api/v3/integration/user/auth/PUT-user_update_username.test.js

@@ -12,14 +12,14 @@ const ENDPOINT = '/user/auth/update-username';
 
 describe('PUT /user/auth/update-username', async () => {
   let user;
-  let newUsername = 'new-username';
-  let password = 'password'; // from habitrpg/test/helpers/api-integration/v3/object-generators.js
+  let password = 'password'; // from habitrpg/test/helpers/api-integration/v4/object-generators.js
 
   beforeEach(async () => {
     user = await generateUser();
   });
 
-  it('successfully changes username', async () => {
+  it('successfully changes username with password', async () => {
+    let newUsername = 'new-username';
     let response = await user.put(ENDPOINT, {
       username: newUsername,
       password,
@@ -29,6 +29,38 @@ describe('PUT /user/auth/update-username', async () => {
     expect(user.auth.local.username).to.eql(newUsername);
   });
 
+  it('successfully changes username without password', async () => {
+    let newUsername = 'new-username-nopw';
+    let response = await user.put(ENDPOINT, {
+      username: newUsername,
+    });
+    expect(response).to.eql({ username: newUsername });
+    await user.sync();
+    expect(user.auth.local.username).to.eql(newUsername);
+  });
+
+  it('successfully changes username containing number and underscore', async () => {
+    let newUsername = 'new_username9';
+    let response = await user.put(ENDPOINT, {
+      username: newUsername,
+    });
+    expect(response).to.eql({ username: newUsername });
+    await user.sync();
+    expect(user.auth.local.username).to.eql(newUsername);
+  });
+
+  it('sets verifiedUsername when changing username', async () => {
+    user.flags.verifiedUsername = false;
+    await user.sync();
+    let newUsername = 'new-username-verify';
+    let response = await user.put(ENDPOINT, {
+      username: newUsername,
+    });
+    expect(response).to.eql({ username: newUsername });
+    await user.sync();
+    expect(user.flags.verifiedUsername).to.eql(true);
+  });
+
   it('converts user with SHA1 encrypted password to bcrypt encryption', async () => {
     let myNewUsername = 'my-new-username';
     let textPassword = 'mySecretPassword';
@@ -80,6 +112,7 @@ describe('PUT /user/auth/update-username', async () => {
     });
 
     it('errors if password is wrong', async () => {
+      let newUsername = 'new-username';
       await expect(user.put(ENDPOINT, {
         username: newUsername,
         password: 'wrong-password',
@@ -90,19 +123,6 @@ describe('PUT /user/auth/update-username', async () => {
       });
     });
 
-    it('prevents social-only user from changing username', async () => {
-      let socialUser = await generateUser({ 'auth.local': { ok: true } });
-
-      await expect(socialUser.put(ENDPOINT, {
-        username: newUsername,
-        password,
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('userHasNoLocalRegistration'),
-      });
-    });
-
     it('errors if new username is not provided', async () => {
       await expect(user.put(ENDPOINT, {
         password,
@@ -112,5 +132,93 @@ describe('PUT /user/auth/update-username', async () => {
         message: t('invalidReqParams'),
       });
     });
+
+    it('errors if new username is a slur', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'TESTPLACEHOLDERSLURWORDHERE',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+      });
+    });
+
+    it('errors if new username contains a slur', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'TESTPLACEHOLDERSLURWORDHERE_otherword',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+      });
+      await expect(user.put(ENDPOINT, {
+        username: 'something_TESTPLACEHOLDERSLURWORDHERE',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+      });
+      await expect(user.put(ENDPOINT, {
+        username: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+      });
+    });
+
+    it('errors if new username is not allowed', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'support',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueForbidden'),
+      });
+    });
+
+    it('errors if new username is not allowed regardless of casing', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'SUppORT',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueForbidden'),
+      });
+    });
+
+    it('errors if username has incorrect length', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'thisisaverylongusernameover20characters',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueLength'),
+      });
+    });
+
+    it('errors if new username contains invalid characters', async () => {
+      await expect(user.put(ENDPOINT, {
+        username: 'Eichhörnchen',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueInvalidCharacters'),
+      });
+      await expect(user.put(ENDPOINT, {
+        username: 'test.name',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueInvalidCharacters'),
+      });
+      await expect(user.put(ENDPOINT, {
+        username: '🤬',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('usernameIssueInvalidCharacters'),
+      });
+    });
   });
 });

test/api/v3/integration/user/buy/POST-user_buy_gear.test.js

@@ -53,4 +53,15 @@ describe('POST /user/buy-gear/:key', () => {
         message: 'You need to purchase a lower level gear before this one.',
       });
   });
+
+  it('returns an error if tries to buy gear from a different class', async () => {
+    let key = 'armor_rogue_1';
+
+    return expect(user.post(`/user/buy-gear/${key}`))
+      .to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: 'You can\'t buy this item.',
+      });
+  });
 });

test/api/v4/user/auth/POST-user_verify_display_name.test.js

@@ -0,0 +1,57 @@
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v4';
+
+const ENDPOINT = '/user/auth/verify-display-name';
+
+describe('POST /user/auth/verify-display-name', async () => {
+  let user;
+
+  beforeEach(async () => {
+    user = await generateUser();
+  });
+
+  it('successfully verifies display name including funky characters', async () => {
+    let newDisplayName = 'Sabé 🤬';
+    let response = await user.post(ENDPOINT, {
+      displayName: newDisplayName,
+    });
+    expect(response).to.eql({ isUsable: true });
+  });
+
+  context('errors', async () => {
+    it('errors if display name is not provided', async () => {
+      await expect(user.post(ENDPOINT, {
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('invalidReqParams'),
+      });
+    });
+
+    it('errors if display name is a slur', async () => {
+      await expect(user.post(ENDPOINT, {
+        displayName: 'TESTPLACEHOLDERSLURWORDHERE',
+      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueSlur')] });
+    });
+
+    it('errors if display name contains a slur', async () => {
+      await expect(user.post(ENDPOINT, {
+        displayName: 'TESTPLACEHOLDERSLURWORDHERE_otherword',
+      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
+      await expect(user.post(ENDPOINT, {
+        displayName: 'something_TESTPLACEHOLDERSLURWORDHERE',
+      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
+      await expect(user.post(ENDPOINT, {
+        displayName: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
+      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
+    });
+
+    it('errors if display name has incorrect length', async () => {
+      await expect(user.post(ENDPOINT, {
+        displayName: 'this is a very long display name over 30 characters',
+      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength')] });
+    });
+  });
+});

test/api/v4/user/auth/PUT-user_update_username.test.js

@@ -1,224 +0,0 @@
-import {
-  generateUser,
-  translate as t,
-} from '../../../../helpers/api-integration/v4';
-import {
-  bcryptCompare,
-  sha1MakeSalt,
-  sha1Encrypt as sha1EncryptPassword,
-} from '../../../../../website/server/libs/password';
-
-const ENDPOINT = '/user/auth/update-username';
-
-describe('PUT /user/auth/update-username', async () => {
-  let user;
-  let password = 'password'; // from habitrpg/test/helpers/api-integration/v4/object-generators.js
-
-  beforeEach(async () => {
-    user = await generateUser();
-  });
-
-  it('successfully changes username with password', async () => {
-    let newUsername = 'new-username';
-    let response = await user.put(ENDPOINT, {
-      username: newUsername,
-      password,
-    });
-    expect(response).to.eql({ username: newUsername });
-    await user.sync();
-    expect(user.auth.local.username).to.eql(newUsername);
-  });
-
-  it('successfully changes username without password', async () => {
-    let newUsername = 'new-username-nopw';
-    let response = await user.put(ENDPOINT, {
-      username: newUsername,
-    });
-    expect(response).to.eql({ username: newUsername });
-    await user.sync();
-    expect(user.auth.local.username).to.eql(newUsername);
-  });
-
-  it('successfully changes username containing number and underscore', async () => {
-    let newUsername = 'new_username9';
-    let response = await user.put(ENDPOINT, {
-      username: newUsername,
-    });
-    expect(response).to.eql({ username: newUsername });
-    await user.sync();
-    expect(user.auth.local.username).to.eql(newUsername);
-  });
-
-  it('sets verifiedUsername when changing username', async () => {
-    user.flags.verifiedUsername = false;
-    await user.sync();
-    let newUsername = 'new-username-verify';
-    let response = await user.put(ENDPOINT, {
-      username: newUsername,
-    });
-    expect(response).to.eql({ username: newUsername });
-    await user.sync();
-    expect(user.flags.verifiedUsername).to.eql(true);
-  });
-
-  it('converts user with SHA1 encrypted password to bcrypt encryption', async () => {
-    let myNewUsername = 'my-new-username';
-    let textPassword = 'mySecretPassword';
-    let salt = sha1MakeSalt();
-    let sha1HashedPassword = sha1EncryptPassword(textPassword, salt);
-
-    await user.update({
-      'auth.local.hashed_password': sha1HashedPassword,
-      'auth.local.passwordHashMethod': 'sha1',
-      'auth.local.salt': salt,
-    });
-
-    await user.sync();
-    expect(user.auth.local.passwordHashMethod).to.equal('sha1');
-    expect(user.auth.local.salt).to.equal(salt);
-    expect(user.auth.local.hashed_password).to.equal(sha1HashedPassword);
-
-    // update email
-    let response = await user.put(ENDPOINT, {
-      username: myNewUsername,
-      password: textPassword,
-    });
-    expect(response).to.eql({ username: myNewUsername });
-
-    await user.sync();
-
-    expect(user.auth.local.username).to.eql(myNewUsername);
-    expect(user.auth.local.passwordHashMethod).to.equal('bcrypt');
-    expect(user.auth.local.salt).to.be.undefined;
-    expect(user.auth.local.hashed_password).not.to.equal(sha1HashedPassword);
-
-    let isValidPassword = await bcryptCompare(textPassword, user.auth.local.hashed_password);
-    expect(isValidPassword).to.equal(true);
-  });
-
-  context('errors', async () => {
-    it('prevents username update if new username is already taken', async () => {
-      let existingUsername = 'existing-username';
-      await generateUser({'auth.local.username': existingUsername, 'auth.local.lowerCaseUsername': existingUsername });
-
-      await expect(user.put(ENDPOINT, {
-        username: existingUsername,
-        password,
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameTaken'),
-      });
-    });
-
-    it('errors if password is wrong', async () => {
-      let newUsername = 'new-username';
-      await expect(user.put(ENDPOINT, {
-        username: newUsername,
-        password: 'wrong-password',
-      })).to.eventually.be.rejected.and.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('wrongPassword'),
-      });
-    });
-
-    it('errors if new username is not provided', async () => {
-      await expect(user.put(ENDPOINT, {
-        password,
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('invalidReqParams'),
-      });
-    });
-
-    it('errors if new username is a slur', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'TESTPLACEHOLDERSLURWORDHERE',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
-      });
-    });
-
-    it('errors if new username contains a slur', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'TESTPLACEHOLDERSLURWORDHERE_otherword',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
-      });
-      await expect(user.put(ENDPOINT, {
-        username: 'something_TESTPLACEHOLDERSLURWORDHERE',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
-      });
-      await expect(user.put(ENDPOINT, {
-        username: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
-      });
-    });
-
-    it('errors if new username is not allowed', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'support',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueForbidden'),
-      });
-    });
-
-    it('errors if new username is not allowed regardless of casing', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'SUppORT',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueForbidden'),
-      });
-    });
-
-    it('errors if username has incorrect length', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'thisisaverylongusernameover20characters',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueLength'),
-      });
-    });
-
-    it('errors if new username contains invalid characters', async () => {
-      await expect(user.put(ENDPOINT, {
-        username: 'Eichhörnchen',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueInvalidCharacters'),
-      });
-      await expect(user.put(ENDPOINT, {
-        username: 'test.name',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueInvalidCharacters'),
-      });
-      await expect(user.put(ENDPOINT, {
-        username: '🤬',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: t('usernameIssueInvalidCharacters'),
-      });
-    });
-  });
-});

test/common/ops/buy/buyMarketGear.js

@@ -246,5 +246,14 @@ describe('shared.ops.buyMarketGear', () => {
 
       expect(user.items.gear.owned).to.have.property('head_special_2', true);
     });
+
+    it('does buyGear equipment if it is an armoire item that an user previously lost', () => {
+      user.stats.gp = 200;
+      user.items.gear.owned.shield_armoire_ramHornShield = false;
+
+      buyGear(user, {params: {key: 'shield_armoire_ramHornShield'}});
+
+      expect(user.items.gear.owned).to.have.property('shield_armoire_ramHornShield', true);
+    });
   });
 });

webpack/config/prod.env.js

@@ -19,6 +19,7 @@ setupNconf(configFile);
 
 const AMAZON_SELLER_ID = nconf.get('AMAZON_PAYMENTS:SELLER_ID') || nconf.get('AMAZON_PAYMENTS_SELLER_ID');
 const AMAZON_CLIENT_ID = nconf.get('AMAZON_PAYMENTS:CLIENT_ID') || nconf.get('AMAZON_PAYMENTS_CLIENT_ID');
+const AMAZON_MODE = nconf.get('AMAZON_PAYMENTS:MODE') || nconf.get('AMAZON_PAYMENTS_MODE');
 
 let env = {
   NODE_ENV: '"production"',
@@ -26,6 +27,7 @@ let env = {
   AMAZON_PAYMENTS: {
     SELLER_ID: `"${AMAZON_SELLER_ID}"`,
     CLIENT_ID: `"${AMAZON_CLIENT_ID}"`,
+    MODE: `"${AMAZON_MODE}"`,
   },
   EMAILS: {
     COMMUNITY_MANAGER_EMAIL: `"${nconf.get('EMAILS:COMMUNITY_MANAGER_EMAIL')}"`,

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

@@ -1,72 +1,90 @@
 .achievement-costumeContest6x {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -437px -727px;
+  background-position: -1136px -148px;
   width: 144px;
   height: 156px;
 }
 .promo_alligator {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -477px 0px;
+  background-position: 0px 0px;
   width: 480px;
   height: 360px;
 }
 .promo_animal_tails {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -727px;
+  background-position: -994px 0px;
   width: 141px;
   height: 441px;
 }
 .promo_armoire_backgrounds_201811 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -376px -574px;
+  background-position: -481px -420px;
   width: 423px;
   height: 147px;
 }
+.promo_frost_potions {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -421px -723px;
+  width: 417px;
+  height: 147px;
+}
 .promo_ios {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -365px;
+  background-position: 0px -361px;
   width: 375px;
   height: 361px;
 }
-.promo_mystery_201810 {
+.promo_mystery_201811 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -142px -727px;
-  width: 294px;
-  height: 168px;
+  background-position: -839px -723px;
+  width: 282px;
+  height: 147px;
 }
-.promo_seaserpent {
+.promo_oddballs_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px 0px;
-  width: 476px;
-  height: 364px;
+  background-position: -481px -568px;
+  width: 423px;
+  height: 147px;
+}
+.promo_piyo {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -1136px 0px;
+  width: 279px;
+  height: 147px;
 }
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -800px -574px;
+  background-position: -1281px -148px;
   width: 96px;
   height: 69px;
 }
+.promo_turkey_day_2018 {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -723px;
+  width: 420px;
+  height: 147px;
+}
 .promo_veteran_pets {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -958px -563px;
+  background-position: 0px -871px;
   width: 363px;
   height: 141px;
 }
-.scene_dailies {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -958px -286px;
-  width: 327px;
-  height: 276px;
-}
 .scene_nametag {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -376px -365px;
+  background-position: -481px 0px;
   width: 512px;
   height: 208px;
 }
-.scene_tools {
+.scene_sleep {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -958px 0px;
-  width: 366px;
-  height: 285px;
+  background-position: -481px -209px;
+  width: 390px;
+  height: 210px;
+}
+.scene_veteran_pets {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -1136px -305px;
+  width: 242px;
+  height: 62px;
 }

website/client/assets/css/sprites/spritesmith-main-11.css

@@ -1,9 +1,21 @@
 .quest_TEMPLATE_FOR_MISSING_IMAGE {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -502px -1519px;
+  background-position: -251px -1519px;
   width: 221px;
   height: 39px;
 }
+.quest_cow {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1757px -175px;
+  width: 174px;
+  height: 213px;
+}
+.quest_dilatory {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -440px 0px;
+  width: 219px;
+  height: 219px;
+}
 .quest_dilatoryDistress1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
   background-position: -1540px -1085px;
@@ -12,49 +24,55 @@
 }
 .quest_dilatoryDistress2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -721px;
+  background-position: -1757px -959px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px -660px;
+  background-position: -440px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dilatory_derby {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1320px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px 0px;
+  background-position: -660px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -362px;
+  background-position: -1757px -751px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -1174px;
+  background-position: -1562px -1332px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -232px;
+  background-position: -220px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px 0px;
+  background-position: -440px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -220px;
+  background-position: -660px -452px;
   width: 219px;
   height: 219px;
 }
@@ -66,19 +84,19 @@
 }
 .quest_ghost_stag {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -452px;
+  background-position: -880px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -452px;
+  background-position: -880px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -251px -1519px;
+  background-position: -1311px -1332px;
   width: 250px;
   height: 150px;
 }
@@ -90,19 +108,19 @@
 }
 .quest_gryphon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1094px -1332px;
+  background-position: -1322px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -440px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -672px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
@@ -114,109 +132,109 @@
 }
 .quest_hippo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -672px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -672px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -672px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1311px -1332px;
+  background-position: -877px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px -220px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px -440px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px 0px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -1023px;
+  background-position: -1757px -1261px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -892px;
+  background-position: -1100px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -892px;
+  background-position: -1320px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -892px;
+  background-position: -1320px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1540px -651px;
+  background-position: -1540px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px -892px;
+  background-position: -220px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1320px 0px;
+  background-position: -1320px -880px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1320px -220px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px 0px;
+  background-position: -220px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1320px -660px;
+  background-position: -440px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1540px -217px;
+  background-position: -1540px -868px;
   width: 216px;
   height: 216px;
 }
@@ -228,7 +246,7 @@
 }
 .quest_owl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -1112px;
+  background-position: -660px -1112px;
   width: 219px;
   height: 219px;
 }
@@ -240,19 +258,19 @@
 }
 .quest_penguin {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -178px;
+  background-position: -1757px -567px;
   width: 190px;
   height: 183px;
 }
 .quest_pterodactyl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1112px;
+  background-position: -1320px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_rat {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1320px -880px;
+  background-position: -880px -892px;
   width: 219px;
   height: 219px;
 }
@@ -264,37 +282,37 @@
 }
 .quest_rooster {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1528px -1332px;
+  background-position: -1757px 0px;
   width: 213px;
   height: 174px;
 }
 .quest_sabretooth {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -672px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_seaserpent {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -452px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_sheep {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -1112px;
+  background-position: -440px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_slime {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -892px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_sloth {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -1112px;
+  background-position: -880px 0px;
   width: 219px;
   height: 219px;
 }
@@ -306,7 +324,7 @@
 }
 .quest_snake {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -443px -1332px;
+  background-position: -660px -1332px;
   width: 216px;
   height: 177px;
 }
@@ -318,85 +336,67 @@
 }
 .quest_squirrel {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1320px -440px;
+  background-position: 0px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -570px;
+  background-position: -1757px -1412px;
   width: 150px;
   height: 150px;
 }
 .quest_stoikalmCalamity2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -892px;
+  background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px 0px;
+  background-position: -220px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_taskwoodsTerror1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px -872px;
+  background-position: -1757px -1110px;
   width: 150px;
   height: 150px;
 }
 .quest_taskwoodsTerror2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1540px -868px;
+  background-position: -1540px -651px;
   width: 216px;
   height: 216px;
 }
 .quest_taskwoodsTerror3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -220px;
+  background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_treeling {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -877px -1332px;
+  background-position: -1094px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_trex {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1757px 0px;
+  background-position: -1757px -389px;
   width: 204px;
   height: 177px;
 }
 .quest_trex_undead {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -1332px;
+  background-position: -443px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_triceratops {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -452px;
+  background-position: -220px -672px;
   width: 219px;
   height: 219px;
 }
-.quest_turtle {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_unicorn {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_vice1 {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1322px -1112px;
-  width: 216px;
-  height: 177px;
-}

website/client/assets/scss/button.scss

@@ -20,7 +20,7 @@
     @include btn-focus-hover-shadow();
   }
 
-  &:hover:not(.btn-flat) {
+  &:hover:not(.btn-flat):not(.disabled) {
     @include btn-focus-hover-shadow();
     border-color: transparent;
   }
@@ -37,6 +37,7 @@
 
 .btn:disabled, .btn.disabled {
   box-shadow: none;
+  cursor: default;
   opacity: 0.64;
   border-color: transparent;
 }

website/client/assets/scss/modal.scss

@@ -11,7 +11,12 @@
   }
 }
 
+.modal {
+  z-index: 1350;
+}
+
 .modal-dialog {
+  margin: 5.5rem auto 3rem;
   width: auto;
 
   .title {

website/client/assets/svg/hello-habitican.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="104" viewBox="0 0 256 104">
+    <defs>
+        <rect id="b" width="96" height="56" rx="6"/>
+        <filter id="a" width="112.5%" height="128.6%" x="-6.2%" y="-10.7%" filterUnits="objectBoundingBox">
+            <feMorphology in="SourceAlpha" operator="dilate" radius="4" result="shadowSpreadOuter1"/>
+            <feOffset dy="4" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+            <feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/>
+            <feColorMatrix in="shadowOffsetOuter1" values="0 0 0 0 0.407843137 0 0 0 0 0.384313725 0 0 0 0 0.454901961 0 0 0 0.24 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g opacity=".64">
+            <path fill="#3FDAA2" d="M194.359 74.179l3.074-1.341-2.917-1.655-1.341-3.075-1.655 2.918-3.075 1.34 2.918 1.656 1.34 3.074z" opacity=".96"/>
+            <path fill="#FF6165" d="M127.439 4.105l-.023 2.982 2.399-1.771 2.981.023-1.77-2.4.022-2.98-2.399 1.77-2.98-.022z" opacity=".84"/>
+            <path fill="#3FDAA2" d="M70.501 38.126l2.574.428-1.202-2.315.428-2.574-2.316 1.202-2.573-.427 1.202 2.315-.428 2.573z" opacity=".83"/>
+            <path fill="#50B5E9" d="M240.929 73.34l.173 6.333 4.962-3.939 6.334-.173-3.939-4.962-.173-6.334-4.962 3.939-6.334.173z" opacity=".73"/>
+            <path fill="#FFBE5D" d="M198.881 41.724l-3.984 5.397 6.708-.05 5.397 3.983-.05-6.708 3.983-5.397-6.708.051-5.397-3.984z" opacity=".82"/>
+            <path fill="#50B5E9" d="M81.165 96.829l-.589-4.433-3.193 3.13-4.433.59 3.13 3.193.59 4.433 3.193-3.13 4.433-.59z" opacity=".99"/>
+            <path fill="#50B5E9" d="M119.702 40.186l-3.901 5.91 7.068-.425 5.91 3.902-.425-7.069 3.901-5.909-7.068.425-5.909-3.902z"/>
+            <path fill="#FF6165" d="M162.14 91.367l3.404 2.9.278-4.463 2.9-3.404-4.463-.278-3.404-2.9-.278 4.463-2.9 3.404z" opacity=".84"/>
+            <path fill="#FF944C" d="M6.708 37.066l.62 3.675 2.568-2.7 3.675-.62-2.7-2.568-.62-3.675-2.568 2.7-3.675.62zM253.486 43.18l-.037-3.727-2.96 2.265-3.726.037 2.265 2.959.037 3.727 2.96-2.266 3.726-.037z" opacity=".93"/>
+            <path fill="#9A62FF" d="M51.481 70.952l5.13-.957-3.843-3.53-.957-5.128-3.53 3.842-5.128.957 3.843 3.53.956 5.128z" opacity=".99"/>
+            <path fill="#FFBE5D" d="M78.061 8.656l-.952 3.987 3.761-1.63 3.987.952-1.63-3.761.953-3.988-3.762 1.63-3.987-.952z"/>
+            <path fill="#3FDAA2" d="M5.863 70.74l4.692 1.207-1.849-4.478 1.208-4.692-4.478 1.849-4.692-1.208 1.849 4.478-1.208 4.692z" opacity=".96"/>
+            <path fill="#9A62FF" d="M182.63 14.447l5.026-1.4-4.135-3.18-1.4-5.027-3.181 4.136-5.026 1.4 4.135 3.18 1.4 5.027z" opacity=".99"/>
+        </g>
+        <g transform="translate(79 24)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b"/>
+            <rect width="100" height="60" x="-2" y="-2" fill="#6133B4" stroke="#4F2A93" stroke-width="4" rx="6"/>
+        </g>
+        <path fill="#FFF" d="M99.91 39v-9.8h3.024v3.528h2.366V29.2h3.024V39H105.3v-3.584h-2.366V39H99.91zm12.138 0v-9.8h7.182v2.576h-4.186v1.12h3.878v2.352h-3.878v1.176h4.256V39h-7.252zm10.794 0v-9.8h3.024v7.14h3.738V39h-6.762zm10.178 0v-9.8h3.024v7.14h3.738V39h-6.762zm14.14.21c-2.688 0-4.634-2.03-4.634-4.97v-.252c0-2.94 1.96-4.998 4.648-4.998 2.702 0 4.648 2.03 4.648 4.97v.252c0 2.94-1.974 4.998-4.662 4.998zm.014-2.702c.98 0 1.582-.84 1.582-2.296v-.21c0-1.456-.616-2.31-1.596-2.31-.966 0-1.582.84-1.582 2.296v.21c0 1.456.616 2.31 1.596 2.31zM79 44h96v28H79z"/>
+        <path fill="#4E4A57" d="M102.99 64.82c.04-1.6.04-3.34-.12-4.96-.8-.18-1.76-.26-2.88-.1v5.18c0 .18-.38.28-.5.28-.24 0-.5-.14-.54-.4l-.24-14.22c0-.42.06-.76.52-.76.1 0 .72.1.72.28l.02 8.54c.74.1 2.34.06 2.98.14v-.84c0-2.74-.16-5.1-.16-7.48 0-.24.04-.64.34-.64.3 0 .74.14.78.52l.26 14.36c0 .34-.3.62-.68.62h-.1c-.14-.02-.36-.4-.4-.52zm7.64-3.18h-2.96l-.12.12-.34 2.26c-.04.3-.02 1.16-.6 1.16-.26 0-.44-.52-.44-.72 2.08-14.5 2.1-14.54 2.1-14.54.1-.38.24-.94.74-.94.22 0 .5.1.62.3l.16.42c1.16 4.58 1.7 9.28 2.24 14l.12 1.3c0 .02-.02.02-.02.04-.14.38-.22.54-.6.54h-.06c-.12 0-.32 0-.34-.14l-.5-3.8zm-1.5-10.52l-1.16 9.28 2.5.06-1.34-9.34zm4.3-.68c1.3-1.48 4.24-1.06 4.24 1.4 0 1.04-.4 1.98-1.08 2.74 2.28 1.42 3.18 3.12 3.18 5.8 0 2.86-1.58 5.3-4.72 5.3-.14 0-.54-.02-.7-.3-.22-3.08-.22-6.14-.52-9.76l-.4-4.76v-.42zm1.98 14.02c.12.02.24.02.36.02 2.12 0 2.82-2.18 2.82-4.1 0-2.22-1.02-4.92-3.64-4.92 0 3.02.22 6 .46 9zm-.82-13.58l.3 3.3c1.02 0 1.7-1.16 1.7-2.26 0-1.14-.94-1.54-2-1.04zm6.54 14.74l.54-14.84c.14-.4.24-.42.66-.42.58 0 .58.26.58.84 0 .06-.02.32-.02.36l-.6 13.68c-.04.88-1.16.96-1.16.38zm5.08-1.86l-.4-12.66c-1.24.08-1.8.06-1.84-.28.04-.68.04-.92 2.12-.8h1.68c.44.02 1.18.08 1.18.66 0 .18-.22.38-.4.38h-1.68l.38 12.7c0 .18-.4.28-.52.28s-.52-.1-.52-.28zm4.12 1.86l.54-14.84c.14-.4.24-.42.66-.42.58 0 .58.26.58.84 0 .06-.02.32-.02.36l-.6 13.68c-.04.88-1.16.96-1.16.38zm7.66-15.56c.42 0 .94.28.94.74 0 .7-1.16.56-1.44.56h-.12c-1.94 0-2.8 4.02-2.8 6.28 0 2.56.16 4.38 1.92 5.84.86.72 2.18-.02 2.48.52.4.7-.34.94-.98.94-4.54-.1-5.24-6.12-4.32-10.02.48-2.08 1.72-4.86 4.32-4.86zm7.4 11.58h-2.96l-.12.12-.34 2.26c-.04.3-.02 1.16-.6 1.16-.26 0-.44-.52-.44-.72 2.08-14.5 2.1-14.54 2.1-14.54.1-.38.24-.94.74-.94.22 0 .5.1.62.3l.16.42c1.16 4.58 1.7 9.28 2.24 14l.12 1.3c0 .02-.02.02-.02.04-.14.38-.22.54-.6.54h-.06c-.12 0-.32 0-.34-.14l-.5-3.8zm-1.5-10.52l-1.16 9.28 2.5.06-1.34-9.34zm5.02 14.24l.24-14.08c-.04-.8 1.06-1.28 1.48-.12l4.08 11.06c.02-.88.18-5.8.3-7.76.06-1.2-.02-2.42.24-3.54 0-.22.22-.22.52-.22.48.02.52.04.5.48-.06 2.08-.36 4.16-.44 6.24-.04 1.16-.24 6.7-.24 7.86-.14.42-.76.18-.92-.16-.2-.42-.36-.82-4.6-12.16l-.14 12.28c0 .6-1.02.54-1.02.12z"/>
+    </g>
+</svg>

website/client/assets/svg/liked.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#A5A1AC" fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+    <path fill-rule="evenodd" d="M11 10c0 1.654-1.346 3-3 3s-3-1.346-3-3h6zm2-3.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 13 6.5zm-7 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 6 6.5zM14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
 </svg>

website/client/components/appFooter.vue

@@ -2,8 +2,8 @@
 .row.footer-row
   buy-gems-modal(v-if='user')
   //modify-inventory(v-if="isUserLoaded")
-  footer.col-12(:class="{expanded: isExpandedFooter}")
-    .row(v-if="isExpandedFooter")
+  footer.col-12.expanded
+    .row
       .col-12.col-md-2
         h3
           a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
@@ -103,11 +103,6 @@
       .col-12.col-md-2.text-center
         .logo.svg-icon(v-html='icons.gryphon')
       .col-12.col-md-5.text-right
-        template(v-if="!isExpandedFooter")
-          span
-            a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}
-          span.ml-4
-            a(target="_blanck", href="/static/community-guidelines") {{ $t('communityGuidelines') }}
         span.ml-4
           a(target="_blanck", href="/static/privacy") {{ $t('privacy') }}
         span.ml-4
@@ -128,13 +123,6 @@
     a {
       color: #2995cd;
     }
-
-    &:not(.expanded) {
-      hr {
-        margin-top: 0px;
-        margin-bottom: 7px;
-      }
-    }
   }
 
   h3 {
@@ -282,9 +270,6 @@ export default {
   computed: {
     ...mapState({user: 'user.data'}),
     ...mapState(['isUserLoaded']),
-    isExpandedFooter () {
-      return this.$route.name === 'tasks' ? false : true;
-    },
     getDataDisplayToolUrl () {
       const base = 'https://oldgods.net/habitrpg/habitrpg_user_data_display.html';
       if (!this.user) return;

website/client/components/auth/authForm.vue

@@ -82,6 +82,7 @@
 import hello from 'hellojs';
 import { setUpAxios } from 'client/libs/auth';
 import debounce from 'lodash/debounce';
+import isEmail from 'validator/lib/isEmail';
 
 import facebookSquareIcon from 'assets/svg/facebook-square.svg';
 import googleIcon from 'assets/svg/google.svg';
@@ -115,13 +116,13 @@ export default {
   computed: {
     emailValid () {
       if (this.email.length <= 3) return false;
-      return this.validateEmail(this.email);
+      return isEmail(this.email);
     },
     emailInvalid () {
       return !this.emailValid;
     },
     usernameValid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
@@ -143,7 +144,7 @@ export default {
   methods: {
     // eslint-disable-next-line func-names
     validateUsername: debounce(function (username) {
-      if (username.length <= 3) {
+      if (username.length < 1) {
         return;
       }
       this.$store.dispatch('auth:verifyUsername', {

website/client/components/auth/registerLoginReset.vue

@@ -295,6 +295,7 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
+import isEmail from 'validator/lib/isEmail';
 
 import gryphon from 'assets/svg/gryphon.svg';
 import habiticaIcon from 'assets/svg/habitica-logo.svg';
@@ -340,18 +341,18 @@ export default {
     },
     emailValid () {
       if (this.email.length <= 3) return false;
-      return this.validateEmail(this.email);
+      return isEmail(this.email);
     },
     emailInvalid () {
       if (this.email.length <= 3) return false;
       return !this.emailValid;
     },
     usernameValid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return this.usernameIssues.length === 0;
     },
     usernameInvalid () {
-      if (this.username.length <= 3) return false;
+      if (this.username.length < 1) return false;
       return !this.usernameValid;
     },
     passwordConfirmValid () {

website/client/components/chat/autoComplete.vue

@@ -1,26 +1,91 @@
 <template lang="pug">
-div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocompleteStyle')
-  .autocomplete-results(v-for='result in searchResults', @click='select(result)') {{ result }}
+.autocomplete-selection(v-if='searchResults.length > 0', :style='autocompleteStyle')
+  .autocomplete-results.d-flex.align-items-center(
+    v-for='result in searchResults',
+    @click='select(result)',
+    @mouseenter='result.hover = true',
+    @mouseleave='result.hover = false',
+    :class='{"hover-background": result.hover}',
+  )
+    span
+      h3.profile-name(:class='userLevelStyle(result.msg)') {{ result.displayName }}
+      .svg-icon(v-html="tierIcon(result.msg)", v-if='showTierStyle(result.msg)')
+    span.username.ml-2(v-if='result.username', :class='{"hover-foreground": result.hover}') @{{ result.username }}
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import '~client/assets/scss/tiers.scss';
+  @import '~client/assets/scss/colors.scss';
+
   .autocomplete-results {
     padding: .5em;
+  }
+
+  .autocomplete-selection {
     box-shadow: 1px 1px 1px #efefef;
   }
+
+  .hover-background {
+    background-color: rgba(213, 200, 255, 0.32);
+  }
+
+  .hover-foreground {
+    color: $purple-300 !important;
+  }
+
+  .profile-name {
+    display: inline-block;
+    font-size: 16px;
+    margin-bottom: 0rem;
+  }
+
+  .svg-icon {
+    width: 10px;
+    display: inline-block;
+    margin-left: .5em;
+  }
+
+  .username {
+    color: $gray-200;
+  }
 </style>
 
 <script>
 import groupBy from 'lodash/groupBy';
+import styleHelper from 'client/mixins/styleHelper';
+import tier1 from 'assets/svg/tier-1.svg';
+import tier2 from 'assets/svg/tier-2.svg';
+import tier3 from 'assets/svg/tier-3.svg';
+import tier4 from 'assets/svg/tier-4.svg';
+import tier5 from 'assets/svg/tier-5.svg';
+import tier6 from 'assets/svg/tier-6.svg';
+import tier7 from 'assets/svg/tier-7.svg';
+import tier8 from 'assets/svg/tier-mod.svg';
+import tier9 from 'assets/svg/tier-staff.svg';
+import tierNPC from 'assets/svg/tier-npc.svg';
 
 export default {
-  props: ['selections', 'text', 'coords', 'chat', 'textbox'],
+  props: ['selections', 'text', 'caretPosition', 'coords', 'chat', 'textbox'],
   data () {
     return {
+      atRegex: /(?!\b)@[\w-]*$/,
       currentSearch: '',
       searchActive: false,
+      searchEscaped: false,
       currentSearchPosition: 0,
       tmpSelections: [],
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tier8,
+        tier9,
+        tierNPC,
+      }),
     };
   },
   computed: {
@@ -36,32 +101,46 @@ export default {
         marginTop: '28px',
         position: 'absolute',
         minWidth: '100px',
-        minHeight: '100px',
         zIndex: 100,
         backgroundColor: 'white',
       };
     },
     searchResults () {
       if (!this.searchActive) return [];
-      let currentSearch = this.text.substring(this.currentSearchPosition + 1, this.text.length);
+      if (!this.atRegex.exec(this.text)) return [];
+      this.currentSearch = this.atRegex.exec(this.text)[0];
+      this.currentSearch = this.currentSearch.substring(1, this.currentSearch.length);
+
       return this.tmpSelections.filter((option) => {
-        return option.toLowerCase().indexOf(currentSearch.toLowerCase()) !== -1;
-      });
+        return option.displayName.toLowerCase().indexOf(this.currentSearch.toLowerCase()) !== -1 || option.username && option.username.toLowerCase().indexOf(this.currentSearch.toLowerCase()) !== -1;
+      }).slice(0, 4);
     },
 
   },
   mounted () {
     this.grabUserNames();
   },
+  created () {
+    document.addEventListener('keyup', this.handleEsc);
+  },
+  destroyed () {
+    document.removeEventListener('keyup', this.handleEsc);
+  },
   watch: {
     text (newText) {
       if (!newText[newText.length - 1] || newText[newText.length - 1] === ' ') {
         this.searchActive = false;
+        this.searchEscaped = false;
+        return;
       }
+      if (newText[newText.length - 1] === '@') {
+        this.searchEscaped = false;
+      }
+      if (this.searchEscaped) return;
+
+      if (!this.atRegex.test(newText)) return;
 
-      if (newText[newText.length - 1] !== '@') return;
       this.searchActive = true;
-      this.currentSearchPosition = newText.length - 1;
     },
     chat () {
       this.resetDefaults();
@@ -72,25 +151,52 @@ export default {
     resetDefaults () {
       // Mounted is not called when switching between group pages because they have the
       // the same parent component. So, reset the data
-      this.currentSearch = '';
       this.searchActive = false;
-      this.currentSearchPosition = 0;
+      this.searchEscaped = false;
       this.tmpSelections = [];
     },
     grabUserNames () {
       let usersThatMessage = groupBy(this.chat, 'user');
-      for (let userName in usersThatMessage) {
-        let systemMessage = userName === 'undefined';
-        if (!systemMessage && this.tmpSelections.indexOf(userName) === -1) {
-          this.tmpSelections.push(userName);
+      for (let userKey in usersThatMessage) {
+        let systemMessage = userKey === 'undefined';
+        if (!systemMessage && this.tmpSelections.indexOf(userKey) === -1) {
+          this.tmpSelections.push({
+            displayName: userKey,
+            username: usersThatMessage[userKey][0].username,
+            msg: {
+              backer: usersThatMessage[userKey][0].backer,
+              contributor: usersThatMessage[userKey][0].contributor,
+            },
+            hover: false,
+          });
         }
       }
     },
+    showTierStyle (message) {
+      const isContributor = Boolean(message.contributor && message.contributor.level);
+      const isNPC = Boolean(message.backer && message.backer.npc);
+      return isContributor || isNPC;
+    },
+    tierIcon (message) {
+      const isNPC = Boolean(message.backer && message.backer.npc);
+      if (isNPC) {
+        return this.icons.tierNPC;
+      }
+      return this.icons[`tier${message.contributor.level}`];
+    },
     select (result) {
-      let newText = this.text.slice(0, this.currentSearchPosition + 1) + result;
-      this.searchActive = false;
+      let newText = this.text;
+      const targetName = `${result.username || result.displayName} `;
+      newText = newText.replace(new RegExp(`${this.currentSearch}$`), targetName);
       this.$emit('select', newText);
     },
+    handleEsc (e) {
+      if (e.keyCode === 27) {
+        this.searchActive = false;
+        this.searchEscaped = true;
+      }
     },
+  },
+  mixins: [styleHelper],
 };
 </script>

website/client/components/chat/chatCard.vue

@@ -8,33 +8,50 @@ div
       :class='userLevelStyle(msg)',
       @click="showMemberModal(msg.uuid)",
       v-b-tooltip.hover.top="tierTitle",
+      v-if="msg.user"
     )
       | {{msg.user}}
-        .svg-icon(v-html="tierIcon", v-if='showShowTierStyle')
-      p.time(v-b-tooltip="", :title="msg.timestamp | date") {{msg.timestamp | timeAgo}}
-      .text(v-markdown='msg.text')
+      .svg-icon(v-html="tierIcon")
+    p.time
+      span.mr-1(v-if="msg.username") @{{ msg.username }}
+      span.mr-1(v-if="msg.username") •
+      span(v-b-tooltip="", :title="msg.timestamp | date") {{ msg.timestamp | timeAgo }} 
+      span(v-if="msg.client && user.contributor.level >= 4")  ({{ msg.client }})
+    .text(v-html='atHighlight(parseMarkdown(msg.text))')
     hr
-      div(v-if='msg.id')
-        .action(@click='like()', v-if='!inbox && msg.likes', :class='{active: msg.likes[user._id]}')
-          .svg-icon(v-html="icons.like")
-          span(v-if='!msg.likes[user._id]') {{ $t('like') }}
-          span(v-if='msg.likes[user._id]') {{ $t('liked') }}
-        span.action(v-if='!inbox', @click='copyAsTodo(msg)')
+    .d-flex(v-if='msg.id')
+      .action.d-flex.align-items-center(v-if='!inbox', @click='copyAsTodo(msg)')
         .svg-icon(v-html="icons.copy")
-          | {{$t('copyAsTodo')}}
-        span.action(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
+        div {{$t('copyAsTodo')}}
+      .action.d-flex.align-items-center(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
         .svg-icon(v-html="icons.report")
-          | {{$t('report')}}
+        div {{$t('report')}}
         // @TODO make flagging/reporting work in the inbox. NOTE: it must work even if the communityGuidelines are not accepted and it MUST work for messages that you have SENT as well as received. -- Alys
-        span.action(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
+      .action.d-flex.align-items-center(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
         .svg-icon(v-html="icons.delete")
         | {{$t('delete')}}
-        span.action.float-right.liked(v-if='likeCount > 0')
-          .svg-icon(v-html="icons.liked")
+      .ml-auto.d-flex(v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}", v-if='!inbox')
+        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{active: msg.likes[user._id]}')
+          .svg-icon(v-html="icons.liked", :title='$t("liked")')
           | +{{ likeCount }}
+        .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{active: msg.likes[user._id]}')
+          .svg-icon(v-html="icons.like", :title='$t("like")')
+          span(v-if='!msg.likes[user._id]') {{ $t('like') }}
 </template>
 
+<style lang="scss">
+  .at-highlight {
+    background-color: rgba(213, 200, 255, 0.32);
+    padding: 0.1rem;
+  }
+
+  .at-text {
+    color: #6133b4;
+  }
+</style>
+
 <style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/tiers.scss';
 
   .mentioned-icon {
@@ -54,7 +71,14 @@ div
     color: red;
   }
 
+  hr {
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
   .card-body {
+    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+
     .leader {
       margin-bottom: 0;
     }
@@ -62,6 +86,7 @@ div
     h3 { // this is the user name
       cursor: pointer;
       display: inline-block;
+      font-size: 16px;
 
       .svg-icon {
         width: 10px;
@@ -73,13 +98,15 @@ div
     .time {
       font-size: 12px;
       color: #878190;
-      width: 150px;
+      margin-bottom: 0.5rem;
     }
 
     .text {
       font-size: 14px;
       color: #4e4a57;
       text-align: left !important;
+      min-height: 0rem;
+      margin-bottom: -0.5rem;
     }
   }
 
@@ -87,25 +114,25 @@ div
     display: inline-block;
     color: #878190;
     margin-right: 1em;
-  }
+    font-size: 12px;
 
-  .action:hover {
+    :hover {
       cursor: pointer;
     }
 
-  .liked:hover {
-    cursor: default;
-  }
-
-  .action .svg-icon {
+    .svg-icon {
+      color: #A5A1AC;
       margin-right: .2em;
       width: 16px;
-    display: inline-block;
-    color: #A5A1AC;
+    }
   }
 
-  .action.active, .active .svg-icon {
-    color: #46a7d9
+  .active {
+    color: $purple-300;
+
+    .svg-icon {
+      color: $purple-400;
+    }
   }
 </style>
 
@@ -114,8 +141,9 @@ import axios from 'axios';
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import escapeRegExp from 'lodash/escapeRegExp';
+import max from 'lodash/max';
 
-import markdownDirective from 'client/directives/markdown';
+import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from 'client/libs/store';
 import styleHelper from 'client/mixins/styleHelper';
 
@@ -161,9 +189,6 @@ export default {
       }),
     };
   },
-  directives: {
-    markdown: markdownDirective,
-  },
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
@@ -177,23 +202,24 @@ export default {
     ...mapState({user: 'user.data'}),
     isUserMentioned () {
       const message = this.msg;
-      let user = this.user;
+      const user = this.user;
 
       if (message.hasOwnProperty('highlight')) return message.highlight;
 
       message.highlight = false;
-      let messagetext = message.text.toLowerCase();
-      let username = user.profile.name;
-      let mentioned = messagetext.indexOf(username.toLowerCase());
-      let escapedUsername = escapeRegExp(username);
-      let pattern = `@${escapedUsername}([^\w]|$){1}`;
-
+      const messageText = message.text.toLowerCase();
+      const displayName = user.profile.name;
+      const username = user.auth.local && user.auth.local.username;
+      const mentioned = max([messageText.indexOf(username.toLowerCase()), messageText.indexOf(displayName.toLowerCase())]);
       if (mentioned === -1) return message.highlight;
 
-      let preceedingchar = messagetext.substring(mentioned - 1, mentioned);
-      if (mentioned === 0 || preceedingchar.trim() === '' || preceedingchar === '@') {
+      const escapedDisplayName = escapeRegExp(displayName);
+      const escapedUsername = escapeRegExp(username);
+      const pattern = `@(${escapedUsername}|${escapedDisplayName})(\\b)`;
+      const precedingChar = messageText.substring(mentioned - 1, mentioned);
+      if (mentioned === 0 || precedingChar.trim() === '' || precedingChar === '@') {
         let regex = new RegExp(pattern, 'i');
-        message.highlight = regex.test(messagetext);
+        message.highlight = regex.test(messageText);
       }
 
       return message.highlight;
@@ -209,12 +235,6 @@ export default {
       }
       return likeCount;
     },
-    showShowTierStyle () {
-      const message = this.msg;
-      const isContributor = Boolean(message.contributor && message.contributor.level);
-      const isNPC = Boolean(message.backer && message.backer.npc);
-      return isContributor || isNPC;
-    },
     tierIcon () {
       const message = this.msg;
       const isNPC = Boolean(message.backer && message.backer.npc);
@@ -244,6 +264,10 @@ export default {
       }
 
       this.$emit('message-liked', message);
+      this.$root.$emit('bv::hide::tooltip');
+    },
+    likeTooltip (likedStatus) {
+      if (!likedStatus) return this.$t('like');
     },
     copyAsTodo (message) {
       this.$root.$emit('habitica::copy-as-todo', message);
@@ -273,6 +297,27 @@ export default {
     showMemberModal (memberId) {
       this.$emit('show-member-modal', memberId);
     },
+    atHighlight (text) {
+      const userRegex = new RegExp(`@(${this.user.auth.local.username}|${this.user.profile.name})(?:\\b)`, 'gi');
+      const atRegex = new RegExp(/(?!\b)@[\w-]+/g);
+
+      if (userRegex.test(text)) {
+        text = text.replace(userRegex, match => {
+          return `<span class="at-highlight at-text">${match}</span>`;
+        });
+      }
+
+      if (atRegex.test(text)) {
+        text = text.replace(atRegex, match => {
+          return `<span class="at-text">${match}</span>`;
+        });
+      }
+
+      return text;
+    },
+    parseMarkdown (text) {
+      return habiticaMarkdown.render(text);
+    },
   },
 };
 </script>

website/client/components/chat/chatMessages.vue

@@ -1,23 +1,21 @@
 <template lang="pug">
-.container
+.container-fluid
   .row
     .col-12
       copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
       report-flag-modal
-  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)')
-    // @TODO: is there a different way to do these conditionals? This creates an infinite loop
-    //.hr(v-if='displayDivider(msg)')
-      .hr-middle(v-once) {{ msg.timestamp }}
-    .row(v-if='user._id !== msg.uuid')
-      div(:class='inbox ? "col-4" : "col-2"')
-        avatar(
+  div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
+    .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
+      avatar.avatar-left(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
         :avatarOnly="true",
+        :overrideTopPadding='"14px"',
         :hideClassBadge='true',
         @click.native="showMemberModal(msg.uuid)",
+        :class='{"inbox-avatar-left": inbox}'
       )
-      .card(:class='inbox ? "col-8" : "col-10"')
+      .card(:class='{"col-10": inbox}')
         chat-card(
           :msg='msg',
           :inbox='inbox',
@@ -25,8 +23,8 @@
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
           @show-member-modal='showMemberModal')
-    .row(v-if='user._id === msg.uuid')
-      .card(:class='inbox ? "col-8" : "col-10"')
+    .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
+      .card(:class='{"col-10": inbox}')
         chat-card(
           :msg='msg',
           :inbox='inbox',
@@ -34,19 +32,40 @@
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
           @show-member-modal='showMemberModal')
-      div(:class='inbox ? "col-4" : "col-2"')
       avatar(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
         :avatarOnly="true",
         :hideClassBadge='true',
+        :overrideTopPadding='"14px"',
         @click.native="showMemberModal(msg.uuid)",
+        :class='{"inbox-avatar-right": inbox}'
       )
 </template>
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  .avatar {
+    width: 10%;
+    min-width: 7rem;
+  }
+
+  .avatar-left {
+    margin-left: -1.5rem;
+    margin-right: 2rem;
+  }
+
+  .inbox-avatar-left {
+    margin-left: -1rem;
+    margin-right: 2.5rem;
+    min-width: 5rem;
+  }
+
+  .inbox-avatar-right {
+    margin-left: -3.5rem;
+  }
+
   .hr {
     width: 100%;
     height: 20px;
@@ -70,7 +89,10 @@
   }
 
   .card {
+    border: 0px;
     margin-bottom: .5em;
+    padding: 0rem;
+    width: 90%;
   }
 </style>
 

website/client/components/creatorIntro.vue

@@ -5,7 +5,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
       h3(v-once) {{$t('welcomeTo')}}
       .svg-icon.logo(v-html='icons.logoPurple')
 
-  .avatar-section.row(:class='{"page-2": modalPage === 2}')
+  .avatar-section.row(v-if='modalPage > 1', :class='{"page-2": modalPage === 2}')
     .col-6.offset-3
       .user-creation-bg(v-if='!editing')
       avatar(:member='user', :avatarOnly='!editing', :class='{"edit-avatar": editing}')
@@ -305,7 +305,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             )
               span.svg-icon.inline.icon-12.color(v-html="icons.pin")
           .purchase-background.set(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"' @click='unlock(setKeys("background", set.items))')
-            span.label Purchase Set
+            span.label {{ $t('purchaseAll') }}
             .svg-icon.gem(v-html='icons.gem')
             span.price 15
       .row.customize-menu(v-if='filterBackgrounds')
@@ -320,7 +320,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
   .container.interests-section(v-if='modalPage === 3 && !editing')
     .section.row
       .col-12.text-center
-        h2 I want to work on:
+        h2 {{ $t('wantToWorkOn') }}
     .section.row
       .col-6
         .task-option
@@ -353,24 +353,31 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
             input.custom-control-input#self_care(type="checkbox", value='self_care', v-model='taskCategories')
             label.custom-control-label(v-once, for="self_care") {{ $t('self_care') }}
 
-  .section.row.justin-message-section(:class='{top: modalPage > 1}', v-if='!editing')
-    .col-12
-      .justin-message.d-flex.flex-column.justify-content-center
+  .section.d-flex.justify-content-center(:class='{top: modalPage > 1}', v-if='!editing')
+    .justin-section.d-flex.align-items-center
       .featured-label
         span.rectangle
         span.text Justin
         span.rectangle
-        .npc_justin_textbox
+      .justin-message
+        .corner-decoration(:style="{top: '-2px', right: '-2px'}")
+        .corner-decoration(:style="{top: '-2px', left: '-2px'}")
+        .corner-decoration(:style="{bottom: '-2px', right: '-2px'}")
+        .corner-decoration(:style="{bottom: '-2px', left: '-2px'}")
         div(v-if='modalPage === 1')
-          p(v-once) {{$t('justinIntroMessage1')}}
-          p(v-once) {{$t('justinIntroMessage2')}}
+          p(v-once, v-html='$t("justinIntroMessage1")')
+          p(v-once) {{ $t('justinIntroMessageUsername') }}
         div(v-if='modalPage === 2')
-          p So how would you like to look? Don’t worry, you can change this later.
+          p {{ $t('justinIntroMessageAppearance') }}
         div(v-if='modalPage === 3')
           p(v-once) {{ $t('justinIntroMessage3') }}
+      .npc-justin-textbox
+  .section.mr-5.ml-5(v-if='modalPage === 1')
+    username-form(@usernameConfirmed='modalPage += 1', :avatarIntro='true')
+    .small.text-center(v-html="$t('usernameTOSRequirements')")
 
-  .section.container.footer(v-if='!editing')
-    .row
+  .section.container.footer
+    .row(v-if='!editing && !(modalPage === 1)')
       .col-3.offset-1.text-center
         div(v-if='modalPage > 1', @click='prev()')
           .prev-arrow
@@ -390,12 +397,9 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
 <style>
   /* @TODO do not rely on avatar-modal___BV_modal_body_,
      it already changed once when bootstrap-vue reached version 1 */
-  .page-2 #avatar-modal___BV_modal_body_ {
-    margin-top: 9em;
-  }
 
-  .page-2 .modal-content {
-    margin-top: 7em;
+  .page-2 #avatar-modal___BV_modal_body_ {
+    margin-top: 2rem;
   }
 
   #avatar-modal___BV_modal_body_, #avatar-modal___BV_modal_body_ {
@@ -421,6 +425,25 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     position: relative;
   }
 
+  .corner-decoration {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background-color: #ffbe5d;
+    border: inherit;
+    outline: inherit;
+  }
+
+  .small {
+    color: $gray-200;
+  }
+
+  h3 {
+    font-size: 20px;
+    font-weight: normal;
+    color: $gray-200;
+  }
+
   .purchase-all {
     margin-bottom: 1em;
   }
@@ -444,7 +467,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
 
   .logo {
     width: 190px;
-    margin: 0 auto;
+    margin: 0 auto 1.25em;
   }
 
   .user-creation-bg {
@@ -464,32 +487,22 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     left: 9.2em;
   }
 
-  .justin-message {
-    background-image: url('~client/assets/svg/for-css/tutorial-border.svg');
-    height: 144px;
-    width: 400px;
-    padding: 2em;
-    margin: 0 auto;
+  .justin-section {
     position: relative;
-
-    .featured-label {
-      position: absolute;
-      top: -1em;
-
-      .text {
-        min-height: auto;
-        color: $white;
-      }
   }
 
-    .npc_justin_textbox {
-      position: absolute;
-      right: 1em;
-      top: -3.6em;
-      width: 48px;
-      height: 52px;
-      background-image: url('~client/assets/images/justin_textbox.png');
-    }
+  .justin-message {
+    border-color: #ffa623;
+    border-style: solid;
+    border-width: 2px;
+    outline-color: #b36213;
+    outline-style: solid;
+    outline-width: 2px;
+    position: relative;
+    padding: 2em;
+    margin: 2px;
+    height: 100%;
+    width: 400px;
 
     p {
       margin: auto;
@@ -500,15 +513,27 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
     }
   }
 
-  .justin-message-section {
-    margin-top: 4em;
-    margin-bottom: 2em;
+  .npc-justin-textbox {
+    position: absolute;
+    right: 1rem;
+    top: -3.1rem;
+    width: 48px;
+    height: 48px;
+    background-image: url('~client/assets/images/justin_textbox.png');
   }
 
-  .justin-message-section.top {
+  .featured-label {
     position: absolute;
-    top: -16em;
-    left: 3.5em;
+    top: -1rem;
+    left: 1.5rem;
+    border-radius: 2px;
+    margin: auto;
+
+    .text {
+      font-size: 12px;
+      min-height: auto;
+      color: $white;
+    }
   }
 
   .circles {
@@ -865,6 +890,7 @@ import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
 import { mapState } from 'client/libs/store';
 import avatar from './avatar';
+import usernameForm from './settings/usernameForm';
 import { getBackgroundShopSets } from '../../common/script/libs/shops';
 import unlock from '../../common/script/ops/unlock';
 import buy from '../../common/script/ops/buy/buy';
@@ -1022,6 +1048,7 @@ export default {
   components: {
     avatar,
     toggleSwitch,
+    usernameForm,
   },
   mounted () {
     if (this.editing) this.modalPage = 2;

website/client/components/groups/chat.vue

@@ -19,6 +19,7 @@
                 v-on:select="selectedAutocomplete",
                 :textbox='textbox',
                 :coords='coords',
+                :caretPosition = 'caretPosition',
                 :chat='group.chat')
 
       .row.chat-actions
@@ -56,6 +57,8 @@
     data () {
       return {
         newMessage: '',
+        sending: false,
+        caretPosition: 0,
         chat: {
           submitDisable: false,
           submitTimeout: null,
@@ -75,7 +78,7 @@
     methods: {
       // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
       getCoord (e, text) {
-        let carPos = text.selectionEnd;
+        this.caretPosition = text.selectionEnd;
         let div = document.createElement('div');
         let span = document.createElement('span');
         let copyStyle = getComputedStyle(text);
@@ -86,8 +89,8 @@
 
         div.style.position = 'absolute';
         document.body.appendChild(div);
-        div.textContent = text.value.substr(0, carPos);
-        span.textContent = text.value.substr(carPos) || '.';
+        div.textContent = text.value.substr(0, this.caretPosition);
+        span.textContent = text.value.substr(this.caretPosition) || '.';
         div.appendChild(span);
         this.coords = {
           TOP: span.offsetTop,
@@ -109,14 +112,18 @@
         }
       },
       async sendMessage () {
+        if (this.sending) return;
+        this.sending = true;
         let response = await this.$store.dispatch('chat:postChat', {
           group: this.group,
           message: this.newMessage,
         });
         this.group.chat.unshift(response.message);
         this.newMessage = '';
+        this.sending = false;
 
-        // @TODO: I would like to not reload everytime we send. Realtime/Firebase?
+        // @TODO: I would like to not reload everytime we send. Why are we reloading?
+        // The response has all the necessary data...
         let chat = await this.$store.dispatch('chat:getChat', {groupId: this.group._id});
         this.group.chat = chat;
       },
@@ -194,7 +201,6 @@
       width: 100%;
       background-color: $white;
       border: solid 1px $gray-400;
-      font-size: 16px;
       font-style: italic;
       line-height: 1.43;
       color: $gray-300;

website/client/components/groups/inviteModal.vue

@@ -1,152 +1,199 @@
 <template lang="pug">
-b-modal#invite-modal(:title="$t('inviteFriends')", size='lg')
-  .modal-body
-    p.alert.alert-info(v-html="$t('inviteAlertInfo')")
-    .form-horizontal
-      table.table.table-striped
-        thead
-          tr
-            th {{ $t('userId') }}
-        tbody
-          tr(v-for='user in invitees')
-            td
-              input.form-control(type='text', v-model='user.uuid')
-            tr
-              td
-                button.btn.btn-primary.pull-right(@click='addUuid()')
-                  i.glyphicon.glyphicon-plus
-                  | +
-          tr
-            td
-              .col-6.col-offset-6
-                button.btn.btn-primary.btn-block(@click='inviteNewUsers("uuid")') {{sendInviteText}}
-    hr
-    p.alert.alert-info {{ $t('inviteByEmail') }}
-    .form-horizontal
-      table.table.table-striped
-        thead
-          tr
-            th {{ $t('name') }}
-            th {{ $t('email') }}
-        tbody
-          tr(v-for='email in emails')
-            td
-              input.form-control(type='text', v-model='email.name')
-            td
-              input.form-control(type='email', v-model='email.email')
-          tr
-            td(colspan=2)
-              button.btn.btn-primary.pull-right(@click='addEmail()')
-                i.glyphicon.glyphicon-plus
-                | +
-          tr
-            td.form-group(colspan=2)
-              label.col-sm-1.control-label {{ $t('byColon') }}
-              .col-sm-5
-                input.form-control(type='text', v-model='inviter')
-              .col-sm-6
-                button.btn.btn-primary.btn-block(@click='inviteNewUsers("email")') {{sendInviteText}}
+  b-modal#invite-modal(:title='$t(`inviteTo${groupType}`)', :hide-footer='true')
+    div
+      strong {{ $t('inviteEmailUsername') }}
+      .small {{ $t('inviteEmailUsernameInfo') }}
+      div(v-for='(invite, index) in invites')
+        .input-group
+          .d-flex.align-items-center.justify-content-center(v-if='index === invites.length - 1 && invite.text.length === 0')
+            .svg-icon.positive-icon(v-html='icons.positiveIcon')
+          input.form-control(
+            type='text',
+            :placeholder='$t("emailOrUsernameInvite")',
+            v-model='invite.text',
+            v-on:keyup='expandInviteList',
+            v-on:change='checkInviteList',
+            :class='{"input-valid": invite.valid, "is-invalid input-invalid": invite.valid === false}',
+          )
+        .input-error.text-center.mt-2(v-if="invite.error") {{ invite.error }}
+    .modal-footer.d-flex.justify-content-center
+      a.mr-3(@click='close()') {{ $t('cancel') }}
+      button.btn.btn-primary(@click='sendInvites()', :class='{disabled: cannotSubmit}', :disabled='cannotSubmit') {{ $t('sendInvitations') }}
 </template>
 
+<style lang="scss">
+  #invite-modal___BV_modal_outer_ {
+    .modal-content {
+      padding: 0rem 0.25rem;
+    }
+  }
+  #invite-modal___BV_modal_header_.modal-header {
+    border-bottom: 0px;
+  }
+  #invite-modal___BV_modal_header_ {
+    .modal-title {
+      color: #4F2A93;
+      font-size: 24px;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  a:not([href]) {
+    color: $blue-10;
+    font-size: 16px;
+  }
+
+  .form-control {
+    border: 0px;
+    color: $gray-50;
+  }
+
+  .input-error {
+    color: $red-50;
+    font-size: 90%;
+  }
+
+  .input-group {
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    margin-top: 0.5rem;
+  }
+
+  ::placeholder {
+    color: $gray-200;
+    opacity: 1;
+  }
+
+  .input-group:focus-within {
+    border-color: $purple-500;
+  }
+
+  .modal-footer {
+    border: 0px;
+  }
+
+  .positive-icon {
+    color: $green-10;
+    width: 10px;
+    margin: auto 0rem auto 1rem;
+  }
+
+  .small {
+    color: $gray-200;
+    font-size: 12px;
+    margin: 0.5rem 0rem 1rem;
+  }
+
+</style>
+
 <script>
   import { mapState } from 'client/libs/store';
-
+  import clone from 'lodash/clone';
+  import debounce from 'lodash/debounce';
   import filter from 'lodash/filter';
-import map from 'lodash/map';
+  import forEach from 'lodash/forEach';
+  import isEmail from 'validator/lib/isEmail';
+  import isUUID from 'validator/lib/isUUID';
   import notifications from 'client/mixins/notifications';
+  import positiveIcon from 'assets/svg/positive.svg';
+
+  const INVITE_DEFAULTS = {text: '', error: null, valid: null};
 
   export default {
-  mixins: [notifications],
-  props: ['group'],
-  data () {
-    return {
-      invitees: [],
-      emails: [],
-    };
-  },
     computed: {
       ...mapState({user: 'user.data'}),
+      cannotSubmit () {
+        const filteredInvites = filter(this.invites, (invite) => {
+          return invite.text.length > 0 && !invite.valid;
+        });
+        if (filteredInvites.length > 0) return true;
+      },
       inviter () {
         return this.user.profile.name;
       },
-    sendInviteText () {
-      return 'Send Invites';
-      // if (!this.group) return 'Send Invites';
-      // return this.group.sendInviteText;
     },
+    data () {
+      return {
+        invites: [clone(INVITE_DEFAULTS), clone(INVITE_DEFAULTS)],
+        icons: Object.freeze({
+          positiveIcon,
+        }),
+      };
     },
     methods: {
-    addUuid () {
-      this.invitees.push({uuid: ''});
-    },
-    addEmail () {
-      this.emails.push({name: '', email: ''});
-    },
-    inviteNewUsers (inviteMethod) {
-      if (!this.group._id) {
-        if (!this.group.name) this.group.name = this.$t('possessiveParty', {name: this.user.profile.name});
-
-        // @TODO: Add dispatch
-        // return Groups.Group.create(this.group)
-        //   .then(function(response) {
-        //     this.group = response.data.data;
-        //     _inviteByMethod(inviteMethod);
-        //   });
+      checkInviteList: debounce(function checkList () {
+        this.invites = filter(this.invites, (invite, index) => {
+          return invite.text.length > 0 || index === this.invites.length - 1;
+        });
+        while (this.invites.length < 2) this.invites.push(clone(INVITE_DEFAULTS));
+        forEach(this.invites, (value, index) => {
+          if (value.text.length < 1 || isEmail(value.text)) {
+            return this.fillErrors(index);
           }
-
-      this.inviteByMethod(inviteMethod);
-    },
-    async inviteByMethod (inviteMethod) {
-      let invitationDetails;
-
-      if (inviteMethod === 'email') {
-        let emails = this.getEmails();
-        invitationDetails = { inviter: this.inviter, emails };
-      } else if (inviteMethod === 'uuid') {
-        let uuids = this.getOnlyUuids();
-        invitationDetails = { uuids };
+          if (isUUID(value.text)) {
+            this.$store.dispatch('user:userLookup', {uuid: value.text})
+              .then(res => {
+                return this.fillErrors(index, res);
+              });
           } else {
-        return alert('Invalid invite method.');
+            let searchUsername = value.text;
+            if (searchUsername[0] === '@') searchUsername = searchUsername.slice(1, searchUsername.length);
+            this.$store.dispatch('user:userLookup', {username: searchUsername})
+              .then(res => {
+                return this.fillErrors(index, res);
+              });
           }
-
+        });
+      }, 250),
+      expandInviteList () {
+        if (this.invites[this.invites.length - 1].text.length > 0) this.invites.push(clone(INVITE_DEFAULTS));
+      },
+      fillErrors (index, res) {
+        if (!res || res.status === 200) {
+          this.invites[index].error = null;
+          if (this.invites[index].text.length < 1) return this.invites[index].valid = null;
+          return this.invites[index].valid = true;
+        }
+        this.invites[index].error = res.response.data.message;
+        return this.invites[index].valid = false;
+      },
+      close () {
+        this.invites = [clone(INVITE_DEFAULTS), clone(INVITE_DEFAULTS)];
+        this.$root.$emit('bv::hide::modal', 'invite-modal');
+      },
+      async sendInvites () {
+        let invitationDetails = {
+          inviter: this.inviter,
+          emails: [],
+          uuids: [],
+          usernames: [],
+        };
+        forEach(this.invites, (invite) => {
+          if (invite.text.length < 1) return;
+          if (isEmail(invite.text)) {
+            invitationDetails.emails.push({email: invite.text});
+          } else if (isUUID(invite.text)) {
+            invitationDetails.uuids.push(invite.text);
+          } else {
+            invitationDetails.usernames.push(invite.text);
+          }
+        });
         await this.$store.dispatch('guilds:invite', {
           invitationDetails,
           groupId: this.group._id,
         });
 
-      let invitesSent = invitationDetails.emails || invitationDetails.uuids;
-      let invitationString = invitesSent.length > 1 ? 'invitationsSent' : 'invitationSent';
+        const invitesSent = invitationDetails.emails.length + invitationDetails.uuids.length + invitationDetails.usernames.length;
+        let invitationString = invitesSent > 1 ? 'invitationsSent' : 'invitationSent';
 
         this.text(this.$t(invitationString));
-
-      this.invitees = [];
-      this.emails = [];
-
-      // @TODO: This function didn't make it over this.resetInvitees();
-
-      // @TODO: Sync group invites?
-      // if (this.group.type === 'party') {
-      //   this.$router.push('//party');
-      // } else {
-      //   this.$router.push(`/groups/guilds/${this.group._id}`);
-      // }
-      this.$root.$emit('bv::hide::modal', 'invite-modal');
-      // @TODO: error?
-      // _resetInvitees();
-    },
-    getOnlyUuids () {
-      let uuids = map(this.invitees, 'uuid');
-      let filteredUuids = filter(uuids, (id) => {
-        return id !== '';
-      });
-      return filteredUuids;
-    },
-    getEmails () {
-      let emails = filter(this.emails, (obj) => {
-        return obj.email !== '';
-      });
-      return emails;
+        this.close();
       },
     },
+    mixins: [notifications],
+    props: ['group', 'groupType'],
   };
 </script>

website/client/components/groups/membersModal.vue

@@ -355,7 +355,10 @@ export default {
     sendMessage (member) {
       this.$root.$emit('habitica::new-inbox-message', {
         userIdToMessage: member._id,
-        userName: member.profile.name,
+        displayName: member.profile.name,
+        username: member.auth.local.username,
+        backer: member.backer,
+        contributor: member.contributor,
       });
     },
     async searchMembers (searchTerm = '') {

website/client/components/header/index.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  invite-modal(:group='inviteModalGroup')
+  invite-modal(:group='inviteModalGroup', :groupType='inviteModalGroupType')
   create-party-modal
   #app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
     members-modal(:hide-badge="true")
@@ -115,6 +115,7 @@ export default {
       expandedMember: null,
       currentWidth: 0,
       inviteModalGroup: undefined,
+      inviteModalGroupType: undefined,
     };
   },
   computed: {
@@ -178,6 +179,7 @@ export default {
   mounted () {
     this.$root.$on('inviteModal::inviteToGroup', (group) => {
       this.inviteModalGroup = group;
+      this.inviteModalGroupType = group.type === 'guild' ? 'Guild' : 'Party';
       this.$root.$emit('bv::show::modal', 'invite-modal');
     });
   },

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

@@ -112,10 +112,8 @@
         .pet-group(v-for='item in group')
           mountItem(
             :item="item",
-            :itemContentClass="isOwned('mount', item) ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
             :key="item.key",
             :popoverPosition="'top'",
-            :emptyItem="!isOwned('mount', item)",
             :showPopover="true",
             @click="selectMount(item)"
           )

website/client/components/inventory/stable/mountItem.vue

@@ -2,10 +2,10 @@
 div
   .item-wrapper(@click="click()", :id="itemId")
     .item.pet-slot(
-      :class="{'item-empty': emptyItem}",
+      :class="{'item-empty': !isOwned()}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content(:class="itemContentClass")
+      span.item-content(:class="itemClass()")
   b-popover(
     :target="itemId",
     v-if="showPopover",
@@ -17,19 +17,14 @@ div
 
 <script>
   import uuid from 'uuid';
+  import { mapState } from 'client/libs/store';
+  import {isOwned} from '../../../libs/createAnimal';
 
   export default {
     props: {
       item: {
         type: Object,
       },
-      itemContentClass: {
-        type: String,
-      },
-      emptyItem: {
-        type: Boolean,
-        default: false,
-      },
       popoverPosition: {
         type: String,
         default: 'bottom',
@@ -44,10 +39,21 @@ div
         itemId: uuid.v4(),
       });
     },
+    computed: {
+      ...mapState({
+        userItems: 'user.data.items',
+      }),
+    },
     methods: {
       click () {
         this.$emit('click', {});
       },
+      isOwned () {
+        return isOwned('mount', this.item, this.userItems);
+      },
+      itemClass () {
+        return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw GreyedOut';
+      },
     },
   };
 </script>

website/client/components/inventory/stable/petItem.vue

@@ -5,12 +5,12 @@ div
       :class="{'item-empty': !isOwned(), 'highlight': highlightBorder}",
     )
       slot(name="itemBadge", :item="item")
-      span.item-content.hatchAgain(v-if="mountOwned && isHatchable")
+      span.item-content.hatchAgain(v-if="mountOwned() && isHatchable()")
         span.egg(:class="eggClass")
         span.potion(:class="potionClass")
       span.item-content(v-else, :class="getPetItemClass()")
-      span.pet-progress-background(v-if="isAllowedToFeed() && progress > 0")
-        div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
+      span.pet-progress-background(v-if="isAllowedToFeed() && progress() > 0")
+        div.pet-progress-bar(v-bind:style="{width: 100 * progress()/50 + '%' }")
     span.item-label(v-if="label") {{ label }}
 
   b-popover(
@@ -112,21 +112,32 @@ div
         return isAllowedToFeed(this.item, this.userItems);
       },
       getPetItemClass () {
-        if (this.isOwned() || this.mountOwned && this.isHatchable) {
+        if (this.isOwned() || this.mountOwned() && this.isHatchable()) {
           return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
-        if (this.isHatchable) {
+        if (this.isHatchable()) {
           return 'PixelPaw';
         }
 
-        if (this.mountOwned) {
+        if (this.mountOwned()) {
           return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
         }
 
         // Can't hatch
         return 'GreyedOut PixelPaw';
       },
+      progress () {
+        return this.userItems.pets[this.item.key];
+      },
+      // due to some state-refresh issues these methods are needed,
+      // the computed-properties just didn't refresh on each state-change
+      isHatchable () {
+        return isHatchable(this.item, this.userItems);
+      },
+      mountOwned () {
+        return isOwned('mount', this.item, this.userItems);
+      },
     },
     computed: {
       ...mapState({
@@ -138,15 +149,6 @@ div
       eggClass () {
         return `Pet_Egg_${this.item.eggKey}`;
       },
-      isHatchable () {
-        return isHatchable(this.item, this.userItems);
-      },
-      mountOwned () {
-        return isOwned('mount', this.item, this.userItems);
-      },
-      progress () {
-        return this.userItems.pets[this.item.key];
-      },
     },
   };
 </script>

website/client/components/memberDetails.vue

@@ -19,7 +19,10 @@
           | {{member.profile.name}}
           .is-buffed(v-if="isBuffed", v-b-tooltip.hover.bottom="$t('buffed')")
             .svg-icon(v-html="icons.buff")
-        span.small-text.character-level {{ characterLevel }}
+        .small-text.character-level
+          span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") @{{ member.auth.local.username }}
+          span.mr-1(v-if="member.auth && member.auth.local && member.auth.local.username") •
+          span {{ characterLevel }}
     .progress-container(v-b-tooltip.hover.bottom="$t('health')")
       .svg-icon(v-html="icons.health")
       .progress

website/client/components/notifications.vue

@@ -25,6 +25,7 @@ div
   login-incentives(:data='notificationData')
   quest-completed
   quest-invitation
+  verify-username
 </template>
 
 <style lang='scss'>
@@ -118,6 +119,7 @@ import streak from './achievements/streak';
 import ultimateGear from './achievements/ultimateGear';
 import wonChallenge from './achievements/wonChallenge';
 import loginIncentives from './achievements/login-incentives';
+import verifyUsername from './settings/verifyUsername';
 
 const NOTIFICATIONS = {
   CHALLENGE_JOINED_ACHIEVEMENT: {
@@ -178,6 +180,7 @@ export default {
     dropsEnabled,
     contributor,
     loginIncentives,
+    verifyUsername,
   },
   data () {
     // Levels that already display modals and should not trigger generic Level Up
@@ -314,16 +317,12 @@ export default {
       this.$store.dispatch('user:fetch'),
       this.$store.dispatch('tasks:fetchUserTasks'),
     ]).then(() => {
-      this.debounceCheckUserAchievements();
-
       // @TODO: This is a timeout to ensure dom is loaded
       window.setTimeout(() => {
-        this.initTour();
-        if (this.user.flags.tour.intro === this.TOUR_END || !this.user.flags.welcomed) return;
-        this.goto('intro', 0);
+        this.runForcedModals();
       }, 2000);
 
-      this.runYesterDailies();
+      this.debounceCheckUserAchievements();
 
       // Do not remove the event listener as it's live for the entire app lifetime
       document.addEventListener('mousemove', this.checkNextCron);
@@ -339,6 +338,11 @@ export default {
     document.removeEventListener('keydown', this.checkNextCron);
   },
   methods: {
+    runForcedModals () {
+      if (!this.user.flags.verifiedUsername) return this.$root.$emit('bv::show::modal', 'verify-username');
+
+      return this.runYesterDailies();
+    },
     showDeathModal () {
       this.playSound('Death');
       this.$root.$emit('bv::show::modal', 'death');
@@ -413,21 +417,25 @@ export default {
       // List of prompts for user on changes. Sounds like we may need a refactor here, but it is clean for now
       if (!this.user.flags.welcomed) {
         this.$store.state.avatarEditorOptions.editingUser = false;
-        this.$root.$emit('bv::show::modal', 'avatar-modal');
+        return this.$root.$emit('bv::show::modal', 'avatar-modal');
+      }
+
+      if (this.user.flags.newStuff) {
+        return this.$root.$emit('bv::show::modal', 'new-stuff');
       }
 
       if (this.user.stats.hp <= 0) {
-        this.showDeathModal();
+        return this.showDeathModal();
       }
 
       if (this.questCompleted) {
-        this.$root.$emit('bv::show::modal', 'quest-completed');
         this.playSound('Achievement_Unlocked');
+        return this.$root.$emit('bv::show::modal', 'quest-completed');
       }
 
       if (this.userClassSelect) {
-        this.$root.$emit('bv::show::modal', 'choose-class');
         this.playSound('Achievement_Unlocked');
+        return this.$root.$emit('bv::show::modal', 'choose-class');
       }
     },
     showLevelUpNotifications (newlevel) {
@@ -520,10 +528,6 @@ export default {
     async handleUserNotifications (after) {
       if (this.$store.state.isRunningYesterdailies) return;
 
-      if (this.user.flags.newStuff) {
-        this.$root.$emit('bv::show::modal', 'new-stuff');
-      }
-
       if (!after || after.length === 0 || !Array.isArray(after)) return;
 
       let notificationsToRead = [];

website/client/components/settings/site.vue

@@ -130,8 +130,10 @@
           h5 {{ $t('changeDisplayName') }}
           .form(name='changeDisplayName', novalidate)
             .form-group
-              input#changeDisplayname.form-control(type='text', :placeholder="$t('newDisplayName')", v-model='temporaryDisplayName')
-            button.btn.btn-primary(type='submit', @click='changeDisplayName(temporaryDisplayName)') {{ $t('submit') }}
+              input#changeDisplayname.form-control(type='text', :placeholder="$t('newDisplayName')", v-model='temporaryDisplayName', :class='{"is-invalid input-invalid": displayNameInvalid}')
+              .mb-3(v-if="displayNameIssues.length > 0")
+                .input-error(v-for="issue in displayNameIssues") {{ issue }}
+            button.btn.btn-primary(type='submit', @click='changeDisplayName(temporaryDisplayName)', :disabled='displayNameCannotSubmit') {{ $t('submit') }}
 
           h5 {{ $t('changeUsername') }}
           .form(name='changeUsername', novalidate)
@@ -252,6 +254,7 @@ export default {
         password: '',
         confirmPassword: '',
       },
+      displayNameIssues: [],
       usernameIssues: [],
     };
   },
@@ -312,6 +315,18 @@ export default {
     verifiedUsername () {
       return this.user.flags.verifiedUsername;
     },
+    displayNameInvalid () {
+      if (this.temporaryDisplayName.length <= 1) return false;
+      return !this.displayNameValid;
+    },
+    displayNameValid () {
+      if (this.temporaryDisplayName.length <= 1) return false;
+      return this.displayNameIssues.length === 0;
+    },
+    displayNameCannotSubmit () {
+      if (this.temporaryDisplayName.length <= 1) return true;
+      return !this.displayNameValid;
+    },
     usernameValid () {
       if (this.usernameUpdates.username.length <= 1) return false;
       return this.usernameIssues.length === 0;
@@ -332,10 +347,30 @@ export default {
       },
       deep: true,
     },
+    temporaryDisplayName: {
+      handler () {
+        this.validateDisplayName(this.temporaryDisplayName);
+      },
+      deep: true,
+    },
   },
   methods: {
-    // eslint-disable-next-line func-names
-    validateUsername: debounce(function (username) {
+    validateDisplayName: debounce(function checkName (displayName) {
+      if (displayName.length <= 1 || displayName === this.user.profile.name) {
+        this.displayNameIssues = [];
+        return;
+      }
+      this.$store.dispatch('auth:verifyDisplayName', {
+        displayName,
+      }).then(res => {
+        if (res.issues !== undefined) {
+          this.displayNameIssues = res.issues;
+        } else {
+          this.displayNameIssues = [];
+        }
+      });
+    }, 500),
+    validateUsername: debounce(function checkName (username) {
       if (username.length <= 1 || username === this.user.auth.local.username) {
         this.usernameIssues = [];
         return;

website/client/components/settings/usernameForm.vue

@@ -0,0 +1,221 @@
+<template lang="pug">
+  div
+    .form-group
+      .d-flex.align-items-center
+        label.mr-3(for='displayName') {{ $t('displayName') }}
+        .flex-grow-1
+          input#displayName.form-control(
+            type='text',
+            :placeholder="$t('newDisplayName')",
+            v-model='temporaryDisplayName',
+            @blur='restoreEmptyDisplayName()',
+            :class='{"is-invalid input-invalid": displayNameInvalid, "input-valid": displayNameValid, "text-darker": temporaryDisplayName.length > 0}')
+    .mb-3(v-if="displayNameIssues.length > 0")
+      .input-error.text-center(v-for="issue in displayNameIssues") {{ issue }}
+    .form-group
+      .d-flex.align-items-center
+        label.mr-3(for='username') {{ $t('username') }}
+        .flex-grow-1
+          .input-group-prepend.input-group-text @
+            input#username.form-control(
+              type='text',
+              :placeholder="$t('newUsername')",
+              v-model='temporaryUsername',
+              @blur='restoreEmptyUsername()',
+              :class='{"is-invalid input-invalid": usernameInvalid, "input-valid": usernameValid, "text-darker": temporaryUsername.length > 0}')
+    .mb-3(v-if="usernameIssues.length > 0")
+      .input-error.text-center(v-for="issue in usernameIssues") {{ issue }}
+    .small.text-center.mb-3(v-if='!avatarIntro') {{ $t('usernameLimitations') }}
+    .row.justify-content-center
+      button.btn.btn-primary(type='submit', @click='submitNames()', :class='{disabled: usernameCannotSubmit}', :disabled='usernameCannotSubmit') {{ $t(avatarIntro ? 'getStarted' : 'saveAndConfirm') }}
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  button {
+    margin: 0.25rem auto 1rem;
+  }
+
+  .col-3 {
+    padding-right: 0rem;
+  }
+
+  .form-control {
+    height: 2.25rem;
+  }
+
+  .form-group {
+    background-color: $gray-700;
+    border-radius: 2px;
+    border: solid 1px $gray-500;
+  }
+
+  input {
+    border: 0px;
+  }
+
+  .input-error {
+    color: $red-50;
+    font-size: 90%;
+    width: 100%;
+  }
+
+  .input-group-prepend {
+    margin-right: 0px;
+  }
+
+  .input-group-text {
+    background-color: $white;
+    border: 0px;
+    border-radius: 0px;
+    color: $gray-300;
+    padding: 0rem 0.1rem 0rem 0.75rem;
+  }
+
+  label {
+    color: $gray-100;
+    font-weight: bold;
+    margin-bottom: 0rem;
+    margin-left: 1rem;
+    min-width: 90px;
+  }
+
+  .small {
+    color: $gray-200;
+  }
+
+  .text-darker {
+    color: $gray-50;
+  }
+
+  #username {
+    padding-left: 0.25rem;
+  }
+</style>
+
+<script>
+  import axios from 'axios';
+  import debounce from 'lodash/debounce';
+  import { mapState } from 'client/libs/store';
+
+  export default {
+    computed: {
+      ...mapState({
+        user: 'user.data',
+      }),
+      displayNameInvalid () {
+        if (this.temporaryDisplayName.length < 1) return false;
+        return !this.displayNameValid;
+      },
+      displayNameValid () {
+        if (this.temporaryDisplayName.length < 1) return false;
+        return this.displayNameIssues.length === 0;
+      },
+      usernameCannotSubmit () {
+        if (this.temporaryUsername.length < 1) return true;
+        return !this.usernameValid || !this.displayNameValid;
+      },
+      usernameInvalid () {
+        if (this.temporaryUsername.length < 1) return false;
+        return !this.usernameValid;
+      },
+      usernameValid () {
+        if (this.temporaryUsername.length < 1) return false;
+        return this.usernameIssues.length === 0;
+      },
+    },
+    data () {
+      return {
+        displayNameIssues: [],
+        temporaryDisplayName: '',
+        temporaryUsername: '',
+        usernameIssues: [],
+      };
+    },
+    methods: {
+      async close () {
+        this.$root.$emit('habitica::resync-requested');
+        await this.$store.dispatch('user:fetch', {forceLoad: true});
+        this.$root.$emit('habitica::resync-completed');
+        if (this.avatarIntro) {
+          this.$emit('usernameConfirmed');
+        } else {
+          this.$root.$emit('bv::hide::modal', 'verify-username');
+          this.$router.go(0);
+        }
+      },
+      restoreEmptyDisplayName () {
+        if (this.temporaryDisplayName.length < 1) {
+          this.temporaryDisplayName = this.user.profile.name;
+        }
+      },
+      restoreEmptyUsername () {
+        if (this.temporaryUsername.length < 1) {
+          this.temporaryUsername = this.user.auth.local.username;
+        }
+      },
+      async submitNames () {
+        if (this.temporaryDisplayName !== this.user.profile.name) {
+          await axios.put('/api/v4/user/', {'profile.name': this.temporaryDisplayName});
+        }
+        await axios.put('/api/v4/user/auth/update-username', {username: this.temporaryUsername});
+        this.close();
+      },
+      validateDisplayName: debounce(function checkName (displayName) {
+        if (displayName.length <= 1 || displayName === this.user.profile.name) {
+          this.displayNameIssues = [];
+          return;
+        }
+        this.$store.dispatch('auth:verifyDisplayName', {
+          displayName,
+        }).then(res => {
+          if (res.issues !== undefined) {
+            this.displayNameIssues = res.issues;
+          } else {
+            this.displayNameIssues = [];
+          }
+        });
+      }, 500),
+      validateUsername: debounce(function checkName (username) {
+        if (username.length <= 1 || username === this.user.auth.local.username) {
+          this.usernameIssues = [];
+          return;
+        }
+        this.$store.dispatch('auth:verifyUsername', {
+          username,
+        }).then(res => {
+          if (res.issues !== undefined) {
+            this.usernameIssues = res.issues;
+          } else {
+            this.usernameIssues = [];
+          }
+        });
+      }, 500),
+    },
+    mounted () {
+      this.temporaryDisplayName = this.user.profile.name;
+      this.temporaryUsername = this.user.auth.local.username;
+    },
+    props: {
+      avatarIntro: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    watch: {
+      temporaryDisplayName: {
+        handler () {
+          this.validateDisplayName(this.temporaryDisplayName);
+        },
+        deep: true,
+      },
+      temporaryUsername: {
+        handler () {
+          this.validateUsername(this.temporaryUsername);
+        },
+        deep: true,
+      },
+    },
+  };
+</script>

website/client/components/settings/verifyUsername.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+  b-modal#verify-username(
+    size="m",
+    :no-close-on-backdrop="true",
+    :no-close-on-esc="true",
+    :hide-header="true",
+    :hide-footer="true",
+    @hide="$emit('hide')",
+  ).d-flex
+    div.nametag-header(v-html='icons.helloNametag')
+    h2.text-center {{ $t('usernameTime') }}
+    p.text-center(v-html="$t('usernameInfo')")
+    username-form
+    .scene_veteran_pets.center-block
+    .small.text-center.mb-3 {{ $t('verifyUsernameVeteranPet') }}
+    .small.text-center.tos-footer(v-html="$t('usernameTOSRequirements')")
+</template>
+
+<style lang="scss">
+  #verify-username___BV_modal_outer_ {
+    .modal-content {
+      height: 100%;
+      width: 566px;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .center-block {
+    margin: 0 auto 1em auto;
+  }
+
+  h2 {
+    color: $purple-200;
+    margin-top: 1.5rem;
+  }
+
+  .nametag-header {
+    background-color: $gray-700;
+    border-radius: 0.3rem 0.3rem 0rem 0rem;
+    margin-left: -3rem;
+    margin-right: -3rem;
+    padding: 1rem 9rem 1rem 9rem;
+  }
+
+  p {
+    color: $gray-100;
+  }
+
+  .small {
+    color: $gray-200;
+  }
+
+  .tos-footer {
+    background-color: $gray-700;
+    border-radius: 0rem 0rem 0.3rem 0.3rem;
+    margin-left: -3rem;
+    margin-right: -3rem;
+    margin-top: -0.1rem;
+    padding: 1rem 4rem 1rem 4rem;
+  }
+</style>
+
+<script>
+  import helloNametag from 'assets/svg/hello-habitican.svg';
+  import usernameForm from './usernameForm';
+
+  export default {
+    components: {
+      usernameForm,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          helloNametag,
+        }),
+      };
+    },
+  };
+</script>

website/client/components/snackbars/notifications.vue

@@ -9,7 +9,7 @@
     position: fixed;
     right: 10px;
     width: 350px;
-    z-index: 1070; // 1070 is above modal backgrounds
+    z-index: 1400; // 1400 is above modal backgrounds
 
     &-top-pos {
       &-normal {

website/client/components/static/home.vue

@@ -560,6 +560,7 @@
 <script>
   import hello from 'hellojs';
   import debounce from 'lodash/debounce';
+  import isEmail from 'validator/lib/isEmail';
   import googlePlay from 'assets/images/home/google-play-badge.svg';
   import iosAppStore from 'assets/images/home/ios-app-store.svg';
   import iphones from 'assets/images/home/iphones.svg';
@@ -626,18 +627,18 @@
     computed: {
       emailValid () {
         if (this.email.length <= 3) return false;
-        return this.validateEmail(this.email);
+        return isEmail(this.email);
       },
       emailInvalid () {
         if (this.email.length <= 3) return false;
-        return !this.validateEmail(this.email);
+        return !isEmail(this.email);
       },
       usernameValid () {
-        if (this.username.length <= 3) return false;
+        if (this.username.length < 1) return false;
         return this.usernameIssues.length === 0;
       },
       usernameInvalid () {
-        if (this.username.length <= 3) return false;
+        if (this.username.length < 1) return false;
         return !this.usernameValid;
       },
       passwordConfirmValid () {
@@ -655,13 +656,9 @@
       },
     },
     methods: {
-      validateEmail (email) {
-        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return re.test(email);
-      },
       // eslint-disable-next-line func-names
       validateUsername: debounce(function (username) {
-        if (username.length <= 3) {
+        if (username.length < 1) {
           return;
         }
         this.$store.dispatch('auth:verifyUsername', {

website/client/components/tasks/task.vue

@@ -94,7 +94,7 @@
               .tags-popover
                 .d-flex.align-items-center.tags-container
                   .tags-popover-title(v-once) {{ `${$t('tags')}:` }}
-                  .tag-label(v-for="tag in getTagsFor(task)") {{tag}}
+                  .tag-label(v-for="tag in getTagsFor(task)", v-markdown="tag")
 
       // Habits right side control
       .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down.bg")
@@ -302,6 +302,7 @@
       margin-left: 6px;
       padding-top: 0px;
       min-width: 0px;
+      width: 100%;
     }
   }
 
@@ -489,6 +490,11 @@
       white-space: nowrap;
       margin-top: 3px;
       margin-bottom: 3px;
+
+      // Applies to v-markdown generated p tag.
+      p {
+        margin-bottom: 0px;
+      }
     }
   }
 </style>

website/client/components/tasks/taskModal.vue

@@ -478,16 +478,21 @@
 
             .category-label {
               min-width: 68px;
-              overflow: hidden;
               padding: .5em 1em;
+              width: 68px;
+
+              // Applies to v-markdown generated p tag.
+              p {
+                margin-bottom: 0px;
+                overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
-              width: 68px;
                 word-wrap: break-word;
               }
             }
           }
         }
+      }
 
       .tags-popup {
         position: absolute;