Render dialog window for resetting password on Status view page, fix styles

src/views/statuses/show.vue

@@ -27,6 +27,9 @@
         :page="'userPage'"
         @open-reset-token-dialog="openResetPasswordDialog"/>
     </div>
+    <reset-password-dialog
+      :reset-password-dialog-open="resetPasswordDialogOpen"
+      @close-reset-token-dialog="closeResetPasswordDialog"/>
     <div class="status-container">
       <status :status="status" :account="user" :show-checkbox="false" :godmode="showPrivate"/>
     </div>
@@ -49,10 +52,11 @@
 import Status from '@/components/Status'
 import ModerationDropdown from '../users/components/ModerationDropdown'
 import RebootButton from '@/components/RebootButton'
+import ResetPasswordDialog from '@/views/users/components/ResetPasswordDialog'
 
 export default {
   name: 'UsersShow',
-  components: { ModerationDropdown, RebootButton, Status },
+  components: { ModerationDropdown, RebootButton, ResetPasswordDialog, Status },
   data() {
     return {
       showPrivate: false,
@@ -94,6 +98,10 @@ export default {
     accountExists(account, key) {
       return account[key]
     },
+    closeResetPasswordDialog() {
+      this.resetPasswordDialogOpen = false
+      this.$store.dispatch('RemovePasswordToken')
+    },
     onTogglePrivate() {
       this.$store.dispatch('FetchUserStatuses', { userId: this.user.id, godmode: this.showPrivate })
     },
@@ -113,6 +121,12 @@ export default {
   margin-left: 28px;
   color: #606266;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
 .reboot-button {
   padding: 10px;
   margin-left: 6px;
@@ -124,6 +138,9 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.reset-password-link {
+  text-decoration: underline;
+}
 .show-private-statuses {
   margin-left: 28px;
   margin-bottom: 20px;
@@ -164,6 +181,9 @@ export default {
     display: flex;
     justify-content: space-between;
   }
+  .password-reset-token-dialog {
+    width: 85%
+  }
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }

src/views/users/components/ResetPasswordDialog.vue

@@ -45,14 +45,3 @@ export default {
 }
 </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

@@ -234,17 +234,20 @@ export default {
 .create-account > .el-icon-plus {
   margin-right: 5px;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
+.reset-password-link {
+  text-decoration: underline;
+}
 .users-header-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.password-reset-token {
-  margin: 0 0 14px 0;
-}
-.reset-password-link {
-  text-decoration: underline;
-}
 .users-container {
   h1 {
     margin: 10px 0 0 15px;
@@ -278,6 +281,9 @@ 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

@@ -192,7 +192,6 @@ table {
   display: flex;
   align-items: center;
 }
-
 .el-table--border::after, .el-table--group::after, .el-table::before {
   background-color: transparent;
 }
@@ -211,6 +210,12 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.password-reset-token {
+  margin: 0 0 14px 0;
+}
+.password-reset-token-dialog {
+  width: 50%
+}
 .poll ul {
   list-style-type: none;
   padding: 0;
@@ -228,6 +233,9 @@ table {
 .recent-statuses-header {
   margin-top: 10px;
 }
+.reset-password-link {
+  text-decoration: underline;
+}
 .security-setting-button {
   margin-top: 20px;
   width: 100%;
@@ -279,6 +287,9 @@ table {
   .el-timeline-item__wrapper {
     padding-left: 18px;
   }
+  .password-reset-token-dialog {
+    width: 85%
+  }
   .recent-statuses {
     margin: 20px 10px 15px 10px;
   }