4.140.6

API Cache fixes

.gitignore

@@ -37,6 +37,7 @@ yarn.lock
 .elasticbeanstalk/*
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
+/.vscode
 
 # webstorm fake webpack for path intellisense
 webpack.webstorm.config

.nodemonignore

@@ -9,3 +9,4 @@ test/**
 *.swp
 *.swx
 website/raw_sprites/**
+content_cache/**

config.json.example

@@ -75,5 +75,9 @@
   "WEB_CONCURRENCY": 1,
   "SKIP_SSL_CHECK_KEY": "key",
   "ENABLE_STACKDRIVER_TRACING": "false",
+  "APPLE_AUTH_PRIVATE_KEY": "",
+  "APPLE_TEAM_ID": "",
+  "APPLE_AUTH_CLIENT_ID": "",
+  "APPLE_AUTH_KEY_ID": "",
   "BLOCKED_IPS": ""
 }

gulp/gulp-content.js

@@ -6,7 +6,7 @@ gulp.task('content:cache', done => {
   // Requiring at runtime because these files access `common`
   // code which in production works only if transpiled so after
   // gulp build:babel:common has run
-  const { CONTENT_CACHE_PATH, getLocalizedContent } = require('../website/server/libs/content'); // eslint-disable-line global-require
+  const { CONTENT_CACHE_PATH, getLocalizedContentResponse } = require('../website/server/libs/content'); // eslint-disable-line global-require
   const { langCodes } = require('../website/server/libs/i18n'); // eslint-disable-line global-require
 
   try {
@@ -23,7 +23,7 @@ gulp.task('content:cache', done => {
     langCodes.forEach(langCode => {
       fs.writeFileSync(
         `${CONTENT_CACHE_PATH}${langCode}.json`,
-        getLocalizedContent(langCode),
+        getLocalizedContentResponse(langCode),
         'utf8',
       );
     });

migrations/users/full-gear.js

@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+import each from 'lodash/each';
+import keys from 'lodash/keys';
+import content from '../../website/common/script/content/index';
+
+import { model as User } from '../../website/server/models/user';
+
+const MIGRATION_NAME = 'full-gear';
+
+const progressCount = 1000;
+let count = 0;
+
+/*
+ * Award users every extant pet and mount
+ */
+
+async function updateUser (user) {
+  count += 1;
+
+  const set = {};
+
+  set.migration = MIGRATION_NAME;
+
+  each(keys(content.gear.flat), gearItem => {
+    set[`items.gear.owned.${gearItem}`] = true;
+  });
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+export default async function processUsers () {
+  const query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.local.lowerCaseUsername': 'olson1',
+  };
+
+  const fields = {
+    _id: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({ _id: 1 })
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.138.6",
+  "version": "4.140.6",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
     "@babel/register": "^7.9.0",
     "@google-cloud/trace-agent": "^4.2.5",
     "@slack/client": "^4.12.0",
@@ -14,7 +14,7 @@
     "amplitude": "^3.5.0",
     "apidoc": "^0.17.5",
     "apn": "^2.2.0",
-    "aws-sdk": "^2.648.0",
+    "apple-auth": "^1.0.5",
     "bcrypt": "^3.0.8",
     "body-parser": "^1.18.3",
     "compression": "^1.7.4",
@@ -41,15 +41,18 @@
     "image-size": "^0.8.3",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^4.0.1",
+    "jsonwebtoken": "^8.5.1",
+    "jwks-rsa": "^1.7.0",
     "lodash": "^4.17.15",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.24.0",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.9.6",
+    "mongoose": "^5.9.7",
     "morgan": "^1.10.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.2",
+    "on-headers": "^1.0.2",
     "passport": "^0.4.1",
     "passport-facebook": "^3.0.0",
     "passport-google-oauth2": "^0.2.0",
@@ -69,7 +72,7 @@
     "validator": "^11.0.0",
     "vinyl-buffer": "^1.0.1",
     "winston": "^3.2.1",
-    "winston-loggly-bulk": "^3.0.1",
+    "winston-loggly-bulk": "^3.1.0",
     "xml2js": "^0.4.23"
   },
   "private": true,

test/api/unit/libs/content.test.js

@@ -8,9 +8,9 @@ describe('contentLib', () => {
     });
   });
 
-  describe('getLocalizedContent', () => {
+  describe('getLocalizedContentResponse', () => {
     it('clones, not modify, the original content data', () => {
-      contentLib.getLocalizedContent();
+      contentLib.getLocalizedContentResponse();
       expect(typeof content.backgrounds.backgrounds062014.beach.text).to.equal('function');
     });
   });

test/api/unit/libs/email.test.js

@@ -18,6 +18,16 @@ function getUser () {
           value: 'email@facebook',
         }],
       },
