developer mode

website/client/src/components/tasks/modal-controls/lockableLabel.vue

@@ -13,7 +13,6 @@
     </span>
     <label
       v-once
-      class="mb-1"
       v-html="text"
     ></label>
   </div>
@@ -23,11 +22,11 @@
   @import '~@/assets/scss/colors.scss';
 
   label {
-    height: 1.5rem;
     font-size: 14px;
     font-weight: bold;
     line-height: 1.71;
     letter-spacing: normal;
+    margin: 0;
   }
 
   .gray-200 {

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

@@ -203,16 +203,15 @@
         <template
           v-if="task.type !== 'reward'"
         >
-          <div class="d-flex mt-3">
+          <div class="d-flex mt-3 align-items-center">
             <lockable-label
               :locked="challengeAccessRequired"
               :text="$t('difficulty')"
             />
-            <div
-              v-b-tooltip.hover.righttop="$t('difficultyHelp')"
-              class="svg-icon info-icon mb-auto ml-1"
-              v-html="icons.information"
-            ></div>
+            <information-icon
+              tooltip-id="difficultyHelp"
+              :tooltip="$t('difficultyHelp')"
+            />
           </div>
           <select-difficulty
             :value="task.priority"
@@ -452,7 +451,7 @@
           >
             <div>
               <div
-                v-if="task.type === 'daily' && isUserTask && purpose === 'edit'"
+                v-if="advancedSettingsShowRestoreStreak"
                 class="option mt-3"
               >
                 <div class="form-group">
@@ -479,8 +478,7 @@
                 </div>
               </div>
               <div
-                v-if="task.type === 'habit'
-                  && isUserTask && purpose === 'edit' && (task.up || task.down)"
+                v-if="advancedSettingsShowAdjustCounter"
                 class="option mt-3"
               >
                 <div class="form-group">
@@ -539,6 +537,31 @@
                   </div>
                 </div>
               </div>
+              <div
+                v-if="advancedSettingsShowTaskAlias"
+                class="option mt-3"
+              >
+                <div class="form-group">
+                  <label
+                    v-once
+                    class="mb-1"
+                  >{{ $t('taskAlias') }}
+
+                    <information-icon
+                      tooltip-id="taskAlias"
+                      :tooltip="$t('taskAliasPopover')"
+                    />
+                  </label>
+                  <div class="input-group">
+                    <input
+                      v-model="task.alias"
+                      class="form-control"
+                      :placeholder="$t('taskAliasPlaceholder')"
+                      type="text"
+                    >
+                  </div>
+                </div>
+              </div>
             </div>
           </b-collapse>
         </div>
@@ -882,6 +905,11 @@
     height: 1rem;
   }
 
