resetAccount

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 {

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,

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

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>
 

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) {

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;
     },
   },
 };

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>

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>

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>

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>