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

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;
       }