+  label {
+    display: inline-flex;
+    align-items: center;
+  }
+
   .habit-option {
     &-container {
       min-width: 3rem;
@@ -997,7 +1025,6 @@ import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
 
 import syncTask from '../../mixins/syncTask';
 
-import informationIcon from '@/assets/svg/information.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
 import negativeIcon from '@/assets/svg/negative.svg';
 import streakIcon from '@/assets/svg/streak.svg';
@@ -1006,10 +1033,12 @@ import goldIcon from '@/assets/svg/gold.svg';
 import chevronIcon from '@/assets/svg/chevron.svg';
 import calendarIcon from '@/assets/svg/calendar.svg';
 import gripIcon from '@/assets/svg/grip.svg';
+import InformationIcon from '@/components/ui/informationIcon.vue';
 
 
 export default {
   components: {
+    InformationIcon,
     SelectMulti,
     Datepicker,
     checklist,
@@ -1029,7 +1058,6 @@ export default {
       showAssignedSelect: false,
       newChecklistItem: null,
       icons: Object.freeze({
-        information: informationIcon,
         negative: negativeIcon,
         positive: positiveIcon,
         destroy: deleteIcon,
@@ -1064,25 +1092,23 @@ export default {
       dayMapping: 'constants.DAY_MAPPING',
       ATTRIBUTES: 'constants.ATTRIBUTES',
     }),
-    advancedSettingsAvailable () {
-      if (
-        this.task.type === 'reward'
-        || this.task.type === 'todo'
-        || this.purpose === 'create'
-        || !this.isUserTask
-      ) {
-        return false;
-      }
-
-      if (this.task.type === 'habit'
-        && !this.task.up
-        && !this.task.down
-      ) {
-        return false;
-      }
-
-      return true;
+    // region advanced settings
+    advancedSettingsShowAdjustCounter () {
+      return this.task.type === 'habit'
+                  && this.isUserTask && this.purpose === 'edit' && (this.task.up || this.task.down);
     },
+    advancedSettingsShowRestoreStreak () {
+      return this.task.type === 'daily' && this.isUserTask && this.purpose === 'edit';
+    },
+    advancedSettingsShowTaskAlias () {
+      return this.isUserTask && this.user.preferences.developerMode;
+    },
+    advancedSettingsAvailable () {
+      return this.advancedSettingsShowRestoreStreak
+          || this.advancedSettingsShowAdjustCounter
+          || this.advancedSettingsShowTaskAlias;
+    },
+    // endregion advanced settings
     checklistEnabled () {
       return ['daily', 'todo'].indexOf(this.task.type) > -1 && !this.isOriginalChallengeTask;
     },

website/client/src/components/ui/informationIcon.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="ml-1">
+    <div
+      :id="'tooltip_'+tooltipId"
+      class="svg-icon icon-16"
+      :title="tooltip"
+      v-html="icons.information"
+    ></div>
+    <b-tooltip
+      :title="tooltip"
+      :target="'tooltip_'+tooltipId"
+    />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>
+
+<script>
+import informationIcon from '@/assets/svg/information.svg';
+
+export default {
+  name: 'InformationIcon',
+  props: ['tooltipId', 'tooltip'],
+  data () {
+    return {
+      icons: Object.freeze({
+        information: informationIcon,
+      }),
+    };
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

website/client/src/pages/settings/siteDataRows/developerModeRow.vue

@@ -1,12 +1,21 @@
 <template>
   <tr>
     <td class="settings-label">
-      {{ $t("developerMode") }}
+      <div class="d-flex align-items-center">
+        {{ $t("developerMode") }}
+        <information-icon
+          tooltip-id="developerMode"
+          :tooltip="$t('developerModeTooltip')"
+        />
+      </div>
     </td>
     <td class="settings-value">
-      Todo
     </td>
     <td class="settings-button">
+      <toggle-switch
+        v-model="user.preferences.developerMode"
+        @change="setUserPreference('developerMode')"
+      />
     </td>
   </tr>
 </template>
@@ -14,20 +23,34 @@
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
+::v-deep {
+  .toggle-switch-outer {
+    display: inline-block;
+  }
+}
 </style>
 
 <script>
 import { mapState } from '@/libs/store';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+import { GenericUserPreferencesMixin } from '@/pages/settings/components/genericUserPreferencesMixin';
+import informationIcon from '@/assets/svg/information.svg';
+import InformationIcon from '@/components/ui/informationIcon.vue';
 
 export default {
-  mixins: [],
+  components: { InformationIcon, ToggleSwitch },
+  mixins: [GenericUserPreferencesMixin],
+  data () {
+    return {
+      icons: Object.freeze({
+        information: informationIcon,
+      }),
+    };
+  },
   computed: {
     ...mapState({
       user: 'user.data',
     }),
   },
-  methods: {
-
-  },
 };
 </script>

website/client/src/pages/settings/siteDataRows/userIdRow.vue

@@ -1,7 +1,12 @@
 <template>
   <tr>
     <td class="settings-label">
-      {{ $t("userId") }}
+      <div class="d-flex align-items-center">
+        {{ $t("userId") }} <information-icon
+          tooltip-id="userId"
+          tooltip="TODO"
+        />
+      </div>
     </td>
     <td class="settings-value">
       {{ user.id }}
@@ -25,8 +30,10 @@
 <script>
 import { mapState } from '@/libs/store';
 import copyToClipboard from '@/mixins/copyToClipboard';
+import InformationIcon from '@/components/ui/informationIcon.vue';
 
 export default {
+  components: { InformationIcon },
   mixins: [copyToClipboard],
   computed: {
     ...mapState({

website/common/locales/en/settings.json

@@ -52,6 +52,7 @@
     "exportUserData": "Export User Data:",
     "useridCopied": "User ID copied to clipboard.",
     "developerMode": "Developer Mode",
+    "developerModeTooltip": "Habitica provides a developer mode to enable additional features that interact with Habitica's API.",
     "export": "Export",
     "xml": "XML",
     "json": "JSON",

website/common/locales/en/tasks.json

@@ -93,6 +93,9 @@
   "streakCoins": "Streak Bonus!",
   "taskToTop": "To top",
   "taskToBottom": "To bottom",
+  "taskAlias": "Task Alias",
+  "taskAliasPopover": "This task alias can be used when integrating with 3rd party integrations. Only dashes, underscores, and alphanumeric characters are supported. The task alias must be unique among all your tasks.",
+  "taskAliasPlaceholder": "your-task-alias-here",
   "taskAliasAlreadyUsed": "Task alias already used on another task.",
   "invalidTaskType": "Task type must be one of \"habit\", \"daily\", \"todo\", \"reward\".",
   "invalidTasksType": "Task type must be one of \"habits\", \"dailys\", \"todos\", \"rewards\".",

website/server/models/user/schema.js

@@ -535,6 +535,7 @@ export const UserSchema = new Schema({
     advancedCollapsed: { $type: Boolean, default: false },
     toolbarCollapsed: { $type: Boolean, default: false },
     reverseChatOrder: { $type: Boolean, default: false },
+    developerMode: { $type: Boolean, default: false },
     background: String,
     displayInviteToPartyWhenPartyIs1: { $type: Boolean, default: true },
     webhooks: {