+      google: {
+        emails: [{
+          value: 'email@google',
+        }],
+      },
+      apple: {
+        emails: [{
+          value: 'email@apple',
+        }],
+      },
     },
     profile: {
       name: 'profile name',
@@ -58,6 +68,8 @@ describe('emails', () => {
       const user = getUser();
       delete user.profile.name;
       delete user.auth.local.email;
+      delete user.auth.google.emails;
+      delete user.auth.apple.emails;
 
       const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
 
@@ -67,12 +79,48 @@ describe('emails', () => {
       expect(data).to.have.property('canSend', true);
     });
 
+    it('returns correct user data [google users]', () => {
+      const attachEmail = requireAgain(pathToEmailLib);
+      const { getUserInfo } = attachEmail;
+      const user = getUser();
+      delete user.profile.name;
+      delete user.auth.local.email;
+      delete user.auth.facebook.emails;
+      delete user.auth.apple.emails;
+
+      const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
+
+      expect(data).to.have.property('name', user.auth.local.username);
+      expect(data).to.have.property('email', user.auth.google.emails[0].value);
+      expect(data).to.have.property('_id', user._id);
+      expect(data).to.have.property('canSend', true);
+    });
+
+    it('returns correct user data [apple users]', () => {
+      const attachEmail = requireAgain(pathToEmailLib);
+      const { getUserInfo } = attachEmail;
+      const user = getUser();
+      delete user.profile.name;
+      delete user.auth.local.email;
+      delete user.auth.google.emails;
+      delete user.auth.facebook.emails;
+
+      const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
+
+      expect(data).to.have.property('name', user.auth.local.username);
+      expect(data).to.have.property('email', user.auth.apple.emails[0].value);
+      expect(data).to.have.property('_id', user._id);
+      expect(data).to.have.property('canSend', true);
+    });
+
     it('has fallbacks for missing data', () => {
       const attachEmail = requireAgain(pathToEmailLib);
       const { getUserInfo } = attachEmail;
       const user = getUser();
       delete user.auth.local.email;
       delete user.auth.facebook;
+      delete user.auth.google;
+      delete user.auth.apple;
 
       const data = getUserInfo(user, ['name', 'email', '_id', 'canSend']);
 

test/api/unit/libs/localizeContentData.js

@@ -0,0 +1,22 @@
+import faq from '../../../../website/common/script/content/faq';
+import common from '../../../../website/common';
+import { localizeContentData } from '../../../../website/server/libs/content';
+
+const { i18n } = common;
+
+describe('localizeContentData', () => {
+  it('Should take a an object with localization identifiers and '
+    + 'return an object with actual translations in English', () => {
+    const faqInEnglish = localizeContentData(faq, 'en');
+
+    expect(faqInEnglish).to.have.property('stillNeedHelp');
+    expect(faqInEnglish.stillNeedHelp.ios).to.equal(i18n.t('iosFaqStillNeedHelp', 'en'));
+  });
+  it('Should take an object with localization identifiers and '
+    + 'return an object with actual translations in German', () => {
+    const faqInEnglish = localizeContentData(faq, 'de');
+
+    expect(faqInEnglish).to.have.property('stillNeedHelp');
+    expect(faqInEnglish.stillNeedHelp.ios).to.equal(i18n.t('iosFaqStillNeedHelp', 'de'));
+  });
+});

test/api/unit/libs/pushNotifications.js

@@ -1,13 +1,15 @@
-import requireAgain from 'require-again';
 import apn from 'apn/mock';
+import _ from 'lodash';
 import nconf from 'nconf';
 import gcmLib from 'node-gcm'; // works with FCM notifications too
 import { model as User } from '../../../../website/server/models/user';
+import {
+  sendNotification as sendPushNotification,
+  MAX_MESSAGE_LENGTH,
+} from '../../../../website/server/libs/pushNotifications';
 
 describe('pushNotifications', () => {
   let user;
-  let sendPushNotification;
-  const pathToPushNotifications = '../../../../website/server/libs/pushNotifications';
   let fcmSendSpy;
   let apnSendSpy;
 
@@ -28,8 +30,6 @@ describe('pushNotifications', () => {
       on: () => null,
       send: apnSendSpy,
     });
-
-    sendPushNotification = requireAgain(pathToPushNotifications).sendNotification;
   });
 
   afterEach(() => {
@@ -86,6 +86,67 @@ describe('pushNotifications', () => {
     expect(apnSendSpy).to.not.have.been.called;
   });
 
+  it('cuts the message to 300 chars', () => {
+    const longMessage = `12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345`;
+
+    expect(longMessage.length > MAX_MESSAGE_LENGTH).to.equal(true);
+
+    const details = {
+      identifier,
+      title,
+      message: longMessage,
+      payload: {
+        message: longMessage,
+      },
+    };
+
+    sendPushNotification(user, details);
+
+    expect(details.message).to.equal(_.truncate(longMessage, { length: MAX_MESSAGE_LENGTH }));
+    expect(details.payload.message)
+      .to.equal(_.truncate(longMessage, { length: MAX_MESSAGE_LENGTH }));
+
+    expect(details.message.length).to.equal(MAX_MESSAGE_LENGTH);
+    expect(details.payload.message.length).to.equal(MAX_MESSAGE_LENGTH);
+  });
+
+  it('cuts the message to 300 chars (no payload)', () => {
+    const longMessage = `12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
+      12345 12345 12345 12345 12345 12345 12345 12345 12345 12345`;
+
+    expect(longMessage.length > MAX_MESSAGE_LENGTH).to.equal(true);
+
+    const details = {
+      identifier,
+      title,
+      message: longMessage,
+    };
+
+    sendPushNotification(user, details);
+
+    expect(details.message).to.equal(_.truncate(longMessage, { length: MAX_MESSAGE_LENGTH }));
+    expect(details.message.length).to.equal(MAX_MESSAGE_LENGTH);
+  });
+
   // TODO disabled because APN relies on a Promise
   xit('uses APN for iOS devices', () => {
     user.pushDevices.push({

test/api/unit/libs/webhooks.test.js

@@ -16,7 +16,7 @@ import {
   defer,
   sleep,
 } from '../../../helpers/api-unit.helper';
-
+import logger from '../../../../website/server/libs/logger';
 
 describe('webhooks', () => {
   let webhooks; let
@@ -356,6 +356,7 @@ describe('webhooks', () => {
       });
 
       it('records failures', async () => {
+        sinon.stub(logger, 'error');
         const body = {};
         sendWebhook.send(user, body);
 
@@ -369,6 +370,9 @@ describe('webhooks', () => {
 
         expect(user.webhooks[0].failures).to.equal(1);
         expect((Date.now() - user.webhooks[0].lastFailureAt.getTime()) < 10000).to.be.true;
+
+        expect(logger.error).to.be.calledOnce;
+        logger.error.restore();
       });
 
       it('disables a webhook after 10 failures', async () => {

test/api/unit/middlewares/cache.test.js

@@ -0,0 +1,31 @@
+import {
+  generateRes,
+  generateReq,
+  generateNext,
+} from '../../../helpers/api-unit.helper';
+import {
+  disableCache,
+} from '../../../../website/server/middlewares/cache';
+
+describe('cache middlewares', () => {
+  let res; let req; let
+    next;
+
+  beforeEach(() => {
+    req = generateReq();
+    res = generateRes();
+    next = generateNext();
+  });
+
+  describe('disableCache', () => {
+    it('sets the correct headers', () => {
+      disableCache(req, res, next);
+      expect(res.set).to.have.been.calledWith('Cache-Control', 'no-store');
+      expect(next).to.have.been.calledOnce;
+    });
+
+    xit('removes the etag header', () => {
+      // @TODO how to stub onHeaders
+    });
+  });
+});

test/api/v3/integration/user/DELETE-user.test.js

@@ -346,4 +346,23 @@ describe('DELETE /user', () => {
       await expect(checkExistence('users', user._id)).to.eventually.eql(false);
     });
   });
+
+  context('user with Apple auth', async () => {
+    beforeEach(async () => {
+      user = await generateUser({
+        auth: {
+          apple: {
+            id: 'apple-id',
+          },
+        },
+      });
+    });
+
+    it('deletes a Apple user', async () => {
+      await user.del('/user', {
+        password: DELETE_CONFIRMATION,
+      });
+      await expect(checkExistence('users', user._id)).to.eventually.eql(false);
+    });
+  });
 });

test/api/v3/integration/user/auth/DELETE-user_auth_social_network.test.js

@@ -95,4 +95,42 @@ describe('DELETE social registration', () => {
       expect(user.auth.goodl).to.be.undefined;
     });
   });
+
+  context('Apple', () => {
+    it('fails if user does not have an alternative registration method', async () => {
+      await user.update({
+        'auth.apple.id': 'some-apple-id',
+        'auth.local': { ok: true },
+      });
+      await expect(user.del('/user/auth/social/apple')).to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('cantDetachSocial'),
+      });
+    });
+
+    it('succeeds if user has a local registration', async () => {
+      await user.update({
+        'auth.apple.id': 'some-apple-id',
+      });
+
+      const response = await user.del('/user/auth/social/apple');
+      expect(response).to.eql({});
+      await user.sync();
+      expect(user.auth.apple).to.be.undefined;
+    });
+
+    it('succeeds if user has a facebook registration', async () => {
+      await user.update({
+        'auth.apple.id': 'some-apple-id',
+        'auth.facebook.id': 'some-facebook-id',
+        'auth.local': { ok: true },
+      });
+
+      const response = await user.del('/user/auth/social/apple');
+      expect(response).to.eql({});
+      await user.sync();
+      expect(user.auth.goodl).to.be.undefined;
+    });
+  });
 });

test/api/v3/integration/user/auth/GET-user_auth_apple.test.js

@@ -0,0 +1,50 @@
+import {
+  generateUser,
+  requester,
+  getProperty,
+} from '../../../../../helpers/api-integration/v3';
+import * as appleAuth from '../../../../../../website/server/libs/auth/apple';
+
+describe('GET /user/auth/apple', () => {
+  let api;
+  let user;
+  const appleEndpoint = '/user/auth/apple';
+
+  before(async () => {
+    const expectedResult = { id: 'appleId', name: 'an apple user' };
+    sandbox.stub(appleAuth, 'appleProfile').returns(Promise.resolve(expectedResult));
+  });
+
+  beforeEach(async () => {
+    api = requester();
+    user = await generateUser();
+  });
+
+  it('registers a new user', async () => {
+    const response = await api.get(appleEndpoint);
+
+    expect(response.apiToken).to.exist;
+    expect(response.id).to.exist;
+    expect(response.newUser).to.be.true;
+    await expect(getProperty('users', response.id, 'auth.apple.id')).to.eventually.equal('appleId');
+    await expect(getProperty('users', response.id, 'profile.name')).to.eventually.equal('an apple user');
+  });
+
+  it('logs an existing user in', async () => {
+    const registerResponse = await api.get(appleEndpoint);
+
+    const response = await api.get(appleEndpoint);
+
+    expect(response.apiToken).to.eql(registerResponse.apiToken);
+    expect(response.id).to.eql(registerResponse.id);
+    expect(response.newUser).to.be.false;
+  });
+
+  it('add social auth to an existing user', async () => {
+    const response = await user.get(appleEndpoint);
+
+    expect(response.apiToken).to.exist;
+    expect(response.id).to.exist;
+    expect(response.newUser).to.be.false;
+  });
+});

test/api/v3/integration/user/auth/POST-register_local.test.js

@@ -492,6 +492,74 @@ describe('POST /user/auth/local/register', () => {
     });
   });
 
+  context('attach to google user', () => {
+    let user;
+    const email = 'some@email-google.net';
+    const username = 'some-username-google';
+    const password = 'some-password';
+    beforeEach(async () => {
+      user = await generateUser();
+    });
+    it('checks onlySocialAttachLocal', async () => {
+      await expect(user.post('/user/auth/local/register', {
+        email,
+        username,
+        password,
+        confirmPassword: password,
+      })).to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('onlySocialAttachLocal'),
+      });
+    });
+    it('succeeds', async () => {
+      await user.update({ 'auth.google.id': 'some-google-id', 'auth.local': { ok: true } });
+      await user.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword: password,
+      });
+      await user.sync();
+      expect(user.auth.local.username).to.eql(username);
+      expect(user.auth.local.email).to.eql(email);
+    });
+  });
+
+  context('attach to apple user', () => {
+    let user;
+    const email = 'some@email-apple.net';
+    const username = 'some-username-apple';
+    const password = 'some-password';
+    beforeEach(async () => {
+      user = await generateUser();
+    });
+    it('checks onlySocialAttachLocal', async () => {
+      await expect(user.post('/user/auth/local/register', {
+        email,
+        username,
+        password,
+        confirmPassword: password,
+      })).to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('onlySocialAttachLocal'),
+      });
+    });
+    it('succeeds', async () => {
+      await user.update({ 'auth.apple.id': 'some-apple-id', 'auth.local': { ok: true } });
+      await user.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword: password,
+      });
+      await user.sync();
+      expect(user.auth.local.username).to.eql(username);
+      expect(user.auth.local.email).to.eql(email);
+    });
+  });
+
   context('login is already taken', () => {
     let username; let email; let
       api;

test/api/v3/integration/user/auth/POST-user_auth_social.test.js

@@ -51,6 +51,7 @@ describe('POST /user/auth/social', () => {
 
       await expect(getProperty('users', response.id, 'profile.name')).to.eventually.equal('a facebook user');
       await expect(getProperty('users', response.id, 'auth.local.lowerCaseUsername')).to.exist;
+      await expect(getProperty('users', response.id, 'auth.facebook.id')).to.eventually.equal(facebookId);
     });
 
     it('logs an existing user in', async () => {
@@ -106,6 +107,7 @@ describe('POST /user/auth/social', () => {
       expect(response.apiToken).to.exist;
       expect(response.id).to.exist;
       expect(response.newUser).to.be.true;
+      await expect(getProperty('users', response.id, 'auth.google.id')).to.eventually.equal(googleId);
       await expect(getProperty('users', response.id, 'profile.name')).to.eventually.equal('a google user');
     });
 

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

@@ -0,0 +1,65 @@
+import {
+  requester,
+  translate,
+} from '../../../helpers/api-integration/v4';
+import i18n from '../../../../website/common/script/i18n';
+
+describe('GET /faq', () => {
+  describe('language parameter', () => {
+    it('returns faq (and does not require authentication)', async () => {
+      const res = await requester().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'));
+    });
+
+    it('returns faq not in English', async () => {
+      const res = await requester().get('/faq?language=de');
+      expect(res).to.have.nested.property('stillNeedHelp.ios');
+      expect(res.stillNeedHelp.ios).to.equal(i18n.t('iosFaqStillNeedHelp', 'de'));
+    });
+
+    it('falls back to English if the desired language is not found', async () => {
+      const res = await requester().get('/faq?language=wrong');
+      expect(res).to.have.nested.property('stillNeedHelp.ios');
+      expect(res.stillNeedHelp.ios).to.equal(translate('iosFaqStillNeedHelp'));
+    });
+  });
+
+  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({
+        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)
+        .to.eventually.be.rejected.and.eql({
+          code: 400,
+          error: 'BadRequest',
+          message: i18n.t('invalidReqParams'),
+        });
+    });
+    it('falls back to "web" description if there is no description for specified platform', async () => {
+      const res = await requester().get('/faq?platform=android');
+      expect(res).to.have.property('stillNeedHelp');
+      expect(res.stillNeedHelp).to.eql({ web: translate('webFaqStillNeedHelp') });
+
+      expect(res).to.have.property('questions');
+      expect(res.questions[0]).to.eql({
+        question: translate('faqQuestion0'),
+        android: translate('androidFaqAnswer0'),
+      });
+    });
+  });
+});

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

@@ -457,6 +457,74 @@ describe('POST /user/auth/local/register', () => {
     });
   });
 
