App.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <div>
  3. <router-view></router-view>
  4. <toast></toast>
  5. <what-is-new></what-is-new>
  6. <login-modal v-if='isLoginActive'></login-modal>
  7. <register-modal v-if='isRegisterActive'></register-modal>
  8. <create-community-station v-if='isCreateCommunityStationActive'></create-community-station>
  9. </div>
  10. </template>
  11. <script>
  12. import { Toast } from 'vue-roaster';
  13. import WhatIsNew from './components/Modals/WhatIsNew.vue';
  14. import LoginModal from './components/Modals/Login.vue';
  15. import RegisterModal from './components/Modals/Register.vue';
  16. import CreateCommunityStation from './components/Modals/CreateCommunityStation.vue';
  17. import auth from './auth';
  18. export default {
  19. replace: false,
  20. data() {
  21. return {
  22. register: {
  23. email: '',
  24. username: '',
  25. password: ''
  26. },
  27. login: {
  28. email: '',
  29. password: ''
  30. },
  31. loggedIn: false,
  32. role: '',
  33. username: '',
  34. userId: '',
  35. isRegisterActive: false,
  36. isLoginActive: false,
  37. isCreateCommunityStationActive: false,
  38. serverDomain: ''
  39. }
  40. },
  41. methods: {
  42. logout: function () {
  43. this.socket.emit('users.logout', result => {
  44. if (result.status === 'success') {
  45. document.cookie = 'SID=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  46. location.reload();
  47. } else Toast.methods.addToast(result.message, 4000);
  48. });
  49. },
  50. 'submitOnEnter': (cb, event) => {
  51. if (event.which == 13) b(); return false;
  52. }
  53. },
  54. ready() {
  55. let _this = this;
  56. auth.getStatus((authenticated, role, username, userId) => {
  57. _this.socket = window.socket;
  58. _this.loggedIn = authenticated;
  59. _this.role = role;
  60. _this.username = username;
  61. _this.userId = userId;
  62. });
  63. lofig.get('serverDomain', res => {
  64. _this.serverDomain = res;
  65. });
  66. },
  67. events: {
  68. 'register': function () {
  69. let { register: { email, username, password } } = this;
  70. let _this = this;
  71. this.socket.emit('users.register', username, email, password, /*grecaptcha.getResponse()*/null, result => {
  72. Toast.methods.addToast(`You have successfully registered.`, 4000);
  73. setTimeout(() => {
  74. if (result.SID) {
  75. let date = new Date();
  76. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  77. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  78. location.reload();
  79. } else {
  80. _this.$router.go('/login');
  81. }
  82. }, 4000);
  83. });
  84. },
  85. 'login': function () {
  86. let { login: { email, password } } = this;
  87. let _this = this;
  88. this.socket.emit('users.login', email, password, result => {
  89. if (result.status === 'success') {
  90. let date = new Date();
  91. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  92. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  93. Toast.methods.addToast(`You have been successfully logged in`, 2000);
  94. _this.$router.go('/');
  95. location.reload();
  96. } else {
  97. Toast.methods.addToast(result.message, 2000);
  98. }
  99. });
  100. },
  101. 'toggleModal': function (type) {
  102. switch(type) {
  103. case 'register':
  104. this.isRegisterActive = !this.isRegisterActive;
  105. break;
  106. case 'login':
  107. this.isLoginActive = !this.isLoginActive;
  108. break;
  109. case 'createCommunityStation':
  110. this.isCreateCommunityStationActive = !this.isCreateCommunityStationActive;
  111. break;
  112. }
  113. }
  114. },
  115. components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }
  116. }
  117. </script>
  118. <style type='scss'>
  119. #toast-container { z-index: 10000 !important; }
  120. </style>