Merge branch 'external-link-modal' into release

config.json.example

@@ -86,5 +86,6 @@
   "RATE_LIMITER_ENABLED": "false",
   "REDIS_HOST": "aaabbbcccdddeeefff",
   "REDIS_PORT": "1234",
-  "REDIS_PASSWORD": "12345678"
+  "REDIS_PASSWORD": "12345678",
+  "TRUSTED_DOMAINS": "https://localhost,https://habitica.com"
 }

website/client/src/app.vue

@@ -35,6 +35,7 @@
       <sub-canceled-modal v-if="isUserLoaded" />
       <bug-report-modal v-if="isUserLoaded" />
       <bug-report-success-modal v-if="isUserLoaded" />
+      <external-link-modal />
       <birthday-modal />
       <snackbars />
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
@@ -175,6 +176,7 @@ import amazonPaymentsModal from '@/components/payments/amazonModal';
 import paymentsSuccessModal from '@/components/payments/successModal';
 import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
 import subCanceledModal from '@/components/payments/canceledModal';
+import externalLinkModal from '@/components/externalLinkModal.vue';
 
 import spellsMixin from '@/mixins/spells';
 import {
@@ -210,6 +212,7 @@ export default {
     subCanceledModal,
     bugReportModal,
     bugReportSuccessModal,
+    externalLinkModal,
   },
   mixins: [notifications, spellsMixin],
   data () {

website/client/src/components/appFooter.vue

@@ -213,7 +213,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://twitter.com/habitica"
+              href="https://twitter.com/habitica/"
               target="_blank"
             >
               <div
@@ -223,7 +223,7 @@
             </a>
             <a
               class="social-circle"
-              href="https://www.facebook.com/Habitica"
+              href="https://www.facebook.com/Habitica/"
               target="_blank"
             >
               <div

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

@@ -322,6 +322,7 @@ import omit from 'lodash/omit';
 import { v4 as uuid } from 'uuid';
 
 import { userStateMixin } from '../../mixins/userState';
+import externalLinks from '../../mixins/externalLinks';
 import memberSearchDropdown from '@/components/members/memberSearchDropdown';
 import closeChallengeModal from './closeChallengeModal';
 import Column from '../tasks/column';
@@ -358,7 +359,7 @@ export default {
     userLink,
     groupLink,
   },
-  mixins: [challengeMemberSearchMixin, userStateMixin],
+  mixins: [challengeMemberSearchMixin, externalLinks, userStateMixin],
   props: ['challengeId'],
   data () {
     return {
@@ -414,6 +415,10 @@ export default {
   mounted () {
     if (!this.searchId) this.searchId = this.challengeId;
     if (!this.challenge._id) this.loadChallenge();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   async beforeRouteUpdate (to, from, next) {
     this.searchId = to.params.challengeId;

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

@@ -120,6 +120,7 @@ import { mapState } from '@/libs/store';
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
+import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';
 
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -131,7 +132,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       loading: true,
@@ -177,6 +178,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

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

@@ -81,6 +81,8 @@ import challengeModal from './challengeModal';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import challengeItem from './challengeItem';
 import challengeIcon from '@/assets/svg/challenge.svg';
 
@@ -92,6 +94,7 @@ export default {
   directives: {
     markdown: markdownDirective,
   },
+  mixins: [externalLinks],
   props: ['group'],
   data () {
     return {
@@ -118,6 +121,10 @@ export default {
   },
   mounted () {
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     async loadChallenges () {

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

@@ -145,6 +145,7 @@ import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
+import externalLinks from '@/mixins/externalLinks';
 
 import challengeIcon from '@/assets/svg/challenge.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
@@ -156,7 +157,7 @@ export default {
     challengeModal,
     MugenScroll,
   },
-  mixins: [challengeUtilities],
+  mixins: [challengeUtilities, externalLinks],
   data () {
     return {
       icons: Object.freeze({
@@ -203,6 +204,10 @@ export default {
       section: this.$t('challenges'),
     });
     this.loadChallenges();
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     updateSearch (eventData) {

website/client/src/components/externalLinkModal.vue

@@ -0,0 +1,209 @@
+<template>
+  <b-modal
+    id="external-link-modal"
+    size="md"
+  >
+    <!-- HEADER -->
+    <div slot="modal-header">
+      <div
+        class="modal-close"
+        @click="close()"
+      >
+        <div
+          class="icon-close"
+          v-html="icons.close"
+        >
+        </div>
+      </div>
+      <div class="exclamation-container d-flex align-items-center justify-content-center">
+        <div
+          v-once
+          class="svg-icon svg-exclamation"
+          v-html="icons.exclamation"
+        ></div>
+      </div>
+      <h2>
+        {{ $t('leaveHabitica') }}
+      </h2>
+    </div>
+
+    <!-- BODY -->
+    <div
+      class="row leave-warning-text"
+      v-html="$t('leaveHabiticaText')"
+    >
+    </div>
+    <div
+      class="skip-modal"
+    >
+      {{ $t('skipExternalLinkModal') }}
+    </div>
+
+    <!-- FOOTER -->
+    <div slot="modal-footer">
+      <button
+        v-once
+        class="btn btn-primary"
+        @click="proceed()"
+      >
+        {{ $t('continue') }}
+      </button>
+      <div
+        v-once
+        class="close-link justify-content-center"
+        @click="close()"
+      >
+        {{ $t('cancel') }}
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+#external-link-modal {
+  &.modal {
+    display: flex !important;
+  }
+
+  .modal-md {
+    max-width: 448px;
+    min-width: 330px;
+    margin: auto;
+
+  .modal-close {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    cursor: pointer;
+
+    .icon-close {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+
+      & svg {
+        fill: $yellow-1;
+        opacity: 0.75;
+      }
+       & :hover {
+        fill: $yellow-1;
+        opacity: 1;
+      }
+    }
+  }
+
+  .modal-content {
+    background: transparent;
+  }
+
+  .modal-header {
+    justify-content: center;
+    padding-top: 32px;
+    padding-bottom: 0px;
+    background: $yellow-100;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+    border-bottom: none;
+
+    .exclamation-container {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      background: $yellow-1;
+      margin: 0 auto;
+      margin-bottom: 16px;
+    }
+
+    .svg-exclamation {
+      width: 8px;
+      color: $white;
+    }
+
+    h2 {
+      color: $yellow-1;
+      margin-bottom: 16px;
+    }
+  }
+
+  .modal-body {
+    padding: 16px 44px 20px 44px;
+    background: $white;
+
+    .leave-warning-text {
+      font-size: 0.875rem;
+      line-height: 1.71;
+      text-align: center;
+      margin-top:24px;
+    }
+
+    .skip-modal {
+      color: $gray-100;
+      font-size: 0.75rem;
+      text-align: center;
+      line-height: 1.33;
+      margin-top: 16px;
+      // padding-bottom: 24px;
+    }
+  }
+
+    .modal-footer {
+      background: $white;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      justify-content: center;
+      border-top: none;
+      padding-top: 0;
+    }
+    .close-link {
+      color: $purple-300;
+      line-height: 1.71;
+      font-size: 0.875rem;
+      cursor: pointer;
+      margin-top:16px;
+      margin-bottom: 8px;
+      text-align: center;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+import exclamationIcon from '@/assets/svg/exclamation.svg';
+import closeIcon from '@/assets/svg/new-close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: closeIcon,
+        exclamation: exclamationIcon,
+      }),
+      url: '',
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica:external-link', url => {
+      this.url = url;
+      this.$root.$emit('bv::show::modal', 'external-link-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:external-link');
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'external-link-modal');
+    },
+    proceed () {
+      window.open(this.url, '_blank').focus();
+      this.close();
+    },
+  },
+};
+</script>

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

@@ -87,6 +87,8 @@
 <script>
 import debounce from 'lodash/debounce';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
 import chatMessage from '../chat/chatMessages';
@@ -103,6 +105,7 @@ export default {
     communityGuidelines,
     chatMessage,
   },
+  mixins: [externalLinks],
   props: ['label', 'group', 'placeholder'],
   data () {
     return {
@@ -132,6 +135,10 @@ export default {
   },
   mounted () {
     this.textbox = this.$refs['user-entry'];
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a

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

@@ -139,6 +139,8 @@
 import axios from 'axios';
 import moment from 'moment';
 
+import externalLinks from '../../mixins/externalLinks';
+
 import renderWithMentions from '@/libs/renderWithMentions';
 import { mapState } from '@/libs/store';
 import userLink from '../userLink';
@@ -150,6 +152,7 @@ export default {
   components: {
     userLink,
   },
+  mixins: [externalLinks],
   filters: {
     timeAgo (value) {
       return moment(value).fromNow();
@@ -179,6 +182,10 @@ export default {
   },
   mounted () {
     this.$emit('message-card-mounted');
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   methods: {
     report () {

website/client/src/components/tasks/column.vue

@@ -355,6 +355,7 @@ import Task from './task';
 import ClearCompletedTodos from './clearCompletedTodos';
 import buyMixin from '@/mixins/buy';
 import sync from '@/mixins/sync';
+import externalLinks from '@/mixins/externalLinks';
 import { mapState, mapActions, mapGetters } from '@/libs/store';
 import shopItem from '../shops/shopItem';
 import BuyQuestModal from '@/components/shops/quests/buyQuestModal.vue';
@@ -384,7 +385,7 @@ export default {
     shopItem,
     draggable,
   },
-  mixins: [buyMixin, notifications, sync],
+  mixins: [buyMixin, notifications, sync, externalLinks],
   // @TODO Set default values for props
   // allows for better control of props values
   // allows for better control of where this component is called
@@ -534,6 +535,10 @@ export default {
       if (this.activeFilter.label !== 'complete2') return;
       this.loadCompletedTodos();
     });
+    this.handleExternalLinks();
+  },
+  updated () {
+    this.handleExternalLinks();
   },
   beforeDestroy () {
     this.$root.$off('buyModal::boughtItem');

website/client/src/components/tasks/yesterdailyModal.vue

@@ -83,6 +83,7 @@
 <script>
 import moment from 'moment';
 import { mapState } from '@/libs/store';
+import externalLinks from '@/mixins/externalLinks';
 import scoreTask from '@/mixins/scoreTask';
 import sync from '@/mixins/sync';
 import Task from './task';
@@ -93,7 +94,7 @@ export default {
     Task,
     LoadingSpinner,
   },
-  mixins: [scoreTask, sync],
+  mixins: [externalLinks, scoreTask, sync],
   props: {
     yesterDailies: {
       type: Array,
@@ -108,6 +109,9 @@ export default {
       dueDate: moment().subtract(1, 'days'),
     };
   },
+  updated () {
+    this.handleExternalLinks();
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
     tasksByType () {

website/client/src/components/userMenu/profile.vue

@@ -759,6 +759,7 @@ import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
 import error404 from '../404';
+import externalLinks from '../../mixins/externalLinks';
 import { userCustomStateMixin } from '../../mixins/userState';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -772,7 +773,7 @@ export default {
     profileStats,
     error404,
   },
-  mixins: [userCustomStateMixin('userLoggedIn')],
+  mixins: [externalLinks, userCustomStateMixin('userLoggedIn')],
   props: ['userId', 'startingPage'],
   data () {
     return {
@@ -862,8 +863,12 @@ export default {
   mounted () {
     this.loadUser();
     this.oldTitle = this.$store.state.title;
+    this.handleExternalLinks();
     this.selectPage(this.startingPage);
   },
+  updated () {
+    this.handleExternalLinks();
+  },
   beforeDestroy () {
     if (this.oldTitle) {
       this.$store.dispatch('common:setTitle', {

website/client/src/main.js

@@ -33,9 +33,15 @@ setUpLogging();
 setupAnalytics(); // just create queues for analytics, no scripts loaded at this time
 const store = getStore();
 
-export default new Vue({
+const vueInstance = new Vue({
   el: '#app',
   router,
   store,
   render: h => h(AppComponent),
 });
+
+export default vueInstance;
+
+window.externalLink = url => {
+  vueInstance.$root.$emit('habitica:external-link', url);
+};

website/client/src/mixins/externalLinks.js

@@ -0,0 +1,35 @@
+import some from 'lodash/some';
+
+export default {
+  methods: {
+    handleExternalLinks () {
+      const { TRUSTED_DOMAINS } = process.env;
+      const allLinks = document.getElementsByTagName('a');
+
+      for (let i = 0; i < allLinks.length; i += 1) {
+        const link = allLinks[i];
+        let domainIndex = link.href.indexOf('www');
+        if (domainIndex !== -1 && domainIndex < 9) {
+          domainIndex += 4;
+        } else {
+          domainIndex = link.href.indexOf('//') + 2;
+        }
+
+        if ((link.classList.value.indexOf('external-link') === -1)
+          && domainIndex !== 1
+          && !some(TRUSTED_DOMAINS.split(','), domain => link.href.indexOf(domain) === domainIndex)) {
+          link.classList.add('external-link');
+          link.addEventListener('click', e => {
+            if (e.ctrlKey) {
+              return;
+            }
+            e.stopPropagation();
+            e.preventDefault();
+
+            window.externalLink(link.href);
+          });
+        }
+      }
+    },
+  },
+};

website/client/vue.config.js

@@ -27,6 +27,7 @@ const envVars = [
   'APPLE_AUTH_CLIENT_ID',
   'AMPLITUDE_KEY',
   'LOGGLY_CLIENT_TOKEN',
+  'TRUSTED_DOMAINS',
   // TODO necessary? if yes how not to mess up with vue cli? 'NODE_ENV'
 ];
 

website/common/locales/en/generic.json

@@ -212,5 +212,8 @@
   "contactForm": "Contact the Moderation Team",
   "loadEarlierMessages": "Load Earlier Messages",
   "askQuestion": "Ask a Question",
-  "emptyReportBugMessage": "Report Bug Message missing"
+  "emptyReportBugMessage": "Report Bug Message missing",
+  "leaveHabitica": "You are about to leave Habitica.com",
+  "leaveHabiticaText": "Habitica is not responsible for the content of any linked website that is not owned or operated by HabitRPG.<br>Please note that these websites' practices may differ from Habitica’s community guidelines.",
+  "skipExternalLinkModal": "Hold CTRL (Windows) or Command (Mac) when clicking a link to skip this modal."
 }