Add reset password dialog to user's page

src/views/users/components/ModerationDropdown.vue

@@ -124,7 +124,7 @@ export default {
   },
   methods: {
     getPasswordResetToken(nickname) {
-      this.resetPasswordDialogOpen = true
+      this.$emit('open-reset-token-dialog')
       this.$store.dispatch('GetPasswordResetToken', nickname)
     },
     handleConfirmationResend(user) {

src/views/users/index.vue

@@ -66,7 +66,10 @@
       </el-table-column>
       <el-table-column :label="$t('users.actions')" fixed="right">
         <template slot-scope="scope">
-          <moderation-dropdown :user="scope.row" :page="'users'"/>
+          <moderation-dropdown
+            :user="scope.row"
+            :page="'users'"
+            @open-reset-token-dialog="openResetPasswordDialog"/>
         </template>
       </el-table-column>
     </el-table>
@@ -170,6 +173,10 @@ export default {
     clearSelection() {
       this.$refs.usersTable.clearSelection()
     },
+    closeResetPasswordDialog() {
+      this.resetPasswordDialogOpen = false
+      this.$store.dispatch('RemovePasswordToken')
+    },
     async createNewAccount(accountData) {
       await this.$store.dispatch('CreateNewAccount', accountData)
       this.createAccountDialogOpen = false
@@ -188,9 +195,8 @@ export default {
     handleSelectionChange(value) {
       this.$data.selectedUsers = value
     },
-    closeResetPasswordDialog() {
-      this.resetPasswordDialogOpen = false
-      this.$store.dispatch('RemovePasswordToken')
+    openResetPasswordDialog() {
+      this.resetPasswordDialogOpen = true
     },
     showDeactivatedButton(id) {
       return this.$store.state.user.id !== id

src/views/users/show.vue

@@ -5,8 +5,24 @@
         <el-avatar :src="user.avatar" size="large" />
         <h1>{{ user.display_name }}</h1>
       </div>
-      <moderation-dropdown :user="user" :page="'userPage'"/>
+      <moderation-dropdown
+        :user="user"
+        :page="'userPage'"
+        @open-reset-token-dialog="openResetPasswordDialog"/>
     </header>
+    <el-dialog
+      v-loading="loading"
+      :visible.sync="resetPasswordDialogOpen"
+      :title="$t('users.passwordResetTokenCreated')"
+      custom-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>
     <el-row>
       <el-col :span="8">
         <el-card class="user-profile-card">
@@ -94,10 +110,20 @@ export default {
   components: { ModerationDropdown, Status },
   data() {
     return {
-      showPrivate: false
+      showPrivate: false,
+      resetPasswordDialogOpen: false
     }
   },
   computed: {
+    loading() {
+      return this.$store.state.users.loading
+    },
+    passwordResetLink() {
+      return this.$store.state.users.passwordResetToken.link
+    },
+    passwordResetToken() {
+      return this.$store.state.users.passwordResetToken.token
+    },
     statuses() {
       return this.$store.state.userProfile.statuses
     },
@@ -115,8 +141,15 @@ export default {
     this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: false })
   },
   methods: {
+    closeResetPasswordDialog() {
+      this.resetPasswordDialogOpen = false
+      this.$store.dispatch('RemovePasswordToken')
+    },
     onTogglePrivate() {
       this.$store.dispatch('FetchUserProfile', { userId: this.$route.params.id, godmode: this.showPrivate })
+    },
+    openResetPasswordDialog() {
+      this.resetPasswordDialogOpen = true
     }
   }
 }