Settings.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <main-header></main-header>
  3. <div class="container">
  4. <!--Implement Validation-->
  5. <label class="label">Username</label>
  6. <div class="control is-grouped">
  7. <p class="control is-expanded has-icon has-icon-right">
  8. <input class="input" type="text" placeholder="Change username" v-model="user.username">
  9. <!--Remove validation if it's their own without changing-->
  10. </p>
  11. <p class="control">
  12. <button class="button is-success" @click="changeUsername()">Save changes</button>
  13. </p>
  14. </div>
  15. <label class="label">Email</label>
  16. <div class="control is-grouped" v-if="user.email">
  17. <p class="control is-expanded has-icon has-icon-right">
  18. <input class="input" type="text" placeholder="Change email address" v-model="user.email.address">
  19. <!--Remove validation if it's their own without changing-->
  20. </p>
  21. <p class="control is-expanded">
  22. <button class="button is-success" @click="changeEmail()">Save changes</button>
  23. </p>
  24. </div>
  25. <label class="label" v-if="password">Change Password</label>
  26. <div class="control is-grouped" v-if="password">
  27. <p class="control is-expanded has-icon has-icon-right">
  28. <input class="input" type="password" placeholder="Change password" v-model="newPassword">
  29. </p>
  30. <p class="control is-expanded">
  31. <button class="button is-success" @click="changePassword()">Change password</button>
  32. </p>
  33. </div>
  34. <label class="label" v-if="!password">Add password</label>
  35. <div class="control is-grouped" v-if="!password">
  36. <button class="button is-success" @click="requestPassword()" v-if="passwordStep === 1">Request password email</button><br>
  37. <p class="control is-expanded has-icon has-icon-right" v-if="passwordStep === 2">
  38. <input class="input" type="text" placeholder="Code" v-model="passwordCode">
  39. </p>
  40. <p class="control is-expanded" v-if="passwordStep === 2">
  41. <button class="button is-success" @click="verifyCode()">Verify code</button>
  42. </p>
  43. <p class="control is-expanded has-icon has-icon-right" v-if="passwordStep === 3">
  44. <input class="input" type="password" placeholder="New password" v-model="setNewPassword">
  45. </p>
  46. <p class="control is-expanded" v-if="passwordStep === 3">
  47. <button class="button is-success" @click="setPassword()">Set password</button>
  48. </p>
  49. </div>
  50. <a href="#" v-if="passwordStep === 1 && !password" @click="passwordStep = 2">Skip this step</a>
  51. <a class="button is-github" v-if="!github" :href='$parent.serverDomain + "/auth/github/link"'>
  52. <div class='icon'>
  53. <img class='invert' src='/assets/social/github.svg'/>
  54. </div>
  55. &nbsp; Link GitHub to account
  56. </a>
  57. <button class="button is-danger" @click="unlinkPassword()" v-if="password && github">Remove logging in with password</button>
  58. <button class="button is-danger" @click="unlinkGitHub()" v-if="password && github">Remove logging in with GitHub</button>
  59. <br>
  60. <button class="button is-warning" @click="removeSessions()" style="margin-top: 30px;">Log out everywhere</button>
  61. </div>
  62. <main-footer></main-footer>
  63. </template>
  64. <script>
  65. import { Toast } from 'vue-roaster';
  66. import MainHeader from '../MainHeader.vue';
  67. import MainFooter from '../MainFooter.vue';
  68. import LoginModal from '../Modals/Login.vue'
  69. import io from '../../io'
  70. import validation from '../../validation';
  71. export default {
  72. data() {
  73. return {
  74. user: {},
  75. newPassword: '',
  76. password: false,
  77. github: false,
  78. setNewPassword: '',
  79. passwordStep: 1,
  80. passwordCode: ''
  81. }
  82. },
  83. ready: function() {
  84. let _this = this;
  85. io.getSocket(socket => {
  86. _this.socket = socket;
  87. _this.socket.emit('users.findBySession', res => {
  88. if (res.status == 'success') {
  89. _this.user = res.data;
  90. _this.password = _this.user.password;
  91. _this.github = _this.user.github;
  92. } else {
  93. _this.$parent.isLoginActive = true;
  94. Toast.methods.addToast('Your are currently not signed in', 3000);
  95. }
  96. });
  97. _this.socket.on('event:user.username.changed', username => {
  98. _this.$parent.username = username;
  99. });
  100. _this.socket.on('event:user.linkPassword', () => {
  101. _this.password = true;
  102. });
  103. _this.socket.on('event:user.linkGitHub', () => {
  104. _this.github = true;
  105. });
  106. _this.socket.on('event:user.unlinkPassword', () => {
  107. _this.password = false;
  108. });
  109. _this.socket.on('event:user.unlinkGitHub', () => {
  110. _this.github = false;
  111. });
  112. });
  113. },
  114. methods: {
  115. changeEmail: function () {
  116. const email = this.user.email.address;
  117. if (!validation.isLength(email, 3, 254)) return Toast.methods.addToast('Email must have between 3 and 254 characters.', 8000);
  118. if (email.indexOf('@') !== email.lastIndexOf('@') || !validation.regex.emailSimple.test(email)) return Toast.methods.addToast('Invalid email format.', 8000);
  119. this.socket.emit('users.updateEmail', this.$parent.userId, email, res => {
  120. if (res.status !== 'success') Toast.methods.addToast(res.message, 8000);
  121. else Toast.methods.addToast('Successfully changed email address', 4000);
  122. });
  123. },
  124. changeUsername: function () {
  125. const username = this.user.username;
  126. if (!validation.isLength(username, 2, 32)) return Toast.methods.addToast('Username must have between 2 and 32 characters.', 8000);
  127. if (!validation.regex.azAZ09_.test(username)) return Toast.methods.addToast('Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.', 8000);
  128. this.socket.emit('users.updateUsername', this.$parent.userId, username, res => {
  129. if (res.status !== 'success') Toast.methods.addToast(res.message, 8000);
  130. else Toast.methods.addToast('Successfully changed username', 4000);
  131. });
  132. },
  133. changePassword: function () {
  134. const newPassword = this.newPassword;
  135. if (!validation.isLength(newPassword, 6, 200)) return Toast.methods.addToast('Password must have between 6 and 200 characters.', 8000);
  136. if (!validation.regex.password.test(newPassword)) return Toast.methods.addToast('Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.', 8000);
  137. this.socket.emit('users.updatePassword', newPassword, res => {
  138. if (res.status !== 'success') Toast.methods.addToast(res.message, 8000);
  139. else Toast.methods.addToast('Successfully changed password', 4000);
  140. });
  141. },
  142. requestPassword: function() {
  143. this.socket.emit('users.requestPassword', res => {
  144. Toast.methods.addToast(res.message, 8000);
  145. if (res.status === 'success') {
  146. this.passwordStep = 2;
  147. }
  148. });
  149. },
  150. verifyCode: function () {
  151. if (!this.passwordCode) return Toast.methods.addToast('Code cannot be empty', 8000);
  152. this.socket.emit('users.verifyPasswordCode', this.passwordCode, res => {
  153. Toast.methods.addToast(res.message, 8000);
  154. if (res.status === 'success') {
  155. this.passwordStep = 3;
  156. }
  157. });
  158. },
  159. setPassword: function () {
  160. const newPassword = this.setNewPassword;
  161. if (!validation.isLength(newPassword, 6, 200)) return Toast.methods.addToast('Password must have between 6 and 200 characters.', 8000);
  162. if (!validation.regex.password.test(newPassword)) return Toast.methods.addToast('Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.', 8000);
  163. this.socket.emit('users.changePasswordWithCode', this.passwordCode, newPassword, res => {
  164. Toast.methods.addToast(res.message, 8000);
  165. });
  166. },
  167. unlinkPassword: function () {
  168. this.socket.emit('users.unlinkPassword', res => {
  169. Toast.methods.addToast(res.message, 8000);
  170. });
  171. },
  172. unlinkGitHub: function () {
  173. this.socket.emit('users.unlinkGitHub', res => {
  174. Toast.methods.addToast(res.message, 8000);
  175. });
  176. },
  177. removeSessions: function () {
  178. this.socket.emit(`users.removeSessions`, this.$parent.userId, res => {
  179. Toast.methods.addToast(res.message, 4000);
  180. });
  181. }
  182. },
  183. components: { MainHeader, MainFooter, LoginModal }
  184. }
  185. </script>
  186. <style lang="scss" scoped>
  187. .container {
  188. padding: 25px;
  189. }
  190. a { color: #029ce3 !important; }
  191. </style>