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.

913 lines
41 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='$t(`admin:users.edit`)', style='width: 80px;')
  7. .admin-header-title
  8. .headline.blue--text.text--darken-2.animated.fadeInLeft {{$t('admin:users.edit')}}
  9. .subtitle-1.grey--text.animated.fadeInLeft.wait-p2s {{user.name}}
  10. v-spacer
  11. template(v-if='user.isActive')
  12. status-indicator.mr-3(positive, pulse)
  13. .caption.green--text {{$t('admin:users.active')}}
  14. template(v-else)
  15. status-indicator.mr-3(negative, pulse)
  16. .caption.red--text {{$t('admin:users.inactive')}}
  17. template(v-if='user.isVerified')
  18. status-indicator.mr-3.ml-4(active, pulse)
  19. .caption.blue--text {{$t('admin:users.verified')}}
  20. template(v-else)
  21. status-indicator.mr-3.ml-4(intermediary, pulse)
  22. .caption.deep-orange--text {{$t('admin:users.unverified')}}
  23. v-spacer
  24. i18next.caption.grey--text.animated.fadeInRight.wait-p5s(path='admin:users.id', tag='div')
  25. strong(place='id') {{user.id}}
  26. v-divider.animated.fadeInRight.wait-p4s.ml-3(vertical)
  27. v-btn.ml-3.animated.fadeInDown.wait-p3s(color='grey', large, outlined, to='/users')
  28. v-icon mdi-arrow-left
  29. v-menu(offset-y, origin='top right')
  30. template(v-slot:activator='{ on }')
  31. v-btn.ml-3.animated.fadeInDown.wait-p2s(color='indigo', v-on='on', large, depressed, dark)
  32. span Actions
  33. v-icon(right) mdi-chevron-down
  34. v-list(dense, nav)
  35. v-list-item(v-if='!user.isActive', @click='activateUser')
  36. v-list-item-icon
  37. v-icon(color='purple') mdi-account-key
  38. v-list-item-title Activate
  39. v-list-item(v-else, @click='deactivateUser', :disabled='user.id == currentUserId || user.isSystem')
  40. v-list-item-icon
  41. v-icon(color='purple') mdi-account-cancel
  42. v-list-item-title Deactivate
  43. v-list-item(@click='verifyUser', :disabled='user.isVerified')
  44. v-list-item-icon
  45. v-icon(color='blue') mdi-account-check
  46. v-list-item-title Set as Verified
  47. v-list-item(@click='deleteUserDialog = true', :disabled='user.id == currentUserId || user.isSystem')
  48. v-list-item-icon
  49. v-icon(color='red') mdi-trash-can-outline
  50. v-list-item-title Delete
  51. v-btn.ml-3.animated.fadeInDown(color='primary', large, depressed, @click='updateUser')
  52. v-icon(left) mdi-check
  53. span {{$t('admin:users.updateUser')}}
  54. v-flex(xs6)
  55. v-card.animated.fadeInUp
  56. v-toolbar(color='primary', dense, dark, flat)
  57. v-icon.mr-2 mdi-information-variant
  58. span {{$t('admin:users.basicInfo')}}
  59. v-list.py-0(two-line, dense)
  60. v-list-item
  61. v-list-item-avatar(size='32')
  62. v-icon mdi-email-variant
  63. v-list-item-content
  64. v-list-item-title {{$t('admin:users.email')}}
  65. v-list-item-subtitle {{ user.email }}
  66. v-list-item-action(v-if='!user.isSystem && user.providerKey === `local`')
  67. v-menu(
  68. v-model='editPop.email'
  69. :close-on-content-click='false'
  70. min-width='350'
  71. left
  72. )
  73. template(v-slot:activator='{ on }')
  74. v-btn(icon, color='grey', x-small, v-on='on', @click='focusField(`iptEmail`)')
  75. v-icon mdi-pencil
  76. v-card
  77. v-text-field(
  78. ref='iptEmail'
  79. v-model='user.email'
  80. :label='$t(`admin:users.email`)'
  81. solo
  82. hide-details
  83. append-icon='mdi-check'
  84. @click:append='editPop.email = false'
  85. @keydown.enter='editPop.email = false'
  86. @keydown.esc='editPop.email = false'
  87. )
  88. v-divider
  89. v-list-item
  90. v-list-item-avatar(size='32')
  91. v-icon mdi-account
  92. v-list-item-content
  93. v-list-item-title {{$t('admin:users.displayName')}}
  94. v-list-item-subtitle {{ user.name }}
  95. v-list-item-action
  96. v-menu(
  97. v-model='editPop.name'
  98. :close-on-content-click='false'
  99. min-width='350'
  100. left
  101. )
  102. template(v-slot:activator='{ on }')
  103. v-btn(icon, color='grey', x-small, v-on='on', @click='focusField(`iptDisplayName`)')
  104. v-icon mdi-pencil
  105. v-card
  106. v-text-field(
  107. ref='iptDisplayName'
  108. v-model='user.name'
  109. :label='$t(`admin:users.displayName`)'
  110. solo
  111. hide-details
  112. append-icon='mdi-check'
  113. @click:append='editPop.name = false'
  114. @keydown.enter='editPop.name = false'
  115. @keydown.esc='editPop.name = false'
  116. )
  117. v-card.mt-3.animated.fadeInUp.wait-p2s(v-if='!user.isSystem')
  118. v-toolbar(color='primary', dense, dark, flat)
  119. v-icon.mr-2 mdi-lock-outline
  120. span {{$t('admin:users.authentication')}}
  121. v-list.py-0(two-line, dense)
  122. v-list-item
  123. v-list-item-avatar(size='32')
  124. v-icon mdi-domain
  125. v-list-item-content
  126. v-list-item-title {{$t('admin:users.authProvider')}}
  127. v-list-item-subtitle {{ user.providerKey }}
  128. //- v-list-item-action
  129. //- v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='', contain, max-height='32', position='center right')
  130. template(v-if='user.providerKey === `local`')
  131. v-divider
  132. v-list-item
  133. v-list-item-avatar(size='32')
  134. v-icon mdi-textbox-password
  135. v-list-item-content
  136. v-list-item-title {{$t('admin:users.password')}}
  137. v-list-item-subtitle &bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;
  138. v-list-item-action
  139. v-menu(
  140. v-model='editPop.newPassword'
  141. :close-on-content-click='false'
  142. min-width='350'
  143. left
  144. )
  145. template(v-slot:activator='{ on: menu }')
  146. v-tooltip(top)
  147. template(v-slot:activator='{ on: tooltip }')
  148. v-btn(icon, color='grey', x-small, v-on='{ ...menu, ...tooltip }', @click='focusField(`iptNewPassword`)')
  149. v-icon mdi-cached
  150. span {{$t('admin:users.changePassword')}}
  151. v-card
  152. v-text-field(
  153. ref='iptNewPassword'
  154. v-model='newPassword'
  155. :label='$t(`admin:users.newPassword`)'
  156. solo
  157. hide-details
  158. append-icon='mdi-check'
  159. type='password'
  160. @click:append='editPop.newPassword = false'
  161. @keydown.enter='editPop.newPassword = false'
  162. @keydown.esc='editPop.newPassword = false'
  163. )
  164. v-list-item-action
  165. v-tooltip(top)
  166. template(v-slot:activator='{ on }')
  167. v-btn(icon, color='grey', x-small, v-on='on', disabled)
  168. v-icon mdi-email
  169. span Send Password Reset Email
  170. v-divider
  171. v-list-item
  172. v-list-item-avatar(size='32')
  173. v-icon mdi-two-factor-authentication
  174. v-list-item-content
  175. v-list-item-title {{$t('admin:users.tfa')}}
  176. v-list-item-subtitle.red--text Inactive
  177. v-list-item-action
  178. v-tooltip(top)
  179. template(v-slot:activator='{ on }')
  180. v-btn(icon, color='grey', x-small, v-on='on', disabled)
  181. v-icon mdi-power
  182. span {{$t('admin:users.toggle2FA')}}
  183. template(v-if='user.providerId')
  184. v-divider
  185. v-list-item
  186. v-list-item-avatar(size='32')
  187. v-icon mdi-music-accidental-sharp
  188. v-list-item-content
  189. v-list-item-title {{$t('admin:users.authProviderId')}}
  190. v-list-item-subtitle {{ user.providerId }}
  191. v-card.mt-3.animated.fadeInUp.wait-p4s
  192. v-toolbar(color='primary', dense, dark, flat)
  193. v-icon.mr-2 mdi-account-group
  194. span {{$t('admin:users.groups')}}
  195. v-list(dense)
  196. template(v-for='(group, idx) in user.groups')
  197. v-list-item(:key='`group-` + group.id')
  198. v-list-item-avatar(size='32')
  199. v-icon mdi-account-group-outline
  200. v-list-item-content
  201. v-list-item-title {{group.name}}
  202. v-list-item-action(v-if='!user.isSystem')
  203. v-btn(icon, color='red', x-small, @click='unassignGroup(group.id)')
  204. v-icon mdi-close
  205. v-divider(v-if='idx < user.groups.length - 1')
  206. v-alert.mx-3(v-if='user.groups.length < 1', outlined, color='grey darken-1', icon='mdi-alert')
  207. .caption {{$t('admin:users.noGroupAssigned')}}
  208. v-card-chin(v-if='!user.isSystem')
  209. v-spacer
  210. v-select(
  211. ref='iptAssignGroup'
  212. :items='groups'
  213. v-model='newGroup'
  214. :label='$t(`admin:users.selectGroup`)'
  215. item-value='id'
  216. item-text='name'
  217. item-disabled='isSystem'
  218. solo
  219. flat
  220. hide-details
  221. @keydown.esc='editPop.assignGroup = false'
  222. style='max-width: 300px;'
  223. )
  224. v-btn.ml-2.px-4(depressed, color='primary', height='48', @click='assignGroup', :disabled='newGroup === 0')
  225. v-icon(left) mdi-clipboard-account-outline
  226. span {{$t('admin:users.groupAssign')}}
  227. v-system-bar(window, :color='$vuetify.theme.dark ? `grey darken-4-l3` : `grey lighten-3`')
  228. v-spacer
  229. .caption {{$t('admin:users.groupAssignNotice')}}
  230. v-flex(xs6)
  231. v-card.animated.fadeInUp.wait-p2s
  232. v-toolbar(color='primary', dense, dark, flat)
  233. v-icon.mr-2 mdi-account-badge-outline
  234. span {{$t('admin:users.extendedMetadata')}}
  235. v-list.py-0(two-line, dense)
  236. v-list-item
  237. v-list-item-avatar(size='32')
  238. v-icon mdi-map-marker
  239. v-list-item-content
  240. v-list-item-title {{$t('admin:users.location')}}
  241. v-list-item-subtitle {{ user.location }}
  242. v-list-item-action
  243. v-menu(
  244. v-model='editPop.location'
  245. :close-on-content-click='false'
  246. min-width='350'
  247. left
  248. )
  249. template(v-slot:activator='{ on }')
  250. v-btn(icon, color='grey', x-small, v-on='on', @click='focusField(`iptLocation`)')
  251. v-icon mdi-pencil
  252. v-card
  253. v-text-field(
  254. ref='iptLocation'
  255. v-model='user.location'
  256. :label='$t(`admin:users.location`)'
  257. solo
  258. hide-details
  259. append-icon='mdi-check'
  260. @click:append='editPop.location = false'
  261. @keydown.enter='editPop.location = false'
  262. @keydown.esc='editPop.location = false'
  263. )
  264. v-divider
  265. v-list-item
  266. v-list-item-avatar(size='32')
  267. v-icon mdi-account-badge-horizontal-outline
  268. v-list-item-content
  269. v-list-item-title {{$t('admin:users.jobTitle')}}
  270. v-list-item-subtitle {{ user.jobTitle }}
  271. v-list-item-action
  272. v-menu(
  273. v-model='editPop.jobTitle'
  274. :close-on-content-click='false'
  275. min-width='350'
  276. left
  277. )
  278. template(v-slot:activator='{ on }')
  279. v-btn(icon, color='grey', x-small, v-on='on', @click='focusField(`iptJobTitle`)')
  280. v-icon mdi-pencil
  281. v-card
  282. v-text-field(
  283. ref='iptJobTitle'
  284. v-model='user.jobTitle'
  285. :label='$t(`admin:users.jobTitle`)'
  286. solo
  287. hide-details
  288. append-icon='mdi-check'
  289. @click:append='editPop.jobTitle = false'
  290. @keydown.enter='editPop.jobTitle = false'
  291. @keydown.esc='editPop.jobTitle = false'
  292. )
  293. v-divider
  294. v-list-item
  295. v-list-item-avatar(size='32')
  296. v-icon mdi-map-clock-outline
  297. v-list-item-content
  298. v-list-item-title {{$t('admin:users.timezone')}}
  299. v-list-item-subtitle {{ user.timezone }}
  300. v-list-item-action
  301. v-menu(
  302. v-model='editPop.timezone'
  303. :close-on-content-click='false'
  304. min-width='350'
  305. left
  306. )
  307. template(v-slot:activator='{ on }')
  308. v-btn(icon, color='grey', x-small, v-on='on', @click='focusField(`iptTimezone`)')
  309. v-icon mdi-pencil
  310. v-card
  311. v-select(
  312. ref='iptTimezone'
  313. :items='timezones'
  314. v-model='user.timezone'
  315. :label='$t(`admin:users.timezone`)'
  316. solo
  317. dense
  318. hide-details
  319. append-icon='mdi-check'
  320. @click:append='editPop.timezone = false'
  321. @keydown.enter='editPop.timezone = false'
  322. @keydown.esc='editPop.timezone = false'
  323. )
  324. v-card.mt-3.animated.fadeInUp.wait-p4s
  325. v-toolbar(color='primary', dense, dark, flat)
  326. v-icon.mr-2 mdi-file-document-box-multiple-outline
  327. span Content
  328. v-card-text
  329. em.caption.grey--text Coming soon
  330. v-dialog(v-model='deleteUserDialog', max-width='500')
  331. v-card
  332. .dialog-header.is-red {{$t('admin:users.deleteConfirmTitle')}}
  333. v-card-text.pt-5
  334. i18next(path='admin:users.deleteConfirmText', tag='span')
  335. strong(place='username') {{ user.email }}
  336. .caption.mt-3 {{$t('admin:users.deleteConfirmForeignNotice')}}
  337. v-card-actions
  338. v-spacer
  339. v-btn(text, @click='deleteUserDialog = false') {{$t('common:actions.cancel')}}
  340. v-btn(color='red', dark, @click='deleteUser') {{$t('common:actions.delete')}}
  341. </template>
  342. <script>
  343. import _ from 'lodash'
  344. import { get } from 'vuex-pathify'
  345. import gql from 'graphql-tag'
  346. import { StatusIndicator } from 'vue-status-indicator'
  347. import userQuery from 'gql/admin/users/users-query-single.gql'
  348. import groupsQuery from 'gql/admin/users/users-query-groups.gql'
  349. export default {
  350. components: {
  351. StatusIndicator
  352. },
  353. data() {
  354. return {
  355. deleteUserDialog: false,
  356. editPop: {
  357. email: false,
  358. name: false,
  359. pwd: false,
  360. location: false,
  361. jobTitle: false,
  362. timezone: false,
  363. newPassword: false,
  364. assignGroup: false
  365. },
  366. newGroup: 0,
  367. newPassword: '',
  368. user: {
  369. email: '',
  370. name: '',
  371. location: '',
  372. jobTitle: '',
  373. timezone: '',
  374. groups: [],
  375. isActive: false,
  376. isVerified: false
  377. },
  378. timezones: [
  379. { text: '(GMT-11:00) Niue', value: 'Pacific/Niue' },
  380. { text: '(GMT-11:00) Pago Pago', value: 'Pacific/Pago_Pago' },
  381. { text: '(GMT-10:00) Hawaii Time', value: 'Pacific/Honolulu' },
  382. { text: '(GMT-10:00) Rarotonga', value: 'Pacific/Rarotonga' },
  383. { text: '(GMT-10:00) Tahiti', value: 'Pacific/Tahiti' },
  384. { text: '(GMT-09:30) Marquesas', value: 'Pacific/Marquesas' },
  385. { text: '(GMT-09:00) Alaska Time', value: 'America/Anchorage' },
  386. { text: '(GMT-09:00) Gambier', value: 'Pacific/Gambier' },
  387. { text: '(GMT-08:00) Pacific Time', value: 'America/Los_Angeles' },
  388. { text: '(GMT-08:00) Pacific Time - Tijuana', value: 'America/Tijuana' },
  389. { text: '(GMT-08:00) Pacific Time - Vancouver', value: 'America/Vancouver' },
  390. { text: '(GMT-08:00) Pacific Time - Whitehorse', value: 'America/Whitehorse' },
  391. { text: '(GMT-08:00) Pitcairn', value: 'Pacific/Pitcairn' },
  392. { text: '(GMT-07:00) Mountain Time', value: 'America/Denver' },
  393. { text: '(GMT-07:00) Mountain Time - Arizona', value: 'America/Phoenix' },
  394. { text: '(GMT-07:00) Mountain Time - Chihuahua, Mazatlan', value: 'America/Mazatlan' },
  395. { text: '(GMT-07:00) Mountain Time - Dawson Creek', value: 'America/Dawson_Creek' },
  396. { text: '(GMT-07:00) Mountain Time - Edmonton', value: 'America/Edmonton' },
  397. { text: '(GMT-07:00) Mountain Time - Hermosillo', value: 'America/Hermosillo' },
  398. { text: '(GMT-07:00) Mountain Time - Yellowknife', value: 'America/Yellowknife' },
  399. { text: '(GMT-06:00) Belize', value: 'America/Belize' },
  400. { text: '(GMT-06:00) Central Time', value: 'America/Chicago' },
  401. { text: '(GMT-06:00) Central Time - Mexico City', value: 'America/Mexico_City' },
  402. { text: '(GMT-06:00) Central Time - Regina', value: 'America/Regina' },
  403. { text: '(GMT-06:00) Central Time - Tegucigalpa', value: 'America/Tegucigalpa' },
  404. { text: '(GMT-06:00) Central Time - Winnipeg', value: 'America/Winnipeg' },
  405. { text: '(GMT-06:00) Costa Rica', value: 'America/Costa_Rica' },
  406. { text: '(GMT-06:00) El Salvador', value: 'America/El_Salvador' },
  407. { text: '(GMT-06:00) Galapagos', value: 'Pacific/Galapagos' },
  408. { text: '(GMT-06:00) Guatemala', value: 'America/Guatemala' },
  409. { text: '(GMT-06:00) Managua', value: 'America/Managua' },
  410. { text: '(GMT-05:00) America Cancun', value: 'America/Cancun' },
  411. { text: '(GMT-05:00) Bogota', value: 'America/Bogota' },
  412. { text: '(GMT-05:00) Easter Island', value: 'Pacific/Easter' },
  413. { text: '(GMT-05:00) Eastern Time', value: 'America/New_York' },
  414. { text: '(GMT-05:00) Eastern Time - Iqaluit', value: 'America/Iqaluit' },
  415. { text: '(GMT-05:00) Eastern Time - Toronto', value: 'America/Toronto' },
  416. { text: '(GMT-05:00) Guayaquil', value: 'America/Guayaquil' },
  417. { text: '(GMT-05:00) Havana', value: 'America/Havana' },
  418. { text: '(GMT-05:00) Jamaica', value: 'America/Jamaica' },
  419. { text: '(GMT-05:00) Lima', value: 'America/Lima' },
  420. { text: '(GMT-05:00) Nassau', value: 'America/Nassau' },
  421. { text: '(GMT-05:00) Panama', value: 'America/Panama' },
  422. { text: '(GMT-05:00) Port-au-Prince', value: 'America/Port-au-Prince' },
  423. { text: '(GMT-05:00) Rio Branco', value: 'America/Rio_Branco' },
  424. { text: '(GMT-04:00) Atlantic Time - Halifax', value: 'America/Halifax' },
  425. { text: '(GMT-04:00) Barbados', value: 'America/Barbados' },
  426. { text: '(GMT-04:00) Bermuda', value: 'Atlantic/Bermuda' },
  427. { text: '(GMT-04:00) Boa Vista', value: 'America/Boa_Vista' },
  428. { text: '(GMT-04:00) Caracas', value: 'America/Caracas' },
  429. { text: '(GMT-04:00) Curacao', value: 'America/Curacao' },
  430. { text: '(GMT-04:00) Grand Turk', value: 'America/Grand_Turk' },
  431. { text: '(GMT-04:00) Guyana', value: 'America/Guyana' },
  432. { text: '(GMT-04:00) La Paz', value: 'America/La_Paz' },
  433. { text: '(GMT-04:00) Manaus', value: 'America/Manaus' },
  434. { text: '(GMT-04:00) Martinique', value: 'America/Martinique' },
  435. { text: '(GMT-04:00) Port of Spain', value: 'America/Port_of_Spain' },
  436. { text: '(GMT-04:00) Porto Velho', value: 'America/Porto_Velho' },
  437. { text: '(GMT-04:00) Puerto Rico', value: 'America/Puerto_Rico' },
  438. { text: '(GMT-04:00) Santo Domingo', value: 'America/Santo_Domingo' },
  439. { text: '(GMT-04:00) Thule', value: 'America/Thule' },
  440. { text: '(GMT-03:30) Newfoundland Time - St. Johns', value: 'America/St_Johns' },
  441. { text: '(GMT-03:00) Araguaina', value: 'America/Araguaina' },
  442. { text: '(GMT-03:00) Asuncion', value: 'America/Asuncion' },
  443. { text: '(GMT-03:00) Belem', value: 'America/Belem' },
  444. { text: '(GMT-03:00) Buenos Aires', value: 'America/Argentina/Buenos_Aires' },
  445. { text: '(GMT-03:00) Campo Grande', value: 'America/Campo_Grande' },
  446. { text: '(GMT-03:00) Cayenne', value: 'America/Cayenne' },
  447. { text: '(GMT-03:00) Cuiaba', value: 'America/Cuiaba' },
  448. { text: '(GMT-03:00) Fortaleza', value: 'America/Fortaleza' },
  449. { text: '(GMT-03:00) Godthab', value: 'America/Godthab' },
  450. { text: '(GMT-03:00) Maceio', value: 'America/Maceio' },
  451. { text: '(GMT-03:00) Miquelon', value: 'America/Miquelon' },
  452. { text: '(GMT-03:00) Montevideo', value: 'America/Montevideo' },
  453. { text: '(GMT-03:00) Palmer', value: 'Antarctica/Palmer' },
  454. { text: '(GMT-03:00) Paramaribo', value: 'America/Paramaribo' },
  455. { text: '(GMT-03:00) Punta Arenas', value: 'America/Punta_Arenas' },
  456. { text: '(GMT-03:00) Recife', value: 'America/Recife' },
  457. { text: '(GMT-03:00) Rothera', value: 'Antarctica/Rothera' },
  458. { text: '(GMT-03:00) Salvador', value: 'America/Bahia' },
  459. { text: '(GMT-03:00) Santiago', value: 'America/Santiago' },
  460. { text: '(GMT-03:00) Stanley', value: 'Atlantic/Stanley' },
  461. { text: '(GMT-02:00) Noronha', value: 'America/Noronha' },
  462. { text: '(GMT-02:00) Sao Paulo', value: 'America/Sao_Paulo' },
  463. { text: '(GMT-02:00) South Georgia', value: 'Atlantic/South_Georgia' },
  464. { text: '(GMT-01:00) Azores', value: 'Atlantic/Azores' },
  465. { text: '(GMT-01:00) Cape Verde', value: 'Atlantic/Cape_Verde' },
  466. { text: '(GMT-01:00) Scoresbysund', value: 'America/Scoresbysund' },
  467. { text: '(GMT+00:00) Abidjan', value: 'Africa/Abidjan' },
  468. { text: '(GMT+00:00) Accra', value: 'Africa/Accra' },
  469. { text: '(GMT+00:00) Bissau', value: 'Africa/Bissau' },
  470. { text: '(GMT+00:00) Canary Islands', value: 'Atlantic/Canary' },
  471. { text: '(GMT+00:00) Casablanca', value: 'Africa/Casablanca' },
  472. { text: '(GMT+00:00) Danmarkshavn', value: 'America/Danmarkshavn' },
  473. { text: '(GMT+00:00) Dublin', value: 'Europe/Dublin' },
  474. { text: '(GMT+00:00) El Aaiun', value: 'Africa/El_Aaiun' },
  475. { text: '(GMT+00:00) Faeroe', value: 'Atlantic/Faroe' },
  476. { text: '(GMT+00:00) GMT (no daylight saving)', value: 'Etc/GMT' },
  477. { text: '(GMT+00:00) Lisbon', value: 'Europe/Lisbon' },
  478. { text: '(GMT+00:00) London', value: 'Europe/London' },
  479. { text: '(GMT+00:00) Monrovia', value: 'Africa/Monrovia' },
  480. { text: '(GMT+00:00) Reykjavik', value: 'Atlantic/Reykjavik' },
  481. { text: '(GMT+01:00) Algiers', value: 'Africa/Algiers' },
  482. { text: '(GMT+01:00) Amsterdam', value: 'Europe/Amsterdam' },
  483. { text: '(GMT+01:00) Andorra', value: 'Europe/Andorra' },
  484. { text: '(GMT+01:00) Berlin', value: 'Europe/Berlin' },
  485. { text: '(GMT+01:00) Brussels', value: 'Europe/Brussels' },
  486. { text: '(GMT+01:00) Budapest', value: 'Europe/Budapest' },
  487. { text: '(GMT+01:00) Central European Time - Belgrade', value: 'Europe/Belgrade' },
  488. { text: '(GMT+01:00) Central European Time - Prague', value: 'Europe/Prague' },
  489. { text: '(GMT+01:00) Ceuta', value: 'Africa/Ceuta' },
  490. { text: '(GMT+01:00) Copenhagen', value: 'Europe/Copenhagen' },
  491. { text: '(GMT+01:00) Gibraltar', value: 'Europe/Gibraltar' },
  492. { text: '(GMT+01:00) Lagos', value: 'Africa/Lagos' },
  493. { text: '(GMT+01:00) Luxembourg', value: 'Europe/Luxembourg' },
  494. { text: '(GMT+01:00) Madrid', value: 'Europe/Madrid' },
  495. { text: '(GMT+01:00) Malta', value: 'Europe/Malta' },
  496. { text: '(GMT+01:00) Monaco', value: 'Europe/Monaco' },
  497. { text: '(GMT+01:00) Ndjamena', value: 'Africa/Ndjamena' },
  498. { text: '(GMT+01:00) Oslo', value: 'Europe/Oslo' },
  499. { text: '(GMT+01:00) Paris', value: 'Europe/Paris' },
  500. { text: '(GMT+01:00) Rome', value: 'Europe/Rome' },
  501. { text: '(GMT+01:00) Stockholm', value: 'Europe/Stockholm' },
  502. { text: '(GMT+01:00) Tirane', value: 'Europe/Tirane' },
  503. { text: '(GMT+01:00) Tunis', value: 'Africa/Tunis' },
  504. { text: '(GMT+01:00) Vienna', value: 'Europe/Vienna' },
  505. { text: '(GMT+01:00) Warsaw', value: 'Europe/Warsaw' },
  506. { text: '(GMT+01:00) Zurich', value: 'Europe/Zurich' },
  507. { text: '(GMT+02:00) Amman', value: 'Asia/Amman' },
  508. { text: '(GMT+02:00) Athens', value: 'Europe/Athens' },
  509. { text: '(GMT+02:00) Beirut', value: 'Asia/Beirut' },
  510. { text: '(GMT+02:00) Bucharest', value: 'Europe/Bucharest' },
  511. { text: '(GMT+02:00) Cairo', value: 'Africa/Cairo' },
  512. { text: '(GMT+02:00) Chisinau', value: 'Europe/Chisinau' },
  513. { text: '(GMT+02:00) Damascus', value: 'Asia/Damascus' },
  514. { text: '(GMT+02:00) Gaza', value: 'Asia/Gaza' },
  515. { text: '(GMT+02:00) Helsinki', value: 'Europe/Helsinki' },
  516. { text: '(GMT+02:00) Jerusalem', value: 'Asia/Jerusalem' },
  517. { text: '(GMT+02:00) Johannesburg', value: 'Africa/Johannesburg' },
  518. { text: '(GMT+02:00) Khartoum', value: 'Africa/Khartoum' },
  519. { text: '(GMT+02:00) Kiev', value: 'Europe/Kiev' },
  520. { text: '(GMT+02:00) Maputo', value: 'Africa/Maputo' },
  521. { text: '(GMT+02:00) Moscow-01 - Kaliningrad', value: 'Europe/Kaliningrad' },
  522. { text: '(GMT+02:00) Nicosia', value: 'Asia/Nicosia' },
  523. { text: '(GMT+02:00) Riga', value: 'Europe/Riga' },
  524. { text: '(GMT+02:00) Sofia', value: 'Europe/Sofia' },
  525. { text: '(GMT+02:00) Tallinn', value: 'Europe/Tallinn' },
  526. { text: '(GMT+02:00) Tripoli', value: 'Africa/Tripoli' },
  527. { text: '(GMT+02:00) Vilnius', value: 'Europe/Vilnius' },
  528. { text: '(GMT+02:00) Windhoek', value: 'Africa/Windhoek' },
  529. { text: '(GMT+03:00) Baghdad', value: 'Asia/Baghdad' },
  530. { text: '(GMT+03:00) Istanbul', value: 'Europe/Istanbul' },
  531. { text: '(GMT+03:00) Minsk', value: 'Europe/Minsk' },
  532. { text: '(GMT+03:00) Moscow+00 - Moscow', value: 'Europe/Moscow' },
  533. { text: '(GMT+03:00) Nairobi', value: 'Africa/Nairobi' },
  534. { text: '(GMT+03:00) Qatar', value: 'Asia/Qatar' },
  535. { text: '(GMT+03:00) Riyadh', value: 'Asia/Riyadh' },
  536. { text: '(GMT+03:00) Syowa', value: 'Antarctica/Syowa' },
  537. { text: '(GMT+03:30) Tehran', value: 'Asia/Tehran' },
  538. { text: '(GMT+04:00) Baku', value: 'Asia/Baku' },
  539. { text: '(GMT+04:00) Dubai', value: 'Asia/Dubai' },
  540. { text: '(GMT+04:00) Mahe', value: 'Indian/Mahe' },
  541. { text: '(GMT+04:00) Mauritius', value: 'Indian/Mauritius' },
  542. { text: '(GMT+04:00) Moscow+01 - Samara', value: 'Europe/Samara' },
  543. { text: '(GMT+04:00) Reunion', value: 'Indian/Reunion' },
  544. { text: '(GMT+04:00) Tbilisi', value: 'Asia/Tbilisi' },
  545. { text: '(GMT+04:00) Yerevan', value: 'Asia/Yerevan' },
  546. { text: '(GMT+04:30) Kabul', value: 'Asia/Kabul' },
  547. { text: '(GMT+05:00) Aqtau', value: 'Asia/Aqtau' },
  548. { text: '(GMT+05:00) Aqtobe', value: 'Asia/Aqtobe' },
  549. { text: '(GMT+05:00) Ashgabat', value: 'Asia/Ashgabat' },
  550. { text: '(GMT+05:00) Dushanbe', value: 'Asia/Dushanbe' },
  551. { text: '(GMT+05:00) Karachi', value: 'Asia/Karachi' },
  552. { text: '(GMT+05:00) Kerguelen', value: 'Indian/Kerguelen' },
  553. { text: '(GMT+05:00) Maldives', value: 'Indian/Maldives' },
  554. { text: '(GMT+05:00) Mawson', value: 'Antarctica/Mawson' },
  555. { text: '(GMT+05:00) Moscow+02 - Yekaterinburg', value: 'Asia/Yekaterinburg' },
  556. { text: '(GMT+05:00) Tashkent', value: 'Asia/Tashkent' },
  557. { text: '(GMT+05:30) Colombo', value: 'Asia/Colombo' },
  558. { text: '(GMT+05:30) India Standard Time', value: 'Asia/Kolkata' },
  559. { text: '(GMT+05:45) Kathmandu', value: 'Asia/Kathmandu' },
  560. { text: '(GMT+06:00) Almaty', value: 'Asia/Almaty' },
  561. { text: '(GMT+06:00) Bishkek', value: 'Asia/Bishkek' },
  562. { text: '(GMT+06:00) Chagos', value: 'Indian/Chagos' },
  563. { text: '(GMT+06:00) Dhaka', value: 'Asia/Dhaka' },
  564. { text: '(GMT+06:00) Moscow+03 - Omsk', value: 'Asia/Omsk' },
  565. { text: '(GMT+06:00) Thimphu', value: 'Asia/Thimphu' },
  566. { text: '(GMT+06:00) Vostok', value: 'Antarctica/Vostok' },
  567. { text: '(GMT+06:30) Cocos', value: 'Indian/Cocos' },
  568. { text: '(GMT+06:30) Rangoon', value: 'Asia/Yangon' },
  569. { text: '(GMT+07:00) Bangkok', value: 'Asia/Bangkok' },
  570. { text: '(GMT+07:00) Christmas', value: 'Indian/Christmas' },
  571. { text: '(GMT+07:00) Davis', value: 'Antarctica/Davis' },
  572. { text: '(GMT+07:00) Hanoi', value: 'Asia/Saigon' },
  573. { text: '(GMT+07:00) Hovd', value: 'Asia/Hovd' },
  574. { text: '(GMT+07:00) Jakarta', value: 'Asia/Jakarta' },
  575. { text: '(GMT+07:00) Moscow+04 - Krasnoyarsk', value: 'Asia/Krasnoyarsk' },
  576. { text: '(GMT+08:00) Brunei', value: 'Asia/Brunei' },
  577. { text: '(GMT+08:00) China Time - Beijing', value: 'Asia/Shanghai' },
  578. { text: '(GMT+08:00) Choibalsan', value: 'Asia/Choibalsan' },
  579. { text: '(GMT+08:00) Hong Kong', value: 'Asia/Hong_Kong' },
  580. { text: '(GMT+08:00) Kuala Lumpur', value: 'Asia/Kuala_Lumpur' },
  581. { text: '(GMT+08:00) Macau', value: 'Asia/Macau' },
  582. { text: '(GMT+08:00) Makassar', value: 'Asia/Makassar' },
  583. { text: '(GMT+08:00) Manila', value: 'Asia/Manila' },
  584. { text: '(GMT+08:00) Moscow+05 - Irkutsk', value: 'Asia/Irkutsk' },
  585. { text: '(GMT+08:00) Singapore', value: 'Asia/Singapore' },
  586. { text: '(GMT+08:00) Taipei', value: 'Asia/Taipei' },
  587. { text: '(GMT+08:00) Ulaanbaatar', value: 'Asia/Ulaanbaatar' },
  588. { text: '(GMT+08:00) Western Time - Perth', value: 'Australia/Perth' },
  589. { text: '(GMT+08:30) Pyongyang', value: 'Asia/Pyongyang' },
  590. { text: '(GMT+09:00) Dili', value: 'Asia/Dili' },
  591. { text: '(GMT+09:00) Jayapura', value: 'Asia/Jayapura' },
  592. { text: '(GMT+09:00) Moscow+06 - Yakutsk', value: 'Asia/Yakutsk' },
  593. { text: '(GMT+09:00) Palau', value: 'Pacific/Palau' },
  594. { text: '(GMT+09:00) Seoul', value: 'Asia/Seoul' },
  595. { text: '(GMT+09:00) Tokyo', value: 'Asia/Tokyo' },
  596. { text: '(GMT+09:30) Central Time - Darwin', value: 'Australia/Darwin' },
  597. { text: '(GMT+10:00) Dumont D\'Urville', value: 'Antarctica/DumontDUrville' },
  598. { text: '(GMT+10:00) Eastern Time - Brisbane', value: 'Australia/Brisbane' },
  599. { text: '(GMT+10:00) Guam', value: 'Pacific/Guam' },
  600. { text: '(GMT+10:00) Moscow+07 - Vladivostok', value: 'Asia/Vladivostok' },
  601. { text: '(GMT+10:00) Port Moresby', value: 'Pacific/Port_Moresby' },
  602. { text: '(GMT+10:00) Truk', value: 'Pacific/Chuuk' },
  603. { text: '(GMT+10:30) Central Time - Adelaide', value: 'Australia/Adelaide' },
  604. { text: '(GMT+11:00) Casey', value: 'Antarctica/Casey' },
  605. { text: '(GMT+11:00) Eastern Time - Hobart', value: 'Australia/Hobart' },
  606. { text: '(GMT+11:00) Eastern Time - Melbourne, Sydney', value: 'Australia/Sydney' },
  607. { text: '(GMT+11:00) Efate', value: 'Pacific/Efate' },
  608. { text: '(GMT+11:00) Guadalcanal', value: 'Pacific/Guadalcanal' },
  609. { text: '(GMT+11:00) Kosrae', value: 'Pacific/Kosrae' },
  610. { text: '(GMT+11:00) Moscow+08 - Magadan', value: 'Asia/Magadan' },
  611. { text: '(GMT+11:00) Norfolk', value: 'Pacific/Norfolk' },
  612. { text: '(GMT+11:00) Noumea', value: 'Pacific/Noumea' },
  613. { text: '(GMT+11:00) Ponape', value: 'Pacific/Pohnpei' },
  614. { text: '(GMT+12:00) Funafuti', value: 'Pacific/Funafuti' },
  615. { text: '(GMT+12:00) Kwajalein', value: 'Pacific/Kwajalein' },
  616. { text: '(GMT+12:00) Majuro', value: 'Pacific/Majuro' },
  617. { text: '(GMT+12:00) Moscow+09 - Petropavlovsk-Kamchatskiy', value: 'Asia/Kamchatka' },
  618. { text: '(GMT+12:00) Nauru', value: 'Pacific/Nauru' },
  619. { text: '(GMT+12:00) Tarawa', value: 'Pacific/Tarawa' },
  620. { text: '(GMT+12:00) Wake', value: 'Pacific/Wake' },
  621. { text: '(GMT+12:00) Wallis', value: 'Pacific/Wallis' },
  622. { text: '(GMT+13:00) Auckland', value: 'Pacific/Auckland' },
  623. { text: '(GMT+13:00) Enderbury', value: 'Pacific/Enderbury' },
  624. { text: '(GMT+13:00) Fakaofo', value: 'Pacific/Fakaofo' },
  625. { text: '(GMT+13:00) Fiji', value: 'Pacific/Fiji' },
  626. { text: '(GMT+13:00) Tongatapu', value: 'Pacific/Tongatapu' },
  627. { text: '(GMT+14:00) Apia', value: 'Pacific/Apia' },
  628. { text: '(GMT+14:00) Kiritimati', value: 'Pacific/Kiritimati' }
  629. ]
  630. }
  631. },
  632. computed: {
  633. currentUserId: get('user/id')
  634. },
  635. methods: {
  636. /**
  637. * Activate a user (if previously deactivated)
  638. */
  639. async activateUser () {
  640. this.$store.commit(`loadingStart`, 'admin-users-activate')
  641. const resp = await this.$apollo.mutate({
  642. mutation: gql`
  643. mutation ($id: Int!) {
  644. users {
  645. activate(id: $id) {
  646. responseResult {
  647. succeeded
  648. errorCode
  649. slug
  650. message
  651. }
  652. }
  653. }
  654. }
  655. `,
  656. variables: {
  657. id: this.user.id
  658. }
  659. })
  660. if (_.get(resp, 'data.users.activate.responseResult.succeeded', false)) {
  661. this.$store.commit('showNotification', {
  662. style: 'success',
  663. message: this.$t('admin:users.userActivateSuccess'),
  664. icon: 'check'
  665. })
  666. this.user.isActive = true
  667. } else {
  668. this.$store.commit('showNotification', {
  669. style: 'red',
  670. message: _.get(resp, 'data.users.activate.responseResult.message', 'An unexpected error occured.'),
  671. icon: 'warning'
  672. })
  673. }
  674. this.$store.commit(`loadingStop`, 'admin-users-activate')
  675. },
  676. /**
  677. * Deactivate a currently active user
  678. */
  679. async deactivateUser () {
  680. this.$store.commit(`loadingStart`, 'admin-users-deactivate')
  681. const resp = await this.$apollo.mutate({
  682. mutation: gql`
  683. mutation ($id: Int!) {
  684. users {
  685. deactivate(id: $id) {
  686. responseResult {
  687. succeeded
  688. errorCode
  689. slug
  690. message
  691. }
  692. }
  693. }
  694. }
  695. `,
  696. variables: {
  697. id: this.user.id
  698. }
  699. })
  700. if (_.get(resp, 'data.users.deactivate.responseResult.succeeded', false)) {
  701. this.$store.commit('showNotification', {
  702. style: 'success',
  703. message: this.$t('admin:users.userDeactivateSuccess'),
  704. icon: 'check'
  705. })
  706. this.user.isActive = false
  707. } else {
  708. this.$store.commit('showNotification', {
  709. style: 'red',
  710. message: _.get(resp, 'data.users.deactivate.responseResult.message', 'An unexpected error occured.'),
  711. icon: 'warning'
  712. })
  713. }
  714. this.$store.commit(`loadingStop`, 'admin-users-deactivate')
  715. },
  716. /**
  717. * Delete a user
  718. */
  719. async deleteUser () {
  720. this.$store.commit(`loadingStart`, 'admin-users-delete')
  721. const resp = await this.$apollo.mutate({
  722. mutation: gql`
  723. mutation ($id: Int!) {
  724. users {
  725. delete(id: $id) {
  726. responseResult {
  727. succeeded
  728. errorCode
  729. slug
  730. message
  731. }
  732. }
  733. }
  734. }
  735. `,
  736. variables: {
  737. id: this.user.id
  738. }
  739. })
  740. if (_.get(resp, 'data.users.delete.responseResult.succeeded', false)) {
  741. this.$store.commit('showNotification', {
  742. style: 'success',
  743. message: this.$t('admin:users.userDeleteSuccess'),
  744. icon: 'check'
  745. })
  746. this.$router.push('/users')
  747. } else {
  748. this.$store.commit('showNotification', {
  749. style: 'red',
  750. message: _.get(resp, 'data.users.delete.responseResult.message', 'An unexpected error occured.'),
  751. icon: 'warning'
  752. })
  753. }
  754. this.deleteUserDialog = false
  755. this.$store.commit(`loadingStop`, 'admin-users-delete')
  756. },
  757. /**
  758. * Update a user
  759. */
  760. async updateUser() {
  761. this.$store.commit(`loadingStart`, 'admin-users-update')
  762. const resp = await this.$apollo.mutate({
  763. mutation: gql`
  764. mutation ($id: Int!, $email: String, $name: String, $newPassword: String, $groups: [Int], $location: String, $jobTitle: String, $timezone: String) {
  765. users {
  766. update(id: $id, email: $email, name: $name, newPassword: $newPassword, groups: $groups, location: $location, jobTitle: $jobTitle, timezone: $timezone) {
  767. responseResult {
  768. succeeded
  769. errorCode
  770. slug
  771. message
  772. }
  773. }
  774. }
  775. }
  776. `,
  777. variables: {
  778. id: this.user.id,
  779. email: this.user.email,
  780. name: this.user.name,
  781. newPassword: this.newPassword,
  782. groups: _.map(this.user.groups, 'id'),
  783. location: this.user.location,
  784. jobTitle: this.user.jobTitle,
  785. timezone: this.user.timezone
  786. }
  787. })
  788. this.newPassword = ''
  789. if (_.get(resp, 'data.users.update.responseResult.succeeded', false)) {
  790. this.$store.commit('showNotification', {
  791. style: 'success',
  792. message: this.$t('admin:users.userUpdateSuccess'),
  793. icon: 'check'
  794. })
  795. this.$router.push('/users')
  796. } else {
  797. this.$store.commit('showNotification', {
  798. style: 'red',
  799. message: _.get(resp, 'data.users.update.responseResult.message', 'An unexpected error occured.'),
  800. icon: 'warning'
  801. })
  802. }
  803. this.$store.commit(`loadingStop`, 'admin-users-update')
  804. },
  805. /**
  806. * Focus an input after delay
  807. */
  808. focusField (ipt) {
  809. this.$nextTick(() => {
  810. _.delay(() => {
  811. this.$refs[ipt].focus()
  812. }, 200)
  813. })
  814. },
  815. /**
  816. * Assign group to user
  817. */
  818. assignGroup() {
  819. if (_.some(this.user.groups, ['id', this.newGroup])) {
  820. this.$store.commit('showNotification', {
  821. message: this.$t('admin:users.userAlreadyAssignedToGroup'),
  822. style: 'error',
  823. icon: 'alert'
  824. })
  825. } else {
  826. this.user.groups.push(_.find(this.groups, ['id', this.newGroup]))
  827. this.newGroup = 0
  828. }
  829. },
  830. /**
  831. * Unassign group from user
  832. */
  833. unassignGroup(gid) {
  834. this.user.groups = _.reject(this.user.groups, ['id', gid])
  835. },
  836. /**
  837. * Manually set user as verified
  838. */
  839. async verifyUser () {
  840. this.$store.commit(`loadingStart`, 'admin-users-verify')
  841. const resp = await this.$apollo.mutate({
  842. mutation: gql`
  843. mutation ($id: Int!) {
  844. users {
  845. verify(id: $id) {
  846. responseResult {
  847. succeeded
  848. errorCode
  849. slug
  850. message
  851. }
  852. }
  853. }
  854. }
  855. `,
  856. variables: {
  857. id: this.user.id
  858. }
  859. })
  860. if (_.get(resp, 'data.users.verify.responseResult.succeeded', false)) {
  861. this.$store.commit('showNotification', {
  862. style: 'success',
  863. message: this.$t('admin:users.userVerifySuccess'),
  864. icon: 'check'
  865. })
  866. this.user.isVerified = true
  867. } else {
  868. this.$store.commit('showNotification', {
  869. style: 'red',
  870. message: _.get(resp, 'data.users.verify.responseResult.message', 'An unexpected error occured.'),
  871. icon: 'warning'
  872. })
  873. }
  874. this.$store.commit(`loadingStop`, 'admin-users-verify')
  875. }
  876. },
  877. apollo: {
  878. user: {
  879. query: userQuery,
  880. variables() {
  881. return {
  882. id: _.toSafeInteger(this.$route.params.id)
  883. }
  884. },
  885. fetchPolicy: 'network-only',
  886. update: (data) => data.users.single,
  887. watchLoading (isLoading) {
  888. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
  889. }
  890. },
  891. groups: {
  892. query: groupsQuery,
  893. fetchPolicy: 'network-only',
  894. update: (data) => data.groups.list,
  895. watchLoading (isLoading) {
  896. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-groups-refresh')
  897. }
  898. }
  899. }
  900. }
  901. </script>
  902. <style lang='scss'>
  903. </style>