Fix issues with Bootstrap Vue and Boostrap upgrades (#9452)

* start to fix modals

* fixed cards paddings

* fix notifications not being marked as read

* add tests for reading a notification

* fixed indentation and added tests for reading multiple notifications

* register from home page using enter key

test/api/v3/integration/notifications/POST-notifications_notificationId_read.test.js

@@ -13,14 +13,44 @@ describe('POST /notifications/:notificationId/read', () => {
 
   it('errors when notification is not found', async () => {
     let dummyId = generateUUID();
-    await expect(user.post(`/notifications/${dummyId}/read`))
+
-      .to.eventually.be.rejected.and.eql({
+    await expect(user.post(`/notifications/${dummyId}/read`)).to.eventually.be.rejected.and.eql({
-        code: 404,
+      code: 404,
-        error: 'NotFound',
+      error: 'NotFound',
-        message: t('messageNotificationNotFound'),
+      message: t('messageNotificationNotFound'),
-      });
+    });
   });
 
-  xit('removes a notification', async () => {
+  it('removes a notification', async () => {
+    expect(user.notifications.length).to.equal(0);
+
+    const id = generateUUID();
+    const id2 = generateUUID();
+
+    await user.update({
+      notifications: [{
+        id,
+        type: 'DROPS_ENABLED',
+        data: {},
+      }, {
+        id: id2,
+        type: 'LOGIN_INCENTIVE',
+        data: {},
+      }],
+    });
+
+    await user.sync();
+    expect(user.notifications.length).to.equal(2);
+
+    const res = await user.post(`/notifications/${id}/read`);
+    expect(res).to.deep.equal([{
+      id: id2,
+      type: 'LOGIN_INCENTIVE',
+      data: {},
+    }]);
+
+    await user.sync();
+    expect(user.notifications.length).to.equal(1);
+    expect(user.notifications[0].id).to.equal(id2);
   });
 });

test/api/v3/integration/notifications/POST-notifications_read.test.js

@@ -0,0 +1,66 @@
+import {
+  generateUser,
+  translate as t,
+} from '../../../../helpers/api-v3-integration.helper';
+import { v4 as generateUUID } from 'uuid';
+
+describe('POST /notifications/:notificationId/read', () => {
+  let user;
+
+  before(async () => {
+    user = await generateUser();
+  });
+
+  it('errors when notification is not found', async () => {
+    let dummyId = generateUUID();
+
+    await expect(user.post('/notifications/read', {
+      notificationIds: [dummyId],
+    })).to.eventually.be.rejected.and.eql({
+      code: 404,
+      error: 'NotFound',
+      message: t('messageNotificationNotFound'),
+    });
+  });
+
+  it('removes multiple notifications', async () => {
+    expect(user.notifications.length).to.equal(0);
+
+    const id = generateUUID();
+    const id2 = generateUUID();
+    const id3 = generateUUID();
+
+    await user.update({
+      notifications: [{
+        id,
+        type: 'DROPS_ENABLED',
+        data: {},
+      }, {
+        id: id2,
+        type: 'LOGIN_INCENTIVE',
+        data: {},
+      }, {
+        id: id3,
+        type: 'CRON',
+        data: {},
+      }],
+    });
+
+    await user.sync();
+    expect(user.notifications.length).to.equal(3);
+
+    const res = await user.post('/notifications/read', {
+      notificationIds: [id, id3],
+    });
+
+    expect(res).to.deep.equal([{
+      id: id2,
+      type: 'LOGIN_INCENTIVE',
+      data: {},
+    }]);
+
+    await user.sync();
+    expect(user.notifications.length).to.equal(1);
+    expect(user.notifications[0].id).to.equal(id2);
+  });
+});

website/client/app.vue

@@ -292,7 +292,7 @@ export default {
     // @TODO: This part is hacky and could be solved with two options:
     // 1 - Find a way to pass fromRoot to hidden
     // 2 - Enforce that all modals use the hide::modal event
-    this.$root.$on('hidden::modal', (modalId) => {
+    this.$root.$on('bv::hide::modal', (modalId) => {
       let modalStackLength = this.$store.state.modalStack.length;
       let modalOnTop = this.$store.state.modalStack[modalStackLength - 1];
       let modalSecondToTop = this.$store.state.modalStack[modalStackLength - 2];

website/client/components/auth/registerLoginReset.vue

@@ -4,7 +4,7 @@
     .seamless_stars_varied_opacity_repeat
 
   form#login-form(
-    v-on:submit.prevent='handleSubmit', 
+    @submit.prevent='handleSubmit', 
     @keyup.enter="handleSubmit", 
     v-if="!forgotPassword && !resetPasswordSetNewOne",
   )

website/client/components/chat/chatMessages.vue

@@ -22,7 +22,7 @@
         .mentioned-icon(v-if='isUserMentioned(msg)')
         .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
         .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
-        .card-block
+        .card-body
             h3.leader(
               :class='userLevelStyle(cachedProfileData[msg.uuid])'
               @click="showMemberModal(msg.uuid)",
@@ -59,7 +59,7 @@
         .mentioned-icon(v-if='isUserMentioned(msg)')
         .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
         .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
-        .card-block
+        .card-body
             h3.leader(
               :class='userLevelStyle(cachedProfileData[msg.uuid])',
               @click="showMemberModal(msg.uuid)",

website/client/components/groups/publicGuildItem.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
   .card
-    .card-block
+    .card-body
       .row
         .col-md-2.badge-column
           .shield-wrap(:class="{gold: guild.memberCount > 1000, silver: guild.memberCount > 100 && guild.memberCount < 999}")

website/client/components/static/home.vue

@@ -22,13 +22,13 @@
                 span {{$t('signUpWithSocial', {social: 'Google'})}}
             .strike
               span {{$t('or')}}
-            .form
+            .form(@keyup.enter="register()")
               input.form-control(type='text', placeholder='Login Name', v-model='username', :class='{"input-valid": username.length > 3}')
               input.form-control(type='email', placeholder='Email', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
               input.form-control(type='password', placeholder='Password', v-model='password', :class='{"input-valid": password.length > 3}')
               input.form-control(type='password', placeholder='Confirm Password', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
               p.form-text(v-once, v-html="$t('termsAndAgreement')")
-              button.sign-up(@click='register()') {{$t('signup')}}
+              button.sign-up(@click="register()") {{$t('signup')}}
           .col-12
             .spacer.svg-icon(v-html='icons.spacer')
 

website/client/components/tasks/brokenTaskModal.vue

@@ -45,7 +45,7 @@ export default {
   created () {
     this.$root.$on('handle-broken-task', (task) => {
       this.brokenChallengeTask = Object.assign({}, task);
-      this.$root.$emit('show::modal', 'broken-task-modal');
+      this.$root.$emit('bv::show::modal', 'broken-task-modal');
     });
   },
   removed () {

website/client/components/tasks/column.vue

@@ -573,7 +573,7 @@ export default {
 
       if (rewardItem.purchaseType === 'quests') {
         this.selectedItemToBuy = rewardItem;
-        this.$root.$emit('show::modal', 'buy-quest-modal');
+        this.$root.$emit('bv::show::modal', 'buy-quest-modal');
         return;
       }
 

website/server/controllers/api-v3/notifications.js

@@ -39,7 +39,7 @@ api.readNotification = {
     user.notifications.splice(index, 1);
 
     await user.update({
-      $pull: { notifications: req.params.notificationId },
+      $pull: { notifications: { id: req.params.notificationId } },
     }).exec();
 
     res.respond(200, user.notifications);
@@ -81,7 +81,7 @@ api.readNotifications = {
     }
 
     await user.update({
-      $pullAll: { notifications },
+      $pull: { notifications: { id: { $in: notifications } } },
     }).exec();
 
     res.respond(200, user.notifications);