Extract Reset Password Dialog into separate component

src/views/users/components/ResetPasswordDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-dialog
+    v-loading="loading"
+    :visible="dialogOpen"
+    :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>
+</template>
+
+<script>
+export default {
+  name: 'ResetPasswordDialog',
+  props: {
+    resetPasswordDialogOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    dialogOpen() {
+      return this.resetPasswordDialogOpen
+    },
+    loading() {
+      return this.$store.state.users.loading
+    },
+    passwordResetLink() {
+      return this.$store.state.users.passwordResetToken.link
+    },
+    passwordResetToken() {
+      return this.$store.state.users.passwordResetToken.token
+    }
+  },
+  methods: {
+    closeResetPasswordDialog() {
+      this.$emit('close-reset-token-dialog')
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+.password-reset-token-dialog {
+  width: 50%
+}
+
+@media only screen and (max-width:480px) {
+  .password-reset-token-dialog {
+    width: 85%
+  }
+}
+</style>

src/views/users/index.vue

@@ -81,19 +81,9 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog
+    <reset-password-dialog
-      v-loading="loading"
+      :reset-password-dialog-open="resetPasswordDialogOpen"
-      :visible.sync="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
-      :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>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"
@@ -115,6 +105,7 @@ import MultipleUsersMenu from './components/MultipleUsersMenu'
 import NewAccountDialog from './components/NewAccountDialog'
 import ModerationDropdown from './components/ModerationDropdown'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from './components/ResetPasswordDialog'
 
 export default {
   name: 'Users',
@@ -123,6 +114,7 @@ export default {
     ModerationDropdown,
     MultipleUsersMenu,
     RebootButton,
+    ResetPasswordDialog,
     UsersFilter
   },
   data() {
@@ -149,12 +141,6 @@ export default {
     pageSize() {
       return this.$store.state.users.pageSize
     },
-    passwordResetLink() {
-      return this.$store.state.users.passwordResetToken.link
-    },
-    passwordResetToken() {
-      return this.$store.state.users.passwordResetToken.token
-    },
     currentPage() {
       return this.$store.state.users.currentPage
     },
@@ -256,9 +242,6 @@ export default {
 .password-reset-token {
   margin: 0 0 14px 0;
 }
-.password-reset-token-dialog {
-  width: 50%
-}
 .reset-password-link {
   text-decoration: underline;
 }
@@ -295,9 +278,6 @@ export default {
 }
 
 @media only screen and (max-width:480px) {
-  .password-reset-token-dialog {
-    width: 85%
-  }
   .users-container {
     h1 {
       margin: 0;

src/views/users/show.vue

@@ -26,19 +26,9 @@
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
     </div>
-    <el-dialog
+    <reset-password-dialog
-      v-loading="loading"
+      :reset-password-dialog-open="resetPasswordDialogOpen"
-      :visible.sync="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
-      :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>
     <div class="user-profile-container">
       <el-card class="user-profile-card">
         <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
@@ -121,10 +111,11 @@ import Status from '@/components/Status'
 import ModerationDropdown from './components/ModerationDropdown'
 import SecuritySettingsModal from './components/SecuritySettingsModal'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from './components/ResetPasswordDialog'
 
 export default {
   name: 'UsersShow',
-  components: { ModerationDropdown, RebootButton, Status, SecuritySettingsModal },
+  components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status, SecuritySettingsModal },
   data() {
     return {
       showPrivate: false,
@@ -145,12 +136,6 @@ export default {
     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
     },