App.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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) cb();
  55. }
  56. },
  57. ready: function () {
  58. let _this = this;
  59. auth.getStatus((authenticated, role, username, userId) => {
  60. _this.socket = window.socket;
  61. _this.loggedIn = authenticated;
  62. _this.role = role;
  63. _this.username = username;
  64. _this.userId = userId;
  65. });
  66. io.onConnect(() => {
  67. _this.socketConnected = true;
  68. });
  69. io.onConnectError(() => {
  70. _this.socketConnected = false;
  71. });
  72. io.onDisconnect(() => {
  73. _this.socketConnected = false;
  74. });
  75. lofig.get('serverDomain', res => {
  76. _this.serverDomain = res;
  77. });
  78. if (_this.$route.query.err) Toast.methods.addToast(_this.$route.query.err, 20000);
  79. },
  80. events: {
  81. 'register': function () {
  82. let { register: { email, username, password } } = this;
  83. let _this = this;
  84. this.socket.emit('users.register', username, email, password, grecaptcha.getResponse(), result => {
  85. if (result.status === 'success') {
  86. Toast.methods.addToast(`You have successfully registered.`, 4000);
  87. setTimeout(() => {
  88. if (result.SID) {
  89. let date = new Date();
  90. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  91. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  92. location.reload();
  93. } else _this.$router.go('/login');
  94. }, 4000);
  95. } else Toast.methods.addToast(result.message, 8000);
  96. });
  97. },
  98. 'login': function () {
  99. let { login: { email, password } } = this;
  100. let _this = this;
  101. this.socket.emit('users.login', email, password, result => {
  102. if (result.status === 'success') {
  103. let date = new Date();
  104. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  105. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; path=/`;
  106. Toast.methods.addToast(`You have been successfully logged in`, 2000);
  107. _this.$router.go('/');
  108. location.reload();
  109. } else Toast.methods.addToast(result.message, 2000);
  110. });
  111. },
  112. 'toggleModal': function (type) {
  113. switch(type) {
  114. case 'register':
  115. this.isRegisterActive = !this.isRegisterActive;
  116. break;
  117. case 'login':
  118. this.isLoginActive = !this.isLoginActive;
  119. break;
  120. case 'createCommunityStation':
  121. this.isCreateCommunityStationActive = !this.isCreateCommunityStationActive;
  122. break;
  123. }
  124. },
  125. 'closeModal': function() {
  126. this.$broadcast('closeModal');
  127. }
  128. },
  129. components: { Toast, WhatIsNew, LoginModal, RegisterModal, CreateCommunityStation }
  130. }
  131. </script>
  132. <style type='scss'>
  133. #toast-container { z-index: 10000 !important; }
  134. .absolute-a {
  135. width: 100%;
  136. height: 100%;
  137. position: absolute;
  138. top: 0;
  139. left: 0;
  140. }
  141. .socketNotConnected {
  142. padding: 20px;
  143. color: white;
  144. background-color: red;
  145. position: fixed;
  146. top: 50px;
  147. right: 50px;
  148. font-size: 2em;
  149. border-radius: 5px;
  150. z-index: 10000000;
  151. }
  152. .tooltip {
  153. position: relative;
  154. &:after {
  155. position: absolute;
  156. min-width: 80px;
  157. margin-left: -75%;
  158. text-align: center;
  159. padding: 7.5px 6px;
  160. border-radius: 2px;
  161. background-color: #323232;
  162. font-size: .9em;
  163. color: #fff;
  164. content: attr(data-tooltip);
  165. opacity: 0;
  166. transition: all .2s ease-in-out .1s;
  167. visibility: hidden;
  168. }
  169. &:hover:after {
  170. opacity: 1;
  171. visibility: visible;
  172. }
  173. }
  174. .tooltip-top {
  175. &:after {
  176. bottom: 150%;
  177. }
  178. &:hover {
  179. &:after { bottom: 120%; }
  180. }
  181. }
  182. .tooltip-bottom {
  183. &:after {
  184. top: 155%;
  185. }
  186. &:hover {
  187. &:after { top: 125%; }
  188. }
  189. }
  190. .tooltip-left {
  191. &:after {
  192. bottom: -10px;
  193. right: 130%;
  194. min-width: 100px;
  195. }
  196. &:hover {
  197. &:after { right: 110%; }
  198. }
  199. }
  200. .tooltip-right {
  201. &:after {
  202. bottom: -10px;
  203. left: 190%;
  204. min-width: 100px;
  205. }
  206. &:hover {
  207. &:after { left: 200%; }
  208. }
  209. }
  210. </style>