Add option to reset password of agents to Admin (#351)

* Add option to reset password of agents to Admin * Fix copy, remove setTimeout
chatwoot · Dec 13, 2019 · 5b275ea · 5b275ea
1 parent cef1200
commit 5b275ea
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 35 deletions.
diff --git a/app/javascript/dashboard/i18n/locale/en/agentMgmt.json b/app/javascript/dashboard/i18n/locale/en/agentMgmt.json
@@ -80,9 +80,16 @@
         "SUBMIT": "Edit Agent"
       },
       "BUTTON_TEXT": "Edit",
+      "CANCEL_BUTTON_TEXT": "Cancel",
       "API": {
         "SUCCESS_MESSAGE": "Agent updated successfully",
         "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+      },
+      "PASSWORD_RESET": {
+        "ADMIN_RESET_BUTTON": "Reset Password",
+        "ADMIN_SUCCESS_MESSAGE": "An email with reset password instructions has been sent to the agent",
+        "SUCCESS_MESSAGE": "Agent password reset successfully",
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
     "SEARCH": {

diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -1,19 +1,22 @@
 <template>
   <modal :show.sync="show" :on-close="onClose">
     <div class="column content-box">
-      <woot-modal-header
-        :header-title="pageTitle"
-      />
-      <form class="row medium-8" v-on:submit.prevent="editAgent()">
+      <woot-modal-header :header-title="pageTitle" />
+      <form class="row medium-8" @submit.prevent="editAgent()">
         <div class="medium-12 columns">
-          <label :class="{ 'error': $v.agentName.$error }">
+          <label :class="{ error: $v.agentName.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
-            <input type="text" v-model.trim="agentName" @input="$v.agentName.$touch" :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')">
+            <input
+              v-model.trim="agentName"
+              type="text"
+              :placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
+              @input="$v.agentName.$touch"
+            />
           </label>
         </div>
 
         <div class="medium-12 columns">
-          <label :class="{ 'error': $v.agentType.$error }">
+          <label :class="{ error: $v.agentType.$error }">
             {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
             <multiselect
               v-model.trim="agentType"
@@ -23,19 +26,31 @@
               :searchable="false"
               @select="setPageName"
             />
-            <span class="message" v-if="$v.agentType.$error">
+            <span v-if="$v.agentType.$error" class="message">
               {{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
             </span>
           </label>
         </div>
-        <div class="modal-footer">
-          <div class="medium-12 columns">
+        <div class="medium-12 modal-footer">
+          <div class="medium-6 columns">
             <woot-submit-button
-              :disabled="$v.agentType.$invalid || $v.agentName.$invalid || editAgentsApi.showLoading"
+              :disabled="
+                $v.agentType.$invalid ||
+                  $v.agentName.$invalid ||
+                  editAgentsApi.showLoading
+              "
               :button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
               :loading="editAgentsApi.showLoading"
             />
-            <a @click="onClose">Cancel</a>
+            <a @click="onClose">
+              {{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
+            </a>
+          </div>
+          <div class="medium-6 columns text-right">
+            <a @click="resetPassword">
+              <i class="ion-locked"></i>
+              {{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
+            </a>
           </div>
         </div>
       </form>
@@ -48,19 +63,19 @@
 /* eslint no-console: 0 */
 import { required, minLength } from 'vuelidate/lib/validators';
 
-import PageHeader from '../SettingsSubPageHeader';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
 import Modal from '../../../../components/Modal';
+import Auth from '../../../../api/auth';
 
 export default {
   components: {
-    PageHeader,
     WootSubmitButton,
     Modal,
   },
   props: {
     id: Number,
     name: String,
+    email: String,
     type: String,
     onClose: Function,
   },
@@ -77,6 +92,9 @@ export default {
         name: this.type,
         label: this.type,
       },
+      agentCredentials: {
+        email: this.email,
+      },
       show: true,
     };
   },
@@ -103,34 +121,56 @@ export default {
       bus.$emit('newToastMessage', this.editAgentsApi.message);
     },
     resetForm() {
-      this.agentName = this.agentType = '';
+      this.agentName = '';
+      this.agentType = '';
       this.$v.agentName.$reset();
       this.$v.agentType.$reset();
     },
     editAgent() {
       // Show loading on button
       this.editAgentsApi.showLoading = true;
       // Make API Calls
-      this.$store.dispatch('editAgent', {
-        id: this.id,
-        name: this.agentName,
-        role: this.agentType.name.toLowerCase(),
-      })
-      .then(() => {
-        // Reset Form, Show success message
-        this.editAgentsApi.showLoading = false;
-        this.editAgentsApi.message = this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE');
-        this.showAlert();
-        this.resetForm();
-        setTimeout(() => {
-          this.onClose();
-        }, 10);
-      })
-      .catch(() => {
-        this.editAgentsApi.showLoading = false;
-        this.editAgentsApi.message = this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE');
-        this.showAlert();
-      });
+      this.$store
+        .dispatch('editAgent', {
+          id: this.id,
+          name: this.agentName,
+          role: this.agentType.name.toLowerCase(),
+        })
+        .then(() => {
+          // Reset Form, Show success message
+          this.editAgentsApi.showLoading = false;
+          this.editAgentsApi.message = this.$t(
+            'AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'
+          );
+          this.showAlert();
+          this.resetForm();
+          setTimeout(() => {
+            this.onClose();
+          }, 10);
+        })
+        .catch(() => {
+          this.editAgentsApi.showLoading = false;
+          this.editAgentsApi.message = this.$t(
+            'AGENT_MGMT.EDIT.API.ERROR_MESSAGE'
+          );
+          this.showAlert();
+        });
+    },
+    resetPassword() {
+      // Call resetPassword from Auth Service
+      Auth.resetPassword(this.agentCredentials)
+        .then(() => {
+          this.editAgentsApi.message = this.$t(
+            'AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE'
+          );
+          this.showAlert();
+        })
+        .catch(() => {
+          this.editAgentsApi.message = this.$t(
+            'AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'
+          );
+          this.showAlert();
+        });
     },
   },
 };