User.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div id="user">
  3. <md-card>
  4. <md-card-header>
  5. <span class="md-title">User: {{ user.username }}</span>
  6. </md-card-header>
  7. <md-card-content>
  8. <md-input-container>
  9. <label>Email</label>
  10. <md-input v-model="user.email" />
  11. </md-input-container>
  12. <div class="md-body-2">Change password</div>
  13. <md-input-container id="password-input" md-has-password>
  14. <label>New password</label>
  15. <md-input v-model="password" type="password" />
  16. </md-input-container>
  17. <md-button class="md-raised md-primary" @click="save()">Save</md-button>
  18. </md-card-content>
  19. </md-card>
  20. <ibt-dialog ref="dialogObj" />
  21. </div>
  22. </template>
  23. <script>
  24. import IbtDialog from './IbtDialog.vue';
  25. export default {
  26. data () {
  27. return {
  28. user: {},
  29. password: null
  30. }
  31. },
  32. computed: {
  33. loggedInUser() {
  34. return this.$store.state.loggedInUser;
  35. }
  36. },
  37. beforeCreate: function() {
  38. this.usersUrl = this.$resource('users{/id}');
  39. },
  40. mounted: function() {
  41. this.getUser(this.$route.params.id);
  42. },
  43. methods: {
  44. getUser(id) {
  45. this.usersUrl.get({id: id}).then((response) => {
  46. return response.json();
  47. }, (response) => {
  48. this.$refs.dialogObj.show({text: 'unable to get user'});
  49. }).then((data) => {
  50. this.user = data || {};
  51. });
  52. },
  53. save() {
  54. var user_data = {password: this.password, email: this.user.email};
  55. this.usersUrl.update({id: this.user._id}, user_data).then((response) => {
  56. return response.json();
  57. }, (response) => {
  58. this.$refs.dialogObj.show({text: 'unable to save user settings'});
  59. }).then((data) => {
  60. this.user = data;
  61. });
  62. }
  63. },
  64. components: { IbtDialog }
  65. }
  66. </script>
  67. <style>
  68. #user {
  69. padding: 10px;
  70. }
  71. </style>