+  context('attach to google user', () => {
+    let user;
+    const email = 'some-google@email.net';
+    const username = 'some-username-google';
+    const password = 'some-password';
+    beforeEach(async () => {
+      user = await generateUser();
+    });
+    it('checks onlySocialAttachLocal', async () => {
+      await expect(user.post('/user/auth/local/register', {
+        email,
+        username,
+        password,
+        confirmPassword: password,
+      })).to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('onlySocialAttachLocal'),
+      });
+    });
+    it('succeeds', async () => {
+      await user.update({ 'auth.google.id': 'some-google-id', 'auth.local': { ok: true } });
+      await user.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword: password,
+      });
+      await user.sync();
+      expect(user.auth.local.username).to.eql(username);
+      expect(user.auth.local.email).to.eql(email);
+    });
+  });
+
+  context('attach to apple user', () => {
+    let user;
+    const email = 'some-apple@email.net';
+    const username = 'some-username-apple';
+    const password = 'some-password';
+    beforeEach(async () => {
+      user = await generateUser();
+    });
+    it('checks onlySocialAttachLocal', async () => {
+      await expect(user.post('/user/auth/local/register', {
+        email,
+        username,
+        password,
+        confirmPassword: password,
+      })).to.eventually.be.rejected.and.eql({
+        code: 401,
+        error: 'NotAuthorized',
+        message: t('onlySocialAttachLocal'),
+      });
+    });
+    it('succeeds', async () => {
+      await user.update({ 'auth.apple.id': 'some-apple-id', 'auth.local': { ok: true } });
+      await user.post('/user/auth/local/register', {
+        username,
+        email,
+        password,
+        confirmPassword: password,
+      });
+      await user.sync();
+      expect(user.auth.local.username).to.eql(username);
+      expect(user.auth.local.email).to.eql(email);
+    });
+  });
+
   context('login is already taken', () => {
     let username; let email; let
       api;

website/client/package.json

@@ -13,25 +13,25 @@
     "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js"
   },
   "dependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-router": "^4.2.3",
-    "@vue/cli-plugin-unit-mocha": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addon-notes": "^5.3.17",
-    "@storybook/vue": "^5.3.17",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-router": "^4.3.1",
+    "@vue/cli-plugin-unit-mocha": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
+    "@storybook/addon-links": "^5.3.18",
+    "@storybook/addon-notes": "^5.3.18",
+    "@storybook/vue": "^5.3.18",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^5.10.0",
+    "amplitude-js": "^5.11.0",
     "axios": "^0.19.2",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.9.0",
+    "bootstrap-vue": "^2.11.0",
     "chai": "^4.1.2",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -40,7 +40,7 @@
     "hellojs": "^1.18.4",
     "inspectpack": "^4.4.0",
     "intro.js": "^2.9.3",
-    "jquery": "^3.4.1",
+    "jquery": "^3.5.0",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "nconf": "^0.10.0",

website/client/public/static/README.md

@@ -0,0 +1,13 @@
+The files in the following subfolders:
+
+- audio
+- emails
+- icons
+- merch
+- presskit
+
+are not processed by Webpack so their filenames don't get hashed, but given that they almost never change, they're still cached for 1 week.
+
+In case one of the files needs to be updated the filename should be changed if possible.
+
+For more information see `website/server/middlewares/static.js`.

website/client/src/app.vue

@@ -20,10 +20,6 @@
           </svg>
           <!-- eslint-enable max-len -->
         </div>
-        <div class="col-12 text-center">
-          <h2>{{ $t('tipTitle', {tipNumber: currentTipNumber}) }}</h2>
-          <p>{{ currentTip }}</p>
-        </div>
       </div>
     </div>
     <div
@@ -297,7 +293,6 @@ export default {
       audioSuffix: null,
 
       loading: true,
-      currentTipNumber: 0,
       bannerHidden: false,
     };
   },
