From d718153717c84bc8bd861e5e7eb303333f22bbbf Mon Sep 17 00:00:00 2001
From: negue <negue@users.noreply.github.com>
Date: Sun, 20 Nov 2022 18:06:20 +0100
Subject: [PATCH] resetAccount

---
 .../client/src/pages/settings-overview.vue    |   4 +
 .../src/pages/settings/generalSettings.vue    |   3 +
 .../inlineSettings/_currentPasswordInput.vue  |   2 +-
 .../inlineSettings/_saveCancelButtons.vue     |   7 +-
 .../inlineSettings/displayNameSetting.vue     |   2 +-
 .../inlineSettings/inlineSettingMixin.js      |   6 +-
 .../inlineSettings/passwordSetting.vue        |   8 +-
 .../settings/inlineSettings/resetAccount.vue  | 114 ++++++++++++++++++
 .../inlineSettings/userEmailSetting.vue       |   8 +-
 .../inlineSettings/userNameSetting.vue        |   8 +-
 website/common/locales/en/settings.json       |   7 +-
 11 files changed, 148 insertions(+), 21 deletions(-)
 create mode 100644 website/client/src/pages/settings/inlineSettings/resetAccount.vue

diff --git a/website/client/src/pages/settings-overview.vue b/website/client/src/pages/settings-overview.vue
index 93ce4a727a..e259747a99 100644
--- a/website/client/src/pages/settings-overview.vue
+++ b/website/client/src/pages/settings-overview.vue
@@ -119,6 +119,10 @@
         font-size: 14px;
         font-weight: bold;
         color: $purple-300;
