5.14.0

commit 0e20f421645beaf231dd607b1c1d8db62e5804e4
Author: SabreCat <sabrecat@gmail.com>
Date:   Thu Dec 14 15:40:22 2023 -0600

    fix(g1g1): don't break modal off promo season

commit ca5436d05044d256303e9c5dcdf358b64467ae66
Author: SabreCat <sabe@habitica.com>
Date:   Tue Nov 28 20:42:55 2023 -0600

    fix(lint): move import

commit 08f58318da1a06c2d94227afd3224a5571990bac
Author: SabreCat <sabe@habitica.com>
Date:   Tue Nov 28 20:26:14 2023 -0600

    fix(vue): parenthesis

commit 8701ee330365ad0615b2179b801f8e15c3109bdd
Author: SabreCat <sabe@habitica.com>
Date:   Tue Nov 28 20:09:30 2023 -0600

    fix(g1g1): dynamically display end dates

.github/dependabot.yml

@@ -104,42 +104,6 @@ updates:
     - 7.7.0
     - 7.8.0
     - 7.9.0
-  - dependency-name: "@storybook/addon-knobs"
-    versions:
-    - 6.1.17
-    - 6.1.18
-    - 6.1.20
-    - 6.1.21
-    - 6.2.2
-    - 6.2.3
-    - 6.2.7
-  - dependency-name: "@storybook/addon-links"
-    versions:
-    - 6.1.17
-    - 6.1.18
-    - 6.1.20
-    - 6.1.21
-    - 6.2.2
-    - 6.2.3
-    - 6.2.7
-  - dependency-name: "@storybook/vue"
-    versions:
-    - 6.1.17
-    - 6.1.18
-    - 6.1.20
-    - 6.1.21
-    - 6.2.2
-    - 6.2.3
-    - 6.2.7
-  - dependency-name: "@storybook/addon-actions"
-    versions:
-    - 6.1.17
-    - 6.1.18
-    - 6.1.20
-    - 6.1.21
-    - 6.2.2
-    - 6.2.3
-    - 6.2.7
   - dependency-name: core-js
     versions:
     - 3.10.0

gulp/gulp-build.js

@@ -51,7 +51,7 @@ gulp.task('build:prepare-mongo', async () => {
   console.log('MongoDB data folder is missing, setting up.'); // eslint-disable-line no-console
 
   // use run-rs without --keep, kill it as soon as the replica set starts
-  const runRsProcess = spawn('run-rs', ['-v', '4.2.8', '-l', 'ubuntu1804', '--dbpath', 'mongodb-data', '--number', '1', '--quiet']);
+  const runRsProcess = spawn('run-rs', ['-v', '4.1.1', '-l', 'ubuntu1804', '--dbpath', 'mongodb-data', '--number', '1', '--quiet']);
 
   for await (const chunk of runRsProcess.stdout) {
     const stringChunk = chunk.toString();

migrations/archive/2023/20231017_pet_group_achievements.js

@@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20231017_pet_group_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Armadillo-Base']
+      && pets['Armadillo-CottonCandyBlue']
+      && pets['Armadillo-CottonCandyPink']
+      && pets['Armadillo-Desert']
+      && pets['Armadillo-Golden']
+      && pets['Armadillo-Red']
+      && pets['Armadillo-Shade']
+      && pets['Armadillo-Skeleton']
+      && pets['Armadillo-White']
+      && pets['Armadillo-Zombie']
+      && pets['Cactus-Base']
+      && pets['Cactus-CottonCandyBlue']
+      && pets['Cactus-CottonCandyPink']
+      && pets['Cactus-Desert']
+      && pets['Cactus-Golden']
+      && pets['Cactus-Red']
+      && pets['Cactus-Shade']
+      && pets['Cactus-Skeleton']
+      && pets['Cactus-White']
+      && pets['Cactus-Zombie']
+      && pets['Fox-Base']
+      && pets['Fox-CottonCandyBlue']
+      && pets['Fox-CottonCandyPink']
+      && pets['Fox-Desert']
+      && pets['Fox-Golden']
+      && pets['Fox-Red']
+      && pets['Fox-Shade']
+      && pets['Fox-Skeleton']
+      && pets['Fox-White']
+      && pets['Fox-Zombie']
+      && pets['Frog-Base']
+      && pets['Frog-CottonCandyBlue']
+      && pets['Frog-CottonCandyPink']
+      && pets['Frog-Desert']
+      && pets['Frog-Golden']
+      && pets['Frog-Red']
+      && pets['Frog-Shade']
+      && pets['Frog-Skeleton']
+      && pets['Frog-White']
+      && pets['Frog-Zombie']
+      && pets['Snake-Base']
+      && pets['Snake-CottonCandyBlue']
+      && pets['Snake-CottonCandyPink']
+      && pets['Snake-Desert']
+      && pets['Snake-Golden']
+      && pets['Snake-Red']
+      && pets['Snake-Shade']
+      && pets['Snake-Skeleton']
+      && pets['Snake-White']
+      && pets['Snake-Zombie']
+      && pets['Spider-Base']
+      && pets['Spider-CottonCandyBlue']
+      && pets['Spider-CottonCandyPink']
+      && pets['Spider-Desert']
+      && pets['Spider-Golden']
+      && pets['Spider-Red']
+      && pets['Spider-Shade']
+      && pets['Spider-Skeleton']
+      && pets['Spider-White']
+      && pets['Spider-Zombie']) {
+        set['achievements.duneBuddy'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.updateOne({ _id: user._id }, { $set: set }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-09-16') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2023/20231114_pet_group_achievements.js

@@ -0,0 +1,124 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20231114_pet_group_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  let set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Cactus-Zombie'] > 0
+      && pets['Cactus-Skeleton'] > 0
+      && pets['Cactus-Base'] > 0
+      && pets['Cactus-Desert'] > 0
+      && pets['Cactus-Red'] > 0
+      && pets['Cactus-Shade'] > 0
+      && pets['Cactus-White']> 0
+      && pets['Cactus-Golden'] > 0
+      && pets['Cactus-CottonCandyBlue'] > 0
+      && pets['Cactus-CottonCandyPink'] > 0
+      && pets['Hedgehog-Zombie'] > 0
+      && pets['Hedgehog-Skeleton'] > 0
+      && pets['Hedgehog-Base'] > 0
+      && pets['Hedgehog-Desert'] > 0
+      && pets['Hedgehog-Red'] > 0
+      && pets['Hedgehog-Shade'] > 0
+      && pets['Hedgehog-White'] > 0
+      && pets['Hedgehog-Golder'] > 0
+      && pets['Hedgehog-CottonCandyBlue'] > 0
+      && pets['Hedgehog-CottonCandyPink'] > 0
+      && pets['Rock-Zombie'] > 0
+      && pets['Rock-Skeleton'] > 0
+      && pets['Rock-Base'] > 0
+      && pets['Rock-Desert'] > 0
+      && pets['Rock-Red'] > 0
+      && pets['Rock-Shade'] > 0
+      && pets['Rock-White'] > 0
+      && pets['Rock-Golden'] > 0
+      && pets['Rock-CottonCandyBlue'] > 0
+      && pets['Rock-CottonCandyPink'] > 0 ) {
+        set['achievements.roughRider'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Cactus-Zombie']
+      && mounts['Cactus-Skeleton']
+      && mounts['Cactus-Base']
+      && mounts['Cactus-Desert']
+      && mounts['Cactus-Red']
+      && mounts['Cactus-Shade']
+      && mounts['Cactus-White']
+      && mounts['Cactus-Golden']
+      && mounts['Cactus-CottonCandyPink']
+      && mounts['Cactus-CottonCandyBlue']
+      && mounts['Hedgehog-Zombie']
+      && mounts['Hedgehog-Skeleton']
+      && mounts['Hedgehog-Base']
+      && mounts['Hedgehog-Desert']
+      && mounts['Hedgehog-Red']
+      && mounts['Hedgehog-Shade']
+      && mounts['Hedgehog-White']
+      && mounts['Hedgehog-Golden']
+      && mounts['Hedgehog-CottonCandyPink']
+      && mounts['Hedgehog-CottonCandyBlue']
+      && mounts['Rock-Zombie']
+      && mounts['Rock-Skeleton']
+      && mounts['Rock-Base']
+      && mounts['Rock-Desert']
+      && mounts['Rock-Red']
+      && mounts['Rock-Shade']
+      && mounts['Rock-White']
+      && mounts['Rock-Golden']
+      && mounts['Rock-CottonCandyPink']
+      && mounts['Rock-CottonCandyBlue'] ) {
+        set['achievements.roughRider'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-02-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2023/20231228_nye.js

@@ -0,0 +1,87 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20231228_nye';
+import { model as User } from '../../../website/server/models/user';
+import { v4 as uuid } from 'uuid';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = { migration: MIGRATION_NAME };
+  let push = {};
+
+  if (typeof user.items.gear.owned.head_special_nye2022 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2023'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2021 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2022'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2020 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2021'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2019 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2020'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2018 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2019'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2017 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2018'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2016 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2017'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2015 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2016'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye2014 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2015'] = true;
+  } else if (typeof user.items.gear.owned.head_special_nye !== 'undefined') {
+    set['items.gear.owned.head_special_nye2014'] = true;
+  } else {
+    set['items.gear.owned.head_special_nye'] = true;
+  }
+
+  push.notifications = {
+    type: 'ITEM_RECEIVED',
+    data: {
+      icon: 'notif_head_special_nye',
+      title: 'Happy New Year!',
+      text: 'Check your Equipment for this year\'s party hat!',
+      destination: 'inventory/equipment',
+    },
+    seen: false,
+  };
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.updateOne({_id: user._id}, {$set: set, $push: push}).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    'auth.timestamps.loggedin': { $gt: new Date('2023-12-01') },
+    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
+  }
+};

package.json

@@ -1,14 +1,14 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.5.0",
+  "version": "5.14.0",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.22.5",
+    "@babel/core": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
-    "@babel/register": "^7.22.5",
+    "@babel/register": "^7.22.15",
     "@google-cloud/trace-agent": "^7.1.2",
-    "@parse/node-apn": "^5.1.3",
+    "@parse/node-apn": "^5.2.3",
     "@slack/webhook": "^6.1.0",
     "accepts": "^1.3.8",
     "amazon-payments": "^0.2.9",
@@ -17,7 +17,7 @@
     "apple-auth": "^1.0.9",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
-    "bootstrap": "^4.6.0",
+    "bootstrap": "^4.6.2",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
     "coupon-code": "^0.4.5",
@@ -31,30 +31,31 @@
     "express-basic-auth": "^1.2.1",
     "express-validator": "^5.2.0",
     "glob": "^8.1.0",
-    "got": "^11.8.3",
+    "got": "^11.8.6",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-nodemon": "^2.5.0",
+    "nodemon": "^2.0.20",
     "gulp.spritesmith": "^6.13.0",
     "habitica-markdown": "^3.0.0",
     "helmet": "^4.6.0",
     "image-size": "^1.0.2",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
-    "jsonwebtoken": "^9.0.1",
+    "jsonwebtoken": "^9.0.2",
     "jwks-rsa": "^2.1.5",
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.29.4",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.13.7",
+    "mongoose": "^5.13.20",
     "morgan": "^1.10.0",
-    "nconf": "^0.12.0",
+    "nconf": "^0.12.1",
     "node-gcm": "^1.0.5",
     "on-headers": "^1.0.2",
-    "passport": "^0.5.0",
+    "passport": "^0.5.3",
     "passport-facebook": "^3.0.0",
     "passport-google-oauth2": "^0.2.0",
     "passport-google-oauth20": "2.0.0",
@@ -67,15 +68,15 @@
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.2",
-    "stripe": "^12.9.0",
+    "stripe": "^12.18.0",
     "superagent": "^8.1.2",
     "universal-analytics": "^0.5.3",
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
-    "validator": "^13.9.0",
+    "validator": "^13.11.0",
     "vinyl-buffer": "^1.0.1",
     "winston": "^3.10.0",
-    "winston-loggly-bulk": "^3.2.1",
+    "winston-loggly-bulk": "^3.3.0",
     "xml2js": "^0.6.2"
   },
   "private": true,
@@ -105,12 +106,12 @@
     "client:unit": "cd website/client && npm run test:unit",
     "start": "gulp nodemon",
     "debug": "gulp nodemon --inspect",
-    "mongo:dev": "run-rs -v 4.2.8 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
+    "mongo:dev": "run-rs -v 4.1.1 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^1.3.6",
+    "axios": "^1.4.0",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",

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

@@ -0,0 +1,62 @@
+import { v4 as generateUUID } from 'uuid';
+import {
+  generateChallenge,
+  createAndPopulateGroup,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /challenges/:challengeId/flag', () => {
+  let user;
+  let challenge;
+
+  beforeEach(async () => {
+    const { group, groupLeader } = await createAndPopulateGroup({
+      groupDetails: {
+        name: 'TestParty',
+        type: 'party',
+        privacy: 'private',
+      },
+      members: 1,
+    });
+
+    user = groupLeader;
+
+    challenge = await generateChallenge(user, group);
+  });
+
+  it('returns an error when challenge is not found', async () => {
+    await expect(user.post(`/challenges/${generateUUID()}/flag`))
+      .to.eventually.be.rejected.and.eql({
+        code: 404,
+        error: 'NotFound',
+        message: t('challengeNotFound'),
+      });
+  });
+
+  it('flags a challenge', async () => {
+    const flagResult = await user.post(`/challenges/${challenge._id}/flag`);
+
+    expect(flagResult.challenge.flags[user._id]).to.equal(true);
+    expect(flagResult.challenge.flagCount).to.equal(1);
+  });
+
+  it('flags a challenge with a higher count when from an admin', async () => {
+    await user.update({ 'contributor.admin': true });
+
+    const flagResult = await user.post(`/challenges/${challenge._id}/flag`);
+
+    expect(flagResult.challenge.flags[user._id]).to.equal(true);
+    expect(flagResult.challenge.flagCount).to.equal(5);
+  });
+
+  it('returns an error when user tries to flag a challenge that is already flagged', async () => {
+    await user.post(`/challenges/${challenge._id}/flag`);
+
+    await expect(user.post(`/challenges/${challenge._id}/flag`))
+      .to.eventually.be.rejected.and.eql({
+        code: 404,
+        error: 'NotFound',
+        message: t('messageChallengeFlagAlreadyReported'),
+      });
+  });
+});

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

@@ -0,0 +1,58 @@
+import { v4 as generateUUID } from 'uuid';
+import {
+  generateChallenge,
+  createAndPopulateGroup,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /challenges/:challengeId/clearflags', () => {
+  let admin;
+  let nonAdmin;
+  let challenge;
+
+  beforeEach(async () => {
+    const { group, groupLeader, members } = await createAndPopulateGroup({
+      groupDetails: {
+        name: 'TestParty',
+        type: 'party',
+        privacy: 'private',
+      },
+      members: 1,
+    });
+
+    admin = groupLeader;
+    [nonAdmin] = members;
+
+    await admin.update({ 'permissions.moderator': true });
+
+    challenge = await generateChallenge(admin, group);
+    await admin.post(`/challenges/${challenge._id}/flag`);
+  });
+
+  it('returns error when non-admin attempts to clear flags', async () => {
+    await expect(nonAdmin.post(`/challenges/${generateUUID()}/clearflags`))
+      .to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('messageGroupChatAdminClearFlagCount'),
+      });
+  });
+
+  it('returns an error when challenge is not found', async () => {
+    await expect(admin.post(`/challenges/${generateUUID()}/clearflags`))
+      .to.eventually.be.rejected.and.eql({
+        code: 404,
+        error: 'NotFound',
+        message: t('challengeNotFound'),
+      });
+  });
+
+  it('clears flags and sets mod flag to false', async () => {
+    await nonAdmin.post(`/challenges/${challenge._id}/flag`);
+    const flagResult = await admin.post(`/challenges/${challenge._id}/clearflags`);
+
+    expect(flagResult.challenge.flagCount).to.eql(0);
+    expect(flagResult.challenge.flags).to.have.property(admin._id, false);
+    expect(flagResult.challenge.flags).to.have.property(nonAdmin._id, true);
+  });
+});

test/api/v3/integration/members/POST-members_memberId_clear-flags.js

@@ -0,0 +1,64 @@
+import { v4 as generateUUID } from 'uuid';
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /members/:memberId/clear-flags', () => {
+  let reporter;
+  let admin;
+  let moderator;
+
+  beforeEach(async () => {
+    reporter = await generateUser();
+    admin = await generateUser({ permissions: { userSupport: true } });
+    moderator = await generateUser({ permissions: { moderator: true } });
+    await reporter.post(`/members/${admin._id}/flag`);
+  });
+
+  context('error cases', () => {
+    it('returns error when memberId is not a UUID', async () => {
+      await expect(moderator.post('/members/gribbly/clear-flags'))
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: t('invalidReqParams'),
+        });
+    });
+
+    it('returns error when member with UUID is not found', async () => {
+      const randomId = generateUUID();
+
+      await expect(moderator.post(`/members/${randomId}/clear-flags`))
+        .to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('userWithIDNotFound', { userId: randomId }),
+        });
+    });
+
+    it('returns error when requesting user is not a moderator', async () => {
+      await expect(reporter.post(`/members/${admin._id}/clear-flags`))
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: 'Only a moderator may clear reports from a profile.',
+        });
+    });
+  });
+
+  context('valid request', () => {
+    it('removes a single flag from user', async () => {
+      await expect(moderator.post(`/members/${admin._id}/clear-flags`)).to.eventually.be.ok;
+      const updatedTarget = await admin.get(`/hall/heroes/${admin._id}`);
+      expect(updatedTarget.profile.flags).to.eql({});
+    });
+
+    it('removes multiple flags from user', async () => {
+      await moderator.post(`/members/${admin._id}/flag`);
+      await expect(moderator.post(`/members/${admin._id}/clear-flags`)).to.eventually.be.ok;
+      const updatedTarget = await admin.get(`/hall/heroes/${admin._id}`);
+      expect(updatedTarget.profile.flags).to.eql({});
+    });
+  });
+});

test/api/v3/integration/members/POST-members_memberId_flag.js

@@ -0,0 +1,151 @@
+import { v4 as generateUUID } from 'uuid';
+import moment from 'moment';
+import nconf from 'nconf';
+import { IncomingWebhook } from '@slack/webhook';
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /members/:memberId/flag', () => {
+  let reporter;
+  let target;
+
+  beforeEach(async () => {
+    reporter = await generateUser();
+    target = await generateUser({
+      'profile.blurb': 'Naughty Text',
+      'profile.imageUrl': 'https://evil.com/',
+    });
+  });
+
+  context('error cases', () => {
+    it('returns error when memberId is not a UUID', async () => {
+      await expect(reporter.post('/members/gribbly/flag'))
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: t('invalidReqParams'),
+        });
+    });
+
+    it('returns error when member with UUID is not found', async () => {
+      const randomId = generateUUID();
+
+      await expect(reporter.post(`/members/${randomId}/flag`))
+        .to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('userWithIDNotFound', { userId: randomId }),
+        });
+    });
+
+    it('returns error when non-admin flags same profile twice', async () => {
+      await reporter.post(`/members/${target._id}/flag`);
+      await expect(reporter.post(`/members/${target._id}/flag`))
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: 'A profile can not be flagged more than once by the same user.',
+        });
+    });
+  });
+
+  context('valid request', () => {
+    let admin;
+    const comment = 'this profile is bad';
+    const source = 'Third Party Script';
+
+    beforeEach(async () => {
+      admin = await generateUser({ 'permissions.userSupport': true });
+      sandbox.stub(IncomingWebhook.prototype, 'send').returns(Promise.resolve());
+    });
+
+    afterEach(() => {
+      sandbox.restore();
+    });
+
+    it('adds flags object to target user', async () => {
+      await reporter.post(`/members/${target._id}/flag`);
+      const updatedTarget = await admin.get(`/hall/heroes/${target._id}`);
+      expect(updatedTarget.profile.flags[reporter._id]).to.have.all.keys([
+        'comment',
+        'source',
+        'timestamp',
+      ]);
+      expect(moment(updatedTarget.profile.flags[reporter._id].timestamp).toDate()).to.be.a('date');
+    });
+
+    it('allows addition of a comment and source', async () => {
+      await reporter.post(`/members/${target._id}/flag`, {
+        comment,
+        source,
+      });
+      const updatedTarget = await admin.get(`/hall/heroes/${target._id}`);
+      expect(updatedTarget.profile.flags[reporter._id].comment).to.eql(comment);
+      expect(updatedTarget.profile.flags[reporter._id].source).to.eql(source);
+    });
+
+    it('allows moderator to flag twice', async () => {
+      const moderator = await generateUser({ 'permissions.moderator': true });
+      await moderator.post(`/members/${target._id}/flag`);
+      await expect(moderator.post(`/members/${target._id}/flag`)).to.eventually.be.ok;
+    });
+
+    it('allows multiple non-moderators to flag individually', async () => {
+      await admin.post(`/members/${target._id}/flag`);
+      await reporter.post(`/members/${target._id}/flag`);
+      const updatedTarget = await admin.get(`/hall/heroes/${target._id}`);
+      expect(updatedTarget.profile.flags[admin._id]).to.exist;
+      expect(updatedTarget.profile.flags[reporter._id]).to.exist;
+    });
+
+    it('sends a flag report to moderation Slack', async () => {
+      const BASE_URL = nconf.get('BASE_URL');
+      await reporter.post(`/members/${target._id}/flag`, {
+        comment,
+        source,
+      });
+
+      /* eslint-disable camelcase */
+      expect(IncomingWebhook.prototype.send).to.be.calledWith({
+        text: `@${reporter.auth.local.username} (${reporter._id}; language: ${reporter.preferences.language}) flagged @${target.auth.local.username}'s profile from ${source} and commented: ${comment}`,
+        attachments: [{
+          fallback: 'Flag Profile',
+          color: 'danger',
+          title: 'User Profile Report',
+          title_link: `${BASE_URL}/profile/${target._id}`,
+          text: `Display Name: ${target.profile.name}\n\nImage URL: ${target.profile.imageUrl}\n\nAbout: ${target.profile.blurb}`,
+          mrkdwn_in: [
+            'text',
+          ],
+        }],
+      });
+      /* eslint-enable camelcase */
+    });
+
+    it('excludes empty fields when sending Slack message', async () => {
+      const BASE_URL = nconf.get('BASE_URL');
+      await reporter.post(`/members/${admin._id}/flag`, {
+        comment,
+        source,
+      });
+
+      /* eslint-disable camelcase */
+      expect(IncomingWebhook.prototype.send).to.be.calledWith({
+        text: `@${reporter.auth.local.username} (${reporter._id}; language: ${reporter.preferences.language}) flagged @${admin.auth.local.username}'s profile from ${source} and commented: ${comment}`,
+        attachments: [{
+          fallback: 'Flag Profile',
+          color: 'danger',
+          title: 'User Profile Report',
+          title_link: `${BASE_URL}/profile/${admin._id}`,
+          text: `Display Name: ${admin.profile.name}`,
+          mrkdwn_in: [
+            'text',
+          ],
+        }],
+      });
+      /* eslint-enable camelcase */
+    });
+  });
+});