@@ -310,15 +305,6 @@ export default {
     castingSpell () {
       return this.$store.state.spellOptions.castingSpell;
     },
-    currentTip () {
-      const numberOfTips = 35 + 1;
-      const min = 1;
-      const randomNumber = Math.random() * (numberOfTips - min) + min;
-      const tipNumber = Math.floor(randomNumber);
-      this.currentTipNumber = tipNumber; // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len
-
-      return this.$t(`tip${tipNumber}`);
-    },
     showRestingBanner () {
       return !this.bannerHidden && this.user && this.user.preferences.sleep;
     },

website/client/src/assets/css/sprites.css

@@ -4,6 +4,12 @@
   height: 219px;
 }
 
+.Pet_HatchingPotion_Dessert {
+  background: url("~@/assets/images/animated/Pet_HatchingPotion_Dessert.gif") no-repeat;
+  width: 68px;
+  height: 68px;
+}
+
 .Pet_HatchingPotion_Veggie {
   background: url("~@/assets/images/animated/Pet_HatchingPotion_Veggie.gif") no-repeat;
   width: 68px;

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

@@ -1,27 +1,51 @@
-.promo_armoire_backgrounds_202003 {
+.promo_april_fools_2020 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -445px -184px;
   width: 423px;
   height: 147px;
 }
-.promo_egg_quest {
+.promo_armoire_backgrounds_202004 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px -500px;
+  width: 423px;
+  height: 147px;
+}
+.promo_egg_quest {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -355px -648px;
   width: 354px;
   height: 147px;
 }
 .promo_mystery_202004 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -355px -500px;
+  background-position: -875px 0px;
   width: 282px;
   height: 147px;
 }
+.promo_pastel_skin_hair {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -648px;
+  width: 354px;
+  height: 147px;
+}
+.customize-option.promo_pastel_skin_hair {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -25px -663px;
+  width: 60px;
+  height: 60px;
+}
 .promo_seasonal_shop_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -638px -500px;
+  background-position: -875px -299px;
   width: 162px;
   height: 138px;
 }
+.promo_shiny_seeds {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -424px -500px;
+  width: 360px;
+  height: 147px;
+}
 .promo_spring_2019 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px -337px;
@@ -42,7 +66,7 @@
 }
 .promo_take_this {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -151px -648px;
+  background-position: -1026px -148px;
   width: 96px;
   height: 69px;
 }
@@ -54,7 +78,7 @@
 }
 .scene_meditation {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -648px;
+  background-position: -875px -148px;
   width: 150px;
   height: 150px;
 }

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

@@ -478,739 +478,739 @@
   width: 60px;
   height: 60px;
 }
