Add link for resetting password

src/store/modules/users.js

@@ -13,7 +13,10 @@ const users = {
       active: false,
       deactivated: false
     },
-    passwordResetToken: ''
+    passwordResetToken: {
+      token: '',
+      link: ''
+    }
   },
   mutations: {
     SET_USERS: (state, users) => {
@@ -46,8 +49,9 @@ const users = {
     SET_PAGE_SIZE: (state, pageSize) => {
       state.pageSize = pageSize
     },
-    SET_PASSWORD_RESET_TOKEN: (state, token) => {
-      state.passwordResetToken = token
+    SET_PASSWORD_RESET_TOKEN: (state, { token, link }) => {
+      state.passwordResetToken.token = token
+      state.passwordResetToken.link = link
     },
     SET_SEARCH_QUERY: (state, query) => {
       state.searchQuery = query
@@ -86,11 +90,11 @@ const users = {
       loadUsers(commit, page, response.data)
     },
     async GetPasswordResetToken({ commit, state, getters }, nickname) {
-      const response = await getPasswordResetToken(nickname, getters.authHost, getters.token)
-      commit('SET_PASSWORD_RESET_TOKEN', response.data)
+      const { data } = await getPasswordResetToken(nickname, getters.authHost, getters.token)
+      commit('SET_PASSWORD_RESET_TOKEN', data)
     },
     RemovePasswordToken({ commit }) {
-      commit('SET_PASSWORD_RESET_TOKEN', '')
+      commit('SET_PASSWORD_RESET_TOKEN', { link: '', token: '' })
     },
     async RemoveTag({ commit, getters }, { users, tag }) {
       const nicknames = users.map(user => user.nickname)

src/views/users/index.vue

@@ -9,7 +9,7 @@
       <el-input :placeholder="$t('users.search')" v-model="search" class="search" @input="handleDebounceSearchInput"/>
     </div>
     <div class="actions-container">
-      <el-button class="actions-button create-account" @click="dialogFormVisible = true">
+      <el-button class="actions-button create-account" @click="createAccountDialogOpen = true">
         <span>
           <i class="el-icon-plus"/>
           {{ $t('users.createAccount') }}
@@ -20,9 +20,9 @@
         @apply-action="clearSelection"/>
     </div>
     <new-account-dialog
-      :dialog-form-visible="dialogFormVisible"
+      :dialog-form-visible="createAccountDialogOpen"
       @createNewAccount="createNewAccount"
-      @closeWindow="dialogFormVisible = false"/>
+      @closeWindow="createAccountDialogOpen = false"/>
     <el-table
       v-loading="loading"
       ref="usersTable"
@@ -139,13 +139,17 @@
       </el-table-column>
     </el-table>
     <el-dialog
-      :visible.sync="passwordResetTokenDialog"
+      v-loading="loading"
+      :visible.sync="resetPasswordDialogOpen"
       :title="$t('users.passwordResetTokenCreated')"
-      :before-close="removePasswordToken"
-      class="password-reset-token-dialog">
-      <span class="password-reset-token">
-        {{ passwordResetToken }}
-      </span>
+      class="password-reset-token-dialog"
+      @close="closeResetPasswordDialog">
+      <div>
+        <p class="password-reset-token">Password reset token was generated: {{ passwordResetToken }}</p>
+        <p>You can also use this link to reset password:
+          <a :href="passwordResetLink" target="_blank" class="reset-password-link">{{ passwordResetLink }}</a>
+        </p>
+      </div>
     </el-dialog>
     <div v-if="users.length === 0" class="no-users-message">
       <p>There are no users to display</p>
@@ -181,7 +185,8 @@ export default {
     return {
       search: '',
       selectedUsers: [],
-      dialogFormVisible: false
+      createAccountDialogOpen: false,
+      resetPasswordDialogOpen: false
     }
   },
   computed: {
@@ -200,11 +205,11 @@ export default {
     pageSize() {
       return this.$store.state.users.pageSize
     },
-    passwordResetToken() {
-      return this.$store.state.users.passwordResetToken
+    passwordResetLink() {
+      return this.$store.state.users.passwordResetToken.link
     },
-    passwordResetTokenDialog() {
-      return this.$store.state.users.passwordResetToken.length > 0
+    passwordResetToken() {
+      return this.$store.state.users.passwordResetToken.token
     },
     currentPage() {
       return this.$store.state.users.currentPage
@@ -240,7 +245,7 @@ export default {
       } catch (_e) {
         return
       } finally {
-        this.dialogFormVisible = false
+        this.createAccountDialogOpen = false
       }
       this.$message({
         type: 'success',
@@ -251,6 +256,7 @@ export default {
       return str.charAt(0).toUpperCase()
     },
     getPasswordResetToken(nickname) {
+      this.resetPasswordDialogOpen = true
       this.$store.dispatch('GetPasswordResetToken', nickname)
     },
     handleDeactivation({ nickname }) {
@@ -270,7 +276,8 @@ export default {
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
-    removePasswordToken() {
+    closeResetPasswordDialog() {
+      this.resetPasswordDialogOpen = false
       this.$store.dispatch('RemovePasswordToken')
     },
     showAdminAction({ local, id }) {
@@ -321,7 +328,10 @@ export default {
   margin-right: 5px;
 }
 .password-reset-token {
-  margin-bottom: 20px
+  margin: 0 0 14px 0;
+}
+.reset-password-link {
+  text-decoration: underline;
 }
 .users-container {
   h1 {