test/api/v3/integration/tasks/POST-tasks_unlink-one_taskId.test.js

@@ -90,7 +90,9 @@ describe('POST /tasks/unlink-one/:taskId', () => {
       });
   });
 
-  it('unlinks a task from a challenge and saves it on keep=keep', async () => {
+  // These tests are causing trouble. Race condition?
+
+  xit('unlinks a task from a challenge and saves it on keep=keep', async () => {
     await user.post(`/tasks/challenge/${challenge._id}`, tasksToTest.daily);
     let [daily] = await user.get('/tasks/user');
     await user.del(`/challenges/${challenge._id}`);
@@ -99,7 +101,7 @@ describe('POST /tasks/unlink-one/:taskId', () => {
     expect(daily.challenge).to.eql({});
   });
 
-  it('unlinks a task from a challenge and deletes it on keep=remove', async () => {
+  xit('unlinks a task from a challenge and deletes it on keep=remove', async () => {
     await user.post(`/tasks/challenge/${challenge._id}`, tasksToTest.daily);
     const [daily] = await user.get('/tasks/user');
     await user.del(`/challenges/${challenge._id}`);

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

@@ -12,7 +12,7 @@ describe('GET /faq', () => {
       expect(res).to.have.property('stillNeedHelp');
       expect(res.stillNeedHelp.ios).to.equal(translate('iosFaqStillNeedHelp'));
       expect(res).to.have.property('questions');
-      expect(res.questions[0].question).to.equal(translate('faqQuestion0'));
+      expect(res.questions[0].question).to.equal(translate('faqQuestion25'));
     });
 
     it('returns faq not in English', async () => {
@@ -29,20 +29,6 @@ describe('GET /faq', () => {
   });
 
   describe('platform parameter', () => {
-    it('returns faq with answers for ios platform only', async () => {
-      const res = await requester().get('/faq?platform=ios');
-
-      expect(res).to.have.property('stillNeedHelp');
-      expect(res.stillNeedHelp).to.eql({ ios: translate('iosFaqStillNeedHelp') });
-
-      expect(res).to.have.property('questions');
-      expect(res.questions[0]).to.eql({
-        exclusions: [],
-        heading: 'overview',
-        question: translate('faqQuestion0'),
-        ios: translate('iosFaqAnswer0'),
-      });
-    });
     it('returns an error when invalid platform parameter is specified', async () => {
       const request = requester().get('/faq?platform=wrong');
       await expect(request)
@@ -60,9 +46,9 @@ describe('GET /faq', () => {
       expect(res).to.have.property('questions');
       expect(res.questions[0]).to.eql({
         exclusions: [],
-        heading: 'overview',
-        question: translate('faqQuestion0'),
-        android: translate('androidFaqAnswer0'),
+        heading: 'task-types',
+        question: translate('faqQuestion25'),
+        web: translate('webFaqAnswer25'),
       });
     });
   });

test/api/v4/user/POST-user_reset.test.js

@@ -21,7 +21,9 @@ describe('POST /user/reset', () => {
       type: 'habit',
     });
 
-    await user.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
     await user.sync();
 
     await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
@@ -39,7 +41,9 @@ describe('POST /user/reset', () => {
       type: 'daily',
     });
 
-    await user.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
     await user.sync();
 
     await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
@@ -57,7 +61,9 @@ describe('POST /user/reset', () => {
       type: 'todo',
     });
 
-    await user.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
     await user.sync();
 
     await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
@@ -75,7 +81,9 @@ describe('POST /user/reset', () => {
       type: 'reward',
     });
 
-    await user.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
     await user.sync();
 
     await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
@@ -87,6 +95,26 @@ describe('POST /user/reset', () => {
     expect(user.tasksOrder.rewards).to.be.empty;
   });
 
+  it('does not allow to reset if the password is missing', async () => {
+    await expect(user.post('/user/reset', {
+      password: '',
+    })).to.eventually.be.rejected.and.eql({
+      code: 400,
+      error: 'BadRequest',
+      message: t('missingPassword'),
+    });
+  });
+
+  it('does not allow to reset if the password is wrong', async () => {
+    await expect(user.post('/user/reset', {
+      password: 'passdw',
+    })).to.eventually.be.rejected.and.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('wrongPassword'),
+    });
+  });
+
   it('does not delete challenge or group tasks', async () => {
     const guild = await generateGroup(user, {}, { 'purchased.plan.customerId': 'group-unlimited' });
     const challenge = await generateChallenge(user, guild);
@@ -102,7 +130,9 @@ describe('POST /user/reset', () => {
     });
     await user.post(`/tasks/${groupTask._id}/assign`, [user._id]);
 
-    await user.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
     await user.sync();
 
     await user.put('/user', {
@@ -133,7 +163,9 @@ describe('POST /user/reset', () => {
       },
     });
 
-    await hero.post('/user/reset');
+    await user.post('/user/reset', {
+      password: 'password',
+    });
 
     const heroRes = await admin.get(`/hall/heroes/${hero.auth.local.username}`);
 

test/common/ops/addTask.js

@@ -126,13 +126,5 @@ describe('shared.ops.addTask', () => {
       expect(addTask(user)._editing).not.be.ok;
       expect(addTask(user)._edit).to.not.be.ok;
     });
-
-    it('respects advancedCollapsed preference', () => {
-      user.preferences.advancedCollapsed = true;
-      expect(addTask(user)._advanced).not.be.ok;
-
-      user.preferences.advancedCollapsed = false;
-      expect(addTask(user)._advanced).to.be.ok;
-    });
   });
 });

test/common/ops/buy/buyArmoire.js

@@ -17,9 +17,9 @@ function getFullArmoire () {
 
   _.each(content.gearTypes, type => {
     _.each(content.gear.tree[type].armoire, gearObject => {
-      const armoireKey = gearObject.key;
-
-      fullArmoire[armoireKey] = true;
+      if (gearObject.released) {
+        fullArmoire[gearObject.key] = true;
+      }
     });
   });
 

test/common/ops/buy/purchase.js

@@ -197,14 +197,14 @@ describe('shared.ops.purchase', () => {
 
     it('purchases quest bundles', async () => {
       const startingBalance = user.balance;
-      // const clock = sandbox.useFakeTimers(moment('2019-05-20').valueOf());
+      const clock = sandbox.useFakeTimers(moment('2022-03-16').valueOf());
       const type = 'bundles';
-      const key = 'featheredFriends';
+      const key = 'cuddleBuddies';
       const price = 1.75;
       const questList = [
-        'falcon',
-        'harpy',
-        'owl',
+        'bunny',
+        'ferret',
+        'guineapig',
       ];
 
       await purchase(user, { params: { type, key } });
@@ -216,7 +216,7 @@ describe('shared.ops.purchase', () => {
       expect(user.balance).to.equal(startingBalance - price);
 
       expect(pinnedGearUtils.removeItemByPath.notCalled).to.equal(true);
-      // clock.restore();
+      clock.restore();
     });
   });
 

test/content/faq.js

@@ -15,12 +15,6 @@ describe('FAQ Locales', () => {
       });
     });
 
-    it('has a valid ios answers', () => {
-      each(questions, question => {
-        expectValidTranslationString(question.ios);
-      });
-    });
-
     it('has a valid web answers', () => {
       each(questions, question => {
         expectValidTranslationString(question.web);
@@ -29,10 +23,6 @@ describe('FAQ Locales', () => {
   });
 
   describe('Still Need Help Message', () => {
-    it('has a valid ios message', () => {
-      expectValidTranslationString(stillNeedHelp.ios);
-    });
-
     it('has a valid web message', () => {
       expectValidTranslationString(stillNeedHelp.web);
     });

website/client/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'import/no-unresolved': 'off',
     'import/extensions': 'off',
     'vue/no-v-html': 'off',
+    'vue/no-mutating-props': 'warn',
     'vue/html-self-closing': ['error', {
       html: {
         void: 'never',

website/client/README.md

@@ -28,30 +28,12 @@ npm run lint
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
-## Storybook
+### Vue Structure
 
-Storybook is mainly used while working on UI-Components to see changes faster instead of using the website.
+Currently pages and components are mixed in `/src/components` this is not a good way to find the files easy.
 
-### Start Storybook
+Thats why each changed / upcoming page / component should be put in either `/src/components` or in the `/src/pages` directory.
 
-```
-npm run storybook:serve
-```
+Inside Pages, each page can have a subfolder which contains sub-components only needed for that page - otherwise it has to be added to the normal components folder.
 
-This will start the storybook process, every `*.stories.js`-File is searched and added to the storybook overview.
-
-### Storybook Worklow
-
-Usually when you working on `component-name.vue` you also create a `component-name.stories.js` file.
-
-Example of the stories structure - [Storybook Docs][StorybookDocsExample] - [CountBadge][CountBadgeExample]
-
-[StorybookDocsExample]: https://storybook.js.org/docs/guides/guide-vue/#step-4-write-your-stories
-[CountBadgeExample]: src/components/ui/countBadge.stories.js
-
-Each function or example of this component will be put after `storiesOf('Your Component', module)`,
-in a separate `.add('function of component', ...`
-
-### Storybook Build
-
-After each client build, storybook build is also triggered and will be available in `dist/storybook`
+At the end of all the changes - the components should only contain components needed between all pages

website/client/config/storybook/README.md

@@ -1,8 +0,0 @@
-# Storybook Updates
-
-Addon-Knobs has been deprecated inorder to update to the new `addons-controls` we need to:
-
-1. Change to the new export syntax for each story `export const StoryTemplate`
-2. And use `StoryTemplate.args` and `StoryTemplate.argTypes` to have the same `knobs` as before
-
-Maybe this can be made story by story and not all at once

website/client/config/storybook/addons.js

@@ -1,5 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-notes/register';

website/client/config/storybook/config.js

@@ -1,65 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { configure } from '@storybook/vue';
-import './margin.css';
-import '../../src/assets/scss/index.scss';
-
-import '../../src/assets/scss/sprites.scss';
-
-import Vue from 'vue';
-import BootstrapVue from 'bootstrap-vue';
-import StoreModule from '@/libs/store';
-import getStore from '@/store';
-import '../../src/filters/registerGlobals';
-
-import i18n from '../../../common/script/i18n';
-
-// couldn't inject the languages easily,
-// so just a "$t()" string to show that this will be translated
-i18n.t = function translateString (...args) {
-  return `$t(${JSON.stringify(args)})`;
-};
-Vue.prototype.$t = i18n.t;
-
-Vue.use(BootstrapVue);
-Vue.use(StoreModule);
-
-const store = getStore();
-store.state.user.data = {
-  stats: {},
-  tags: [],
-  items: {
-    quests: {
-      moon1: 3,
-    },
-  },
-  party: {
-    quest: {
-
-    },
-  },
-  preferences: {
-
-  },
-  auth: {
-    local: {
-      // email: 'example@example.com',
-    },
-    facebook: {
-      emails: [
-        {
-          value: 'test@test.de',
-        },
-      ],
-    },
-  },
-};
-
-Vue.prototype.$store = store;
-
-const req = require.context('../../src', true, /.stories.js$/);
-
-function loadStories () {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);

website/client/config/storybook/margin.css

@@ -1,14 +0,0 @@
-.background {
-    background: teal;
-    display: inline-block;
-}
-
-.inline-block {
-    display: inline-block;
-}
-
-.component-showcase {
-    position: absolute;
-    margin: 20px;
-    width: calc(100% - 40px);
-}

website/client/config/storybook/mock.data.js

@@ -1,107 +0,0 @@
-import { v4 as generateUUID } from 'uuid';
-import getters from '@/store/getters';
-
-export const userStyles = {
-  contributor: {
-    admin: true,
-    level: 9,
-    text: '',
-  },
-  items: {
-    gear: {
-      equipped: {
-        armor: 'armor_special_2',
-        head: 'head_special_2',
-        shield: 'shield_special_goldenknight',
-        headAccessory: 'headAccessory_base_0',
-        eyewear: 'eyewear_base_0',
-        weapon: 'weapon_special_1',
-        back: 'back_base_0',
-      },
-      costume: {
-        armor: 'armor_special_fallRogue',
-        head: 'head_special_fallRogue',
-        shield: 'shield_armoire_shieldOfDiamonds',
-        body: 'body_mystery_201706',
-        eyewear: 'eyewear_special_blackHalfMoon',
-        back: 'back_base_0',
-        headAccessory: 'headAccessory_special_wolfEars',
-        weapon: 'weapon_armoire_lamplighter',
-      },
-    },
-  },
-  preferences: {
-    hair: {
-      color: 'black', base: 0, bangs: 3, beard: 0, mustache: 0, flower: 0,
-    },
-    tasks: { groupByChallenge: false, confirmScoreNotes: false },
-    size: 'broad',
-    skin: 'wolf',
-    shirt: 'zombie',
-    chair: 'none',
-    sleep: true,
-    disableClasses: false,
-    background: 'midnight_castle',
-    costume: true,
-  },
-  stats: {
-    buffs: {
-      str: 0,
-      int: 0,
-      per: 0,
-      con: 0,
-      stealth: 0,
-      streaks: false,
-      snowball: false,
-      spookySparkles: false,
-      shinySeed: false,
-      seafoam: false,
-    },
-    training: {
-      int: 0, per: 0, str: 0, con: 0,
-    },
-    hp: 50,
-    mp: 158,
-    exp: 227,
-    gp: 464.31937261345155,
-    lvl: 17,
-    class: 'rogue',
-    points: 17,
-    str: 0,
-    con: 0,
-    int: 0,
-    per: 0,
-    toNextLevel: 380,
-    maxHealth: 50,
-    maxMP: 158,
-  },
-  profile: {
-    name: 'user',
-  },
-  _id: generateUUID(),
-  flags: {
-    classSelected: true,
-  },
-};
-
-
-export function mockStore ({
-  userData,
-  ...state
-}) {
-  return {
-    getters,
-    dispatch: () => {
-    },
-    watch: () => {
-    },
-    state: {
-      user: {
-        data: {
-          ...userData,
-        },
-      },
-      ...state,
-    },
-  };
-}

website/client/package.json

@@ -8,17 +8,9 @@
     "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
     "lint": "vue-cli-service lint .",
     "lint-no-fix": "vue-cli-service lint --no-fix .",
-    "postinstall": "node ./scripts/npm-postinstall.js",
-    "storybook:build": "vue-cli-service storybook:build -c config/storybook -o dist/storybook",
-    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
+    "postinstall": "node ./scripts/npm-postinstall.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.5.8",
-    "@storybook/addon-knobs": "6.2.9",
-    "@storybook/addon-links": "6.5.8",
-    "@storybook/addon-notes": "5.3.21",
-    "@storybook/addons": "6.5.9",
-    "@storybook/vue": "6.5.14",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^4.5.19",
     "@vue/cli-plugin-router": "^5.0.8",
@@ -32,20 +24,20 @@
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "chai": "^4.3.7",
-    "core-js": "^3.32.1",
+    "core-js": "^3.33.1",
     "dompurify": "^3.0.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.20.0",
     "habitica-markdown": "^3.0.0",
     "hellojs": "^1.20.0",
     "inspectpack": "^4.7.1",
     "intro.js": "^7.2.0",
-    "jquery": "^3.7.0",
+    "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "nconf": "^0.12.0",
+    "nconf": "^0.12.1",
     "sass": "^1.63.4",
     "sass-loader": "^8.0.2",
     "smartbanner.js": "^1.19.3",
@@ -54,16 +46,17 @@
     "svg-url-loader": "^7.1.1",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
-    "uuid": "^9.0.0",
+    "uuid": "^9.0.1",
     "validator": "^13.9.0",
     "vue": "^2.7.10",
-    "vue-cli-plugin-storybook": "2.1.0",
+    "vue-fragment": "^1.6.0",
     "vue-mugen-scroll": "^0.2.6",
     "vue-router": "^3.6.5",
     "vue-template-compiler": "^2.7.10",
+    "vue-template-babel-compiler": "^2.0.0",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
-    "webpack": "^4.46.0"
+    "webpack": "^4.47.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.21.0"

website/client/scripts/npm-postinstall.js

@@ -6,8 +6,4 @@ if (process.env.NODE_ENV === 'production') {
   execSync('npm run build', {
     stdio: 'inherit',
   });
-
-  /* execSync('npm run storybook:build', {
-    stdio: 'inherit',
-  }); */
 }

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

@@ -153,6 +153,11 @@
   width: 60px;
   height: 64px;
 }
+.achievement-duneBuddy2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-duneBuddy2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-dustDevil2x {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-dustDevil2x.png');
   width: 48px;
@@ -343,6 +348,11 @@
   width: 64px;
   height: 56px;
 }
+.achievement-roughRider2x {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-roughRider2x.png');
+  width: 68px;
+  height: 68px;
+}
 .achievement-royally-loyal2x {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/achievement-royally-loyal2x.png');
   width: 48px;
@@ -615,6 +625,11 @@
   width: 141px;
   height: 147px;
 }
+.background_autumn_tree_tunnel {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_autumn_tree_tunnel.png');
+  width: 141px;
+  height: 147px;
+}
 .background_avalanche {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_avalanche.png');
   width: 141px;
@@ -640,6 +655,11 @@
   width: 141px;
   height: 147px;
 }
+.background_barrel_cellar {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_barrel_cellar.png');
+  width: 141px;
+  height: 147px;
+}
 .background_bayou {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_bayou.png');
   width: 141px;
@@ -1199,6 +1219,11 @@
   width: 141px;
   height: 147px;
 }
+.background_giant_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_giant_cat.png');
+  width: 141px;
+  height: 147px;
+}
 .background_giant_dandelions {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_giant_dandelions.png');
   width: 141px;
@@ -1339,6 +1364,11 @@
   width: 141px;
   height: 147px;
 }
+.background_holiday_tree_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_holiday_tree_forest.png');
+  width: 141px;
+  height: 147px;
+}
 .background_holiday_wreath {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_holiday_wreath.png');
   width: 141px;
@@ -1364,6 +1394,11 @@
   width: 141px;
   height: 147px;
 }
+.background_ice_sculpture_festival {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_ice_sculpture_festival.png');
+  width: 141px;
+  height: 147px;
+}
 .background_iceberg {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_iceberg.png');
   width: 141px;
@@ -1439,6 +1474,11 @@
   width: 141px;
   height: 147px;
 }
+.background_jack_o_lantern_stacks {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_jack_o_lantern_stacks.png');
+  width: 141px;
+  height: 147px;
+}
 .background_jungle_canopy {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_jungle_canopy.png');
   width: 141px;
@@ -1564,6 +1604,11 @@
   width: 141px;
   height: 147px;
 }
+.background_monstrous_cave {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_monstrous_cave.png');
+  width: 141px;
+  height: 147px;
+}
 .background_mountain_lake {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_mountain_lake.png');
   width: 141px;
@@ -1884,6 +1929,11 @@
   width: 141px;
   height: 147px;
 }
+.background_spectral_candle_room {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_spectral_candle_room.png');
+  width: 141px;
+  height: 147px;
+}
 .background_spider_web {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_spider_web.png');
   width: 141px;
@@ -2209,6 +2259,11 @@
   width: 141px;
   height: 147px;
 }
+.background_winter_full_moon {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_full_moon.png');
+  width: 141px;
+  height: 147px;
+}
 .background_winter_lake_with_swans {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_lake_with_swans.png');
   width: 141px;
@@ -2371,6 +2426,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_autumn_tree_tunnel {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_autumn_tree_tunnel.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_avalanche {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_avalanche.png');
   width: 68px;
@@ -2396,6 +2456,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_barrel_cellar {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_barrel_cellar.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_bayou {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_bayou.png');
   width: 68px;
@@ -2960,6 +3025,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_giant_cat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_giant_cat.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_giant_dandelions {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_giant_dandelions.png');
   width: 68px;
@@ -3100,6 +3170,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_holiday_tree_forest {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_holiday_tree_forest.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_holiday_wreath {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_holiday_wreath.png');
   width: 68px;
@@ -3125,6 +3200,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_ice_sculpture_festival {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_ice_sculpture_festival.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_iceberg {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_iceberg.png');
   width: 68px;
@@ -3200,6 +3280,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_jack_o_lantern_stacks {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_jack_o_lantern_stacks.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_jungle_canopy {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_jungle_canopy.png');
   width: 68px;
@@ -3325,6 +3410,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_monstrous_cave {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_monstrous_cave.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_mountain_lake {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_mountain_lake.png');
   width: 68px;
@@ -3645,6 +3735,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_spectral_candle_room {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_spectral_candle_room.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_spider_web {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_spider_web.png');
   width: 68px;
@@ -3975,6 +4070,11 @@
   width: 68px;
   height: 68px;
 }
+.icon_background_winter_full_moon {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_winter_full_moon.png');
+  width: 68px;
+  height: 68px;
+}
 .icon_background_winter_lake_with_swans {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/icon_background_winter_lake_with_swans.png');
   width: 68px;
@@ -18755,6 +18855,11 @@
   width: 114px;
   height: 90px;
 }
+.broad_armor_armoire_greenFluffTrimmedCoat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_greenFluffTrimmedCoat.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_armoire_guardiansGown {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_guardiansGown.png');
   width: 114px;
@@ -19130,6 +19235,11 @@
   width: 114px;
   height: 90px;
 }
+.head_armoire_blackSpookySorceryHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_blackSpookySorceryHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_blueFloppyHat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_blueFloppyHat.png');
   width: 90px;
@@ -19265,6 +19375,11 @@
   width: 90px;
   height: 90px;
 }
+.head_armoire_greenTrapperHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_greenTrapperHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_guardiansBonnet {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_guardiansBonnet.png');
   width: 114px;
@@ -19395,6 +19510,11 @@
   width: 90px;
   height: 90px;
 }
+.head_armoire_purpleSpookySorceryHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_purpleSpookySorceryHat.png');
+  width: 114px;
+  height: 90px;
+}
 .head_armoire_ramHeaddress {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_ramHeaddress.png');
   width: 90px;
@@ -19785,6 +19905,11 @@
   width: 90px;
   height: 90px;
 }
+.shield_armoire_saucepan {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_saucepan.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_armoire_shieldOfDiamonds {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_shieldOfDiamonds.png');
   width: 114px;
@@ -20070,6 +20195,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_armoire_greenFluffTrimmedCoat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_greenFluffTrimmedCoat.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_armoire_guardiansGown {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_armoire_guardiansGown.png');
   width: 68px;
@@ -20505,6 +20635,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_armoire_blackSpookySorceryHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_blackSpookySorceryHat.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_armoire_blueFloppyHat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_blueFloppyHat.png');
   width: 68px;
@@ -20640,6 +20775,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_armoire_greenTrapperHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_greenTrapperHat.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_armoire_guardiansBonnet {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_guardiansBonnet.png');
   width: 68px;
@@ -20770,6 +20910,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_armoire_purpleSpookySorceryHat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_purpleSpookySorceryHat.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_armoire_ramHeaddress {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_armoire_ramHeaddress.png');
   width: 68px;
@@ -21160,6 +21305,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_shield_armoire_saucepan {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_saucepan.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_shield_armoire_shieldOfDiamonds {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_armoire_shieldOfDiamonds.png');
   width: 68px;
@@ -21650,6 +21800,16 @@
   width: 68px;
   height: 68px;
 }
+.shop_weapon_armoire_ridingBroom {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_armoire_ridingBroom.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_armoire_rollingPin {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_armoire_rollingPin.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_weapon_armoire_sandySpade {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_armoire_sandySpade.png');
   width: 68px;
@@ -21920,6 +22080,11 @@
   width: 114px;
   height: 90px;
 }
+.slim_armor_armoire_greenFluffTrimmedCoat {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_greenFluffTrimmedCoat.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_armoire_guardiansGown {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_guardiansGown.png');
   width: 114px;
@@ -22600,6 +22765,16 @@
   width: 114px;
   height: 90px;
 }
+.weapon_armoire_ridingBroom {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_ridingBroom.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_armoire_rollingPin {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_rollingPin.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_armoire_sandySpade {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_armoire_sandySpade.png');
   width: 90px;
@@ -28630,6 +28805,96 @@
   width: 68px;
   height: 68px;
 }
+.broad_armor_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202310.png');
+  width: 117px;
+  height: 120px;
+}
+.headAccessory_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/headAccessory_mystery_202310.png');
+  width: 117px;
+  height: 120px;
+}
+.head_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202310.png');
+  width: 117px;
+  height: 120px;
+}
+.shop_armor_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_mystery_202310.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_headAccessory_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_headAccessory_mystery_202310.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_mystery_202310.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202310.png');
+  width: 68px;
+  height: 68px;
+}
+.slim_armor_mystery_202310 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202310.png');
+  width: 117px;
+  height: 120px;
+}
+.head_mystery_202311 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202311.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_head_mystery_202311 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_mystery_202311.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202311 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202311.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_mystery_202311 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_mystery_202311.png');
+  width: 68px;
+  height: 68px;
+}
+.weapon_mystery_202311 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_mystery_202311.png');
+  width: 114px;
+  height: 90px;
+}
+.eyewear_mystery_202312 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/eyewear_mystery_202312.png');
+  width: 114px;
+  height: 90px;
+}
+.head_mystery_202312 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202312.png');
+  width: 114px;
+  height: 90px;
+}
+.shop_eyewear_mystery_202312 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_eyewear_mystery_202312.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_mystery_202312 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_mystery_202312.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_set_mystery_202312 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_set_mystery_202312.png');
+  width: 68px;
+  height: 68px;
+}
 .broad_armor_mystery_301404 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
   width: 90px;
@@ -32735,6 +33000,26 @@
   width: 114px;
   height: 117px;
 }
+.broad_armor_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2024Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2024Mage.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2024Rogue.png');
+  width: 114px;
+  height: 90px;
+}
+.broad_armor_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_winter2024Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .broad_armor_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_special_yeti.png');
   width: 90px;
@@ -32795,6 +33080,11 @@
   width: 114px;
   height: 90px;
 }
+.head_special_nye2023 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_nye2023.png');
+  width: 114px;
+  height: 90px;
+}
 .head_special_ski {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_ski.png');
   width: 90px;
@@ -32985,6 +33275,26 @@
   width: 114px;
   height: 117px;
 }
+.head_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2024Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.head_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2024Mage.png');
+  width: 114px;
+  height: 90px;
+}
+.head_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2024Rogue.png');
+  width: 114px;
+  height: 90px;
+}
+.head_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_winter2024Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .head_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_special_yeti.png');
   width: 90px;
@@ -33135,6 +33445,21 @@
   width: 114px;
   height: 117px;
 }
+.shield_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2024Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2024Rogue.png');
+  width: 114px;
+  height: 90px;
+}
+.shield_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_winter2024Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .shield_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_special_yeti.png');
   width: 90px;
@@ -33335,6 +33660,26 @@
   width: 68px;
   height: 68px;
 }
+.shop_armor_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_winter2024Healer.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_armor_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_winter2024Mage.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_armor_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_winter2024Rogue.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_armor_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_winter2024Warrior.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_armor_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_armor_special_yeti.png');
   width: 68px;
@@ -33395,6 +33740,11 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_special_nye2023 {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_nye2023.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_special_ski {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_ski.png');
   width: 68px;
@@ -33585,6 +33935,26 @@
   width: 68px;
   height: 68px;
 }
+.shop_head_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_winter2024Healer.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_winter2024Mage.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_winter2024Rogue.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_head_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_winter2024Warrior.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_head_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_head_special_yeti.png');
   width: 68px;
@@ -33735,6 +34105,21 @@
   width: 68px;
   height: 68px;
 }
+.shop_shield_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_special_winter2024Healer.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_shield_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_special_winter2024Rogue.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_shield_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_special_winter2024Warrior.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_shield_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_shield_special_yeti.png');
   width: 68px;
@@ -33935,6 +34320,26 @@
   width: 68px;
   height: 68px;
 }
+.shop_weapon_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_special_winter2024Healer.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_special_winter2024Mage.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_special_winter2024Rogue.png');
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_special_winter2024Warrior.png');
+  width: 68px;
+  height: 68px;
+}
 .shop_weapon_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shop_weapon_special_yeti.png');
   width: 68px;
@@ -34135,6 +34540,26 @@
   width: 114px;
   height: 117px;
 }
+.slim_armor_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2024Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2024Mage.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2024Rogue.png');
+  width: 114px;
+  height: 90px;
+}
+.slim_armor_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_winter2024Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .slim_armor_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_special_yeti.png');
   width: 90px;
@@ -34335,6 +34760,26 @@
   width: 114px;
   height: 117px;
 }
+.weapon_special_winter2024Healer {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2024Healer.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_special_winter2024Mage {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2024Mage.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_special_winter2024Rogue {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2024Rogue.png');
+  width: 114px;
+  height: 90px;
+}
+.weapon_special_winter2024Warrior {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_winter2024Warrior.png');
+  width: 114px;
+  height: 90px;
+}
 .weapon_special_yeti {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/weapon_special_yeti.png');
   width: 90px;

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

@@ -5,15 +5,15 @@
   font-weight: bold;
   line-height: 1.71;
   border: 1px solid transparent;
-  padding: 0.219rem 0.75rem;
-  border-radius: 2px;
+  padding: 4px 12px;
+  border-radius: 4px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   color: $white;
 
   &:hover, &:focus {
     box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
 
-    &:disabled, &.disabled, &.btn-flat {
+    &.btn-flat {
       box-shadow: none;
     }
   }
@@ -264,6 +264,10 @@
   box-shadow: none;
 }
 
+.btn-cancel {
+  color: $blue-10;
+}
+
 .btn-small {
   font-size: 12px;
   line-height: 1.33;

website/client/src/assets/scss/dropdown.scss

@@ -7,6 +7,10 @@
 
 .dropdown-toggle:hover {
   --caret-color: #{$purple-300};
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 
 .dropdown.show > .dropdown-toggle:not(.btn-success) {
@@ -136,6 +140,8 @@
 
   .dropdown-menu.show {
     min-width: 100% !important;
+    overflow: scroll;
+    max-height: 400px;
   }
 }
 

website/client/src/assets/scss/form.scss

@@ -26,11 +26,11 @@ input, textarea, input.form-control, textarea.form-control {
   color: $gray-50;
   border: 1px solid $gray-400;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled):not(:read-only) {
     border-color: $gray-300;
   }
 
-  &:active:not(:disabled), &:focus:not(:disabled) {
+  &:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only) {
     border-color: $purple-400;
     outline: 0;
     box-shadow: none;
@@ -56,13 +56,13 @@ input, textarea, input.form-control, textarea.form-control {
 
   &.input-valid, &.input-invalid {
     background-repeat: no-repeat;
-    background-position: center right 16px;
+    background-position: center right 0.5rem;
   }
 
   &.input-valid {
-    padding-right: 37px;
+    padding-right: 27px;
     background-image: url(~@/assets/svg/for-css/check.svg);
-    background-size: 13px 10px;
+    background-size: 1rem;
   }
 
   &.input-invalid {
@@ -91,8 +91,10 @@ input, textarea, input.form-control, textarea.form-control {
     border-color: $gray-300;
   }
 
-  &:focus, &:active, &:focus-within {
-    border: solid 1px $purple-400;
+  &:not(:read-only) {
+    &:focus, &:active, &:focus-within {
+      border: solid 1px $purple-400;
+    }
   }
 
   .input-group-prepend , .input-group-append {
@@ -163,8 +165,22 @@ input, textarea, input.form-control, textarea.form-control {
   input {
     height: 30px;
     border: 0;
-    background: $white !important;
   }
+
+  &.is-valid {
+    border-color: $green-10 !important;
+  }
+
+  &.is-invalid {
+    border-color: $red-100 !important;
+  }
+}
+
+.input-error {
+  font-size: 12px;
+  line-height: 1.33;
+
+  color: $maroon-10;
 }
 
 .input-group-spaced {
@@ -231,20 +247,20 @@ $bg-disabled-control: $gray-10;
       background-color: inherit;
     }
 
-    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, 
+    &:focus:not(:checked):not(:disabled)~.custom-control-label::before,
     &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
       border: 2px solid $gray-300;
       box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
     }
 
-    &:focus:checked:not(:disabled)~.custom-control-label::before, 
+    &:focus:checked:not(:disabled)~.custom-control-label::before,
     &:active:checked:not(:disabled)~.custom-control-label::before  {
       box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
       border-color: 2 px solid $purple-400;
       background-color: $purple-400;
     }
 
-    &:focus:disabled~.custom-control-label::before, 
+    &:focus:disabled~.custom-control-label::before,
     &:active:disabled~.custom-control-label::before  {
       box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
     }
@@ -398,8 +414,6 @@ $bg-color: $purple-400;
   margin-top: 0 !important;
 }
 
-
-
 // Disable default style Firefox for invalid elements.
 // Selectors taken from view-source:resource://gre-resources/forms.css on Firefox
 :not(output):-moz-ui-invalid {

website/client/src/assets/svg/apple_black.svg

@@ -1,55 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="1000"
-   viewBox="0 0 1000 1187.198"
-   version="1.1"
-   height="1187.198"
-   id="svg2"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="Apple_1998.svg">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1366"
-     inkscape:window-height="705"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="0.1767767"
-     inkscape:cx="-1066.5045"
-     inkscape:cy="964.94669"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <path
-     d="m 979.04184,925.18785 c -17.95397,41.47737 -39.20563,79.65705 -63.82824,114.75895 -33.56298,47.8528 -61.04356,80.9761 -82.22194,99.3698 -32.83013,30.192 -68.00529,45.6544 -105.67203,46.5338 -27.04089,0 -59.6512,-7.6946 -97.61105,-23.3035 -38.08442,-15.5358 -73.08371,-23.2303 -105.08578,-23.2303 -33.56296,0 -69.55888,7.6945 -108.06101,23.2303 -38.5608,15.6089 -69.62484,23.7432 -93.37541,24.5493 -36.12049,1.5389 -72.1237,-14.3632 -108.06101,-47.7796 -22.93711,-20.0059 -51.62684,-54.3017 -85.99592,-102.8874 C 92.254176,984.54592 61.937588,924.38175 38.187028,855.7902 12.750995,781.70252 0,709.95986 0,640.50361 0,560.94181 17.191859,492.32094 51.626869,434.81688 78.689754,388.62753 114.69299,352.19192 159.75381,325.44413 c 45.06086,-26.74775 93.74914,-40.37812 146.18212,-41.25019 28.68971,0 66.3125,8.8744 113.06613,26.31542 46.62174,17.49964 76.55727,26.37404 89.68198,26.37404 9.8124,0 43.06758,-10.37669 99.4431,-31.06405 53.31237,-19.18512 98.30724,-27.12887 135.16787,-23.99975 99.8828,8.06098 174.92313,47.43518 224.82789,118.37174 -89.33023,54.12578 -133.51903,129.93556 -132.63966,227.18753 0.8061,75.75115 28.28668,138.78795 82.2952,188.8393 24.47603,23.23022 51.81008,41.18421 82.22186,53.93522 -6.59525,19.12648 -13.557,37.44688 -20.95846,55.03446 z M 749.96366,23.751237 c 0,59.37343 -21.69138,114.810233 -64.92748,166.121963 -52.17652,60.99961 -115.28658,96.24803 -183.72426,90.68597 -0.87204,-7.12298 -1.37769,-14.61967 -1.37769,-22.49743 0,-56.99843 24.81315,-117.99801 68.87738,-167.873453 21.99909,-25.25281 49.978,-46.25018 83.90738,-63.00018 C 686.57507,10.688027 718.59913,1.5631274 748.71783,5.2734376e-4 749.59727,7.9378274 749.96366,15.875627 749.96366,23.750467 Z"
-     id="path4"
-     inkscape:connector-curvature="0" />
+<svg width="13" height="16" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.841 2.564c-.567.672-1.474 1.202-2.382 1.126-.113-.908.331-1.873.851-2.47C7.877.53 8.87.039 9.673 0c.095.946-.274 1.873-.832 2.564zm.823 1.306c-1.314-.076-2.439.747-3.063.747-.633 0-1.588-.71-2.627-.69-1.352.018-2.609.785-3.299 2.005-1.418 2.441-.369 6.055 1.002 8.042.67.984 1.474 2.063 2.533 2.025 1.002-.038 1.399-.653 2.609-.653 1.219 0 1.569.653 2.627.634 1.097-.019 1.787-.984 2.458-1.968.765-1.116 1.077-2.204 1.096-2.261-.019-.019-2.117-.823-2.136-3.245-.019-2.025 1.654-2.99 1.73-3.047-.946-1.4-2.42-1.551-2.93-1.59z" fill="#1A181D" fill-rule="nonzero"/>
 </svg>

website/client/src/assets/svg/crown.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#nw2v1izcda)">
+        <path d="m8 4.01 2.2 5.4 3.8-3.4-2 6H4l-2-6 3.8 3.4L8 4.01zm0-2c-.81 0-1.55.49-1.85 1.25L5.02 6.03 3.33 4.52A1.98 1.98 0 0 0 2 4.01 2.002 2.002 0 0 0 .1 6.64l2 6A2 2 0 0 0 4 14.01h8a2 2 0 0 0 1.9-1.37l1.97-5.9a1.997 1.997 0 0 0-1.85-2.73h-.04c-.5.01-.95.2-1.3.51L11 6.02 9.87 3.25A2.012 2.012 0 0 0 8.02 2L8 2.01z" fill="#4E4A57"/>
+    </g>
+    <defs>
+        <clipPath id="nw2v1izcda">
+            <path fill="#fff" d="M0 0h16v16H0z"/>
+        </clipPath>
+    </defs>
+</svg>

website/client/src/assets/svg/for-css/check.svg

@@ -1,3 +1,18 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
-    <path fill="#24CC8F" fill-rule="evenodd" d="M4.662 9.832c-.312 0-.61-.123-.831-.344L0 5.657l1.662-1.662 2.934 2.934L10.534 0l1.785 1.529-6.764 7.893a1.182 1.182 0 0 1-.848.409l-.045.001"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <defs>
+        <path id="vm46q29nca" d="M6.662 12.832c-.312 0-.61-.123-.831-.344L2 8.657l1.662-1.662 2.934 2.934L12.534 3l1.785 1.529-6.764 7.893c-.214.248-.521.396-.848.409l-.045.001"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-306 -8) translate(306 8)">
+                <mask id="c8uzbxs4ob" fill="#fff">
+                    <use xlink:href="#vm46q29nca"/>
+                </mask>
+                <use fill="#878190" xlink:href="#vm46q29nca"/>
+                <g fill="#20B780" mask="url(#c8uzbxs4ob)">
+                    <path d="M0 0H16V16H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
 </svg>

website/client/src/assets/svg/level.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="17"><defs><path id="a" d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z"/></defs><g transform="rotate(-90 8 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#BDA8FF" xlink:href="#a"/><g fill="#878190" mask="url(#b)"><path d="M0 0h16v16H0z"/></g></g></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" >
+        <path d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z" id="myc95n2o6a"/>
+</svg>

website/client/src/assets/svg/lock-small.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" opacity=".75" transform="translate(3 2)">
+       <path fill="#878190"  d="M4 9h2V7H4v2zm4 1H2V6h6v4zM5 2c1.103 0 2 .897 2 2H3c0-1.103.897-2 2-2zm4 2.277V4c0-2.209-1.791-4-4-4S1 1.791 1 4v.277C.405 4.624 0 5.262 0 6v4c0 1.105.895 2 2 2h6c1.105 0 2-.895 2-2V6c0-.738-.405-1.376-1-1.723z"/>
+    </g>
+</svg>

website/client/src/assets/svg/mute.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#464rik5fna)">
+        <path d="M12 2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2l-4 2v-2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8zm0-2H4C1.79 0 0 1.79 0 4v6c0 2.21 1.79 4 4 4h2c0 .69.36 1.34.95 1.7a1.993 1.993 0 0 0 1.94.09l3.65-1.83A4 4 0 0 0 15.99 10V4c0-2.21-1.79-4-4-4H12zM9.41 7l1.29-1.29A.996.996 0 1 0 9.29 4.3L8 5.59 6.71 4.3A.996.996 0 1 0 5.3 5.71L6.59 7 5.3 8.29a.996.996 0 0 0 .71 1.7c.26 0 .51-.1.71-.29l1.29-1.29L9.3 9.7c.2.2.45.29.71.29.26 0 .51-.1.71-.29a.996.996 0 0 0 0-1.41L9.43 7h-.02z" fill="#4E4A57"/>
+    </g>
+    <defs>
+        <clipPath id="464rik5fna">
+            <path fill="#fff" d="M0 0h16v16H0z"/>
+        </clipPath>
+    </defs>
+</svg>

website/client/src/assets/svg/shadow-mute.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#mzh0y8jf2a)">
+        <path d="M12 2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2l-4 2v-2H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h8zm0-2H4C1.79 0 0 1.79 0 4v6c0 2.21 1.79 4 4 4h2c0 .69.36 1.34.95 1.7a1.993 1.993 0 0 0 1.94.09l3.65-1.83A4 4 0 0 0 15.99 10V4c0-2.21-1.79-4-4-4H12zm-.17 7c0-.55-.45-1-1-1H5.17c-.55 0-1 .45-1 1s.45 1 1 1h5.66c.55 0 1-.45 1-1z" fill="#4E4A57"/>
+    </g>
+    <defs>
+        <clipPath id="mzh0y8jf2a">
+            <path fill="#fff" d="M0 0h16v16H0z"/>
+        </clipPath>
+    </defs>
+</svg>

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

@@ -91,6 +91,7 @@ export default {
       this.close();
     },
     hide () {
+      this.$store.dispatch('user:statSync');
       this.$store.dispatch('user:set', { 'party.quest.completed': '' });
     },
   },

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

@@ -119,6 +119,10 @@ export default {
     SubscriptionAndPerks,
   },
   mixins: [userStateMixin],
+  beforeRouteUpdate (to, from, next) {
+    this.userIdentifier = to.params.userIdentifier;
+    next();
+  },
   data () {
     return {
       userIdentifier: '',
@@ -184,9 +188,5 @@ export default {
       this.resetCounter += 1; // tell child components to reinstantiate from scratch
     },
   },
-  beforeRouteUpdate (to, from, next) {
-    this.userIdentifier = to.params.userIdentifier;
-    next();
-  },
 };
 </script>

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

@@ -57,13 +57,13 @@
         <div class="form-inline">
           Perk month count:
           <input
-              v-model="hero.purchased.plan.perkMonthCount"
-              class="form-control"
-              type="number"
-              min="0"
-              max="2"
-              step="1"
-            >
+            v-model="hero.purchased.plan.perkMonthCount"
+            class="form-control"
+            type="number"
+            min="0"
+            max="2"
+            step="1"
+          >
         </div>
         <div>
           Next Mystic Hourglass:

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

@@ -731,6 +731,8 @@ export default {
     },
   },
   mounted () {
+    this.forgotPassword = this.$route.path.startsWith('/forgot-password');
+
     hello.init({
       google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });

website/client/src/components/avatar.vue

@@ -136,10 +136,10 @@ import foolPet from '../mixins/foolPet';
 import ClassBadge from '@/components/members/classBadge';
 
 export default {
-  mixins: [foolPet],
   components: {
     ClassBadge,
   },
+  mixins: [foolPet],
   props: {
     member: {
       type: Object,

website/client/src/components/bug-report-modal.stories.js

@@ -1,43 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-import { withKnobs } from '@storybook/addon-knobs';
-
-
-import bugReportModal from '@/components/bugReportModal';
-import bugReportSuccessModal from '@/components/bugReportSuccessModal';
-
-const stories = storiesOf('Bug Report Modal', module);
-
-stories.addDecorator(withKnobs);
-
-stories
-  .add('bugReportModal', () => ({
-    components: { bugReportModal },
-    data () {
-      return {
-      };
-    },
-    template: `  
-      <div> 
-        <bug-report-modal></bug-report-modal>
-      </div>
-    `,
-    mounted () {
-      this.$root.$emit('bv::show::modal', 'bug-report-modal');
-    },
-  }))
-  .add('bugReportSuccessModal', () => ({
-    components: { bugReportSuccessModal },
-    data () {
-      return {
-      };
-    },
-    template: `  
-      <div> 
-        <bug-report-success-modal></bug-report-success-modal>
-      </div>
-    `,
-    mounted () {
-      this.$root.$emit('bv::show::modal', 'bug-report-success-modal');
-    },
-  }));

website/client/src/components/bugReportModal.vue

@@ -65,7 +65,7 @@
           rows="5"
           :required="true"
           :placeholder="question ? $t('questionPlaceholder') : $t('reportDescriptionPlaceholder')"
-          :class="{'input-invalid': messageInvalid && this.message.length === 0}"
+          :class="{'input-invalid': messageInvalid && message.length === 0}"
         >
 
         </textarea>

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

@@ -1,5 +1,6 @@
 <template>
   <div class="row">
+    <report-challenge-modal />
     <challenge-modal @updatedChallenge="updatedChallenge" />
     <leave-challenge-modal
       :challenge-id="challenge._id"
@@ -9,11 +10,27 @@
       :members="members"
       :challenge-id="challenge._id"
       :prize="challenge.prize"
+      :flag-count="challenge.flagCount"
     />
     <challenge-member-progress-modal :challenge-id="challenge._id" />
     <div class="col-12 col-md-8 standard-page">
       <div class="row">
         <div class="col-12 col-md-6">
+          <div
+            v-if="canViewFlags"
+            class="flagged"
+          >
+            <div
+              v-if="flaggedNotHidden"
+            >
+              {{ $t("flaggedNotHidden") }}
+            </div>
+            <div
+              v-else-if="flaggedAndHidden"
+            >
+              {{ $t("flaggedAndHidden") }}
+            </div>
+          </div>
           <h1 v-markdown="challenge.name"></h1>
           <div>
             <span class="mr-1 ml-0 d-block">
@@ -41,7 +58,7 @@
              createdBy string (helps with RTL languages)-->
             <!-- @TODO: Implement in V2 strong.margin-left
             (v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
-| {{$t('endDate')}}
+            {{$t('endDate')}}
             // "endDate": "End Date: <% endDate %>",-->
             <!-- span {{challenge.endDate}}-->
           </div>
@@ -169,13 +186,16 @@
         v-if="isLeader || isAdmin"
         class="button-container"
       >
-        <button
-          v-once
-          class="btn btn-primary"
-          @click="cloneChallenge()"
-        >
-          {{ $t('clone') }}
-        </button>
+        <div>
+          <button
+            class="btn"
+            :disabled="flaggedAndHidden"
+            :class="flaggedAndHidden ? 'disabled btn-disabled' : 'btn-primary'"
+            @click="cloneChallenge()"
+          >
+            {{ $t('clone') }}
+          </button>
+        </div>
       </div>
       <div
         v-if="isLeader || isAdmin"
@@ -201,6 +221,17 @@
           {{ $t('endChallenge') }}
         </button>
       </div>
+      <div
+        class="button-container"
+      >
+        <button
+          v-once
+          class="btn btn-danger"
+          @click="reportChallenge()"
+        >
+          {{ $t('report') }}
+        </button>
+      </div>
       <div>
         <sidebar-section :title="$t('challengeSummary')">
           <p v-markdown="challenge.summary"></p>
@@ -249,6 +280,17 @@
     }
   }
 
+  .btn-disabled {
+    background-color: $gray-700;
+    color: $gray-50;
+    box-shadow: none;
+    cursor: arrow;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
   .calendar-icon {
     width: 12px;
     display: inline-block;
@@ -312,6 +354,15 @@
       margin-right: .5em;
     }
   }
+
+  .flagged {
+    margin-left: 0em;
+    color: $red-10;
+
+    span {
+      margin-left: 0em;
+    }
+  }
 </style>
 
 <script>
@@ -332,6 +383,7 @@ import challengeModal from './challengeModal';
 import challengeMemberProgressModal from './challengeMemberProgressModal';
 import challengeMemberSearchMixin from '@/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
+import reportChallengeModal from './reportChallengeModal';
 import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';
@@ -350,6 +402,7 @@ export default {
   components: {
     closeChallengeModal,
     leaveChallengeModal,
+    reportChallengeModal,
     challengeModal,
     challengeMemberProgressModal,
     memberSearchDropdown,
@@ -360,6 +413,11 @@ export default {
     groupLink,
   },
   mixins: [challengeMemberSearchMixin, externalLinks, userStateMixin],
+  async beforeRouteUpdate (to, from, next) {
+    this.searchId = to.params.challengeId;
+    await this.loadChallenge();
+    next();
+  },
   props: ['challengeId'],
   data () {
     return {
@@ -401,6 +459,20 @@ export default {
     canJoin () {
       return !this.isMember;
     },
+    // canViewFlags should allow only moderators/admins to see flags
+    canViewFlags () {
+      const isModerator = this.hasPermission(this.user, 'moderator');
+      if (isModerator && this.challenge.flagCount > 0) return true;
+      return false;
+    },
+    // flaggedNotHidden should allow mods/admins & challenge owner to see flags
+    flaggedNotHidden () {
+      return this.challenge.flagCount === 1;
+    },
+    // flaggedAndHidden should only allow admin to see challenge & flags
+    flaggedAndHidden () {
+      return this.challenge.flagCount > 1;
+    },
   },
   watch: {
     'challenge.name': {
@@ -420,11 +492,6 @@ export default {
   updated () {
     this.handleExternalLinks();
   },
-  async beforeRouteUpdate (to, from, next) {
-    this.searchId = to.params.challengeId;
-    await this.loadChallenge();
-    next();
-  },
   methods: {
     cleanUpTask (task) {
       const cleansedTask = omit(task, TASK_KEYS_TO_REMOVE);
@@ -589,6 +656,14 @@ export default {
         challenge: this.challenge,
       });
     },
+    reportChallenge () {
+      this.$root.$emit('habitica::report-challenge', {
+        challenge: this.challenge,
+      });
+    },
+    async showCannotCloneModal () {
+      this.$root.$emit('bv::show::modal', 'cannot-clone-modal');
+    },
   },
 };
 </script>

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

@@ -366,7 +366,6 @@
         }
       }
     }
-
   }
 </style>
 

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

@@ -2,7 +2,7 @@
   <div>
     <b-modal
       id="close-challenge-modal"
-      :title="$t('createGuild')"
+      :title="$t('endChallenge')"
       size="md"
     >
       <div
@@ -17,31 +17,42 @@
         </h2>
       </div>
       <div class="row text-center">
-        <div class="col-12">
-          <div class="support-habitica">
-            <!-- @TODO: Add challenge achievement badge here-->
+        <span
+          v-if="isFlagged"
+          class="col-12"
+        >
+          <div>{{ $t('cannotClose') }}</div>
+        </span>
+        <span
+          v-else
+          class="col-12"
+        >
+          <div class="col-12">
+            <div class="support-habitica">
+              <!-- @TODO: Add challenge achievement badge here-->
+            </div>
           </div>
-        </div>
-        <div class="col-12">
-          <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
-        </div>
-        <div class="col-12">
-          <member-search-dropdown
-            :text="winnerText"
-            :members="members"
-            :challenge-id="challengeId"
-            @member-selected="selectMember"
-          />
-        </div>
-        <div class="col-12">
-          <button
-            v-once
-            class="btn btn-primary"
-            @click="closeChallenge"
-          >
-            {{ $t('awardWinners') }}
-          </button>
-        </div>
+          <div class="col-12">
+            <strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
+          </div>
+          <div class="col-12">
+            <member-search-dropdown
+              :text="winnerText"
+              :members="members"
+              :challenge-id="challengeId"
+              @member-selected="selectMember"
+            />
+          </div>
+          <div class="col-12">
+            <button
+              v-once
+              class="btn btn-primary"
+              @click="closeChallenge"
+            >
+              {{ $t('awardWinners') }}
+            </button>
+          </div>
+        </span>
         <div class="col-12">
           <hr>
           <div class="or">
@@ -123,7 +134,7 @@ export default {
   components: {
     memberSearchDropdown,
   },
-  props: ['challengeId', 'members', 'prize'],
+  props: ['challengeId', 'members', 'prize', 'flagCount'],
   data () {
     return {
       winner: {},
@@ -134,6 +145,9 @@ export default {
       if (!this.winner.profile) return this.$t('selectMember');
       return this.winner.profile.name;
     },
+    isFlagged () {
+      return this.flagCount > 0;
+    },
   },
   methods: {
     selectMember (member) {

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

@@ -32,7 +32,7 @@
       <div class="row">
         <div
           v-if="!loading &&
-            this.filteredChallenges.length === 0"
+            filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -42,7 +42,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in this.filteredChallenges"
+          v-for="challenge in filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >

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

@@ -51,7 +51,7 @@
       </div>
       <div class="row">
         <div
-          v-if="!loading && challenges.length > 0 && this.filteredChallenges.length === 0"
+          v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -61,7 +61,7 @@
       </div>
       <div class="row">
         <div
-          v-for="challenge in this.filteredChallenges"
+          v-for="challenge in filteredChallenges"
           :key="challenge._id"
           class="col-12 col-md-6"
         >

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

@@ -0,0 +1,273 @@
+<template>
+  <b-modal
+    id="report-challenge"
+    size="md"
+    :hide-footer="true"
+    :hide-header="true"
+  >
+    <div class="modal-body">
+      <div class="heading">
+        <h5
+          v-html="$t('abuseFlagModalHeading')"
+        >
+        </h5>
+      </div>
+      <div>
+        <span
+          class="svg-icon close-icon icon-16 color"
+          aria-hidden="true"
+          tabindex="0"
+          @click="close()"
+          @keypress.enter="close()"
+          v-html="icons.close"
+        ></span>
+      </div>
+      <blockquote>
+        <div
+          v-html="abuseObject.name"
+        >
+        </div>
+      </blockquote>
+      <div>
+        <span class="why-report">{{ $t('whyReportingChallenge') }}</span>
+        <textarea
+          v-model="reportComment"
+          class="form-control"
+          :placeholder="$t('whyReportingChallengePlaceholder')"
+        ></textarea>
+      </div>
+      <p
+        class="report-guidelines"
+        v-html="$t('abuseFlagModalBodyChallenge', abuseFlagModalBody)"
+      >
+      </p>
+    </div>
+    <div class="buttons text-center">
+      <div class="button-spacing">
+        <button
+          class="btn btn-danger"
+          :class="{disabled: !reportComment}"
+          @click="reportAbuse()"
+        >
+          {{ $t('report') }}
+        </button>
+      </div>
+      <div class="button-spacing">
+        <a
+          class="cancel-link"
+          @click.prevent="close()"
+        >
+          {{ $t('cancel') }}
+        </a>
+      </div>
+    </div>
+    <div
+      v-if="hasPermission(user, 'moderator')"
+      class="reset-flag-count d-flex justify-content-center align-items-middle"
+      @click="clearFlagCount()"
+    >
+      <div
+        v-once
+        class="svg-icon icon-16 color ml-auto mr-2 my-auto"
+        v-html="icons.report"
+      ></div>
+      <div
+        class="mr-auto my-auto"
+        @click="clearFlagCount()"
+      >
+        {{ $t('resetFlags') }}
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style>
+  #report-challenge {
+    h5 {
+      color: #F23035;
+    }
+
+    .modal-header {
+      border: none;
+      padding-bottom: 0px;
+      padding-top: 12px;
+      height: 16px;
+      align-content: center;
+    }
+
+    .modal-content {
+      padding: 0px;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .modal-body {
+    padding: 0px 8px 0px 8px;
+  }
+
+  span.svg-icon.close-icon.icon-16 {
+    height: 16px;
+    width: 16px;
+    margin-top: -32px;
+    margin-right: -16px;
+  }
+
+  .close-icon {
+    color: $gray-300;
+    stroke-width: 0px;
+
+    &:hover {
+      color: $gray-200;
+    }
+  }
+
+  .heading h5 {
+    margin-bottom: 24px;
+    margin-top: 16px;
+    color: $red-10;
+    line-height: 1.4;
+  }
+
+  .why-report {
+    font-size: 1em;
+    font-weight: bold;
+    line-height: 1.71;
+    color: $gray-50;
+  }
+
+  .report-guidelines {
+    line-height: 1.71;
+    padding-bottom: 8px;
+  }
+
+   blockquote {
+     border-radius: 4px;
+     background-color: $gray-700;
+     padding: 8px 16px 8px 16px;
+     margin-top: 24px;
+     font-weight: bold;
+     color: $gray-10;
+     height: max-conent;;
+   }
+
+   textarea {
+     margin-top: 8px;
+     margin-bottom: 16px;
+     border-radius: 4px;
+     border: solid 1px $gray-400;
+     height: 64px;
+     font-size: 1em;
+   }
+
+   .btn {
+     width: 75px;
+   }
+
+   .buttons {
+     padding: 0 16px 0 16px;
+     margin-bottom: 16px;
+   }
+
+   .button-spacing {
+     margin-bottom: 16px;
+   }
+
+   .btn-danger.disabled {
+     background-color: $white;
+     color: $gray-50;
+     line-height: 1.71;
+     font-size: 1em;
+   }
+
+   a.cancel-link {
+     color: $purple-300;
+   }
+
+   .reset-flag-count {
+     margin: 16px -16px -16px -16px;
+     height: 48px;
+     color: $maroon-50;
+     background-color: rgba(255, 182, 184, 0.25);
+     border-bottom-left-radius: 8px;
+     border-bottom-right-radius: 8px;
+     justify-content: center;
+     cursor: pointer;
+
+     &:hover {
+      text-decoration: underline;
+     }
+   }
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+import notifications from '@/mixins/notifications';
+import { userStateMixin } from '../../mixins/userState';
+import markdownDirective from '@/directives/markdown';
+import svgClose from '@/assets/svg/close.svg';
+import svgReport from '@/assets/svg/report.svg';
+
+export default {
+  directives: {
+    markdown: markdownDirective,
+  },
+  mixins: [notifications, userStateMixin],
+  data () {
+    const abuseFlagModalBody = {
+      firstLinkStart: '<a href="/static/community-guidelines" target="_blank">',
+      secondLinkStart: '<a href="/static/terms" target="_blank">',
+      linkEnd: '</a>',
+    };
+
+    return {
+      abuseFlagModalBody,
+      abuseObject: '',
+      groupId: '',
+      reportComment: '',
+      icons: Object.freeze({
+        close: svgClose,
+        report: svgReport,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  created () {
+    this.$root.$on('habitica::report-challenge', this.handleReport);
+  },
+  destroyed () {
+    this.$root.$off('habitica::report-challenge', this.handleReport);
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'report-challenge');
+    },
+    async reportAbuse () {
+      if (!this.reportComment) return;
+      this.$store.dispatch('challenges:flag', {
+        challengeId: this.abuseObject.id,
+        comment: this.reportComment,
+      }).then(() => {
+        this.text(this.$t('abuseReported'));
+        this.close();
+      }).catch(() => {});
+    },
+    async clearFlagCount () {
+      await this.$store.dispatch('challenges:clearFlagCount', {
+        challengeId: this.abuseObject.id,
+      });
+      this.close();
+    },
+    handleReport (data) {
+      if (!data.challenge) return;
+      this.abuseObject = data.challenge;
+      this.reportComment = '';
+      this.$root.$emit('bv::show::modal', 'report-challenge');
+    },
+  },
+};
+</script>

website/client/src/components/creatorIntro.vue

@@ -182,8 +182,8 @@
           </div>
           <div
             v-for="bg in backgroundShopSets[0].items"
-            :key="bg.key"
             :id="bg.key"
+            :key="bg.key"
             class="col-2"
             @click="unlock('background.' + bg.key)"
           >
@@ -215,8 +215,8 @@
           >
             <div
               v-for="bg in backgroundShopSets[2].items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="unlock('background.' + bg.key)"
             >
@@ -245,8 +245,8 @@
           >
             <div
               v-for="bg in backgroundShopSets[1].items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
@@ -316,8 +316,8 @@
             </div>
             <div
               v-for="bg in set.items"
-              :key="bg.key"
               :id="bg.key"
+              :key="bg.key"
               class="col-4 text-center customize-option background-button"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
@@ -377,8 +377,8 @@
         >
           <div
             v-for="(bg) in ownedBackgrounds"
-            :key="bg.key"
             :id="bg.key"
+            :key="bg.key"
             class="col-4 text-center customize-option background-button"
             @click="unlock('background.' + bg.key)"
           >

website/client/src/components/faceAvatar.stories.js

@@ -1,46 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-
-import FaceAvatar from './faceAvatar.vue';
-import Avatar from './avatar.vue';
-import { userStyles } from '../../config/storybook/mock.data';
-import content from '../../../common/script/content/index';
-import getters from '@/store/getters';
-
-storiesOf('Face Avatar', module)
-  .add('simple', () => ({
-    components: { FaceAvatar },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <face-avatar :member="user"></face-avatar>
-      </div>
-    `,
-    data () {
-      return {
-        user: userStyles,
-      };
-    },
-  }))
-  .add('compare', () => ({
-    components: { FaceAvatar, Avatar },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <face-avatar :member="user"></face-avatar>
-        <avatar :member="user"></avatar>
-      </div>
-    `,
-    data () {
-      return {
-        user: userStyles,
-      };
-    },
-    state: {
-      content,
-    },
-    store: {
-      getters,
-      state: {
-        content,
-      },
-    },
-  }));

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

@@ -13,8 +13,8 @@
       class="w-100 d-flex pt-2 justify-content-center"
     >
       <h2
-        class="mx-auto mt-4"
         v-once
+        class="mx-auto mt-4"
       >
         {{ $t('newGroupsWelcome') }}
       </h2>
@@ -43,8 +43,8 @@
         >
         </div>
         <h3
-          class="my-auto"
           v-once
+          class="my-auto"
         >
           {{ $t('newGroupsWhatsNew') }}
         </h3>
@@ -66,7 +66,8 @@
         <li>{{ $t('newGroupsBullet07') }}</li>
         <li>{{ $t('newGroupsBullet08') }}</li>
         <li>{{ $t('newGroupsBullet09') }}</li>
-        <li>{{ $t('newGroupsBullet10') }}
+        <li>
+          {{ $t('newGroupsBullet10') }}
           <ul class="p-0">
             <li v-html="$t('newGroupsBullet10a')"></li>
             <li v-html="$t('newGroupsBullet10b')"></li>
@@ -83,13 +84,13 @@
       >
         {{ $t('newGroupsEnjoy') }}
       </div>
-    <button
-      class="btn btn-primary mt-4 mb-1 mx-auto"
-      @click="close()"
-      @keypress.enter="close()"
-    >
-      {{ $t('getStarted') }}
-    </button>
+      <button
+        class="btn btn-primary mt-4 mb-1 mx-auto"
+        @click="close()"
+        @keypress.enter="close()"
+      >
+        {{ $t('getStarted') }}
+      </button>
     </div>
   </b-modal>
 </template>

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

@@ -47,19 +47,21 @@
         </div>
         <div class="create-task-area ml-2">
           <button
-            id="create-task-btn"
             v-if="canCreateTasks"
+            id="create-task-btn"
             class="btn btn-primary create-btn d-flex align-items-center"
             :class="{open: openCreateBtn}"
+            tabindex="0"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
-            tabindex="0"
           >
             <div
               class="svg-icon icon-10 color"
               v-html="icons.positive"
             ></div>
-            <div class="ml-75 mr-1"> {{ $t('addTask') }} </div>
+            <div class="ml-75 mr-1">
+              {{ $t('addTask') }}
+            </div>
           </button>
           <div
             v-if="openCreateBtn"
@@ -68,8 +70,8 @@
             <div
               v-for="type in columns"
               :key="type"
-              @click="createTask(type)"
               class="dropdown-item d-flex px-2 py-1"
+              @click="createTask(type)"
             >
               <div class="d-flex align-items-center justify-content-center task-icon">
                 <div

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

@@ -245,12 +245,13 @@ import notifications from '@/mixins/notifications';
 import closeX from '../ui/closeX';
 
 import copyIcon from '@/assets/svg/copy.svg';
+import copyToClipboard from '@/mixins/copyToClipboard';
 
 export default {
   components: {
     closeX,
   },
-  mixins: [notifications],
+  mixins: [notifications, copyToClipboard],
   data () {
     return {
       icons: Object.freeze({
@@ -287,17 +288,10 @@ export default {
       this.$root.$emit('bv::hide::modal', 'create-party-modal');
     },
     copyUsername () {
-      if (navigator.clipboard) {
-        navigator.clipboard.writeText(this.user.auth.local.username);
-      } else {
-        const copyText = document.createElement('textarea');
-        copyText.value = this.user.auth.local.username;
-        document.body.appendChild(copyText);
-        copyText.select();
-        document.execCommand('copy');
-        document.body.removeChild(copyText);
-      }
-      this.text(this.$t('usernameCopied'));
+      this.mixinCopyToClipboard(
+        this.user.auth.local.username,
+        this.$t('usernameCopied'),
+      );
     },
     seekParty () {
       this.$store.dispatch('user:set', {

website/client/src/components/groups/group.stories.js

@@ -1,401 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-import {
-  collectionQuestLeaderParticipating,
-  collectionQuestNotParticipating,
-  createStory,
-  groupBossQuestParticipating,
-  groupBossQuestRage,
-  groupCollectionQuest,
-  groupCollectionQuestPending,
-} from './group.stories.utils';
-
-storiesOf('Group Components|Party/Quest States', module)
-  .add('Not a Member', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true"
-                       :is-leader="false" :is-member="false"
-                       class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: {
-          leader: {
-
-          },
-          quest: {
-          },
-          purchased: {
-          },
-        },
-      };
-    },
-    user: {
-      data: {
-        _id: 'some-user',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Member/No Quest', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true"
-                       :is-leader="false" :is-member="true"
-                       class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: {
-          leader: {
-
-          },
-          quest: {
-          },
-          purchased: {
-          },
-        },
-      };
-    },
-    user: {
-      data: {
-        _id: 'some-user',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Leader/No Quest', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true"
-                       :is-leader="true" :is-member="true"
-                       class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: {
-          description: 'Some text',
-          leader: {
-
-          },
-          quest: {
-          },
-          purchased: {
-          },
-          privacy: 'private',
-        },
-      };
-    },
-    user: {
-      data: {
-        _id: 'some-user',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Quest Owner/Quest Not Started', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupCollectionQuest(false),
-      };
-    },
-    user: {
-      data: {
-        _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Member/Quest accepted/Quest Not Started', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupCollectionQuest(false),
-      };
-    },
-    user: {
-      data: {
-        _id: 'just-a-member',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Member/Quest accepted/Started', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupCollectionQuest(true),
-      };
-    },
-    user: {
-      data: {
-        _id: 'just-a-member',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Member/Quest Invite Pending', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true"
-                       :is-member="true"
-                       class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupCollectionQuestPending,
-      };
-    },
-    user: {
-      data: {
-        _id: 'some-user',
-        party: {
-          quest: {
-            RSVPNeeded: true,
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Collection Quest/Quest Owner Participating', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" :is-leader="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: collectionQuestLeaderParticipating,
-      };
-    },
-    user: {
-      data: {
-        _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
-        party: {
-          quest: {
-            progress: {
-              up: 0,
-              down: 0,
-              collectedItems: 2,
-              collect: {},
-            },
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Collection Quest/Not Participating', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: collectionQuestNotParticipating,
-      };
-    },
-    user: {
-      data: {
-        _id: 'not-the-leader',
-        party: {
-          quest: {
-            progress: {
-              up: 0,
-              down: 0,
-              collectedItems: 2,
-              collect: {},
-            },
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Boss Quest/Participating', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupBossQuestParticipating,
-      };
-    },
-    user: {
-      data: {
-        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
-        party: {
-          quest: {
-            progress: {
-              up: 20,
-              down: 0,
-              collectedItems: 2,
-              collect: {},
-            },
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Boss Quest/Participating - No Pending', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupBossQuestParticipating,
-      };
-    },
-    user: {
-      data: {
-        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
-        party: {
-          quest: {
-            progress: {
-              up: 0,
-              down: 0,
-              collectedItems: 2,
-              collect: {},
-            },
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Boss Quest/Rage Enabled', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="true" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: groupBossQuestRage,
-      };
-    },
-    user: {
-      data: {
-        _id: 'acc2950e-9919-49bc-be7f-0ec4103e9f2b',
-        party: {
-          quest: {
-            progress: {
-              up: 20,
-              down: 0,
-              collectedItems: 2,
-              collect: {},
-            },
-          },
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }))
-  .add('Not a party', () => createStory({
-    template: `
-      <div class="component-showcase">
-        <right-sidebar :group="group" :is-party="false" :is-member="true" class="col-12"/>
-      </div>
-    `,
-    data () {
-      return {
-        group: {
-          quest: {},
-          leader: {
-
-          },
-        },
-      };
-    },
-    user: {
-      data: {
-        _id: 'some-user',
-        party: {
-
-        },
-        preferences: {
-
-        },
-      },
-    },
-    challengeOptions: {},
-  }));

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

@@ -4,12 +4,18 @@
     <group-plan-creation-modal />
     <div>
       <div class="header">
-        <h1 v-once class="text-center">
+        <h1
+          v-once
+          class="text-center"
+        >
           {{ $t('groupPlanTitle') }}
         </h1>
         <div class="row">
           <div class="col-8 offset-2 text-center">
-            <h2 v-once class="sub-text">
+            <h2
+              v-once
+              class="sub-text"
+            >
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
@@ -24,8 +30,12 @@
                 src="~@/assets/images/group-plans/group-14@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('teamBasedTasks') }} </h2>
-              <p v-once> {{ $t('teamBasedTasksListDesc') }} </p>
+              <h2 v-once>
+                {{ $t('teamBasedTasks') }}
+              </h2>
+              <p v-once>
+                {{ $t('teamBasedTasksListDesc') }}
+              </p>
             </div>
           </div>
           <div class="col-4">
@@ -35,8 +45,12 @@
                 src="~@/assets/images/group-plans/group-12@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('groupManagementControls') }} </h2>
-              <p v-once> {{ $t('groupManagementControlsDesc') }} </p>
+              <h2 v-once>
+                {{ $t('groupManagementControls') }}
+              </h2>
+              <p v-once>
+                {{ $t('groupManagementControlsDesc') }}
+              </p>
             </div>
           </div>
           <div class="col-4">
@@ -46,8 +60,12 @@
                 src="~@/assets/images/group-plans/group-13@3x.png"
               >
               <hr>
-              <h2 v-once> {{ $t('inGameBenefits') }} </h2>
-              <p v-once> {{ $t('inGameBenefitsDesc') }} </p>
+              <h2 v-once>
+                {{ $t('inGameBenefits') }}
+              </h2>
+              <p v-once>
+                {{ $t('inGameBenefitsDesc') }}
+              </p>
             </div>
           </div>
         </div>

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

@@ -86,11 +86,6 @@
     color: $gray-50;
   }
 
-  .input-error {
-    color: $red-50;
-    font-size: 90%;
-  }
-
   .input-group {
     border-radius: 2px;
     border: solid 1px $gray-400;

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

@@ -6,13 +6,23 @@
         class="fit-content mx-auto mt-4"
       >
         <div class="d-flex align-items-center">
-          <h1 v-once class="my-auto mr-auto"> {{ $t('findPartyMembers') }}</h1>
+          <h1
+            v-once
+            class="my-auto mr-auto"
+          >
+            {{ $t('findPartyMembers') }}
+          </h1>
           <div
             class="btn btn-secondary btn-sync ml-auto my-auto pl-2 pr-3 d-flex"
             @click="refreshList()"
           >
-            <div class="svg-icon icon-16 color my-auto mr-2" v-html="icons.sync"></div>
-            <div class="ml-auto"> {{ $t('refreshList') }} </div>
+            <div
+              class="svg-icon icon-16 color my-auto mr-2"
+              v-html="icons.sync"
+            ></div>
+            <div class="ml-auto">
+              {{ $t('refreshList') }}
+            </div>
           </div>
         </div>
         <div class="d-flex flex-wrap seeker-list">
@@ -24,9 +34,9 @@
             <div class="d-flex">
               <avatar
                 :member="seeker"
-                :hideClassBadge="true"
-                @click.native="showMemberModal(seeker._id)"
+                :hide-class-badge="true"
                 class="mr-3 mb-2"
+                @click.native="showMemberModal(seeker._id)"
               />
               <div class="card-data">
                 <user-link
@@ -54,26 +64,32 @@
                   </strong>
                 </div>
                 <div>
-                  <strong v-once class="mr-2"> {{ $t('checkinsLabel') }} </strong>
+                  <strong
+                    v-once
+                    class="mr-2"
+                  > {{ $t('checkinsLabel') }} </strong>
                   {{ seeker.loginIncentives }}
                 </div>
                 <div>
-                  <strong v-once class="mr-2"> {{ $t('languageLabel') }} </strong>
+                  <strong
+                    v-once
+                    class="mr-2"
+                  > {{ $t('languageLabel') }} </strong>
                   {{ displayLanguage(seeker.preferences.language) }}
                 </div>
               </div>
             </div>
             <strong
               v-if="!seeker.invited"
-              @click="inviteUser(seeker._id, index)"
               class="btn btn-primary w-100"
+              @click="inviteUser(seeker._id, index)"
             >
               {{ $t('inviteToParty') }}
             </strong>
             <div
               v-else
-              @click="rescindInvite(seeker._id, index)"
               class="btn btn-success w-100"
+              @click="rescindInvite(seeker._id, index)"
               v-html="$t('invitedToYourParty')"
             >
             </div>
@@ -95,7 +111,6 @@
             class="svg-icon icon-32 color m-auto"
             v-html="icons.users"
           >
-
           </div>
         </div>
         <strong class="mb-1"> {{ $t('findMorePartyMembers') }} </strong>

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

@@ -49,7 +49,7 @@
               key-prop="value"
               @select="changeSortOption($event)"
             >
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <span
                   v-if="item"
                   class="label"
@@ -64,7 +64,7 @@
               key-prop="value"
               @select="changeSortDirection($event)"
             >
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <span
                   v-if="item"
                   class="label"
@@ -84,7 +84,7 @@
         v-if="invites.length > 0"
         class="row"
       >
-        <div class="col-6 offset-3 nav">
+        <div class="col-6 offset-3 nav mt-2 mb-3">
           <div
             class="nav-item"
             :class="{active: selectedPage === 'members'}"
@@ -111,17 +111,18 @@
           :key="member._id"
           class="row"
         >
-          <div class="col-11 no-padding-left">
+          <div class="col-11 pl-0">
             <member-details
               :member="member"
               :class-badge-position="'next-to-name'"
+              class="ml-4"
             />
           </div>
           <div class="col-1 actions">
             <b-dropdown right="right">
               <div
                 slot="button-content"
-                class="svg-icon inline dots"
+                class="svg-icon inline dots pt-1"
                 v-html="icons.dots"
               ></div>
               <b-dropdown-item @click="sendMessage(member)">
@@ -216,7 +217,7 @@
           :key="member._id"
           class="row"
         >
-          <div class="col-11 no-padding-left">
+          <div class="col-11 pl-0">
             <member-details :member="member" />
           </div>
           <div class="col-1 actions">
@@ -259,10 +260,6 @@
       color: #878190;
     }
 
-    .no-padding-left {
-      padding-left: 0;
-    }
-
     .modal-body {
       padding-left: 0;
       padding-right: 0;
@@ -303,21 +300,15 @@
   }
 
   .actions {
-    padding-top: 5em;
-
+    .b-dropdown {
+      position: absolute;
+      right: 24px;
+      top: 8px;
+    }
     .dots {
       height: 16px;
       width: 4px;
     }
-
-    .btn-group {
-      margin-left: -2em;
-      margin-top: -2em;
-    }
-
-    .action-icon {
-      margin-right: 1em;
-    }
   }
 
   #members-modal_modal_body {
@@ -353,8 +344,6 @@
 
   .nav {
     font-weight: bold;
-    margin-bottom: .5em;
-    margin-top: .5em;
   }
 
   .nav-item {

website/client/src/components/groups/quest-dialog.stories.js

@@ -1,89 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-import { withKnobs } from '@storybook/addon-knobs';
-
-import { quests } from '@/../../common/script/content/quests';
-import content from '@/../../common/script/content';
-import questDetailModal from './questDetailModal';
-import questCompleted from '../achievements/questCompleted';
-
-const stories = storiesOf('Quests/Dialog', module);
-
-stories.addDecorator(withKnobs);
-
-stories
-  .add('selectQuestDialog', () => ({
-    components: { questDetailModal },
-    data () {
-      return {
-        quest: quests.goldenknight2,
-        questWithDrop: quests.moon1,
-      };
-    },
-    template: `  
-      <div> 
-        <quest-detail-modal :group="{}"></quest-detail-modal>
-      </div>
-    `,
-    mounted () {
-      this.$root.$emit('bv::show::modal', 'quest-detail-modal');
-    },
-  }))
-  .add('questDetailModal', () => ({
-    components: { questDetailModal },
-    data () {
-      return {
-        quest: quests.goldenknight2,
-        questWithDrop: quests.moon1,
-      };
-    },
-    template: `  
-      <div>
-        <quest-detail-modal :group="{}"></quest-detail-modal>
-      </div>
-    `,
-    mounted () {
-      this.$root.$emit('bv::show::modal', 'quest-detail-modal', {
-        key: 'moon1',
-        from: 'sidebar',
-      });
-    },
-  }))
-  .add('quest-completed', () => ({
-    components: { questCompleted },
-    data () {
-      return {
-        quest: quests.goldenknight2,
-        questWithDrop: quests.moon1,
-      };
-    },
-    template: `
-      <div>
-      <quest-completed></quest-completed>
-      </div>
-    `,
-    mounted () {
-      this.$root.$emit('bv::show::modal', 'quest-completed');
-    },
-    store: {
-      state: {
-        content,
-        user: {
-          data: {
-            stats: {},
-            tags: [],
-            items: {
-              quests: {
-                moon1: 3,
-              },
-            },
-            party: {
-              quest: {
-                completed: 'vice3',
-              },
-            },
-          },
-        },
-      },
-    },
-  }));

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

@@ -23,7 +23,7 @@
             class="ml-2"
             :no-caret="true"
           >
-            <template v-slot:button-content>
+            <template #button-content>
               <span
                 v-once
                 class="svg-icon inline menuIcon"

website/client/src/components/header/banners/chatBanner.vue

@@ -1,10 +1,10 @@
 <template>
   <base-banner
+    v-if="showChatWarning"
     banner-id="chat-warning"
     banner-class="chat-banner"
     class="chat-banner"
     height="3rem"
-    v-if="showChatWarning"
     :class="{faq: faqPage}"
   >
     <div

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

@@ -16,6 +16,7 @@
         :class-badge-position="'next-to-name'"
         :is-header="true"
         :disable-name-styling="true"
+        class="mr-3"
       />
       <div
         v-if="hasParty"

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

@@ -3,6 +3,7 @@
     <creator-intro />
     <profileModal />
     <report-flag-modal />
+    <report-member-modal />
     <send-gift-modal />
     <select-user-modal />
     <b-navbar
@@ -732,6 +733,7 @@ import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
 import reportFlagModal from '../chat/reportFlagModal';
+import reportMemberModal from '../members/reportMemberModal';
 import sendGiftModal from '@/components/payments/sendGiftModal';
 import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
@@ -744,6 +746,7 @@ export default {
     notificationMenu,
     profileModal,
     reportFlagModal,
+    reportMemberModal,
     sendGiftModal,
     selectUserModal,
     userDropdown,

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

@@ -117,14 +117,14 @@ import * as quests from '@/../../common/script/content/quests';
 import { hasCompletedOnboarding } from '@/../../common/script/libs/onboarding';
 import notificationsIcon from '@/assets/svg/notifications.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
-import MessageCount from './messageCount';
+import MessageCount from './messageCount.functional.vue';
 import { CONSTANTS, getLocalSetting, setLocalSetting } from '@/libs/userlocalManager';
 import successImage from '@/assets/svg/success.svg';
 import starBadge from '@/assets/svg/star-badge.svg';
 
 // Notifications
 import CARD_RECEIVED from './notifications/cardReceived';
-import CHALLENGE_INVITATION from './notifications/challengeInvitation';
+import CHALLENGE_INVITATION from './notifications/challengeInvitation.functional.vue';
 import GIFT_ONE_GET_ONE from './notifications/g1g1';
 import GROUP_TASK_ASSIGNED from './notifications/groupTaskAssigned';
 import GROUP_TASK_CLAIMED from './notifications/groupTaskClaimed';

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

@@ -56,7 +56,7 @@
       >{{ $t('achievements') }}</a>
       <router-link
         class="topbar-dropdown-item dropdown-item"
-        :to="{name: 'site'}"
+        :to="{name: 'general'}"
       >
         {{ $t('settings') }}
       </router-link>
@@ -141,7 +141,7 @@
 import { mapState } from '@/libs/store';
 import userIcon from '@/assets/svg/user.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
-import MessageCount from './messageCount';
+import MessageCount from './messageCount.functional.vue';
 import { EVENTS } from '@/libs/events';
 import { PAGES } from '@/libs/consts';
 

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

@@ -68,7 +68,7 @@
             :inline-dropdown="false"
             @select="groupBy = $event"
           >
-            <template v-slot:item="{ item }">
+            <template #item="{ item }">
               <span class="label">{{ groupByLabel(item) }}</span>
             </template>
           </select-list>

website/client/src/components/inventory/equipment/unequipDropdown.vue

@@ -4,7 +4,7 @@
     right="right"
     toggle-class="with-icon"
   >
-    <template v-slot:button-content>
+    <template #button-content>
       <span
         class="svg-icon inline color"
         v-html="icons.unequipIcon"

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

@@ -231,7 +231,7 @@
       <div v-if="currentDraggingEgg != null">
         <div
           class="potion-icon"
-          :class="'Pet_Egg_'+currentDraggingEgg.key"
+          :class="`Pet_Egg_${currentDraggingEgg.key}`"
         ></div>
         <div class="popover">
           <div class="popover-content">
@@ -248,7 +248,7 @@
       <div v-if="currentDraggingEgg != null">
         <div
           class="potion-icon"
-          :class="'Pet_Egg_'+currentDraggingEgg.key"
+          :class="`Pet_Egg_${currentDraggingEgg.key}`"
         ></div>
         <div class="popover">
           <div
@@ -266,7 +266,7 @@
       <div v-if="currentDraggingPotion != null">
         <div
           class="potion-icon"
-          :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
+          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
         ></div>
         <div class="popover">
           <div
@@ -285,7 +285,7 @@
       <div v-if="currentDraggingPotion != null">
         <div
           class="potion-icon"
-          :class="'Pet_HatchingPotion_'+currentDraggingPotion.key"
+          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
         ></div>
         <div class="popover">
           <div

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

@@ -16,7 +16,7 @@
         <span
           v-drag.food="item.key"
           class="item-content"
-          :class="'Pet_Food_'+item.key"
+          :class="`Pet_Food_${item.key}`"
           @itemDragEnd="dragend($event)"
           @itemDragStart="dragstart($event)"
         ></span>

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

@@ -6,10 +6,10 @@
     >
       <div class="potionEggGroup">
         <div class="potionEggBackground">
-          <div :class="'Pet_HatchingPotion_'+hatchablePet.potionKey"></div>
+          <div :class="`Pet_HatchingPotion_${hatchablePet.potionKey}`"></div>
         </div>
         <div class="potionEggBackground">
-          <div :class="'Pet_Egg_'+hatchablePet.eggKey"></div>
+          <div :class="`Pet_Egg_${hatchablePet.eggKey}`"></div>
         </div>
       </div>
       <h4 class="title">

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

@@ -268,7 +268,7 @@
       <div v-if="currentDraggingFood != null">
         <div
           class="food-icon"
-          :class="'Pet_Food_'+currentDraggingFood.key"
+          :class="`Pet_Food_${currentDraggingFood.key}`"
         ></div>
         <div class="popover">
           <div
@@ -287,7 +287,7 @@
       <div v-if="currentDraggingFood != null">
         <div
           class="food-icon"
-          :class="'Pet_Food_'+currentDraggingFood.key"
+          :class="`Pet_Food_${currentDraggingFood.key}`"
         ></div>
         <div class="popover">
           <div

website/client/src/components/memberDetails.stories.js

@@ -1,34 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-
-import MemberDetails from './memberDetails.vue';
-import MemberDetailsNew from './memberDetailsNew.vue';
-import { userStyles } from '../../config/storybook/mock.data';
-
-storiesOf('Member Details', module)
-  .add('party header (old)', () => ({
-    components: { MemberDetails },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <member-details :member="user"></member-details>
-      </div>
-    `,
-    data () {
-      return {
-        user: userStyles,
-      };
-    },
-  }))
-  .add('quest participants (new)', () => ({
-    components: { MemberDetailsNew },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <member-details-new :member="user"></member-details-new>
-      </div>
-    `,
-    data () {
-      return {
-        user: userStyles,
-      };
-    },
-  }));

website/client/src/components/memberDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="member-details"
-    :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
+    class="member-details d-flex"
+    :class="{ condensed, expanded }"
     @click="showMemberModal(member)"
   >
-    <div class="avatar-container" :class="{ 'col-4': !isHeader }">
+    <div class="avatar-container">
       <avatar
         :member="member"
         :hide-class-badge="classBadgePosition !== 'under-avatar'"
@@ -15,14 +15,17 @@
     </div>
     <div
       class="member-stats"
-      :class="{'col-8': !expanded && !isHeader}"
+      :class="{ 'mt-2': !isHeader }"
     >
       <div class="d-flex align-items-center profile-first-row">
         <class-badge
           v-if="classBadgePosition === 'next-to-name'"
           :member-class="member.stats.class"
         />
-        <div class="d-flex flex-column profile-name-character">
+        <div
+          class="d-flex flex-column"
+          :class="{ 'ml-2': classBadgePosition === 'next-to-name' }"
+        >
           <h3 class="character-name">
             <span v-if="member.contributor && member.contributor.level > 0 && !disableNameStyling">
               <user-link
@@ -30,18 +33,22 @@
                 :name="member.profile.name"
                 :backer="member.backer"
                 :contributor="member.contributor"
+                :show-buffed="isBuffed"
+                :context="'profile'"
               />
             </span>
-            <span v-else>{{ member.profile.name }}</span>
-            <div
-              v-if="isBuffed"
-              v-b-tooltip.hover.bottom="$t('buffed')"
-              class="is-buffed"
-            >
+            <div v-else>
+              <span>{{ member.profile.name }}</span>
               <div
-                class="svg-icon"
-                v-html="icons.buff"
-              ></div>
+                v-if="isBuffed"
+                v-b-tooltip.hover.bottom="$t('buffed')"
+                class="is-buffed ml-2 mt-n1"
+              >
+                <div
+                  class="svg-icon"
+                  v-html="icons.buff"
+                ></div>
+              </div>
             </div>
           </h3>
           <div class="small-text character-level">
@@ -98,9 +105,12 @@
     }
   }
 
+  .standard-page .member-details {
+    padding-left: 24px;
+  }
+
   .member-stats {
     padding-left: 12px;
-    padding-right: 24px;
     opacity: 1;
     transition: width 0.15s ease-out;
   }
@@ -114,10 +124,6 @@
     color: $header-color;
   }
 
-  .profile-name-character {
-    margin-left: 12px;
-  }
-
   .character-name {
     margin-bottom: 1px;
     color: $white;
@@ -133,7 +139,6 @@
     height: 20px;
     background: $header-dark-background;
     display: inline-block;
-    margin-left: 16px;
     vertical-align: middle;
     padding-top: 4px;
 

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

@@ -0,0 +1,204 @@
+<template>
+  <b-modal
+    id="report-profile"
+    :title="$t('reportPlayer')"
+    :hide-footer="!hasPermission(user, 'moderator')"
+    size="md"
+  >
+    <div slot="modal-header">
+      <h2 class="mt-2 mb-0">
+        {{ $t('reportPlayer') }}
+      </h2>
+      <close-x
+        @close="close()"
+      />
+    </div>
+    <div>
+      <blockquote>
+        <strong> {{ displayName }} </strong>
+        <p class="mb-0">
+          {{ username }}
+        </p>
+      </blockquote>
+      <div>
+        <strong>{{ $t('whyReportingPlayer') }}</strong>
+        <textarea
+          v-model="reportComment"
+          class="mt-2 form-control"
+          :placeholder="$t('whyReportingPlayerPlaceholder')"
+        ></textarea>
+      </div>
+      <p
+        class="mb-2"
+        v-html="$t('playerReportModalBody', abuseFlagModalBody)"
+      >
+      </p>
+    </div>
+    <div class="footer text-center d-flex flex-column">
+      <button
+        class="btn btn-danger mx-auto mb-3"
+        :disabled="!reportComment"
+        :class="{ disabled: !reportComment }"
+        @click="reportAbuse()"
+      >
+        {{ $t('report') }}
+      </button>
+      <a
+        class="cancel-link"
+        @click.prevent="close()"
+      >{{ $t('cancel') }}</a>
+    </div>
+    <div
+      slot="modal-footer"
+    >
+      <div
+        class="d-flex"
+        @click="resetFlags()"
+      >
+        <div
+          v-once
+          class="svg-icon icon-16 color my-auto mr-2"
+          v-html="icons.report"
+        ></div>
+        <a>Reset Flags</a>
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  #report-profile {
+    .modal-header {
+      padding: 24px;
+      border-bottom: none;
+    }
+    .modal-body {
+      padding: 0px 24px 24px 24px;
+    }
+    .modal-footer {
+      color: $maroon-50;
+      display: flex;
+      justify-content: center;
+      border-top: none;
+      height: 48px;
+      background-color: rgba($red-500, 0.25);
+      margin-top: -8px;
+      padding: 0px;
+      a {
+        margin-top: 2px;
+        color: $maroon-50;
+      }
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+  strong, p {
+    line-height: 1.71;
+  }
+
+  h2 {
+    color: $maroon-100;
+  }
+
+  blockquote {
+    border-radius: 4px;
+    background-color: $gray-700;
+    padding: .5rem 1rem;
+  }
+
+  textarea {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    min-height: 106px;
+  }
+
+  .footer {
+    padding: 1rem 1rem 0rem 1rem;
+  }
+</style>
+
+<script>
+import closeX from '@/components/ui/closeX';
+import notifications from '@/mixins/notifications';
+import markdownDirective from '@/directives/markdown';
+import { userStateMixin } from '../../mixins/userState';
+import report from '@/assets/svg/report.svg';
+
+export default {
+  components: {
+    closeX,
+  },
+  directives: {
+    markdown: markdownDirective,
+  },
+  mixins: [notifications, userStateMixin],
+  data () {
+    const abuseFlagModalBody = {
+      firstLinkStart: '<a href="/static/community-guidelines" target="_blank">',
+      secondLinkStart: '<a href="/static/terms" target="_blank">',
+      linkEnd: '</a>',
+    };
+
+    return {
+      abuseFlagModalBody,
+      displayName: '',
+      username: '',
+      reportComment: '',
+      icons: Object.freeze({
+        report,
+      }),
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica::report-profile', this.handleReport);
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica::report-profile', this.handleReport);
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'report-profile');
+    },
+    async reportAbuse () {
+      const result = await this.$store.dispatch('members:reportMember', {
+        memberId: this.memberId,
+        source: this.$route.fullPath,
+        comment: this.reportComment,
+      });
+      if (result.status === 200) {
+        this.text(this.$t('abuseReported'));
+
+        this.$root.$emit('habitica:report-profile-result', result.data.data);
+      } else {
+        this.error(result.statusText);
+      }
+
+      this.close();
+    },
+    handleReport (data) {
+      if (!data.memberId) return;
+      this.displayName = data.displayName;
+      this.username = `@${data.username}`;
+      this.memberId = data.memberId;
+      this.reportComment = '';
+      this.$root.$emit('bv::show::modal', 'report-profile');
+    },
+    async resetFlags () {
+      const result = await this.$store.dispatch('members:clearMemberFlags', {
+        memberId: this.memberId,
+      });
+      if (result.status === 200) {
+        this.text('Flags cleared.');
+      } else {
+        this.err(result.statusText);
+      }
+      this.close();
+    },
+  },
+};
+</script>

website/client/src/components/messages/messageCard.vue

@@ -152,12 +152,12 @@ export default {
   components: {
     userLink,
   },
-  mixins: [externalLinks],
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
     },
   },
+  mixins: [externalLinks],
   props: {
     msg: {},
   },

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

@@ -13,6 +13,7 @@
       v-for="(post, index) in posts"
       :key="post._id"
       class="static-view bailey"
+      id="bailey"
       :class="{'bailey-last': index == (posts.length - 1)}"
     >
       <small
@@ -33,6 +34,17 @@
 
 <style lang='scss'>
 @import '~@/assets/scss/static.scss';
+#bailey {
+  .markdown-img-link {
+    display: flex;
+    align-items: center;
+
+    img {
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+}
 </style>
 
 <style lang='scss' scoped>

website/client/src/components/notifications.vue

@@ -339,7 +339,6 @@ export default {
       userMp: 'user.data.stats.mp',
       userNotifications: 'user.data.notifications',
       userAchievements: 'user.data.achievements', // @TODO: does this watch deeply?
-      armoireEmpty: 'user.data.flags.armoireEmpty',
       questCompleted: 'user.data.party.quest.completed',
     }),
     userClassSelect () {
@@ -410,10 +409,6 @@ export default {
       if (this.user.needsCron) return;
       this.handleUserNotifications(after);
     },
-    armoireEmpty (after, before) {
-      if (after === before || after === false) return;
-      this.$root.$emit('bv::show::modal', 'armoire-empty');
-    },
     questCompleted () {
       if (!this.questCompleted) return;
       this.$root.$emit('bv::show::modal', 'quest-completed');

website/client/src/components/payments/buttons/list.stories.js

@@ -1,49 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-
-import PaymentsButtonsList from './list.vue';
-import getStore from '@/store';
-import { setup as setupPayments } from '@/libs/payments';
-
-setupPayments();
-
-storiesOf('Subscriptions/Payments Buttons', module)
-  .add('simple', () => ({
-    components: { PaymentsButtonsList },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <payments-buttons-list
-          :amazon-data="{type: 'single'}"
-          :stripe-fn="() => {}"
-          :paypal-fn="() => {}"
-        ></payments-buttons-list>
-      </div>
-    `,
-    store: getStore(),
-  }))
-  .add('disabled', () => ({
-    components: { PaymentsButtonsList },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <payments-buttons-list
-          :disabled="true"
-          :amazon-data="{type: 'single'}"
-          :stripe-fn="() => {}"
-          :paypal-fn="() => {}"
-        ></payments-buttons-list>
-      </div>
-    `,
-    store: getStore(),
-  }))
-  .add('only stripe and amazon (example)', () => ({
-    components: { PaymentsButtonsList },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <payments-buttons-list
-          :amazon-data="{type: 'single'}"
-          :stripe-fn="() => {}"
-        ></payments-buttons-list>
-      </div>
-    `,
-    store: getStore(),
-  }));

website/client/src/components/payments/buyGemsModal.vue

@@ -165,11 +165,15 @@
           v-if="eventName === 'fall_extra_gems' || eventName === 'spooky_extra_gems'"
           class="d-flex flex-column justify-content-center"
         >
-          <h4 class="mt-3 mx-auto"> {{ $t('howItWorks') }}</h4>
+          <h4 class="mt-3 mx-auto">
+            {{ $t('howItWorks') }}
+          </h4>
           <small class="text-center">
             {{ $t('gemSaleHow', { eventStartMonth, eventStartOrdinal, eventEndOrdinal }) }}
           </small>
-          <h4 class="mt-3 mx-auto"> {{ $t('limitations') }}</h4>
+          <h4 class="mt-3 mx-auto">
+            {{ $t('limitations') }}
+          </h4>
           <small class="text-center">
             {{ $t('gemSaleLimitations', {
               eventStartMonth,

website/client/src/components/payments/selectUserModal.vue

@@ -22,18 +22,19 @@
       v-if="currentEvent && currentEvent.promo === 'g1g1'"
       class="g1g1-margin d-flex flex-column align-items-center"
     >
-    <div
-      class="svg-big-gift"
-      v-once
-      v-html="icons.bigGift"
-    ></div>
+      <div
+        v-once
+        class="svg-big-gift"
+        v-html="icons.bigGift"
+      ></div>
     </div>
     <div
-    v-else
-    class="d-flex flex-column align-items-center">
+      v-else
+      class="d-flex flex-column align-items-center"
+    >
       <div
-        class="svg-big-gift"
         v-once
+        class="svg-big-gift"
         v-html="icons.bigGift"
       ></div>
     </div>
@@ -49,9 +50,10 @@
         ></div>
       </div>
       <div
-      v-else
-      class="modal-close"
-      @click="close()">
+        v-else
+        class="modal-close"
+        @click="close()"
+      >
         <div
           class="svg-icon"
           v-html="icons.close"
@@ -65,26 +67,15 @@
         name="selectUser"
         novalidate="novalidate"
       >
-        <div class="input-group">
-          <input
-            id="selectUser"
-            v-model="userSearchTerm"
-            class="form-control"
-            type="text"
-            ref="textBox"
-            :placeholder="$t('usernameOrUserId')"
-            :class="{
-              'input-valid': foundUser._id,
-              'is-invalid input-invalid': userNotFound,
-            }"
-          >
-        </div>
-        <div
-          v-if="userSearchTerm.length > 0 && userNotFound"
-          class="input-error text-center mt-2"
-        >
-          {{ $t('userWithUsernameOrUserIdNotFound') }}
-        </div>
+        <validated-text-input
+          id="selectUser"
+          v-model="userSearchTerm"
+          :is-valid="foundUser._id"
+
+          :placeholder="$t('usernameOrUserId')"
+          :invalid-issues="userInputInvalidIssues"
+        />
+
         <div class="d-flex flex-column justify-content-center align-items-middle mt-3">
           <button
             class="btn btn-primary mx-auto mt-2"
@@ -104,16 +95,12 @@
             </div>
           </button>
           <div
-          v-if="currentEvent && currentEvent.promo ==='g1g1'"
-          class="g1g1-cancel d-flex justify-content-center"
-          v-html="$t('cancel')"
-          @click="close()"
+            v-if="currentEvent && currentEvent.promo ==='g1g1'"
+            class="g1g1-cancel d-flex justify-content-center"
+            @click="close()"
+            v-html="$t('cancel')"
           >
-          {{ $t('cancel') }}
-        </div>
-        <div
-        v-else>
-        </div>
+          </div>
         </div>
       </div>
     </div>
@@ -121,182 +108,186 @@
       slot="modal-footer"
       class="g1g1-fine-print text-center pt-3"
     >
-      <strong>
-        {{ $t ('howItWorks') }}
+      <strong v-once>
+        {{ $t('howItWorks') }}
       </strong>
       <p
+        v-once
         class="mx-5 mt-1"
       >
-        {{ $t ('g1g1HowItWorks') }}
+        {{ $t('g1g1HowItWorks') }}
       </p>
-      <strong>
-        {{ $t ('limitations') }}
+      <strong v-once>
+        {{ $t('limitations') }}
       </strong>
       <p
+        v-once
         class="mx-5 mt-1"
       >
-        {{ $t ('g1g1Limitations') }}
+        {{ $t('g1g1Limitations', {
+          promoStartMonth,
+          promoStartOrdinal,
+          promoStartTime,
+          promoEndMonth,
+          promoEndOrdinal,
+          promoEndTime,
+        }) }}
       </p>
     </div>
   </b-modal>
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/mixins.scss';
+@import '~@/assets/scss/mixins.scss';
 
-  #select-user-modal {
-    .modal-content {
-      width:448px;
+#select-user-modal {
+  .modal-content {
+    width: 448px;
+  }
+
+  .input-group {
+    margin-top: 0rem;
+  }
+
+  .modal-dialog {
+    width: 448px;
+  }
+
+  .modal-footer {
+    padding: 0rem;
+
+    > * {
+      margin: 0rem 0.25rem 0.25rem 0.25rem;
     }
+  }
 
-    .input-group {
-      margin-top: 0rem;
-    }
+  body.modal-open .modal {
+    display: flex !important;
+    height: 100%;
+  }
 
-    .modal-dialog {
-      width: 448px;
-    }
-
-    .modal-footer {
-      padding: 0rem;
-
-      > * {
-        margin: 0rem 0.25rem 0.25rem 0.25rem;
-      }
-    }
-
-    body.modal-open .modal {
-      display: flex !important;
-      height: 100%;
-    }
-
-    body.modal-open .modal .modal-dialog {
-        margin: auto;
-    }
+  body.modal-open .modal .modal-dialog {
+    margin: auto;
+  }
 }
 </style>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
-  a:not([href]) {
-    font-size: 0.875rem;
-    line-height: 1.71;
-  }
+a:not([href]) {
 
-  #selectUser {
-    width: 22rem;
-    border: 0px;
-    color: $gray-50;
-  }
+  font-size: 0.875rem;
+  line-height: 1.71;
+}
 
-  .g1g1 {
-    background-image: url('~@/assets/images/g1g1-send.png');
-    background-size: 446px 152px;
-    width: 446px;
-    height: 152px;
-    margin: -16px 0px 0px -16px;
-    border-radius: 4.8px 4.8px 0px 0px;
-    padding: 24px;
+#selectUser {
+  width: 22rem;
+  border: 0px;
+  color: $gray-50;
+}
+
+.g1g1 {
+  background-image: url('~@/assets/images/g1g1-send.png');
+  background-size: 446px 152px;
+  width: 446px;
+  height: 152px;
+  margin: -16px 0px 0px -16px;
+  border-radius: 4.8px 4.8px 0px 0px;
+  padding: 24px;
+  color: $white;
+
+  h1 {
+    font-size: 1.25rem;
+    line-height: 1.4;
     color: $white;
-
-    h1 {
-      font-size: 1.25rem;
-      line-height: 1.4;
-      color: $white;
-    }
-
-    p {
-      font-size: 0.75rem;
-      line-height: 1.33;
-      margin-left: 4rem;
-      margin-right: 4rem;
-      margin-bottom: 0rem;
-    }
   }
 
-  .g1g1-margin {
-    margin-top: 24px;
-  }
-
-  .g1g1-cancel {
-    margin-top: 16px;
-    color: $blue-10;
-    cursor: pointer;
-  }
-
-  .g1g1-fine-print {
-    color: $gray-100;
-    background-color: $gray-700;
+  p {
     font-size: 0.75rem;
     line-height: 1.33;
+    margin-left: 4rem;
+    margin-right: 4rem;
+    margin-bottom: 0rem;
   }
+}
 
-  .g1g1-modal-close {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
+.g1g1-margin {
+  margin-top: 24px;
+}
 
-    .g1g1-svg-icon {
-      width: 12px;
-      height: 12px;
+.g1g1-cancel {
+  margin-top: 16px;
+  color: $blue-10;
+  cursor: pointer;
+}
 
-      & ::v-deep svg path {
-        fill: #FFFFFF;
-      }
+.g1g1-fine-print {
+  color: $gray-100;
+  background-color: $gray-700;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.g1g1-modal-close {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  padding: 4px;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+
+  .g1g1-svg-icon {
+    width: 12px;
+    height: 12px;
+
+    & ::v-deep svg path {
+      fill: #FFFFFF;
     }
   }
+}
 
-  .g1g1-modal-dialog {
-    margin-top: 10vh;
-  }
-
-  .input-error {
-    color: $red-50;
-    font-size: 90%;
-    width: 100%;
-  }
-
-  .input-group {
-    border-radius: 2px;
-    border: solid 1px $gray-400;
-    margin-top: 0.5rem;
-  }
-
-  .input-group:focus-within {
-    border-color: $purple-500;
-  }
-
-  h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    color: $purple-300;
-    padding-top: 1rem;
-  }
-
-  .svg-big-gift {
-    width: 176px;
-    height: 64px;
-  }
-
-  .modal-close {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
-
-    .svg-icon {
-      width: 12px;
-      height: 12px;
-    }
+.g1g1-modal-dialog {
+  margin-top: 10vh;
+}
+
+.input-group {
+  border-radius: 2px;
+  border: solid 1px $gray-400;
+  margin-top: 0.5rem;
+}
+
+.input-group:focus-within {
+  border-color: $purple-500;
+}
+
+h2 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  color: $purple-300;
+  padding-top: 1rem;
+}
+
+.svg-big-gift {
+  width: 176px;
+  height: 64px;
+}
+
+.modal-close {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  padding: 4px;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+
+  .svg-icon {
+    width: 12px;
+    height: 12px;
   }
+}
 
 </style>
 
@@ -305,11 +296,14 @@
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
 import isUUID from 'validator/lib/isUUID';
+import moment from 'moment';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';
 import bigGiftIcon from '@/assets/svg/big-gift.svg';
+import ValidatedTextInput from '@/components/ui/validatedTextInput.vue';
 
 export default {
+  components: { ValidatedTextInput },
   data () {
     return {
       userNotFound: false,
@@ -332,6 +326,35 @@ export default {
       if (this.userSearchTerm.length < 1) return true;
       return typeof this.foundUser._id === 'undefined';
     },
+    userInputInvalidIssues () {
+      return this.userSearchTerm.length > 0 && this.userNotFound
+        ? [this.$t('userWithUsernameOrUserIdNotFound')]
+        : [''];
+    },
+    promoStartMonth () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.start).format('MMMM');
+    },
+    promoStartOrdinal () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.start).format('Do');
+    },
+    promoStartTime () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.start).format('hh:mm A');
+    },
+    promoEndMonth () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.end).format('MMMM');
+    },
+    promoEndOrdinal () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.end).format('Do');
+    },
+    promoEndTime () {
+      if (!this.currentEvent) return null;
+      return moment(this.currentEvent.end).format('hh:mm A');
+    },
   },
   watch: {
     userSearchTerm: {

website/client/src/components/payments/sendGiftModal.vue

@@ -31,7 +31,7 @@
       >
         <avatar
           :member="userReceivingGift"
-          :hideClassBadge="true"
+          :hide-class-badge="true"
           class="d-flex flex-column mx-auto align-items-center"
         />
         <div class="avatar-spacer"></div>
@@ -74,8 +74,8 @@
       <subscription-options
         v-show="selectedPage === 'subscription'"
         class="subscribe-option"
-        :userReceivingGift="userReceivingGift"
-        :receiverName="receiverName"
+        :user-receiving-gift="userReceivingGift"
+        :receiver-name="receiverName"
       />
 
       <!-- gem block -->

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

@@ -1,190 +0,0 @@
-<template>
-  <div class="row standard-page">
-    <div class="col-6">
-      <h2>{{ $t('API') }}</h2>
-      <p>{{ $t('APIText') }}</p>
-      <div class="section">
-        <h6>{{ $t('userId') }}</h6>
-        <pre class="prettyprint">{{ user.id }}</pre>
-        <h6>{{ $t('APIToken') }}</h6>
-        <div class="d-flex align-items-center mb-3">
-          <button
-            class="btn btn-secondary"
-            @click="showApiToken = !showApiToken"
-          >
-            {{ $t(`${showApiToken ? 'hide' : 'show'}APIToken`) }}
-          </button>
-          <pre
-            v-if="showApiToken"
-            class="prettyprint ml-4 mb-0"
-          >{{ apiToken }}</pre>
-        </div>
-        <p v-html="$t('APITokenWarning', { hrefTechAssistanceEmail })"></p>
-      </div>
-      <div class="section">
-        <h3>{{ $t('thirdPartyApps') }}</h3>
-        <p v-html="$t('thirdPartyTools')"></p>
-        <hr>
-      </div>
-    </div>
-    <div class="col-6">
-      <h2>{{ $t('webhooks') }}</h2>
-      <p v-html="$t('webhooksInfo')"></p>
-      <table class="table table-striped">
-        <thead v-if="user.webhooks.length">
-          <tr>
-            <th>{{ $t('enabled') }}</th>
-            <th>{{ $t('webhookURL') }}</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="(webhook, index) in user.webhooks"
-            :key="webhook.id"
-          >
-            <td>
-              <input
-                v-model="webhook.enabled"
-                type="checkbox"
-                @change="saveWebhook(webhook, index)"
-              >
-            </td>
-            <td>
-              <input
-                v-model="webhook.url"
-                class="form-control"
-                type="url"
-              >
-            </td>
-            <td>
-              <div
-                class="btn btn-danger checklist-icons mr-2"
-                @click="deleteWebhook(webhook, index)"
-              >
-                <span
-                  class="glyphicon glyphicon-trash"
-                  :tooltip="$t('delete')"
-                > {{ $t('delete') }} </span>
-              </div>
-              <div
-                class="btn btn-primary checklist-icons"
-                @click="saveWebhook(webhook, index)"
-              >
-                {{ $t('subUpdateTitle') }}
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td colspan="2">
-              <div class="form-horizontal">
-                <div class="form-group col-sm-10">
-                  <input
-                    v-model="newWebhook.url"
-                    class="form-control"
-                    type="url"
-                    :placeholder="$t('webhookURL')"
-                  >
-                </div>
-                <div class="col-sm-2">
-                  <button
-                    class="btn btn-sm btn-primary"
-                    type="submit"
-                    @click="addWebhook(newWebhook.url)"
-                  >
-                    {{ $t('add') }}
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .section {
-    margin-top: 2em;
-  }
-  li span
-  {
-    display: block;
-  }
-</style>
-
-<script>
-import { mapState } from '@/libs/store';
-import uuid from '@/../../common/script/libs/uuid';
-// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
-const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
-
-export default {
-  data () {
-    return {
-      newWebhook: {
-        url: '',
-      },
-      hrefTechAssistanceEmail: `<a href="mailto:${TECH_ASSISTANCE_EMAIL}">${TECH_ASSISTANCE_EMAIL}</a>`,
-      showApiToken: false,
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data', credentials: 'credentials' }),
-    apiToken () {
-      return this.credentials.API_TOKEN;
-    },
-  },
-  mounted () {
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-      subSection: this.$t('API'),
-    });
-    window.addEventListener('message', this.receiveMessage, false);
-  },
-  destroy () {
-    window.removeEventListener('message', this.receiveMessage);
-  },
-  methods: {
-    receiveMessage (eventFrom) {
-      if (eventFrom.origin !== 'https://www.spritely.app') return;
-
-      const creds = {
-        userId: this.user._id,
-        apiToken: this.credentials.API_TOKEN,
-      };
-      eventFrom.source.postMessage(creds, eventFrom.origin);
-    },
-    async addWebhook (url) {
-      const webhookInfo = {
-        id: uuid(),
-        type: 'taskActivity',
-        options: {
-          created: false,
-          updated: false,
-          deleted: false,
-          scored: true,
-        },
-        url,
-        enabled: true,
-      };
-
-      const webhook = await this.$store.dispatch('user:addWebhook', { webhookInfo });
-      this.user.webhooks.push(webhook);
-
-      this.newWebhook.url = '';
-    },
-    async saveWebhook (webhook, index) {
-      delete webhook._editing;
-      const updatedWebhook = await this.$store.dispatch('user:updateWebhook', { webhook });
-      this.user.webhooks[index] = updatedWebhook;
-    },
-    async deleteWebhook (webhook, index) {
-      delete webhook._editing;
-      await this.$store.dispatch('user:deleteWebhook', { webhook });
-      this.user.webhooks.splice(index, 1);
-    },
-  },
-};
-</script>

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

@@ -1,26 +0,0 @@
-<template>
-  <div class="row">
-    <div class="col-md-6">
-      <h2>{{ $t('dataExport') }}</h2>
-      <small>{{ $t('saveData') }}</small>
-      <h4>{{ $t('habitHistory') }}</h4>
-      {{ $t('exportHistory') }}
-      <a href="/export/history.csv">{{ $t('csv') }}</a>
-      <h4>{{ $t('userData') }}</h4>
-      {{ $t('exportUserData') }}
-      <a href="/export/userdata.xml">{{ $t('xml') }}</a>
-      <a href="/export/userdata.json">{{ $t('json') }}</a>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  mounted () {
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-      subSection: this.$t('dataExport'),
-    });
-  },
-};
-</script>

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

@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <div>
-      <h5>{{ $t('dayStartAdjustment') }}</h5>
-      <div class="mb-4">
-        {{ $t('customDayStartInfo1') }}
-      </div>
-      <h3 v-once>{{ $t('adjustment') }}</h3>
-      <div class="form-horizontal">
-        <div class="form-group">
-          <div class="">
-            <select
-              v-model="newDayStart"
-              class="form-control"
-            >
-              <option
-                v-for="option in dayStartOptions"
-                :key="option.value"
-                :value="option.value"
-              >
-                {{ option.name }}
-              </option>
-            </select>
-          </div>
-          <div>
-            <button
-              class="btn btn-primary full-width mt-3"
-              :disabled="newDayStart === user.preferences.dayStart"
-              @click="openDayStartModal()"
-            >
-              {{ $t('save') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="form-horizontal">
-      <div class="form-group">
-        <small>
-          <p v-html="$t('timezoneUTC', {utc: timezoneOffsetToUtc})"></p>
-          <p v-html="$t('timezoneInfo')"></p>
-        </small>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios';
-import moment from 'moment';
-import getUtcOffset from '../../../../common/script/fns/getUtcOffset';
-import { mapState } from '@/libs/store';
-
-export default {
-  name: 'dayStartAdjustment',
-  data () {
-    const dayStartOptions = [];
-    for (let number = 0; number <= 12; number += 1) {
-      const meridian = number < 12 ? 'AM' : 'PM';
-      const hour = number % 12;
-      const timeWithMeridian = `(${hour || 12}:00 ${meridian})`;
-      const option = {
-        value: number,
-        name: `+${number} hours ${timeWithMeridian}`,
-      };
-
-      if (number === 0) {
-        option.name = `Default ${timeWithMeridian}`;
-      }
-
-      dayStartOptions.push(option);
-    }
-
-    return {
-      newDayStart: 0,
-      dayStartOptions,
-    };
-  },
-  mounted () {
-    this.newDayStart = this.user.preferences.dayStart;
-  },
-  computed: {
-    ...mapState({
-      user: 'user.data',
-    }),
-    timezoneOffsetToUtc () {
-      const offsetString = moment().utcOffset(getUtcOffset(this.user)).format('Z');
-      return `UTC${offsetString}`;
-    },
-    dayStart () {
-      return this.user.preferences.dayStart;
-    },
-  },
-  methods: {
-    async saveDayStart () {
-      this.user.preferences.dayStart = this.newDayStart;
-      await axios.post('/api/v4/user/custom-day-start', {
-        dayStart: this.newDayStart,
-      });
-      // @TODO
-      // Notification.text(response.data.data.message);
-    },
-    openDayStartModal () {
-      const nextCron = this.calculateNextCron();
-      // @TODO: Add generic modal
-      if (!window.confirm(this.$t('sureChangeCustomDayStartTime', { time: nextCron }))) return; // eslint-disable-line no-alert
-      this.saveDayStart();
-      // $rootScope.openModal('change-day-start', { scope: $scope });
-    },
-    calculateNextCron () {
-      let nextCron = moment()
-        .hours(this.newDayStart)
-        .minutes(0)
-        .seconds(0)
-        .milliseconds(0);
-
-      const currentHour = moment().format('H');
-      if (currentHour >= this.newDayStart) {
-        nextCron = nextCron.add(1, 'day');
-      }
-
-      return nextCron.format(`${this.user.preferences.dateFormat.toUpperCase()} @ h:mm a`);
-    },
-  },
-};
-</script>
-
-<style scoped>
-  .full-width {
-    width: 100%;
-  }
-</style>

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

@@ -1,86 +0,0 @@
-<template>
-  <b-modal
-    id="delete"
-    :title="$t('deleteAccount')"
-    :hide-footer="true"
-    size="md"
-  >
-    <div class="modal-body">
-      <br>
-      <strong v-if="user.auth.local.has_password">{{ $t('deleteLocalAccountText') }}</strong>
-      <strong
-        v-if="!user.auth.local.has_password"
-      >{{ $t('deleteSocialAccountText', {magicWord: 'DELETE'}) }}</strong>
-      <div class="row mt-3">
-        <div class="col-6">
-          <input
-            v-model="password"
-            class="form-control"
-            type="password"
-          >
-        </div>
-      </div>
-      <div class="row mt-3">
-        <div
-          id="feedback"
-          class="col-12 form-group"
-        >
-          <label for="feedbackTextArea">{{ $t('feedback') }}</label>
-          <textarea
-            id="feedbackTextArea"
-            v-model="feedback"
-            class="form-control"
-          ></textarea>
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button
-        class="btn btn-primary"
-        @click="close()"
-      >
-        {{ $t('neverMind') }}
-      </button>
-      <button
-        class="btn btn-danger"
-        :disabled="!password"
-        @click="deleteAccount()"
-      >
-        {{ $t('deleteDo') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import axios from 'axios';
-import { mapState } from '@/libs/store';
-
-export default {
-  data () {
-    return {
-      password: '',
-      feedback: '',
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'delete');
-    },
-    async deleteAccount () {
-      await axios.delete('/api/v4/user', {
-        data: {
-          password: this.password,
-          feedback: this.feedback,
-        },
-      });
-      localStorage.clear();
-      window.location.href = '/static/home';
-      this.$root.$emit('bv::hide::modal', 'delete');
-    },
-  },
-};
-</script>

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

@@ -1,158 +0,0 @@
-<template>
-  <div class="row">
-    <secondary-menu class="col-12">
-      <router-link
-        class="nav-link"
-        :to="{name: 'site'}"
-        exact="exact"
-        :class="{'active': $route.name === 'site'}"
-      >
-        {{ $t('site') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'api'}"
-        :class="{'active': $route.name === 'api'}"
-      >
-        {{ $t('API') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'dataExport'}"
-        :class="{'active': $route.name === 'dataExport'}"
-      >
-        {{ $t('dataExport') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'promoCode'}"
-        :class="{'active': $route.name === 'promoCode'}"
-      >
-        {{ $t('promoCode') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'subscription'}"
-        :class="{'active': $route.name === 'subscription'}"
-      >
-        {{ $t('subscription') }}
-      </router-link>
-      <router-link
-        v-if="hasPermission(user, 'userSupport')"
-        class="nav-link"
-        :to="{name: 'transactions'}"
-        :class="{'active': $route.name === 'transactions'}"
-      >
-        {{ $t('transactions') }}
-      </router-link>
-      <router-link
-        class="nav-link"
-        :to="{name: 'notifications'}"
-        :class="{'active': $route.name === 'notifications'}"
-      >
-        {{ $t('notifications') }}
-      </router-link>
-    </secondary-menu>
-    <div
-      v-if="$route.name === 'subscription' && promo === 'g1g1'"
-      class="g1g1-banner d-flex justify-content-center"
-      @click="showSelectUser"
-    >
-      <div
-        v-once
-        class="svg-icon svg-gifts left-gift"
-        v-html="icons.gifts"
-      >
-      </div>
-      <div class="d-flex flex-column align-items-center text-center">
-        <strong
-          class="mt-auto mb-1"
-        > {{ $t('g1g1Event') }} </strong>
-        <p
-          class="mb-auto"
-        >
-          {{ $t('g1g1Details') }}
-        </p>
-      </div>
-      <div
-        v-once
-        class="svg-icon svg-gifts right-gift"
-        v-html="icons.gifts"
-      >
-      </div>
-    </div>
-    <div class="col-12">
-      <router-view />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-  @import '~@/assets/scss/colors.scss';
-
-  strong {
-    font-size: 1rem;
-    line-height: 1.25;
-  }
-
-  .g1g1-banner {
-    color: $white;
-    width: 100%;
-    height: 5.75rem;
-    background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
-    cursor: pointer;
-  }
-
-  .left-gift {
-    margin: auto 3rem auto auto;
-  }
-
-  .right-gift {
-    margin: auto auto auto 3rem;
-    filter: flipH;
-    transform: scaleX(-1);
-  }
-
-  .svg-gifts {
-    width: 3.5rem;
-  }
-</style>
-
-<script>
-import find from 'lodash/find';
-import { mapState } from '@/libs/store';
-import SecondaryMenu from '@/components/secondaryMenu';
-import gifts from '@/assets/svg/gifts-vertical.svg';
-import { userStateMixin } from '../../mixins/userState';
-
-export default {
-  components: {
-    SecondaryMenu,
-  },
-  mixins: [userStateMixin],
-  data () {
-    return {
-      icons: Object.freeze({
-        gifts,
-      }),
-    };
-  },
-  computed: {
-    ...mapState({
-      currentEventList: 'worldState.data.currentEventList',
-    }),
-    currentEvent () {
-      return find(this.currentEventList, event => Boolean(event.promo));
-    },
-    promo () {
-      if (!this.currentEvent || !this.currentEvent.promo) return 'none';
-      return this.currentEvent.promo;
-    },
-  },
-  methods: {
-    showSelectUser () {
-      this.$root.$emit('bv::show::modal', 'select-user-modal');
-    },
-  },
-};
-</script>

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

@@ -1,143 +0,0 @@
-<template>
-  <div class="row standard-page">
-    <div class="col-12">
-      <h1>{{ $t('notifications') }}</h1>
-    </div>
-    <div class="col-12">
-      <div class="checkbox">
-        <label>
-          <input
-            v-model="user.preferences.pushNotifications.unsubscribeFromAll"
-            type="checkbox"
-            class="mr-2"
-            @change="set('pushNotifications', 'unsubscribeFromAll')"
-          >
-          <span>{{ $t('unsubscribeAllPush') }}</span>
-        </label>
-      </div>
-      <br>
-      <div class="checkbox">
-        <label>
-          <input
-            v-model="user.preferences.emailNotifications.unsubscribeFromAll"
-            type="checkbox"
-            class="mr-2"
-            @change="set('emailNotifications', 'unsubscribeFromAll')"
-          >
-          <span>{{ $t('unsubscribeAllEmails') }}</span>
-        </label>
-      </div>
-      <small>{{ $t('unsubscribeAllEmailsText') }}</small>
-    </div>
-    <div class="col-8">
-      <table class="table">
-        <tr>
-          <td></td>
-          <th>
-            <span>{{ $t('email') }}</span>
-          </th>
-          <th>
-            <span>{{ $t('push') }}</span>
-          </th>
-        </tr>
-        <tr
-          v-for="notification in notificationsIds"
-          :key="notification"
-        >
-          <td>
-            <span>{{ $t(notification) }}</span>
-          </td>
-          <td>
-            <input
-              v-model="user.preferences.emailNotifications[notification]"
-              type="checkbox"
-              @change="set('emailNotifications', notification)"
-            >
-          </td>
-          <td v-if="onlyEmailsIds.indexOf(notification) === -1">
-            <input
-              v-model="user.preferences.pushNotifications[notification]"
-              type="checkbox"
-              @change="set('pushNotifications', notification)"
-            >
-          </td><td v-else>
-            &nbsp;
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from '@/libs/store';
-import notificationsMixin from '@/mixins/notifications';
-
-export default {
-  mixins: [notificationsMixin],
-  data () {
-    return {
-      notificationsIds: Object.freeze([
-        'majorUpdates',
-        'onboarding',
-        'newPM',
-        'wonChallenge',
-        'giftedGems',
-        'giftedSubscription',
-        'invitedParty',
-        'invitedGuild',
-        'kickedGroup',
-        'questStarted',
-        'invitedQuest',
-        'importantAnnouncements',
-        'weeklyRecaps',
-        'subscriptionReminders',
-      ]),
-      // list of email-only notifications
-      onlyEmailsIds: Object.freeze([
-        'kickedGroup',
-        'importantAnnouncements',
-        'weeklyRecaps',
-        'onboarding',
-        'subscriptionReminders',
-      ]),
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  async mounted () {
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-      subSection: this.$t('notifications'),
-    });
-    // If ?unsubFrom param is passed with valid email type,
-    // automatically unsubscribe users from that email and
-    // show an alert
-
-    // A simple object to map the key stored in the db (user.preferences.emailNotification[key])
-    // to its string id but ONLY when the preferences' key and the string key don't match
-    const MAP_PREF_TO_EMAIL_STRING = {
-      importantAnnouncements: 'inactivityEmails',
-    };
-
-    const { unsubFrom } = this.$route.query;
-
-    if (unsubFrom) {
-      await this.$store.dispatch('user:set', {
-        [`preferences.emailNotifications.${unsubFrom}`]: false,
-      });
-
-      const emailTypeString = this.$t(MAP_PREF_TO_EMAIL_STRING[unsubFrom] || unsubFrom);
-      this.text(this.$t('correctlyUnsubscribedEmailType', { emailType: emailTypeString }));
-    }
-  },
-  methods: {
-    set (preferenceType, notification) {
-      const settings = {};
-      settings[`preferences.${preferenceType}.${notification}`] = this.user.preferences[preferenceType][notification];
-      this.$store.dispatch('user:set', settings);
-    },
-  },
-};
-</script>

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

@@ -1,117 +0,0 @@
-<template>
-  <div class="row standard-page">
-    <div class="col-md-6">
-      <h2>{{ $t('promoCode') }}</h2>
-      <div
-        class="form-inline"
-        role="form"
-      >
-        <input
-          v-model="couponCode"
-          class="form-control"
-          type="text"
-          :placeholder="$t('promoPlaceholder')"
-        >
-        <button
-          class="btn btn-primary"
-          @click="enterCoupon()"
-        >
-          {{ $t('submit') }}
-        </button>
-      </div>
-      <div>
-        <small>{{ $t('couponText') }}</small>
-      </div>
-      <div v-if="user.permissions.coupons">
-        <hr>
-        <h4>{{ $t('generateCodes') }}</h4>
-        <div
-          class="form"
-          role="form"
-        >
-          <div class="form-group">
-            <input
-              v-model="codes.event"
-              class="form-control"
-              type="text"
-              placeholder="Event code (eg, 'wondercon')"
-            >
-          </div>
-          <div class="form-group">
-            <input
-              v-model="codes.count"
-              class="form-control"
-              type="number"
-              placeholder="Number of codes to generate (eg, 250)"
-            >
-          </div>
-          <div class="form-group">
-            <button
-              class="btn btn-primary"
-              type="submit"
-              @click="generateCodes(codes)"
-            >
-              {{ $t('generate') }}
-            </button>
-            <a
-              class="btn btn-secondary"
-              :href="getCodesUrl"
-            >{{ $t('getCodes') }}</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios';
-import { mapState } from '@/libs/store';
-import notifications from '@/mixins/notifications';
-
-export default {
-  mixins: [notifications],
-  data () {
-    return {
-      codes: {
-        event: '',
-        count: '',
-      },
-      couponCode: '',
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data', credentials: 'credentials' }),
-    getCodesUrl () {
-      if (!this.user) return '';
-      return '/api/v4/coupons';
-    },
-  },
-  mounted () {
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-      subSection: this.$t('promoCode'),
-    });
-  },
-  methods: {
-    generateCodes () {
-      // $http.post(ApiUrl.get() + '/api/v2/coupons/generate/
-      // '+codes.event+'?count='+(codes.count || 1))
-      //   .success(function(res,code){
-      //     $scope._codes = {};
-      //     if (code!==200) return;
-      //     window.location.href = '/api/v2/coupons?limit='+codes.count+'&_id='+User.user._id+
-      // '&apiToken='+User.settings.auth.apiToken;
-      //   })
-    },
-    async enterCoupon () {
-      const code = await axios.post(`/api/v4/coupons/enter/${this.couponCode}`);
-      if (!code) return;
-
-      this.$store.state.user.data = code.data.data;
-
-      this.text(this.$t('promoCodeApplied'));
-    },
-  },
-};
-</script>

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

@@ -1,46 +0,0 @@
-<template>
-  <b-modal
-    id="reset"
-    :title="$t('resetAccount')"
-    :hide-footer="true"
-    size="md"
-  >
-    <p>{{ $t('resetText1') }}</p>
-    <p>{{ $t('resetText2') }}</p>
-    <div class="modal-footer">
-      <button
-        class="btn btn-primary"
-        @click="close()"
-      >
-        {{ $t('neverMind') }}
-      </button>
-      <button
-        class="btn btn-danger"
-        @click="reset()"
-      >
-        {{ $t('resetDo') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import axios from 'axios';
-import { mapState } from '@/libs/store';
-
-export default {
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'reset');
-    },
-    async reset () {
-      await axios.post('/api/v4/user/reset');
-      this.$router.push('/');
-      setTimeout(() => window.location.reload(true), 100);
-    },
-  },
-};
-</script>

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

@@ -1,210 +0,0 @@
-<template>
-  <b-modal
-    id="restore"
-    :title="$t('fixValues')"
-    :hide-footer="true"
-    size="lg"
-  >
-    <p>{{ $t('fixValuesText1') }}</p>
-    <p>{{ $t('fixValuesText2') }}</p>
-    <div class="form-horizontal">
-      <h3>{{ $t('stats') }}</h3>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('health') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.hp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.hp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('experience') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.exp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.exp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('gold') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.gp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.gp"
-          >
-        </div>
-        <!--input.form-control(type='number',
-         step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('mana') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.mp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.mp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('level') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.lvl"
-            class="form-control"
-            type="number"
-            data-for="stats.lvl"
-          >
-        </div>
-      </div>
-      <h3>{{ $t('achievements') }}</h3>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('fix21Streaks') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.achievements.streak"
-            class="form-control"
-            type="number"
-            data-for="achievements.streak"
-          >
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button
-        class="btn btn-danger"
-        @click="close()"
-      >
-        {{ $t('discardChanges') }}
-      </button>
-      <button
-        class="btn btn-primary"
-        @click="restore()"
-      >
-        {{ $t('saveAndClose') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import clone from 'lodash/clone';
-import { MAX_LEVEL_HARD_CAP } from '@/../../common/script/constants';
-import { mapState } from '@/libs/store';
-
-export default {
-  data () {
-    return {
-      restoreValues: {
-        stats: {
-          hp: 0,
-          mp: 0,
-          gp: 0,
-          exp: 0,
-          lvl: 0,
-        },
-        achievements: {
-          streak: 0,
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  mounted () {
-    this.restoreValues.stats = clone(this.user.stats);
-    this.restoreValues.achievements.streak = clone(this.user.achievements.streak);
-  },
-  methods: {
-    close () {
-      this.validateInputs();
-      this.$root.$emit('bv::hide::modal', 'restore');
-    },
-    restore () {
-      if (!this.validateInputs()) {
-        return;
-      }
-
-      if (this.restoreValues.stats.lvl > MAX_LEVEL_HARD_CAP) {
-        this.restoreValues.stats.lvl = MAX_LEVEL_HARD_CAP;
-      }
-
-      const userChangedLevel = this.restoreValues.stats.lvl !== this.user.stats.lvl;
-      const userDidNotChangeExp = this.restoreValues.stats.exp === this.user.stats.exp;
-      if (userChangedLevel && userDidNotChangeExp) this.restoreValues.stats.exp = 0;
-
-      this.user.stats = clone(this.restoreValues.stats);
-      this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
-
-      const settings = {
-        'stats.hp': Number(this.restoreValues.stats.hp),
-        'stats.exp': Number(this.restoreValues.stats.exp),
-        'stats.gp': Number(this.restoreValues.stats.gp),
-        'stats.lvl': Number(this.restoreValues.stats.lvl),
-        'stats.mp': Number(this.restoreValues.stats.mp),
-        'achievements.streak': Number(this.restoreValues.achievements.streak),
-      };
-
-      this.$store.dispatch('user:set', settings);
-      this.$root.$emit('bv::hide::modal', 'restore');
-    },
-    validateInputs () {
-      const canRestore = ['hp', 'exp', 'gp', 'mp'];
-      let valid = true;
-
-      for (const stat of canRestore) {
-        if (this.restoreValues.stats[stat] === ''
-          || this.restoreValues.stats[stat] < 0
-        ) {
-          this.restoreValues.stats[stat] = this.user.stats[stat];
-          valid = false;
-        }
-      }
-
-      const inputLevel = Number(this.restoreValues.stats.lvl);
-      if (this.restoreValues.stats.lvl === ''
-        || !Number.isInteger(inputLevel)
-        || inputLevel < 1) {
-        this.restoreValues.stats.lvl = this.user.stats.lvl;
-        valid = false;
-      }
-
-      const inputStreak = Number(this.restoreValues.achievements.streak);
-      if (this.restoreValues.achievements.streak === ''
-        || !Number.isInteger(inputStreak)
-        || inputStreak < 0) {
-        this.restoreValues.achievements.streak = this.user.achievements.streak;
-        valid = false;
-      }
-
-      return valid;
-    },
-  },
-};
-</script>

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

@@ -1,859 +0,0 @@
-<template>
-  <div class="row standard-page">
-    <restore-modal />
-    <reset-modal />
-    <delete-modal />
-    <h1 class="col-12">
-      {{ $t('settings') }}
-    </h1>
-    <div class="col-sm-6">
-      <div class="sleep">
-        <h5>{{ $t('pauseDailies') }}</h5>
-        <h4>{{ $t('sleepDescription') }}</h4>
-        <ul>
-          <li v-once>
-            {{ $t('sleepBullet1') }}
-          </li>
-          <li v-once>
-            {{ $t('sleepBullet2') }}
-          </li>
-          <li v-once>
-            {{ $t('sleepBullet3') }}
-          </li>
-        </ul>
-        <button
-          v-if="!user.preferences.sleep"
-          v-once
-          class="sleep btn btn-primary btn-block pause-button"
-          @click="toggleSleep()"
-        >
-          {{ $t('pauseDailies') }}
-        </button>
-        <button
-          v-if="user.preferences.sleep"
-          v-once
-          class="btn btn-secondary btn-block pause-button"
-          @click="toggleSleep()"
-        >
-          {{ $t('unpauseDailies') }}
-        </button>
-      </div>
-      <hr>
-      <div class="form-horizontal">
-        <h5>{{ $t('language') }}</h5>
-        <select
-          class="form-control"
-          :value="user.preferences.language"
-          @change="changeLanguage($event)"
-        >
-          <option
-            v-for="lang in availableLanguages"
-            :key="lang.code"
-            :value="lang.code"
-          >
-            {{ lang.name }}
-          </option>
-        </select>
-        <small>
-          {{ $t('americanEnglishGovern') }}
-          <br>
-          <strong v-html="$t('helpWithTranslation')"></strong>
-        </small>
-      </div>
-      <hr>
-      <div class="form-horizontal">
-        <h5>{{ $t('dateFormat') }}</h5>
-        <select
-          v-model="user.preferences.dateFormat"
-          class="form-control"
-          @change="set('dateFormat')"
-        >
-          <option
-            v-for="dateFormat in availableFormats"
-            :key="dateFormat"
-            :value="dateFormat"
-          >
-            {{ dateFormat }}
-          </option>
-        </select>
-      </div>
-      <hr>
-      <div class="form-horizontal">
-        <div class="form-group">
-          <h5>{{ $t('audioTheme') }}</h5>
-          <select
-            v-model="user.preferences.sound"
-            class="form-control"
-            @change="changeAudioTheme"
-          >
-            <option
-              v-for="sound in availableAudioThemes"
-              :key="sound"
-              :value="sound"
-            >
-              {{ $t(`audioTheme_${sound}`) }}
-            </option>
-          </select>
-        </div>
-        <button
-          v-once
-          class="btn btn-primary btn-xs"
-          @click="playAudio"
-        >
-          {{ $t('demo') }}
-        </button>
-      </div>
-      <hr>
-      <div
-        v-if="hasClass"
-        class="form-horizontal"
-      >
-        <h5>{{ $t('characterBuild') }}</h5>
-        <h6 v-once>
-          {{ $t('class') + ': ' }}
-          <!-- @TODO: what is classText-->
-          <!-- span(v-if='classText') {{ classText }}&nbsp;-->
-          <button
-            v-once
-            class="btn btn-danger btn-xs"
-            @click="changeClassForUser(true)"
-          >
-            {{ $t('changeClass') }}
-          </button>
-          <small class="cost">
-            &nbsp; 3 {{ $t('gems') }}
-            <!-- @TODO add icon span.Pet_Currency_Gem1x.inline-gems-->
-          </small>
-        </h6>
-        <hr>
-      </div>
-      <div>
-        <div
-          class="checkbox"
-          id="preferenceAdvancedCollapsed"
-        >
-          <label>
-            <input
-              v-model="user.preferences.advancedCollapsed"
-              type="checkbox"
-              class="mr-2"
-              @change="set('advancedCollapsed')"
-            >
-            <span class="hint">
-              {{ $t('startAdvCollapsed') }}
-            </span>
-            <b-popover
-              target="preferenceAdvancedCollapsed"
-              triggers="hover focus"
-              placement="right"
-              :prevent-overflow="false"
-              :content="$t('startAdvCollapsedPop')"
-            />
-          </label>
-        </div>
-        <div
-          v-if="party.memberCount === 1"
-          class="checkbox"
-          id="preferenceDisplayInviteAtOneMember"
-        >
-          <label>
-            <input
-              v-model="user.preferences.displayInviteToPartyWhenPartyIs1"
-              type="checkbox"
-              class="mr-2"
-              @change="set('displayInviteToPartyWhenPartyIs1')"
-            >
-            <span class="hint">
-              {{ $t('displayInviteToPartyWhenPartyIs1') }}
-            </span>
-          </label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.levelUp"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'levelUp')"
-          >
-          <label>{{ $t('suppressLevelUpModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.hatchPet"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'hatchPet')"
-          >
-          <label>{{ $t('suppressHatchPetModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.raisePet"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'raisePet')"
-          >
-          <label>{{ $t('suppressRaisePetModal') }}</label>
-        </div>
-        <div class="checkbox">
-          <input
-            v-model="user.preferences.suppressModals.streak"
-            type="checkbox"
-            class="mr-2"
-            @change="set('suppressModals', 'streak')"
-          >
-          <label>{{ $t('suppressStreakModal') }}</label>
-        </div>
-        <hr>
-        <button
-          id="buttonShowBailey"
-          class="btn btn-primary mr-2 mb-2"
-          @click="showBailey()"
-        >
-          {{ $t('showBailey') }}
-          <b-popover
-            target="buttonShowBailey"
-            triggers="hover focus"
-            placement="right"
-            :prevent-overflow="false"
-            :content="$t('showBaileyPop')"
-          />
-        </button>
-        <button
-          id="buttonFCV"
-          class="btn btn-primary mr-2 mb-2"
-          @click="openRestoreModal()"
-        >
-          {{ $t('fixVal') }}
-          <b-popover
-            target="buttonFCV"
-            triggers="hover focus"
-            placement="right"
-            :prevent-overflow="false"
-            :content="$t('fixValPop')"
-          />
-        </button>
-        <button
-          v-if="user.preferences.disableClasses == true"
-          id="buttonEnableClasses"
-          class="btn btn-primary mb-2"
-          @click="changeClassForUser(false)"
-        >
-          {{ $t('enableClass') }}
-          <b-popover
-            target="buttonEnableClasses"
-            triggers="hover focus"
-            placement="right"
-            :prevent-overflow="false"
-            :content="$t('enableClassPop')"
-          />
-        </button>
-        <hr>
-        <day-start-adjustment />
-      </div>
-    </div>
-    <div class="col-sm-6">
-      <h2>{{ $t('registration') }}</h2>
-      <div class="panel-body">
-        <div>
-          <ul class="list-inline">
-            <li
-              v-for="network in SOCIAL_AUTH_NETWORKS"
-              :key="network.key"
-            >
-              <button
-                v-if="!user.auth[network.key].id && network.key !== 'facebook'"
-                class="btn btn-primary mb-2"
-                @click="socialAuth(network.key, user)"
-              >
-                {{ $t('registerWithSocial', {network: network.name}) }}
-              </button>
-              <button
-                v-if="!hasBackupAuthOption(network.key) && user.auth[network.key].id"
-                class="btn btn-primary mb-2"
-                disabled="disabled"
-              >
-                {{ $t('registeredWithSocial', {network: network.name}) }}
-              </button>
-              <button
-                v-if="hasBackupAuthOption(network.key) && user.auth[network.key].id"
-                class="btn btn-danger"
-                @click="deleteSocialAuth(network)"
-              >
-                {{ $t('detachSocial', {network: network.name}) }}
-              </button>
-            </li>
-          </ul>
-          <hr>
-          <div v-if="!user.auth.local.has_password">
-            <h5 v-if="!user.auth.local.email">
-              {{ $t('addLocalAuth') }}
-            </h5>
-            <h5 v-if="user.auth.local.email">
-              {{ $t('addPasswordAuth') }}
-            </h5>
-            <div
-              class="form"
-              name="localAuth"
-              novalidate="novalidate"
-            >
-              <div
-                v-if="!user.auth.local.email"
-                class="form-group"
-              >
-                <input
-                  v-model="localAuth.email"
-                  class="form-control"
-                  type="text"
-                  :placeholder="$t('email')"
-                  required="required"
-                >
-              </div>
-              <div class="form-group">
-                <input
-                  v-model="localAuth.password"
-                  class="form-control"
-                  type="password"
-                  :placeholder="$t('password')"
-                  required="required"
-                >
-              </div>
-              <div class="form-group">
-                <input
-                  v-model="localAuth.confirmPassword"
-                  class="form-control"
-                  type="password"
-                  :placeholder="$t('confirmPass')"
-                  required="required"
-                >
-              </div>
-              <button
-                class="btn btn-primary"
-                type="submit"
-                @click="addLocalAuth()"
-              >
-                {{ $t('submit') }}
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="usersettings">
-          <h5>{{ $t('changeDisplayName') }}</h5>
-          <div
-            class="form"
-            name="changeDisplayName"
-            novalidate="novalidate"
-          >
-            <div class="form-group">
-              <input
-                id="changeDisplayname"
-                v-model="temporaryDisplayName"
-                class="form-control"
-                type="text"
-                :placeholder="$t('newDisplayName')"
-                :class="{'is-invalid input-invalid': displayNameInvalid}"
-              >
-              <div
-                v-if="displayNameIssues.length > 0"
-                class="mb-3"
-              >
-                <div
-                  v-for="issue in displayNameIssues"
-                  :key="issue"
-                  class="input-error"
-                >
-                  {{ issue }}
-                </div>
-              </div>
-            </div>
-            <button
-              class="btn btn-primary"
-              type="submit"
-              :disabled="displayNameCannotSubmit"
-              @click="changeDisplayName(temporaryDisplayName)"
-            >
-              {{ $t('submit') }}
-            </button>
-          </div>
-          <h5>{{ $t('changeUsername') }}</h5>
-          <div
-            class="form"
-            name="changeUsername"
-            novalidate="novalidate"
-          >
-            <div
-              v-if="verifiedUsername"
-              class="iconalert iconalert-success"
-            >
-              {{ $t('usernameVerifiedConfirmation', {'username': user.auth.local.username}) }}
-            </div>
-            <div
-              v-else
-              class="iconalert iconalert-warning"
-            >
-              <div class="align-middle">
-                <span>{{ $t('usernameNotVerified') }}</span>
-              </div>
-            </div>
-            <div class="form-group">
-              <input
-                id="changeUsername"
-                v-model="usernameUpdates.username"
-                class="form-control"
-                type="text"
-                :placeholder="$t('newUsername')"
-                :class="{'is-invalid input-invalid': usernameInvalid}"
-                @blur="restoreEmptyUsername()"
-              >
-              <div
-                v-for="issue in usernameIssues"
-                :key="issue"
-                class="input-error"
-              >
-                {{ issue }}
-              </div>
-              <small class="form-text text-muted">{{ $t('changeUsernameDisclaimer') }}</small>
-            </div>
-            <button
-              class="btn btn-primary"
-              type="submit"
-              :disabled="usernameCannotSubmit"
-              @click="changeUser('username', usernameUpdates)"
-            >
-              {{ $t('saveAndConfirm') }}
-            </button>
-          </div>
-          <h5 v-if="user.auth.local.has_password">
-            {{ $t('changeEmail') }}
-          </h5>
-          <div
-            v-if="user.auth.local.email"
-            class="form"
-            name="changeEmail"
-            novalidate="novalidate"
-          >
-            <div class="form-group">
-              <input
-                id="changeEmail"
-                v-model="emailUpdates.newEmail"
-                class="form-control"
-                type="text"
-                :placeholder="$t('newEmail')"
-              >
-            </div>
-            <div
-              v-if="user.auth.local.has_password"
-              class="form-group"
-            >
-              <input
-                v-model="emailUpdates.password"
-                class="form-control"
-                type="password"
-                :placeholder="$t('password')"
-              >
-            </div>
-            <button
-              class="btn btn-primary"
-              type="submit"
-              @click="changeUser('email', emailUpdates)"
-            >
-              {{ $t('submit') }}
-            </button>
-          </div>
-          <h5 v-if="user.auth.local.has_password">
-            {{ $t('changePass') }}
-          </h5>
-          <div
-            v-if="user.auth.local.has_password"
-            class="form"
-            name="changePassword"
-            novalidate="novalidate"
-          >
-            <div class="form-group">
-              <input
-                id="changePassword"
-                v-model="passwordUpdates.password"
-                class="form-control"
-                type="password"
-                :placeholder="$t('oldPass')"
-              >
-            </div>
-            <div class="form-group">
-              <input
-                v-model="passwordUpdates.newPassword"
-                class="form-control"
-                type="password"
-                :placeholder="$t('newPass')"
-              >
-            </div>
-            <div class="form-group">
-              <input
-                v-model="passwordUpdates.confirmPassword"
-                class="form-control"
-                type="password"
-                :placeholder="$t('confirmPass')"
-              >
-            </div>
-            <button
-              class="btn btn-primary"
-              type="submit"
-              @click="changeUser('password', passwordUpdates)"
-            >
-              {{ $t('submit') }}
-            </button>
-          </div>
-          <hr>
-        </div>
-        <div>
-          <h5>{{ $t('dangerZone') }}</h5>
-          <div>
-            <button
-              v-b-popover.hover.auto="$t('resetAccPop')"
-              class="btn btn-danger mr-2 mb-2"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              @click="openResetModal()"
-            >
-              {{ $t('resetAccount') }}
-            </button>
-            <button
-              v-b-popover.hover.auto="$t('deleteAccPop')"
-              class="btn btn-danger mb-2"
-              popover-trigger="mouseenter"
-              @click="openDeleteModal()"
-            >
-              {{ $t('deleteAccount') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-  input {
-    color: $gray-50;
-  }
-
-  .checkbox {
-    width: fit-content;
-  }
-  .usersettings h5 {
-    margin-top: 1em;
-  }
-  .iconalert > div > span {
-    line-height: 25px;
-  }
-  .iconalert > div:after {
-    clear: both;
-    content: '';
-    display: table;
-  }
-  .input-error {
-    color: $red-50;
-    font-size: 90%;
-    width: 100%;
-    margin-top: 5px;
-  }
-
-  .sleep {
-    margin-bottom: 16px;
-  }
-</style>
-
-<script>
-import hello from 'hellojs';
-import axios from 'axios';
-import debounce from 'lodash/debounce';
-import { mapState } from '@/libs/store';
-import restoreModal from './restoreModal';
-import resetModal from './resetModal';
-import deleteModal from './deleteModal';
-import dayStartAdjustment from './dayStartAdjustment';
-import { SUPPORTED_SOCIAL_NETWORKS } from '@/../../common/script/constants';
-import changeClass from '@/../../common/script/ops/changeClass';
-import notificationsMixin from '../../mixins/notifications';
-import sounds from '../../libs/sounds';
-import { buildAppleAuthUrl } from '../../libs/auth';
-
-// @TODO: this needs our window.env fix
-// import { availableLanguages } from '../../../server/libs/i18n';
-
-export default {
-  components: {
-    restoreModal,
-    resetModal,
-    deleteModal,
-    dayStartAdjustment,
-  },
-  mixins: [notificationsMixin],
-  data () {
-    return {
-      SOCIAL_AUTH_NETWORKS: [],
-      party: {},
-      // Made available by the server as a script
-      availableFormats: ['MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy/MM/dd'],
-      temporaryDisplayName: '',
-      usernameUpdates: { username: '' },
-      emailUpdates: {},
-      passwordUpdates: {},
-      localAuth: {
-        username: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-      },
-      displayNameIssues: [],
-      usernameIssues: [],
-    };
-  },
-  computed: {
-    ...mapState({
-      user: 'user.data',
-      availableLanguages: 'i18n.availableLanguages',
-      content: 'content',
-    }),
-    availableAudioThemes () {
-      return ['off', ...this.content.audioThemes];
-    },
-    hasClass () {
-      return this.$store.getters['members:hasClass'](this.user);
-    },
-    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;
-    },
-    usernameInvalid () {
-      if (this.usernameUpdates.username.length <= 1) return false;
-      return !this.usernameValid;
-    },
-    usernameCannotSubmit () {
-      if (this.usernameUpdates.username.length <= 1) return true;
-      return !this.usernameValid;
-    },
-  },
-  watch: {
-    usernameUpdates: {
-      handler () {
-        this.validateUsername(this.usernameUpdates.username);
-      },
-      deep: true,
-    },
-    temporaryDisplayName: {
-      handler () {
-        this.validateDisplayName(this.temporaryDisplayName);
-      },
-      deep: true,
-    },
-  },
-  mounted () {
-    this.SOCIAL_AUTH_NETWORKS = SUPPORTED_SOCIAL_NETWORKS;
-    // @TODO: We may need to request the party here
-    this.party = this.$store.state.party;
-    this.usernameUpdates.username = this.user.auth.local.username || null;
-    this.temporaryDisplayName = this.user.profile.name;
-    this.emailUpdates.newEmail = this.user.auth.local.email || null;
-    this.localAuth.username = this.user.auth.local.username || null;
-    this.soundIndex = 0;
-
-    this.$store.dispatch('common:setTitle', {
-      section: this.$t('settings'),
-    });
-
-    hello.init({
-      facebook: process.env.FACEBOOK_KEY, // eslint-disable-line no-process-env
-      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line no-process-env
-    }, {
-      redirect_uri: '', // eslint-disable-line
-    });
-
-    const focusID = this.$route.query.focus;
-    if (focusID !== undefined && focusID !== null) {
-      this.$nextTick(() => {
-        const element = document.getElementById(focusID);
-        if (element !== undefined && element !== null) {
-          element.focus();
-        }
-      });
-    }
-  },
-  methods: {
-    toggleSleep () {
-      this.$store.dispatch('user:sleep');
-    },
-    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),
-    set (preferenceType, subtype) {
-      const settings = {};
-      if (!subtype) {
-        settings[`preferences.${preferenceType}`] = this.user.preferences[preferenceType];
-      } else {
-        settings[`preferences.${preferenceType}.${subtype}`] = this.user.preferences[preferenceType][subtype];
-      }
-      return this.$store.dispatch('user:set', settings);
-    },
-    hideHeader () {
-      this.set('hideHeader');
-      if (!this.user.preferences.hideHeader || !this.user.preferences.stickyHeader) return;
-      this.user.preferences.hideHeader = false;
-      this.set('stickyHeader');
-    },
-    toggleStickyHeader () {
-      this.set('stickyHeader');
-    },
-    showTour  () {
-      // @TODO: Do we still use this?
-      // User.set({'flags.showTour':true});
-      // Guide.goto('intro', 0, true);
-    },
-    showBailey () {
-      this.$root.$emit('bv::show::modal', 'new-stuff');
-    },
-    hasBackupAuthOption (networkKeyToCheck) {
-      if (this.user.auth.local.username) {
-        return true;
-      }
-
-      return this.SOCIAL_AUTH_NETWORKS.find(network => {
-        if (network.key !== networkKeyToCheck) {
-          if (this.user.auth[network.key]) {
-            return !!this.user.auth[network.key].id;
-          }
-        }
-
-        return false;
-      });
-    },
-    async changeLanguage (e) {
-      const newLang = e.target.value;
-      this.user.preferences.language = newLang;
-      await this.set('language');
-      setTimeout(() => window.location.reload(true));
-    },
-    async changeUser (attribute, updates) {
-      await axios.put(`/api/v4/user/auth/update-${attribute}`, updates);
-      if (attribute === 'username') {
-        this.user.auth.local.username = updates[attribute];
-        this.localAuth.username = this.user.auth.local.username;
-        this.user.flags.verifiedUsername = true;
-      } else if (attribute === 'email') {
-        this.user.auth.local.email = updates.newEmail;
-        window.alert(this.$t('emailSuccess')); // eslint-disable-line no-alert
-      } else if (attribute === 'password') {
-        this.passwordUpdates = {};
-        this.$store.dispatch('snackbars:add', {
-          title: 'Habitica',
-          text: this.$t('passwordSuccess'),
-          type: 'success',
-          timeout: true,
-        });
-      }
-    },
-    async changeDisplayName (newName) {
-      await axios.put('/api/v4/user/', { 'profile.name': newName });
-      window.alert(this.$t('displayNameSuccess')); // eslint-disable-line no-alert
-      this.user.profile.name = newName;
-      this.temporaryDisplayName = newName;
-    },
-    openRestoreModal () {
-      this.$root.$emit('bv::show::modal', 'restore');
-    },
-    openResetModal () {
-      this.$root.$emit('bv::show::modal', 'reset');
-    },
-    openDeleteModal () {
-      this.$root.$emit('bv::show::modal', 'delete');
-    },
-    async deleteSocialAuth (network) {
-      await axios.delete(`/api/v4/user/auth/social/${network.key}`);
-      this.user.auth[network.key] = {};
-      this.text(this.$t('detachedSocial', { network: network.name }));
-    },
-    async socialAuth (network) {
-      if (network === 'apple') {
-        window.location.href = buildAppleAuthUrl();
-      } else {
-        const auth = await hello(network).login({ scope: 'email' });
-        await this.$store.dispatch('auth:socialAuth', {
-          auth,
-        });
-        window.location.href = '/';
-      }
-    },
-    async changeClassForUser (confirmationNeeded) {
-      if (confirmationNeeded && !window.confirm(this.$t('changeClassConfirmCost'))) return; // eslint-disable-line no-alert
-      try {
-        changeClass(this.user);
-        await axios.post('/api/v4/user/change-class');
-      } catch (e) {
-        window.alert(e.message); // eslint-disable-line no-alert
-      }
-    },
-    async addLocalAuth () {
-      if (this.localAuth.email === '') {
-        this.localAuth.email = this.user.auth.local.email;
-      }
-      await axios.post('/api/v4/user/auth/local/register', this.localAuth);
-      window.location.href = '/user/settings/site';
-    },
-    restoreEmptyUsername () {
-      if (this.usernameUpdates.username.length < 1) {
-        this.usernameUpdates.username = this.user.auth.local.username;
-      }
-    },
-    changeAudioTheme () {
-      this.soundIndex = 0;
-      this.set('sound');
-    },
-    playAudio () {
-      this.$root.$emit('playSound', sounds[this.soundIndex]);
-      this.soundIndex = (this.soundIndex + 1) % sounds.length;
-    },
-  },
-};
-</script>

website/client/src/components/settings/subscription.stories.js

@@ -1,37 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { storiesOf } from '@storybook/vue';
-
-import Subscription from './subscription.vue';
-import { mockStore } from '../../../config/storybook/mock.data';
-
-storiesOf('Subscriptions/Detail Page', module)
-  .add('subscribed', () => ({
-    components: { Subscription },
-    template: `
-      <div style="position: absolute; margin: 20px">
-        <subscription ></subscription>
-      </div>
-    `,
-    data () {
-      return {
-      };
-    },
-    store: mockStore({
-      userData: {
-        purchased: {
-          plan: {
-            customerId: 'customer-id',
-            planId: 'plan-id',
-            subscriptionId: 'sub-id',
-            gemsBought: 22,
-            dateUpdated: new Date(2021, 0, 15),
-            consecutive: {
-              count: 2,
-              gemCapExtra: 4,
-              offset: 2,
-            },
-          },
-        },
-      },
-    }),
-  }));

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

@@ -279,7 +279,10 @@
             </div>
           </div>
 
-          <div class="mt-4 nextHourglassDescription" v-once>
+          <div
+            v-once
+            class="mt-4 nextHourglassDescription"
+          >
             *{{ $t('nextHourglassDescription') }}
           </div>
         </div>