+
+        &.danger {
+          color: $maroon-50;
+        }
       }
 
       .dialog-disclaimer {
diff --git a/website/client/src/pages/settings/generalSettings.vue b/website/client/src/pages/settings/generalSettings.vue
index 5f12ece39a..edb0752707 100644
--- a/website/client/src/pages/settings/generalSettings.vue
+++ b/website/client/src/pages/settings/generalSettings.vue
@@ -18,6 +18,7 @@
         <user-email-setting />
         <display-name-setting />
         <password-setting />
+        <reset-account />
         <tr>
           <td colspan="3"></td>
         </tr>
@@ -56,9 +57,11 @@ import UserNameSetting from '@/pages/settings/inlineSettings/userNameSetting';
 import UserEmailSetting from '@/pages/settings/inlineSettings/userEmailSetting';
 import DisplayNameSetting from '@/pages/settings/inlineSettings/displayNameSetting';
 import PasswordSetting from '@/pages/settings/inlineSettings/passwordSetting';
+import ResetAccount from '@/pages/settings/inlineSettings/resetAccount';
 
 export default {
   components: {
+    ResetAccount,
     PasswordSetting,
     DisplayNameSetting,
     UserEmailSetting,
diff --git a/website/client/src/pages/settings/inlineSettings/_currentPasswordInput.vue b/website/client/src/pages/settings/inlineSettings/_currentPasswordInput.vue
index 562cd35c5b..88cca8f0ea 100644
--- a/website/client/src/pages/settings/inlineSettings/_currentPasswordInput.vue
+++ b/website/client/src/pages/settings/inlineSettings/_currentPasswordInput.vue
@@ -5,7 +5,7 @@
         {{ $t(customLabel ?? "password") }}
       </div>
       <div
-        v-if="forgotPassword"
+        v-if="showForgetPassword"
         class="forgot-password"
       >
         <a
diff --git a/website/client/src/pages/settings/inlineSettings/_saveCancelButtons.vue b/website/client/src/pages/settings/inlineSettings/_saveCancelButtons.vue
index f4e82b1db4..fe3c901b72 100644
--- a/website/client/src/pages/settings/inlineSettings/_saveCancelButtons.vue
+++ b/website/client/src/pages/settings/inlineSettings/_saveCancelButtons.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="buttons">
     <button
-      class="btn btn-primary btn-save"
+      class="btn btn-save"
+      :class="primaryButtonColor ?? 'btn-primary'"
       type="submit"
       :disabled="disableSave"
       @click="$emit('saveClicked')"
     >
-      {{ $t('save') }}
+      {{ $t(primaryButtonLabel ?? 'save') }}
     </button>
     <br>
 
@@ -22,7 +23,7 @@
 <script>
 export default {
   name: 'SaveCancelButtons',
-  props: ['disableSave'],
+  props: ['disableSave', 'primaryButtonLabel', 'primaryButtonColor'],
 };
 </script>
 
diff --git a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
index 3eda1312b7..5f903997a5 100644
--- a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
@@ -184,7 +184,7 @@ export default {
   },
   methods: {
     resetAndClose () {
-      this.show = false;
+      this.modalVisible = false;
     },
     restoreDisplayName () {
       if (this.temporaryDisplayName.length < 1) {
diff --git a/website/client/src/pages/settings/inlineSettings/inlineSettingMixin.js b/website/client/src/pages/settings/inlineSettings/inlineSettingMixin.js
index 4c5d5623ce..ef81430c52 100644
--- a/website/client/src/pages/settings/inlineSettings/inlineSettingMixin.js
+++ b/website/client/src/pages/settings/inlineSettings/inlineSettingMixin.js
@@ -1,12 +1,12 @@
 export const InlineSettingMixin = {
   data () {
     return {
-      show: false,
+      modalVisible: false,
     };
   },
   methods: {
-    resetAndClose () {
-      this.show = false;
+    closeModal () {
+      this.modalVisible = false;
     },
   },
 };
diff --git a/website/client/src/pages/settings/inlineSettings/passwordSetting.vue b/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
index c2cc19327f..d615d1d374 100644
--- a/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/passwordSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!show"
+      v-if="!modalVisible"
     >
       <td class="settings-label">
         {{ $t("password") }}
@@ -11,14 +11,14 @@
       <td class="settings-button">
         <a
           class="edit-link"
-          @click.prevent="show = true"
+          @click.prevent="modalVisible = true"
         >
           {{ $t('edit') }}
         </a>
       </td>
     </tr>
     <tr
-      v-if="show"
+      v-if="modalVisible"
       class="expanded"
     >
       <td
@@ -54,7 +54,7 @@
 
         <save-cancel-buttons
           @saveClicked="changePassword( passwordUpdates)"
-          @cancelClicked="resetAndClose()"
+          @cancelClicked="closeModal()"
         />
       </td>
     </tr>
diff --git a/website/client/src/pages/settings/inlineSettings/resetAccount.vue b/website/client/src/pages/settings/inlineSettings/resetAccount.vue
new file mode 100644
index 0000000000..8bf388ebc6
--- /dev/null
+++ b/website/client/src/pages/settings/inlineSettings/resetAccount.vue
@@ -0,0 +1,114 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!modalVisible"
+    >
+      <td class="settings-label">
+        {{ $t("resetAccount") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <a
+          v-if="!!user?.auth?.local?.username"
+          class="edit-link"
+          @click.prevent="modalVisible = true"
+        >
+          {{ $t('learnMore') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="modalVisible"
+      class="expanded"
+    >
+      <td colspan="3">
+        <div
+          v-once
+          class="dialog-title danger"
+        >
+          {{ $t("resetAccount") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+          v-html="$t('resetText1')"
+        >
+        </div>
+        <ul class="row my-3">
+          <li
+            v-once
+            class="col-6"
+          >
+            {{ $t('resetDetail1') }}
+          </li>
+          <li class="col-6">
+            {{ $t('resetDetail2') }}
+          </li>
+          <li class="col-6">
+            {{ $t('resetDetail3') }}
+          </li>
+          <li class="col-6">
+            {{ $t('resetDetail4') }}
+          </li>
+        </ul>
+        <div
+          v-once
+          v-html="$t('resetDetail5')"
+        >
+        </div>
+
+        <div class="input-area">
+          Todo Password Check for Reset
+          <current-password-input
+            :show-forget-password="true"
+            @passwordValue="passwordValue = $event"
+          />
+          <save-cancel-buttons
+            primary-button-color="btn-danger"
+            primary-button-label="resetAccount"
+            @saveClicked="reset()"
+            @cancelClicked="closeModal()"
+          />
+        </div>
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+</style>
+
+<script>
+import axios from 'axios';
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from './inlineSettingMixin';
+import SaveCancelButtons from '@/pages/settings/inlineSettings/_saveCancelButtons';
+import CurrentPasswordInput from '@/pages/settings/inlineSettings/_currentPasswordInput';
+
+
+export default {
+  components: { CurrentPasswordInput, SaveCancelButtons },
+  mixins: [InlineSettingMixin],
+  data () {
+    return {
+      passwordValue: '',
+    };
+  },
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+  methods: {
+    async reset () {
+      await axios.post('/api/v4/user/reset');
+      this.$router.push('/');
+      setTimeout(() => window.location.reload(true), 100);
+    },
+  },
+};
+</script>
diff --git a/website/client/src/pages/settings/inlineSettings/userEmailSetting.vue b/website/client/src/pages/settings/inlineSettings/userEmailSetting.vue
index a7156f00dc..772a961352 100644
--- a/website/client/src/pages/settings/inlineSettings/userEmailSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/userEmailSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!show"
+      v-if="!modalVisible"
     >
       <td class="settings-label">
         {{ $t("email") }}
@@ -12,14 +12,14 @@
       <td class="settings-button">
         <a
           class="edit-link"
-          @click.prevent="show = true"
+          @click.prevent="modalVisible = true"
         >
           {{ $t('edit') }}
         </a>
       </td>
     </tr>
     <tr
-      v-if="show"
+      v-if="modalVisible"
       class="expanded"
     >
       <td colspan="3">
@@ -72,7 +72,7 @@
         <save-cancel-buttons
           :disable-save="allowedToSave"
           @saveClicked="changeEmail()"
-          @cancelClicked="resetAndClose()"
+          @cancelClicked="closeModal()"
         />
       </td>
     </tr>
diff --git a/website/client/src/pages/settings/inlineSettings/userNameSetting.vue b/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
index ae6f84edeb..98394472ca 100644
--- a/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/userNameSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <fragment>
     <tr
-      v-if="!show"
+      v-if="!modalVisible"
     >
       <td class="settings-label">
         {{ $t("username") }}
@@ -12,14 +12,14 @@
       <td class="settings-button">
         <a
           class="edit-link"
-          @click.prevent="show = true"
+          @click.prevent="modalVisible = true"
         >
           {{ $t(user?.auth?.local?.username ? 'edit' : 'add') }}
         </a>
       </td>
     </tr>
     <tr
-      v-if="show"
+      v-if="modalVisible"
       class="expanded"
     >
       <td colspan="3">
@@ -74,7 +74,7 @@
           <save-cancel-buttons
             :disable-save="usernameCannotSubmit"
             @saveClicked="changeUser('username', cleanedInputValue)"
-            @cancelClicked="resetAndClose()"
+            @cancelClicked="closeModal()"
           />
         </div>
       </td>
diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
index e445a119fc..ec2c58f844 100644
--- a/website/common/locales/en/settings.json
+++ b/website/common/locales/en/settings.json
@@ -61,7 +61,12 @@
     "confirmPass": "Confirm New Password",
     "newUsername": "New Username",
     "dangerZone": "Danger Zone",
-    "resetText1": "WARNING! This resets many parts of your account. This is highly discouraged, but some people find it useful in the beginning after playing with the site for a short time.",
+    "resetText1": "<b>Be careful!</b> This resets many parts of your account. This is highly discouraged, but some people find it useful in the beginning after playing with the site for a short time.",
+    "resetDetail1": "You will lose all Gold, Experience, earned levels, and stat points.",
+    "resetDetail2": "You will keep your current class, Pets and Mounts.",
+    "resetDetail3": "All Tasks and their historical data (except those from Challenges) will be permanently deleted.",
+    "resetDetail4": "You will be able to buy back Equipment, including all limited edition or subscriber Mystery items that you already own.",
+    "resetDetail5": "Another option is using an <b>Orb of Rebirth</b>, which will reset everything else while preserving your Tasks and Equipment.",
     "resetText2": "You will lose all your levels, Gold, and Experience points. All your tasks (except those from challenges) will be deleted permanently and you will lose all of their historical data. You will lose all your equipment except Subscriber Mystery Items and free commemorative items. You will be able to buy the deleted items back, including all limited edition equipment (you will need to be in the correct class to re-buy class-specific gear). You will keep your current class, achievements and your pets and mounts. You might prefer to use an Orb of Rebirth instead, which is a much safer option and which will preserve your tasks and equipment.",
     "deleteLocalAccountText": "Are you sure? This will delete your account forever, and it can never be restored! You will need to register a new account to use Habitica again. Banked or spent Gems will not be refunded. If you're absolutely certain, type your password into the text box below.",
     "deleteSocialAccountText": "Are you sure? This will delete your account forever, and it can never be restored! You will need to register a new account to use Habitica again. Banked or spent Gems will not be refunded. If you're absolutely certain, type \"<%= magicWord %>\" into the text box below.",