User.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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" autocorrect="off" autocapitalize="none" />
  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="user.password" type="password" />
  16. </md-input-container>
  17. <md-switch v-if="loggedInUser.isAdmin && loggedInUser.username != user.username" v-model="user.isAdmin" class="md-warn">is admin</md-switch>
  18. <br />
  19. <md-button id="save-button" class="md-raised md-primary" @click="save()">Save</md-button>
  20. </md-card-content>
  21. </md-card>
  22. <ibt-snackbar ref="snackbarObj" />
  23. <ibt-dialog ref="dialogObj" />
  24. </div>
  25. </template>
  26. <script>
  27. import IbtDialog from './IbtDialog.vue';
  28. import IbtSnackbar from './IbtSnackbar.vue';
  29. export default {
  30. data() {
  31. return {
  32. user: {_id: null, email: '', password: null, isAdmin: false},
  33. password: null
  34. }
  35. },
  36. computed: {
  37. loggedInUser() {
  38. return this.$store.state.loggedInUser;
  39. }
  40. },
  41. beforeCreate: function() {
  42. this.usersUrl = this.$resource('users{/id}');
  43. },
  44. mounted: function() {
  45. this.$router.afterEach((to, from) => {
  46. if (this.user._id && this.user._id != this.$route.params.id &&
  47. to.name == from.name && to.name == 'user') {
  48. this.getUser(this.$route.params.id);
  49. }
  50. });
  51. this.getUser(this.$route.params.id);
  52. },
  53. methods: {
  54. getUser(id) {
  55. this.usersUrl.get({id: id}).then((response) => {
  56. return response.json();
  57. }, (response) => {
  58. this.$refs.dialogObj.show({text: 'unable to get user'});
  59. }).then((data) => {
  60. this.user = data || {};
  61. });
  62. },
  63. save() {
  64. this.usersUrl.update({id: this.user._id}, this.user).then((response) => {
  65. return response.json();
  66. }, (response) => {
  67. this.$refs.dialogObj.show({text: 'unable to save user settings'});
  68. }).then((data) => {
  69. this.user = data;
  70. this.$refs.snackbarObj.show('user saved');
  71. });
  72. }
  73. },
  74. components: { IbtDialog, IbtSnackbar }
  75. }
  76. </script>
  77. <style scoped>
  78. #user {
  79. padding: 10px;
  80. }
  81. #save-button {
  82. margin-top: 40px;
  83. }
  84. </style>