New client misc with some more misc (#8929)

* Added markdown

* Added styles and option for debug menu

* Added sm icons

* Began styling autocomplete

* Added autocomplete styles

* Added more challenge categories

* Updated challenge participants modal

* Fixed challenge list updating without reload

* Added close and delete challenge

* Fixed form placeholder, adjusted desc style and fixed create button style

* Fixed faq collapsing and style

* Fixed repeating ending

* Fixed delete account

* Fixed party fetch issue

* Fixed scope issue

* Added member count filters

* Fixed create button style

* Fixed badge color display

* Updated tavern styles

* Fixed some party styles

* Updated login styles

* Fixed login redirect

* Fixed initial login process

* Added done local

website/client/components/chat/autoComplete.vue

@@ -1,28 +1,38 @@
 <template lang="pug">
-div.autocomplete-selection
-  div(v-for='result in searchResults', @click='select(result)') {{ result }}
+div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocompleteStyle')
+  .autocomplete-results(v-for='result in searchResults', @click='select(result)') {{ result }}
 </template>
 
 <style scoped>
-
+  .autocomplete-results {
+    padding: .5em;
+    box-shadow: 1px 1px 1px #efefef;
+  }
 </style>
 
 <script>
 export default {
-  props: ['selections', 'text'],
+  props: ['selections', 'text', 'coords', 'groupId'],
   data () {
     return {
       currentSearch: '',
       searchActive: false,
       currentSearchPosition: 0,
-      // @TODO: HAve this passed
-      tmpSelections: [
-        'TheHollidayInn',
-        'Paglias',
-      ],
+      tmpSelections: [],
     };
   },
   computed: {
+    autocompleteStyle () {
+      return {
+        top: `${this.coords.TOP + 30}px`,
+        left: `${this.coords.LEFT + 30}px`,
+        position: 'absolute',
+        minWidth: '100px',
+        minHeight: '100px',
+        zIndex: 100,
+        backgroundColor: 'white',
+      };
+    },
     searchResults () {
       if (!this.searchActive) return [];
       let currentSearch = this.text.substring(this.currentSearchPosition + 1, this.text.length);
@@ -37,23 +47,13 @@ export default {
       this.searchActive = true;
       this.currentSearchPosition = newText.length - 1;
     },
-    // @TODO: implement position
-    // caretChanged = function(newCaretPos) {
-    //   var relativeelement = $('.chat-form div:first');
-    //   var textarea = $('.chat-form textarea');
-    //   var userlist = $('.list-at-user');
-    //   var offset = {
-    //     x: textarea.offset().left - relativeelement.offset().left,
-    //     y: textarea.offset().top - relativeelement.offset().top,
-    //   };
-    //   if(relativeelement) {
-    //     var caretOffset = InputCaret.getPosition(textarea);
-    //     userlist.css({
-    //               left: caretOffset.left + offset.x,
-    //               top: caretOffset.top + offset.y + 16
-    //             });
-    //   }
-    // }
+    async groupId () {
+      if (!this.groupId) return;
+      let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.groupId});
+      this.tmpSelections = members.map((member) => {
+        return member.profile.name;
+      });
+    },
   },
   methods: {
     select (result) {

website/client/components/chat/chatMessages.vue

@@ -17,7 +17,7 @@ div
         .card-block
           h3.leader {{msg.user}}
           p {{msg.timestamp | timeAgo}}
-          .text {{msg.text}}
+          .text(v-markdown='msg.text')
           hr
           .action(@click='like(msg, index)', v-if='msg.likes', :class='{active: msg.likes[user._id]}')
             .svg-icon(v-html="icons.like")
@@ -97,6 +97,7 @@ div
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import { mapState } from 'client/libs/store';
+import markdownDirective from 'client/directives/markdown';
 
 import copyAsTodoModal from './copyAsTodoModal';
 import reportFlagModal from './reportFlagModal';
@@ -113,6 +114,9 @@ export default {
     copyAsTodoModal,
     reportFlagModal,
   },
+  directives: {
+    markdown: markdownDirective,
+  },
   data () {
     return {
       icons: Object.freeze({

website/client/components/chat/copyAsTodoModal.vue

@@ -17,7 +17,7 @@
               |  
 
         div.task-text
-          markdown(text='text',target='_blank')
+          div(v-markdown='text', target='_blank')
 
     .modal-footer
       button.btn.btn-default(@click='close()') {{ $t('close') }}
@@ -26,11 +26,15 @@
 
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
+import markdownDirective from 'client/directives/markdown';
 
 export default {
   components: {
     bModal,
   },
+  directives: {
+    markdown: markdownDirective,
+  },
   props: ['copyingMessage', 'groupName', 'groupId'],
   data () {
     return {

website/client/components/chat/reportFlagModal.vue

@@ -4,7 +4,7 @@
       h4(v-html="$t('abuseFlagModalHeading', reportData)")
     .modal-body
       blockquote
-        // @TODO: markdown(text='abuseObject.text')
+        div(v-markdown='abuseObject.text')
       p(v-html="$t('abuseFlagModalBody', abuseFlagModalBody)")
     .modal-footer
       button.pull-left.btn.btn-danger(@click='clearFlagCount()', v-if='user.contributor.admin && abuseObject.flagCount > 0')
@@ -17,12 +17,16 @@
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
 import notifications from 'client/mixins/notifications';
+import markdownDirective from 'client/directives/markdown';
 
 export default {
   mixins: [notifications],
   components: {
     bModal,
   },
+  directives: {
+    markdown: markdownDirective,
+  },
   computed: {
     ...mapState({user: 'user.data'}),
     reportData () {