EditUser.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <div>
  3. <modal title="Edit User">
  4. <div slot="body">
  5. <p class="control has-addons">
  6. <input
  7. v-model="editing.username"
  8. class="input is-expanded"
  9. type="text"
  10. placeholder="Username"
  11. autofocus
  12. />
  13. <a class="button is-info" v-on:click="updateUsername()"
  14. >Update Username</a
  15. >
  16. </p>
  17. <p class="control has-addons">
  18. <input
  19. v-model="editing.email.address"
  20. class="input is-expanded"
  21. type="text"
  22. placeholder="Email Address"
  23. autofocus
  24. />
  25. <a class="button is-info" v-on:click="updateEmail()"
  26. >Update Email Address</a
  27. >
  28. </p>
  29. <p class="control has-addons">
  30. <span class="select">
  31. <select v-model="editing.role">
  32. <option>default</option>
  33. <option>admin</option>
  34. </select>
  35. </span>
  36. <a class="button is-info" v-on:click="updateRole()"
  37. >Update Role</a
  38. >
  39. </p>
  40. <hr />
  41. <p class="control has-addons">
  42. <span class="select">
  43. <select v-model="ban.expiresAt">
  44. <option value="1h">1 Hour</option>
  45. <option value="12h">12 Hours</option>
  46. <option value="1d">1 Day</option>
  47. <option value="1w">1 Week</option>
  48. <option value="1m">1 Month</option>
  49. <option value="3m">3 Months</option>
  50. <option value="6m">6 Months</option>
  51. <option value="1y">1 Year</option>
  52. </select>
  53. </span>
  54. <input
  55. v-model="ban.reason"
  56. class="input is-expanded"
  57. type="text"
  58. placeholder="Ban reason"
  59. autofocus
  60. />
  61. <a class="button is-error" v-on:click="banUser()"
  62. >Ban user</a
  63. >
  64. </p>
  65. </div>
  66. <div slot="footer">
  67. <!--button class='button is-warning'>
  68. <span>&nbsp;Send Verification Email</span>
  69. </button>
  70. <button class='button is-warning'>
  71. <span>&nbsp;Send Password Reset Email</span>
  72. </button-->
  73. <button class="button is-warning" v-on:click="removeSessions()">
  74. <span>&nbsp;Remove all sessions</span>
  75. </button>
  76. <button
  77. class="button is-danger"
  78. @click="
  79. closeModal({
  80. sector: 'admin',
  81. modal: 'editUser'
  82. })
  83. "
  84. >
  85. <span>&nbsp;Close</span>
  86. </button>
  87. </div>
  88. </modal>
  89. </div>
  90. </template>
  91. <script>
  92. import { mapState, mapActions } from "vuex";
  93. import { Toast } from "vue-roaster";
  94. import io from "../../io";
  95. import Modal from "./Modal.vue";
  96. import validation from "../../validation";
  97. export default {
  98. components: { Modal },
  99. data() {
  100. return {
  101. ban: {
  102. expiresAt: "1h"
  103. }
  104. };
  105. },
  106. computed: {
  107. ...mapState("admin/users", {
  108. editing: state => state.editing
  109. })
  110. },
  111. methods: {
  112. updateUsername() {
  113. const { username } = this.editing;
  114. if (!validation.isLength(username, 2, 32))
  115. return Toast.methods.addToast(
  116. "Username must have between 2 and 32 characters.",
  117. 8000
  118. );
  119. if (!validation.regex.azAZ09_.test(username))
  120. return Toast.methods.addToast(
  121. "Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.",
  122. 8000
  123. );
  124. return this.socket.emit(
  125. `users.updateUsername`,
  126. this.editing._id,
  127. username,
  128. res => {
  129. Toast.methods.addToast(res.message, 4000);
  130. }
  131. );
  132. },
  133. updateEmail() {
  134. const { email } = this.editing;
  135. if (!validation.isLength(email, 3, 254))
  136. return Toast.methods.addToast(
  137. "Email must have between 3 and 254 characters.",
  138. 8000
  139. );
  140. if (
  141. email.indexOf("@") !== email.lastIndexOf("@") ||
  142. !validation.regex.emailSimple.test(email)
  143. )
  144. return Toast.methods.addToast("Invalid email format.", 8000);
  145. return this.socket.emit(
  146. `users.updateEmail`,
  147. this.editing._id,
  148. email,
  149. res => {
  150. Toast.methods.addToast(res.message, 4000);
  151. }
  152. );
  153. },
  154. updateRole() {
  155. this.socket.emit(
  156. `users.updateRole`,
  157. this.editing._id,
  158. this.editing.role,
  159. res => {
  160. Toast.methods.addToast(res.message, 4000);
  161. if (
  162. res.status === "success" &&
  163. this.editing.role === "default" &&
  164. this.editing._id === this.$parent.$parent.$parent.userId
  165. )
  166. window.location.reload();
  167. }
  168. );
  169. },
  170. banUser() {
  171. const { reason } = this.ban;
  172. if (!validation.isLength(reason, 1, 64))
  173. return Toast.methods.addToast(
  174. "Reason must have between 1 and 64 characters.",
  175. 8000
  176. );
  177. if (!validation.regex.ascii.test(reason))
  178. return Toast.methods.addToast(
  179. "Invalid reason format. Only ascii characters are allowed.",
  180. 8000
  181. );
  182. return this.socket.emit(
  183. `users.banUserById`,
  184. this.editing._id,
  185. this.ban.reason,
  186. this.ban.expiresAt,
  187. res => {
  188. Toast.methods.addToast(res.message, 4000);
  189. }
  190. );
  191. },
  192. removeSessions() {
  193. this.socket.emit(`users.removeSessions`, this.editing._id, res => {
  194. Toast.methods.addToast(res.message, 4000);
  195. });
  196. },
  197. ...mapActions("modals", ["closeModal"])
  198. },
  199. mounted() {
  200. const _this = this;
  201. io.getSocket(socket => {
  202. _this.socket = socket;
  203. return socket;
  204. });
  205. }
  206. };
  207. </script>
  208. <style lang="scss" scoped>
  209. .save-changes {
  210. color: #fff;
  211. }
  212. .tag:not(:last-child) {
  213. margin-right: 5px;
  214. }
  215. .select:after {
  216. border-color: #029ce3;
  217. }
  218. </style>