App.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <div>
  3. <h1 v-if="!socketConnected" class="alert">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. </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 auth from './auth';
  17. import io from './io';
  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. serverDomain: '',
  38. socketConnected: true
  39. }
  40. },
  41. methods: {
  42. logout: function () {
  43. let _this = this;
  44. _this.socket.emit('users.logout', result => {
  45. if (result.status === 'success') {
  46. document.cookie = 'SID=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  47. _this.$router.go('/');
  48. location.reload();
  49. } else Toast.methods.addToast(result.message, 4000);
  50. });
  51. },
  52. 'submitOnEnter': (cb, event) => {
  53. if (event.which == 13) cb();
  54. }
  55. },
  56. ready: function () {
  57. let _this = this;
  58. auth.getStatus((authenticated, role, username, userId) => {
  59. _this.socket = window.socket;
  60. _this.loggedIn = authenticated;
  61. _this.role = role;
  62. _this.username = username;
  63. _this.userId = userId;
  64. });
  65. io.onConnect(true, () => {
  66. _this.socketConnected = true;
  67. });
  68. io.onConnectError(true, () => {
  69. _this.socketConnected = false;
  70. });
  71. io.onDisconnect(true, () => {
  72. _this.socketConnected = false;
  73. });
  74. lofig.get('serverDomain', res => {
  75. _this.serverDomain = res;
  76. });
  77. if (_this.$route.query.err) {
  78. let err = _this.$route.query.err;
  79. err = err.replace(new RegExp('<', 'g'), '&lt;').replace(new RegExp('>', 'g'), '&gt;');
  80. Toast.methods.addToast(err, 20000);
  81. }
  82. },
  83. events: {
  84. 'register': function (recaptchaId) {
  85. let { register: { email, username, password } } = this;
  86. let _this = this;
  87. this.socket.emit('users.register', username, email, password, grecaptcha.getResponse(recaptchaId), result => {
  88. if (result.status === 'success') {
  89. Toast.methods.addToast(`You have successfully registered.`, 4000);
  90. if (result.SID) {
  91. lofig.get('cookie', cookie => {
  92. let date = new Date();
  93. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  94. let secure = (cookie.secure) ? 'secure=true; ' : '';
  95. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; domain=${cookie.domain}; ${secure}path=/`;
  96. location.reload();
  97. });
  98. } else _this.$router.go('/login');
  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. lofig.get('cookie', cookie => {
  108. let date = new Date();
  109. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  110. let secure = (cookie.secure) ? 'secure=true; ' : '';
  111. let domain = '';
  112. if (cookie.domain !== 'localhost') {
  113. domain = ` domain=${cookie.domain};`;
  114. }
  115. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; ${domain}${secure}path=/`;
  116. Toast.methods.addToast(`You have been successfully logged in`, 2000);
  117. _this.$router.go('/');
  118. location.reload();
  119. });
  120. } else Toast.methods.addToast(result.message, 2000);
  121. });
  122. },
  123. 'toggleModal': function (type) {
  124. switch(type) {
  125. case 'register':
  126. this.isRegisterActive = !this.isRegisterActive;
  127. break;
  128. case 'login':
  129. this.isLoginActive = !this.isLoginActive;
  130. break;
  131. }
  132. },
  133. 'closeModal': function() {
  134. this.$broadcast('closeModal');
  135. }
  136. },
  137. components: { Toast, WhatIsNew, LoginModal, RegisterModal }
  138. }
  139. </script>
  140. <style type='scss'>
  141. #toast-container { z-index: 10000 !important; }
  142. html {
  143. overflow: auto !important;
  144. }
  145. .modal-card {
  146. margin: 0 !important;
  147. }
  148. .absolute-a {
  149. width: 100%;
  150. height: 100%;
  151. position: absolute;
  152. top: 0;
  153. left: 0;
  154. }
  155. .alert {
  156. padding: 20px;
  157. color: white;
  158. background-color: red;
  159. position: fixed;
  160. top: 50px;
  161. right: 50px;
  162. font-size: 2em;
  163. border-radius: 5px;
  164. z-index: 10000000;
  165. }
  166. .tooltip {
  167. position: relative;
  168. &:after {
  169. position: absolute;
  170. min-width: 80px;
  171. margin-left: -75%;
  172. text-align: center;
  173. padding: 7.5px 6px;
  174. border-radius: 2px;
  175. background-color: #323232;
  176. font-size: .9em;
  177. color: #fff;
  178. content: attr(data-tooltip);
  179. opacity: 0;
  180. transition: all .2s ease-in-out .1s;
  181. visibility: hidden;
  182. }
  183. &:hover:after {
  184. opacity: 1;
  185. visibility: visible;
  186. }
  187. }
  188. .tooltip-top {
  189. &:after {
  190. bottom: 150%;
  191. }
  192. &:hover {
  193. &:after { bottom: 120%; }
  194. }
  195. }
  196. .tooltip-bottom {
  197. &:after {
  198. top: 155%;
  199. }
  200. &:hover {
  201. &:after { top: 125%; }
  202. }
  203. }
  204. .tooltip-left {
  205. &:after {
  206. bottom: -10px;
  207. right: 130%;
  208. min-width: 100px;
  209. }
  210. &:hover {
  211. &:after { right: 110%; }
  212. }
  213. }
  214. .tooltip-right {
  215. &:after {
  216. bottom: -10px;
  217. left: 190%;
  218. min-width: 100px;
  219. }
  220. &:hover {
  221. &:after { left: 200%; }
  222. }
  223. }
  224. .button:focus, .button:active { border-color: #dbdbdb !important; }
  225. .input:focus, .input:active { border-color: #03a9f4 !important; }
  226. button.delete:focus { background-color: rgba(10, 10, 10, 0.3); }
  227. .tag { padding-right: 6px !important; }
  228. .button.is-success { background-color: #00B16A !important; }
  229. </style>