-.background_apple_picking {
+.background_animal_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_aquarium {
+.background_apple_picking {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_archaeological_dig {
+.background_aquarium {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_archery_range {
+.background_archaeological_dig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_at_the_docks {
+.background_archery_range {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_aurora {
+.background_at_the_docks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_autumn_flower_garden {
+.background_aurora {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -1184px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_autumn_flower_garden {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -735px -1199px;
-  width: 60px;
-  height: 60px;
-}
-.background_autumn_forest {
+.background_autumn_flower_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_avalanche {
+.customize-option.background_autumn_flower_garden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -877px -1199px;
+  width: 60px;
+  height: 60px;
+}
+.background_autumn_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_back_alley {
+.background_avalanche {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_back_of_giant_beast {
+.background_back_alley {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_bamboo_forest {
+.background_back_of_giant_beast {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px 0px;
   width: 141px;
   height: 147px;
 }
-.background_bayou {
+.background_bamboo_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -148px;
   width: 141px;
   height: 147px;
 }
-.background_beach {
+.background_bayou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -296px;
   width: 141px;
   height: 147px;
 }
-.background_beehive {
+.background_beach {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_bell_tower {
+.background_beehive {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_beside_well {
+.background_bell_tower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_birch_forest {
+.background_beside_well {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_birthday_party {
+.background_birch_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_blacksmithy {
+.background_birthday_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_blizzard {
+.background_blacksmithy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
-.background_blossoming_desert {
+.background_blizzard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_blue {
+.background_blossoming_desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_bridge {
+.background_blue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_bug_covered_log {
+.background_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_buried_treasure {
+.background_bug_covered_log {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_butterfly_garden {
+.background_buried_treasure {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_champions_colosseum {
+.background_butterfly_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cherry_trees {
+.background_champions_colosseum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_chessboard_land {
+.background_cherry_trees {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_clouds {
+.background_chessboard_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_coral_reef {
+.background_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_cornfields {
+.background_coral_reef {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_barn {
+.background_cornfields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_bedroom {
+.background_cozy_barn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_library {
+.background_cozy_bedroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_creepy_castle {
+.background_cozy_library {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_crosscountry_ski_trail {
+.background_creepy_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_crystal_cave {
+.background_crosscountry_ski_trail {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_dark_deep {
+.background_crystal_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_deep_mine {
+.background_dark_deep {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_deep_sea {
+.background_deep_mine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_desert_dunes {
+.background_deep_sea {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_desert_with_snow {
+.background_desert_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_castle {
+.background_desert_with_snow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_city {
+.background_dilatory_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_ruins {
+.background_dilatory_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
-.background_distant_castle {
+.background_dilatory_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
-.background_dojo {
+.background_distant_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
-.background_drifting_raft {
+.background_dojo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_driving_a_coach {
+.background_drifting_raft {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_driving_a_sleigh {
+.background_driving_a_coach {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_duck_pond {
+.background_driving_a_sleigh {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_dungeon {
+.background_duck_pond {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_dusty_canyons {
+.background_dungeon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_elegant_balcony {
+.background_dusty_canyons {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_elegant_ballroom {
+.background_elegant_balcony {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_fairy_ring {
+.background_elegant_ballroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_fantastical_shoe_store {
+.background_fairy_ring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_farmers_market {
+.background_fantastical_shoe_store {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_farmhouse {
+.background_farmers_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_fiber_arts_room {
+.background_farmhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_field_with_colored_eggs {
+.background_fiber_arts_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_floating_islands {
+.background_field_with_colored_eggs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_floral_meadow {
+.background_floating_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_flower_market {
+.background_floral_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_flower_market {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1019px -903px;
-  width: 60px;
-  height: 60px;
-}
-.background_flying_in_a_thunderstorm {
+.background_flower_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_a_field_of_wildflowers {
+.customize-option.background_flower_market {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -877px -903px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_in_a_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_flying_over_a_field_of_wildflowers {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -735px -903px;
-  width: 60px;
-  height: 60px;
-}
-.background_flying_over_an_ancient_forest {
+.background_flying_over_a_field_of_wildflowers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_icy_steppes {
+.customize-option.background_flying_over_a_field_of_wildflowers {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -593px -903px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_over_an_ancient_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_rocky_canyon {
+.background_flying_over_icy_steppes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_snowy_mountains {
+.background_flying_over_rocky_canyon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_tropical_islands {
+.background_flying_over_snowy_mountains {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_foggy_moor {
+.background_flying_over_tropical_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_forest {
+.background_foggy_moor {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_frigid_peak {
+.background_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_frosty_forest {
+.background_frigid_peak {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_frozen_lake {
+.background_frosty_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_garden_shed {
+.background_frozen_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_gazebo {
+.background_garden_shed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_birdhouse {
+.background_gazebo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_book {
+.background_giant_birdhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_dandelions {
+.background_giant_book {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_florals {
+.background_giant_dandelions {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_seashell {
+.background_giant_florals {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_wave {
+.background_giant_seashell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_glowing_mushroom_cave {
+.background_giant_wave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_gorgeous_greenhouse {
+.background_glowing_mushroom_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_grand_staircase {
+.background_gorgeous_greenhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_graveyard {
+.background_grand_staircase {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_green {
+.background_graveyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_guardian_statues {
+.background_green {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_gumdrop_land {
+.background_guardian_statues {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_habit_city_streets {
+.background_gumdrop_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_halflings_house {
+.background_habit_city_streets {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_hall_of_heroes {
+.background_halflings_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_feast {
+.background_hall_of_heroes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_fields {
+.background_harvest_feast {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_moon {
+.background_harvest_fields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
-.background_haunted_house {
+.background_harvest_moon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_market {
+.background_haunted_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_wreath {
+.background_heather_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
-.background_ice_cave {
+.background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
-.background_in_a_classroom {
+.background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px 0px;
   width: 141px;

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

@@ -1,48 +1,72 @@
 .quest_TEMPLATE_FOR_MISSING_IMAGE {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -719px -1546px;
+  background-position: -502px -1519px;
   width: 221px;
   height: 39px;
 }
+.quest_dolphin {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -220px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dustbunnies {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1320px -660px;
+  width: 219px;
+  height: 219px;
+}
+.quest_egg {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1762px -362px;
+  width: 165px;
+  height: 207px;
+}
+.quest_evilsanta {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1762px -1023px;
+  width: 118px;
+  height: 131px;
+}
 .quest_evilsanta2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -443px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_falcon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1323px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_ferret {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -663px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_frog {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px 0px;
-  width: 221px;
-  height: 213px;
-}
-.quest_ghost_stag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
   background-position: -220px -232px;
   width: 219px;
   height: 219px;
 }
-.quest_goldenknight1 {
+.quest_falcon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
   background-position: -440px -232px;
   width: 219px;
   height: 219px;
 }
+.quest_ferret {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_frog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1540px 0px;
+  width: 221px;
+  height: 213px;
+}
+.quest_ghost_stag {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -452px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -220px -452px;
+  width: 219px;
+  height: 219px;
+}
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -217px -1546px;
+  background-position: 0px -1519px;
   width: 250px;
   height: 150px;
 }
@@ -54,343 +78,319 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1314px -1332px;
+  background-position: -443px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -452px;
+  background-position: -880px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -452px;
+  background-position: -880px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1332px;
+  background-position: 0px -1332px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -883px 0px;
+  background-position: -220px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -883px -220px;
+  background-position: -440px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -883px -440px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1097px -1332px;
+  background-position: -1311px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -672px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -672px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -672px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px -688px;
+  background-position: -1762px -570px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1103px 0px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1103px -220px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1103px -440px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px -214px;
+  background-position: -1540px -1082px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -892px;
+  background-position: -880px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -892px;
+  background-position: -1100px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -892px;
+  background-position: -1320px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -892px;
+  background-position: -1320px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -892px;
+  background-position: -1320px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px -1082px;
+  background-position: -1540px -865px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1332px;
+  background-position: -220px -1332px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1323px -220px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px -865px;
+  background-position: -1540px -648px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px -353px;
+  background-position: -1762px -178px;
   width: 190px;
   height: 183px;
 }
 .quest_pterodactyl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1323px -880px;
+  background-position: -660px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_rat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1112px;
+  background-position: -880px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_robot {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1112px;
+  background-position: -1100px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_rock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px -431px;
+  background-position: -1540px -214px;
   width: 216px;
   height: 216px;
 }
 .quest_rooster {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px 0px;
+  background-position: -1528px -1332px;
   width: 213px;
   height: 174px;
 }
 .quest_ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1112px;
+  background-position: -440px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_sabretooth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -1112px;
+  background-position: -220px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_seaserpent {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -1112px;
+  background-position: -1320px -880px;
   width: 219px;
   height: 219px;
 }
 .quest_sheep {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -1112px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1112px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_slime {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1323px -440px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_sloth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1323px 0px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_snail {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1332px;
+  background-position: -1320px -1112px;
   width: 219px;
   height: 213px;
 }
 .quest_snake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -663px -1332px;
+  background-position: -660px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_spider {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -468px -1546px;
+  background-position: -251px -1519px;
   width: 250px;
   height: 150px;
 }
 .quest_squirrel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -892px;
+  background-position: -880px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px -839px;
+  background-position: -1762px -872px;
   width: 150px;
   height: 150px;
 }
 .quest_stoikalmCalamity2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1103px -660px;
+  background-position: -440px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -672px;
+  background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_taskwoodsTerror1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px -537px;
+  background-position: -1762px -721px;
   width: 150px;
   height: 150px;
 }
 .quest_taskwoodsTerror2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1543px -648px;
+  background-position: -1540px -431px;
   width: 216px;
   height: 216px;
 }
 .quest_taskwoodsTerror3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -672px;
+  background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_treeling {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1531px -1332px;
+  background-position: -1094px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_trex {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1765px -175px;
+  background-position: -1762px 0px;
   width: 204px;
   height: 177px;
 }
 .quest_trex_undead {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1546px;
+  background-position: -877px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_triceratops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -452px;
+  background-position: -440px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_turtle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_unicorn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -663px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_velociraptor {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px 0px;
-  width: 222px;
-  height: 225px;
-}
-.quest_vice1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_vice2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -232px;
+  background-position: -660px -452px;
   width: 219px;
   height: 219px;
 }

website/client/src/assets/scss/icon.scss

@@ -53,8 +53,8 @@
 
 .close-icon {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 1rem;
+  right: 1rem;
   cursor: pointer;
 
   & svg path {

website/client/src/assets/svg/apple.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="170px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" version="1.1" height="170px">
+ <path d="m150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929 0.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002 0.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-0.9 2.61-1.85 5.11-2.86 7.51zm-31.26-123.01c0 8.1021-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375-0.119-0.972-0.188-1.995-0.188-3.07 0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.3113 11.45-8.597 4.62-2.2516 8.99-3.4968 13.1-3.71 0.12 1.0831 0.17 2.1663 0.17 3.2409z" fill="#FFF"/>
+</svg>

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

@@ -0,0 +1,55 @@
+<?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>

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

@@ -7,20 +7,31 @@
   >
     <div class="content text-center">
       <span
+        v-once
         class="close-icon svg-icon inline icon-10"
         @click="close()"
         v-html="icons.close"
       ></span>
-      <h2>{{ $t('congratulations') }}</h2>
+      <h2 v-once>
+        {{ $t('onboardingComplete') }}
+      </h2>
       <img
         class="onboarding-complete-banner d-block"
         src="~@/assets/images/onboarding-complete-banner@2x.png"
       >
       <p
+        v-once
         class="onboarding-complete-text"
         v-html="$t('onboardingCompleteDesc')"
       ></p>
+      <p
+        v-once
+        class="onboarding-complete-text-small"
+      >
+        {{ $t('onboardingCompleteDescSmall') }}
+      </p>
       <button
+        v-once
         class="btn btn-primary"
         @click="closeWithAction()"
       >
@@ -37,7 +48,7 @@
   }
 
   .modal-body {
-    padding-top: 1em;
+    padding-top: 1rem;
     padding-bottom: 0;
   }
 
@@ -58,7 +69,7 @@ h2 {
 
 .content {
   padding: 0 8px;
-  margin-top: 18px;
+  margin-top: 1rem;
 }
 
 .onboarding-complete-banner {
@@ -68,13 +79,21 @@ h2 {
 }
 
 .onboarding-complete-text {
-  margin-bottom: 24px;
+  margin-bottom: 1rem;
 }
 
 .onboarding-complete-text ::v-deep .gold-amount {
   color: $yellow-5;
 }
 
+.onboarding-complete-text-small {
+  margin-bottom: 1.5rem;
+  color: $gray-100;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 1.33;
+}
+
 button {
   margin-bottom: 24px;
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div class="form">
     <div class="form-group row text-center">
-      <div class="col-12 col-md-6">
+      <div class="col-12">
         <div
           class="btn btn-secondary social-button"
           @click="socialAuth('facebook')"
@@ -15,7 +15,9 @@
             : $t('loginWithSocial', {social: 'Facebook'}) }}</span>
         </div>
       </div>
-      <div class="col-12 col-md-6">
+    </div>
+    <div class="form-group row text-center">
+      <div class="col-12">
         <div
           class="btn btn-secondary social-button"
           @click="socialAuth('google')"
@@ -30,6 +32,22 @@
         </div>
       </div>
     </div>
+    <div class="form-group row text-center">
+      <div class="col-12">
+        <div
+          class="btn btn-secondary social-button"
+          @click="socialAuth('apple')"
+        >
+          <div
+            class="svg-icon social-icon apple-icon"
+            v-html="icons.appleIcon"
+          ></div>
+          <span>{{ registering
+            ? $t('signUpWithSocial', {social: 'Apple'})
+            : $t('loginWithSocial', {social: 'Apple'}) }}</span>
+        </div>
+      </div>
+    </div>
     <div
       v-if="registering"
       class="form-group"
@@ -199,7 +217,11 @@
       height: 18px;
       display: inline-block;
       vertical-align: top;
-      margin-top: .2em;
+      margin-top: .1em;
+    }
+
+    .apple-icon {
+      margin-top: -1px;
     }
 
     small.form-text {
@@ -219,10 +241,11 @@
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
-import { setUpAxios } from '@/libs/auth';
+import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
+import appleIcon from '@/assets/svg/apple_black.svg';
 
 export default {
   name: 'AuthForm',
@@ -239,6 +262,7 @@ export default {
     data.icons = Object.freeze({
       facebookIcon: facebookSquareIcon,
       googleIcon,
+      appleIcon,
     });
 
     return data;
@@ -307,27 +331,31 @@ export default {
     }, 500),
     // @TODO: Abstract hello in to action or lib
     async socialAuth (network) {
-      try {
-        await hello(network).logout();
-      } catch (e) {} // eslint-disable-line
+      if (network === 'apple') {
+        window.location.href = buildAppleAuthUrl();
+      } else {
+        try {
+          await hello(network).logout();
+        } catch (e) {} // eslint-disable-line
 
-      try {
-        const redirectUrl = `${window.location.protocol}//${window.location.host}`;
-        const auth = await hello(network).login({
-          scope: 'email',
-          redirect_uri: redirectUrl, // eslint-disable-line camelcase
-        });
+        try {
+          const redirectUrl = `${window.location.protocol}//${window.location.host}`;
+          const auth = await hello(network).login({
+            scope: 'email',
+            redirect_uri: redirectUrl, // eslint-disable-line camelcase
+          });
 
-        await this.$store.dispatch('auth:socialAuth', {
-          auth,
-        });
+          await this.$store.dispatch('auth:socialAuth', {
+            auth,
+          });
 
-        await this.finishAuth();
-      } catch (err) {
-        console.error(err); // eslint-disable-line no-console
-        // logout the user
-        await hello(network).logout();
-        this.socialAuth(network); // login again
+          await this.finishAuth();
+        } catch (err) {
+          console.error(err); // eslint-disable-line no-console
+          // logout the user
+          await hello(network).logout();
+          this.socialAuth(network); // login again
+        }
       }
     },
     async register () {

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

@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="form-group row text-center">
-        <div class="col-12 col-md-6">
+        <div class="col-12 col-md-12">
           <div
             class="btn btn-secondary social-button"
             @click="socialAuth('facebook')"
@@ -54,7 +54,9 @@
             </div>
           </div>
         </div>
-        <div class="col-12 col-md-6">
+      </div>
+      <div class="form-group row text-center">
+        <div class="col-12 col-md-12">
           <div
             class="btn btn-secondary social-button"
             @click="socialAuth('google')"
@@ -73,6 +75,29 @@
           </div>
         </div>
       </div>
+      <div class="form-group row text-center">
+        <div class="col-12 col-md-12">
+          <div
+            class="btn btn-secondary social-button"
+            @click="socialAuth('apple')"
+          >
+            <div
+              class="svg-icon social-icon"
+              v-html="icons.appleIcon"
+            ></div>
+            <div
+              class="text"
+            >
+              {{ registering
+                ? $t('signUpWithSocial', {social: 'Apple'})
+                : $t('loginWithSocial', {social: 'Apple'}) }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="strike">
+        <span>{{ $t('or') }}</span>
+      </div>
       <div
         v-if="registering"
         class="form-group"
@@ -496,12 +521,13 @@
     }
 
     .social-icon {
+      margin-left: 1em;
       margin-right: 1em;
       width: 18px;
       height: 18px;
       display: inline-block;
       vertical-align: top;
-      margin-top: .2em;
+      margin-top: .1em;
     }
   }
 
@@ -581,6 +607,42 @@
   .exclamation {
     width: 2px;
   }
+
+  .strike {
+    display: block;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
+  .strike > span {
+    position: relative;
+    display: inline-block;
+    line-height: 1.14;
+    color: #fff;
+  }
+
+  .strike > span:before,
+  .strike > span:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 9999px;
+    height: 1px;
+    background: #fff;
+  }
+
+  .strike > span:before {
+    right: 100%;
+    margin-right: 15px;
+  }
+
+  .strike > span:after {
+    left: 100%;
+    margin-left: 15px;
+  }
 </style>
 
 <script>
@@ -589,6 +651,7 @@ import hello from 'hellojs';
 import moment from 'moment';
 import debounce from 'lodash/debounce';
 import isEmail from 'validator/lib/isEmail';
+import { buildAppleAuthUrl } from '../../libs/auth';
 
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import exclamation from '@/assets/svg/exclamation.svg';
@@ -596,6 +659,7 @@ import gryphon from '@/assets/svg/gryphon.svg';
 import habiticaIcon from '@/assets/svg/habitica-logo.svg';
 import facebookSquareIcon from '@/assets/svg/facebook-square.svg';
 import googleIcon from '@/assets/svg/google.svg';
+import appleIcon from '@/assets/svg/apple_black.svg';
 
 export default {
   data () {
@@ -618,6 +682,7 @@ export default {
       habiticaIcon,
       facebookIcon: facebookSquareIcon,
       googleIcon,
+      appleIcon,
     });
 
     return data;
@@ -799,35 +864,39 @@ export default {
     },
     // @TODO: Abstract hello in to action or lib
     async socialAuth (network) {
-      try {
-        await hello(network).logout();
-      } catch (e) {} // eslint-disable-line
-
-      const redirectUrl = `${window.location.protocol}//${window.location.host}`;
-      const auth = await hello(network).login({
-        scope: 'email',
-        // explicitly pass the redirect url or it might redirect to /home
-        redirect_uri: redirectUrl, // eslint-disable-line camelcase
-      });
-
-      await this.$store.dispatch('auth:socialAuth', {
-        auth,
-      });
-
-      let redirectTo;
-
-      if (this.$route.query.redirectTo) {
-        redirectTo = this.$route.query.redirectTo;
+      if (network === 'apple') {
+        window.location.href = buildAppleAuthUrl();
       } else {
-        redirectTo = '/';
-      }
+        try {
+          await hello(network).logout();
+        } catch (e) {} // eslint-disable-line
 
-      // @TODO do not reload entire page
-      // problem is that app.vue created hook should be called again
-      // after user is logged in / just signed up
-      // ALSO it's the only way to make sure language data
-      // is reloaded and correct for the logged in user
-      window.location.href = redirectTo;
+        const redirectUrl = `${window.location.protocol}//${window.location.host}`;
+        const auth = await hello(network).login({
+          scope: 'email',
+          // explicitly pass the redirect url or it might redirect to /home
+          redirect_uri: redirectUrl, // eslint-disable-line camelcase
+        });
+
+        await this.$store.dispatch('auth:socialAuth', {
+          auth,
+        });
+
+        let redirectTo;
+
+        if (this.$route.query.redirectTo) {
+          redirectTo = this.$route.query.redirectTo;
+        } else {
+          redirectTo = '/';
+        }
+
+        // @TODO do not reload entire page
+        // problem is that app.vue created hook should be called again
+        // after user is logged in / just signed up
+        // ALSO it's the only way to make sure language data
+        // is reloaded and correct for the logged in user
+        window.location.href = redirectTo;
+      }
     },
     handleSubmit () {
       if (this.registering) {

website/client/src/components/header/notifications/onboardingComplete.vue

@@ -15,13 +15,17 @@
         class="onboarding-complete-banner d-block"
         src="~@/assets/images/onboarding-complete-banner@2x.png"
       >
-      <h3>{{ $t('congratulations') }}</h3>
+      <h3 v-once>
+        {{ $t('onboardingComplete') }}
+      </h3>
       <p
+        v-once
         class="onboarding-complete-text"
         v-html="$t('onboardingCompleteDesc')"
       ></p>
       <div class="notifications-buttons">
         <div
+          v-once
           class="btn btn-small btn-primary btn-block"
         >
           {{ $t('viewAchievements') }}

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

@@ -10,20 +10,25 @@
       v-html="icons.down"
     ></div>
     <div
+      v-once
       class="svg-icon onboarding-guide-banner"
       v-html="icons.onboardingGuideBanner"
     ></div>
-    <h3 class="getting-started">
+    <h3
+      v-once
+      class="getting-started"
+    >
       {{ $t('gettingStarted') }}
     </h3>
     <span
+      v-once
       class="getting-started-desc"
       v-html="$t('gettingStartedDesc')"
     ></span>
     <div
       class="onboarding-progress-box d-flex flex-row justify-content-between small-text mb-2"
     >
-      <strong>Your Progress</strong>
+      <strong v-once>{{ $t('yourProgress') }}</strong>
       <span :class="{'has-progress': progress > 0}">{{ progressText }}</span>
     </div>
     <div class="onboarding-progress-bar mb-3">
@@ -48,8 +53,14 @@
           <div :class="`achievement-icon ${getAchievementIcon(achievement)}`"></div>
         </div>
         <div class="achievement-info d-flex flex-column">
-          <strong class="achievement-title">{{ achievement.title }}</strong>
-          <span class="small-text achievement-desc">{{ getAchievementText(key) }}</span>
+          <strong
+            v-once
+            class="achievement-title"
+          >{{ achievement.title }}</strong>
+          <span
+            v-once
+            class="small-text achievement-desc"
+          >{{ getAchievementText(key) }}</span>
         </div>
       </div>
     </b-collapse>

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

@@ -183,7 +183,7 @@
           </div>
         </div>
         <div
-          v-if="petGroup.key !== 'specialPets' && petGroup.key !== 'wackyPets'"
+          v-if="petGroup.key !== 'specialPets' && !(petGroup.key === 'wackyPets' && selectedSortBy !== 'sortByColor')"
           class="btn btn-flat btn-show-more"
           @click="setShowMore(petGroup.key)"
         >
@@ -790,7 +790,7 @@ export default {
       const pets = this.listAnimals(animalGroup, 'pet', hideMissing, sortBy, searchText);
 
       // Don't group special
-      if (animalGroup.key === 'specialPets' || animalGroup.key === 'wackyPets') {
+      if (animalGroup.key === 'specialPets' || (animalGroup.key === 'wackyPets' && sortBy !== 'sortByColor')) {
         return { none: pets };
       }
 

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

@@ -561,6 +561,8 @@ 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';
 
@@ -837,13 +839,17 @@ export default {
       this.text(this.$t('detachedSocial', { network: network.name }));
     },
     async socialAuth (network) {
-      const auth = await hello(network).login({ scope: 'email' });
+      if (network === 'apple') {
+        window.location.href = buildAppleAuthUrl();
+      } else {
+        const auth = await hello(network).login({ scope: 'email' });
 
-      await this.$store.dispatch('auth:socialAuth', {
-        auth,
-      });
+        await this.$store.dispatch('auth:socialAuth', {
+          auth,
+        });
 
-      window.location.href = '/';
+        window.location.href = '/';
+      }
     },
     async changeClassForUser (confirmationNeeded) {
       if (confirmationNeeded && !window.confirm(this.$t('changeClassConfirmCost'))) return;

website/client/src/components/shops/market/categoryRow.vue

@@ -11,6 +11,12 @@
       <span slot="popoverContent">
         <strong v-if="item.key === 'gem' && gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
         <h4 class="popover-content-title">{{ item.text }}</h4>
+        <div
+          v-if="item.event"
+          class="mt-2"
+        >
+          {{ limitedString }}
+        </div>
       </span>
       <template
         slot="itemBadge"
@@ -26,14 +32,15 @@
 import _filter from 'lodash/filter';
 import _sortBy from 'lodash/sortBy';
 import _map from 'lodash/map';
+import moment from 'moment';
 import { mapState } from '@/libs/store';
 import pinUtils from '@/mixins/pinUtils';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 
 import ShopItem from '../shopItem';
 import CategoryItem from './categoryItem';
 
-
 export default {
   components: {
     CategoryItem,
@@ -53,6 +60,9 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
     sortedMarketItems () {
       let result = _map(this.category.items, e => ({
         ...e,

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -82,6 +82,16 @@
     >
       <questDialogDrops :item="item" />
     </div>
+    <div
+      v-if="item.event"
+      class="limitedTime"
+    >
+      <span
+        class="svg-icon inline icon-16 clock-icon"
+        v-html="icons.clock"
+      ></span>
+      <span class="limitedString">{{ limitedString }}</span>
+    </div>
     <div
       slot="modal-footer"
       class="clearfix"
@@ -121,6 +131,9 @@
       margin: 33px auto auto;
     }
 
+    .modal-body {
+      padding-bottom: 0px;
+    }
 
     .questInfo {
       width: 70%;
@@ -208,6 +221,27 @@
       }
     }
 
+    .limitedTime {
+      height: 32px;
+      background-color: $purple-300;
+      width: calc(100% + 30px);
+      margin: 0 -15px; // the modal content has its own padding
+
+      font-size: 12px;
+      line-height: 1.33;
+      text-align: center;
+      color: $white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .limitedString {
+        height: 16px;
+        margin-left: 8px;
+      }
+    }
+
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -247,14 +281,17 @@
 </style>
 
 <script>
+import moment from 'moment';
 import { mapState } from '@/libs/store';
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 
+import svgClock from '@/assets/svg/clock.svg';
 import svgClose from '@/assets/svg/close.svg';
-import svgGold from '@/assets/svg/gold.svg';
-import svgGem from '@/assets/svg/gem.svg';
-import svgPin from '@/assets/svg/pin.svg';
 import svgExperience from '@/assets/svg/experience.svg';
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPin from '@/assets/svg/pin.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -286,12 +323,13 @@ export default {
   data () {
     return {
       icons: Object.freeze({
+        clock: svgClock,
         close: svgClose,
-        gold: svgGold,
-        gem: svgGem,
-        pin: svgPin,
         experience: svgExperience,
+        gem: svgGem,
+        gold: svgGold,
         hourglass: svgHourglasses,
+        pin: svgPin,
       }),
 
       isPinned: false,
@@ -319,6 +357,9 @@ export default {
       if (this.priceType === 'hourglasses') return this.icons.hourglass;
       return this.icons.gem;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
   },
   watch: {
     item: function itemChanged () {

website/client/src/components/shops/quests/index.vue

@@ -299,7 +299,10 @@
             <span slot="popoverContent">
               <div class="questPopover">
                 <h4 class="popover-content-title">{{ item.text }}</h4>
-                <questInfo :quest="item" />
+                <questInfo
+                  :quest="item"
+                  :popover-version="true"
+                />
               </div>
             </span>
             <template

website/client/src/components/shops/quests/questInfo.vue

@@ -1,40 +1,43 @@
 <template>
-  <div
-    class="row"
-    :class="{'small-version': smallVersion}"
-  >
+  <div>
     <div
-      v-if="quest.collect"
-      class="table-row"
+      class="row"
     >
-      <dt>{{ $t('collect') + ':' }}</dt>
-      <dd>
-        <div
-          v-for="(collect, key) of quest.collect"
-          :key="key"
-        >
-          <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
-        </div>
-      </dd>
+      <div
+        v-if="quest.collect"
+        class="table-row"
+      >
+        <dt>{{ $t('collect') + ':' }}</dt>
+        <dd>
+          <div
+            v-for="(collect, key) of quest.collect"
+            :key="key"
+          >
+            <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
+          </div>
+        </dd>
+      </div>
+      <div
+        v-if="quest.boss"
+        class="table-row"
+      >
+        <dt>{{ $t('bossHP') + ':' }}</dt>
+        <dd>{{ quest.boss.hp }}</dd>
+      </div>
+      <div class="table-row">
+        <dt>{{ $t('difficulty') + ':' }}</dt>
+        <dd>
+          <div
+            v-for="star of stars()"
+            :key="star"
+            class="svg-icon inline icon-16"
+            v-html="icons[star]"
+          ></div>
+        </dd>
+      </div>
     </div>
-    <div
-      v-if="quest.boss"
-      class="table-row"
-    >
-      <dt>{{ $t('bossHP') + ':' }}</dt>
-      <dd>{{ quest.boss.hp }}</dd>
-    </div>
-    <div class="table-row">
-      <dt>{{ $t('difficulty') + ':' }}</dt>
-      <dd>
-        <div
-          v-for="star of stars()"
-          :key="star"
-          class="svg-icon inline"
-          :class="smallVersion ? 'icon-12' : 'icon-16'"
-          v-html="icons[star]"
-        ></div>
-      </dd>
+    <div v-if="quest.event && popoverVersion">
+      {{ limitedString }}
     </div>
   </div>
 </template>
@@ -115,16 +118,20 @@ dt {
 </style>
 
 <script>
+import moment from 'moment';
+
 import svgStar from '@/assets/svg/difficulty-star.svg';
 import svgStarHalf from '@/assets/svg/difficulty-star-half.svg';
 import svgStarEmpty from '@/assets/svg/difficulty-star-empty.svg';
 
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
+
 export default {
   props: {
     quest: {
       type: Object,
     },
-    smallVersion: {
+    popoverVersion: {
       type: Boolean,
       default: false,
     },
@@ -146,6 +153,9 @@ export default {
 
       return 1;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
   },
   methods: {
     stars () {

website/client/src/components/shops/shopItem.vue

@@ -104,7 +104,7 @@
         </div>
         <div
           v-if="item.event"
-          class="mt-4"
+          :class="item.purchaseType === 'gear' ? 'mt-4' : 'mt-2'"
         >
           {{ limitedString }}
         </div>