App.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <div>
  3. <h1 v-if="!socketConnected" class="socketNotConnected">Could not connect to the server.</h1>
  4. <router-view></router-view>
  5. <toast></toast>
  6. <what-is-new></what-is-new>
  7. <login-modal v-if='isLoginActive'></login-modal>
  8. <register-modal v-if='isRegisterActive'></register-modal>
  9. <create-community-station v-if='isCreateCommunityStationActive'></create-community-station>
  10. </div>
  11. </template>
  12. <script>
  13. import { Toast } from 'vue-roaster';
  14. import WhatIsNew from './components/Modals/WhatIsNew.vue';
  15. import LoginModal from './components/Modals/Login.vue';
  16. import RegisterModal from './components/Modals/Register.vue';
  17. import CreateCommunityStation from './components/Modals/CreateCommunityStation.vue';
  18. import auth from './auth';
  19. import io from './io';
  20. export default {
  21. replace: false,
  22. data() {
  23. return {
  24. register: {
  25. email: '',
  26. username: '',
  27. password: ''
  28. },
  29. login: {
  30. email: '',
  31. password: ''
  32. },
  33. loggedIn: false,
  34. role: '',
  35. username: '',
  36. userId: '',
  37. isRegisterActive: false,
  38. isLoginActive: false,
  39. isCreateCommunityStationActive: false,
  40. serverDomain: '',
  41. socketConnected: true
  42. }
  43. },
  44. methods: {
  45. logout: function () {
  46. this.socket.emit('users.logout', result => {
  47. if (result.status === 'success') {
  48. document.cookie = 'SID=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  49. location.reload();
  50. } else Toast.methods.addToast(result.message, 4000);
  51. });
  52. },
  53. 'submitOnEnter': (cb, event) => {
  54. if (event.which == 13) {
  55. cb();
  56. }
  57. }
  58. },
  59. ready: function () {
  60. let _this = this;
  61. auth.getStatus((authenticated, role, username, userId) => {
  62. _this.socket = window.socket;
  63. _this.loggedIn = authenticated;
  64. _this.role = role;
  65. _this.username = username;
  66. _this.userId = userId;
  67. });
  68. io.onConnect(() => {
  69. _this.socketConnected = true;
  70. });
  71. io.onConnectError(() => {
  72. _this.socketConnected = false;
  73. });
  74. io.onDisconnect(() => {
  75. _this.socketConnected = false;
  76. });
  77. lofig.get('serverDomain', res => {
  78. _this.serverDomain = res;
  79. });
  80. if (_this.$route.query.err) {
  81. Toast.methods.addToast(_this.$route.query.err, 20000);
  82. }
  83. },
  84. events: {
  85. 'register': function () {
  86. let { register: { email, username, password } } = this;
  87. let _this = this;
  88. this.socket.emit('users.register', username, email, password, grecaptcha.getResponse(), result => {
  89. if (result.status === 'success') {
  90. Toast.methods.addToast(`You have successfully registered.`, 4000);
  91. setTimeout(() => {
  92. if (result.SID) {
  93. let date = new Date();
  94. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  95. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  96. location.reload();
  97. } else _this.$router.go('/login');
  98. }, 4000);
  99. } else Toast.methods.addToast(result.message, 8000);
  100. });
  101. },
  102. 'login': function () {
  103. let { login: { email, password } } = this;
  104. let _this = this;
  105. this.socket.emit('users.login', email, password, result => {
  106. if (result.status === 'success') {
  107. let date = new Date();
  108. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  109. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  110. Toast.methods.addToast(`You have been successfully logged in`, 2000);
  111. _this.$router.go('/');
  112. location.reload();
  113. } else Toast.methods.addToast(result.message, 2000);
  114. });
  115. },
  116. 'toggleModal': function (type) {
  117. switch(type) {
  118. case 'register':
  119. this.isRegisterActive = !this.isRegisterActive;
  120. break;
  121. case 'login':
  122. this.isLoginActive = !this.isLoginActive;
  123. break;
  124. case 'createCommunityStation':
  125. this.isCreateCommunityStationActive = !this.isCreateCommunityStationActive;
  126. break;
  127. }
  128. },
  129. 'closeModal': function() {
  130. this.$broadcast('closeModal');
  131. }
  132. },
  133. components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }
  134. }
  135. </script>
  136. <style type='scss'>
  137. #toast-container { z-index: 10000 !important; }
  138. .socketNotConnected {
  139. padding: 20px;
  140. color: white;
  141. background-color: red;
  142. position: fixed;
  143. top: 50px;
  144. right: 50px;
  145. font-size: 2em;
  146. border-radius: 5px;
  147. z-index: 10000000;
  148. }
  149. </style>