Warning to avoid SPI (sensitive personal information) (#15638)

* feat(tasks): warn about adding SPI

* fix(links): unmangle, distinct jumps

* fix(spi): unlink

* fix(lint): punctuations

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

@@ -55,11 +55,31 @@
         </div>
       </div>
       <div class="form-group">
-        <lockable-label
-          :class-override="cssClass('headings')"
-          :locked="challengeAccessRequired"
-          :text="`${$t('text')}*`"
-        />
+        <div class="d-flex align-items-center">
+          <lockable-label
+            class="mr-auto"
+            :class-override="cssClass('headings')"
+            :locked="challengeAccessRequired"
+            :text="`${$t('text')}*`"
+          />
+          <div
+            id="spi-alert"
+            class="d-flex align-items-center"
+            :class="cssClass('headings')"
+          >
+            <div
+              class="svg svg-icon color icon-16 mr-1"
+              v-html="icons.alert"
+            ></div>
+            <small
+              class="my-1"
+            >
+              <a
+                :class="cssClass('headings')"
+              >{{ $t('avoidSPI') }}</a>
+            </small>
+          </div>
+        </div>
         <input
           ref="inputToFocus"
           v-model="task.text"
@@ -79,10 +99,20 @@
           @keydown.esc="autoCompleteMixinHandleEscape($event)"
         >
       </div>
+      <b-popover
+        :target="'spi-alert'"
+        triggers="hover"
+        placement="bottom"
+        offset="-128"
+      >
+        <div
+          v-html="$t('avoidSPIDetails', spiLinkData)">
+        </div>
+      </b-popover>
       <div
         class="form-group mb-0"
       >
-        <div class="d-flex">
+        <div class="d-flex align-items-center">
           <lockable-label
             class="mr-auto"
             :class-override="cssClass('headings')"
@@ -963,6 +993,20 @@
         box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
       }
     }
+
+    .b-popover {
+      margin-top: -5px;
+      max-width: 330px;
+    }
+
+    .popover-body {
+      text-align: left;
+
+      a {
+        color: $gray-500;
+        text-decoration: underline;
+      }
+    }
   }
 
   @media only screen and (max-width: 768px) {
@@ -1196,6 +1240,7 @@ import chevronIcon from '@/assets/svg/chevron.svg?raw';
 import calendarIcon from '@/assets/svg/calendar.svg?raw';
 import gripIcon from '@/assets/svg/grip.svg?raw';
 import InformationIcon from '@/components/ui/informationIcon.vue';
+import alertIcon from '@/assets/svg/for-css/alert-white.svg?raw';
 
 export default {
   components: {
@@ -1231,6 +1276,7 @@ export default {
         streak: streakIcon,
         calendar: calendarIcon,
         grip: gripIcon,
+        alert: alertIcon,
       }),
       members: [],
       membersNameAndId: [],
@@ -1251,6 +1297,11 @@ export default {
         { key: 'per', label: 'perception', description: 'perTaskText' },
       ],
       calendarHighlights: { dates: [new Date()] },
+      spiLinkData: {
+        firstLink: '<a href="/static/privacy#section_1" target="_blank">',
+        secondLink: '<a href="/static/privacy" target="_blank">',
+        linkClose: '</a>',
+      },
     };
   },
   computed: {

website/common/locales/en/generic.json

@@ -243,5 +243,7 @@
   "playerReportModalBody": "You should only report a player who violates the <%= firstLinkStart %>Community Guidelines<%= linkEnd %> and/or <%= secondLinkStart %>Terms of Service<%= linkEnd %>. Submitting a false report is a violation of Habitica’s Community Guidelines.",
   "targetUserNotExist": "Target User: '<%= userName %>' does not exist.",
   "rememberToBeKind": "Please remember to be kind, respectful, and follow the <a href='/static/community-guidelines' target='_blank'>Community Guidelines</a>.",
-  "confirmPurchase": "Confirm Purchase"
+  "confirmPurchase": "Confirm Purchase",
+  "avoidSPI": "Avoid SPI",
+  "avoidSPIDetails": "For your privacy, avoid including <%= firstLink %>sensitive personal information<%= linkClose %> (SPI) when using Habitica. Your account data, including tasks, is stored on our servers so you can access it from any device.<br><br>To learn more, review our <%= secondLink %>Privacy Policy<%= linkClose %>."
 }