You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

203 lines
7.2 KiB

  1. <template lang='pug'>
  2. v-container(fluid, grid-list-lg)
  3. v-layout(row, wrap)
  4. v-flex(xs12)
  5. .admin-header
  6. img.animated.fadeInUp(src='/svg/icon-male-user.svg', alt='Edit User', style='width: 80px;')
  7. .admin-header-title
  8. .headline.blue--text.text--darken-2.animated.fadeInLeft Edit User
  9. .subheading.grey--text.animated.fadeInLeft.wait-p2s {{user.name}}
  10. v-spacer
  11. .caption.grey--text.animated.fadeInRight.wait-p5s ID #[strong {{user.id}}]
  12. v-divider.animated.fadeInRight.wait-p3s.mx-3(vertical)
  13. v-btn.animated.fadeInDown.wait-p2s(color='grey', large, outline, to='/users')
  14. v-icon arrow_back
  15. v-dialog(v-model='deleteUserDialog', max-width='500', v-if='user.id !== currentUserId && !user.isSystem')
  16. v-btn.animated.fadeInDown.wait-p1s(color='red', large, outline, slot='activator')
  17. v-icon(color='red') delete
  18. v-card
  19. .dialog-header.is-red Delete User?
  20. v-card-text Are you sure you want to delete user #[strong {{ user.name }}]?
  21. v-card-actions
  22. v-spacer
  23. v-btn(flat, @click='deleteUserDialog = false') Cancel
  24. v-btn(color='red', dark, @click='deleteUser') Delete
  25. v-btn.animated.fadeInDown(color='primary', large, depressed, @click='updateUser')
  26. v-icon(left) check
  27. span Update User
  28. v-flex(xs5)
  29. v-card.animated.fadeInUp
  30. v-toolbar(color='primary', dense, dark, flat)
  31. v-icon.mr-2 directions_run
  32. span Basic Info
  33. v-list.py-0(two-line, dense)
  34. v-list-tile
  35. v-list-tile-avatar
  36. v-icon alternate_email
  37. v-list-tile-content
  38. v-list-tile-title Email
  39. v-list-tile-sub-title {{ user.email }}
  40. v-list-tile-action(v-if='!user.isSystem')
  41. v-btn(icon, color='grey', flat)
  42. v-icon edit
  43. v-divider
  44. v-list-tile
  45. v-list-tile-avatar
  46. v-icon person
  47. v-list-tile-content
  48. v-list-tile-title Display Name
  49. v-list-tile-sub-title {{ user.name }}
  50. v-list-tile-action
  51. v-btn(icon, color='grey', flat)
  52. v-icon edit
  53. v-card.mt-3.animated.fadeInUp.wait-p2s(v-if='!user.isSystem')
  54. v-toolbar(color='primary', dense, dark, flat)
  55. v-icon.mr-2 lock_outline
  56. span Authentication
  57. v-list.py-0(two-line, dense)
  58. v-list-tile
  59. v-list-tile-avatar
  60. v-icon business
  61. v-list-tile-content
  62. v-list-tile-title Provider
  63. v-list-tile-sub-title {{ user.providerKey }}
  64. v-list-tile-action
  65. v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
  66. template(v-if='user.providerKey === `local`')
  67. v-divider
  68. v-list-tile
  69. v-list-tile-avatar
  70. v-icon security
  71. v-list-tile-content
  72. v-list-tile-title Password
  73. v-list-tile-sub-title ********
  74. v-list-tile-action
  75. v-btn(icon, color='grey', flat)
  76. v-icon cached
  77. v-list-tile-action
  78. v-btn(icon, color='grey', flat)
  79. v-icon email
  80. v-divider
  81. v-list-tile
  82. v-list-tile-avatar
  83. v-icon screen_lock_portrait
  84. v-list-tile-content
  85. v-list-tile-title Two Factor Authentication (2FA)
  86. v-list-tile-sub-title.red--text Inactive
  87. v-list-tile-action
  88. v-btn(icon, color='grey', flat)
  89. v-icon power_settings_new
  90. template(v-if='user.providerId')
  91. v-divider
  92. v-list-tile
  93. v-list-tile-avatar
  94. v-icon person
  95. v-list-tile-content
  96. v-list-tile-title Provider Id
  97. v-list-tile-sub-title {{ user.providerId }}
  98. v-card.mt-3.animated.fadeInUp.wait-p4s
  99. v-toolbar(color='primary', dense, dark, flat)
  100. v-icon.mr-2 people
  101. span User Groups
  102. v-list(dense)
  103. template(v-for='(group, idx) in user.groups')
  104. v-list-tile
  105. v-list-tile-avatar
  106. v-icon people_outline
  107. v-list-tile-content
  108. v-list-tile-title {{group.name}}
  109. v-list-tile-action
  110. v-btn(icon, color='red', flat)
  111. v-icon clear
  112. v-divider(v-if='idx < user.groups.length - 1')
  113. v-card-chin
  114. v-spacer
  115. v-btn(small, color='primary', flat)
  116. v-icon(left) how_to_reg
  117. span Assign to group
  118. v-flex(xs7)
  119. v-card.animated.fadeInUp.wait-p2s
  120. v-toolbar(color='primary', dense, dark, flat)
  121. v-icon.mr-2 directions_walk
  122. span Extended Metadata
  123. v-list.py-0(two-line, dense)
  124. v-list-tile
  125. v-list-tile-avatar
  126. v-icon public
  127. v-list-tile-content
  128. v-list-tile-title Location
  129. v-list-tile-sub-title {{ user.location }}
  130. v-list-tile-action
  131. v-btn(icon, color='grey', flat)
  132. v-icon edit
  133. v-divider
  134. v-list-tile
  135. v-list-tile-avatar
  136. v-icon local_library
  137. v-list-tile-content
  138. v-list-tile-title Job Title
  139. v-list-tile-sub-title {{ user.jobTitle }}
  140. v-list-tile-action
  141. v-btn(icon, color='grey', flat)
  142. v-icon edit
  143. v-divider
  144. v-list-tile
  145. v-list-tile-avatar
  146. v-icon map
  147. v-list-tile-content
  148. v-list-tile-title Timezone
  149. v-list-tile-sub-title {{ user.timezone }}
  150. v-list-tile-action
  151. v-btn(icon, color='grey', flat)
  152. v-icon edit
  153. v-card.mt-3.animated.fadeInUp.wait-p4s
  154. v-toolbar(color='primary', dense, dark, flat)
  155. v-icon.mr-2 insert_drive_file
  156. span Content
  157. v-card-text
  158. em.caption.grey--text Coming soon
  159. </template>
  160. <script>
  161. import _ from 'lodash'
  162. import { get } from 'vuex-pathify'
  163. import userQuery from 'gql/admin/users/users-query-single.gql'
  164. export default {
  165. data() {
  166. return {
  167. deleteUserDialog: false,
  168. user: {
  169. }
  170. }
  171. },
  172. computed: {
  173. currentUserId: get('user/id')
  174. },
  175. methods: {
  176. deleteUser() {},
  177. updateUser() {}
  178. },
  179. apollo: {
  180. user: {
  181. query: userQuery,
  182. variables() {
  183. return {
  184. id: _.toSafeInteger(this.$route.params.id)
  185. }
  186. },
  187. fetchPolicy: 'network-only',
  188. update: (data) => data.users.single,
  189. watchLoading (isLoading) {
  190. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
  191. }
  192. }
  193. }
  194. }
  195. </script>
  196. <style lang='scss'>
  197. </style>