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

* Add option to reset password of agents to Admin

* Fix copy, remove setTimeout
This commit is contained in:
Mukesh Chaudhary 2019-12-13 13:04:49 +05:30 committed by Sojan Jose
parent cef1200351
commit 5b275ea157
2 changed files with 82 additions and 35 deletions

View file

@ -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": {

View file

@ -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,7 +121,8 @@ 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();
},
@ -111,26 +130,47 @@ export default {
// 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();
});
},
},
};