User.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data () {
  25. return {
  26. user: {},
  27. password: null
  28. }
  29. },
  30. computed: {
  31. loggedInUser() {
  32. return this.$store.state.loggedInUser;
  33. }
  34. },
  35. beforeCreate: function() {
  36. this.usersUrl = this.$resource('users{/id}');
  37. },
  38. mounted: function() {
  39. this.getUser(this.$route.params.id);
  40. },
  41. methods: {
  42. getUser(id) {
  43. this.usersUrl.get({id: id}).then((response) => {
  44. return response.json();
  45. }, (response) => {
  46. alert('getUsers: unable to get resource');
  47. }).then((data) => {
  48. this.user = data || {};
  49. });
  50. },
  51. save() {
  52. var user_data = {password: this.password, email: this.user.email};
  53. this.usersUrl.update({id: this.user._id}, user_data).then((response) => {
  54. return response.json();
  55. }, (response) => {
  56. alert('save: unable to get resource');
  57. }).then((data) => {
  58. this.user = data;
  59. });
  60. }
  61. }
  62. }
  63. </script>
  64. <style>
  65. #user {
  66. padding: 10px;
  67. }
  68. </style>