App.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <banned v-if="banned"></banned>
  3. <div v-else>
  4. <h1 v-if="!socketConnected" class="alert">Could not connect to the server.</h1>
  5. <router-view></router-view>
  6. <toast></toast>
  7. <what-is-new></what-is-new>
  8. <login-modal v-if='isLoginActive'></login-modal>
  9. <register-modal v-if='isRegisterActive'></register-modal>
  10. </div>
  11. </template>
  12. <script>
  13. import { Toast } from 'vue-roaster';
  14. import Banned from './components/pages/Banned.vue';
  15. import WhatIsNew from './components/Modals/WhatIsNew.vue';
  16. import LoginModal from './components/Modals/Login.vue';
  17. import RegisterModal from './components/Modals/Register.vue';
  18. import auth from './auth';
  19. import io from './io';
  20. import validation from './validation';
  21. export default {
  22. replace: false,
  23. data() {
  24. return {
  25. banned: false,
  26. ban: {},
  27. register: {
  28. email: '',
  29. username: '',
  30. password: ''
  31. },
  32. login: {
  33. email: '',
  34. password: ''
  35. },
  36. loggedIn: false,
  37. role: '',
  38. username: '',
  39. userId: '',
  40. isRegisterActive: false,
  41. isLoginActive: false,
  42. serverDomain: '',
  43. socketConnected: true,
  44. userIdMap: {},
  45. currentlyGettingUsernameFrom: {}
  46. }
  47. },
  48. methods: {
  49. logout: function () {
  50. let _this = this;
  51. _this.socket.emit('users.logout', result => {
  52. if (result.status === 'success') {
  53. document.cookie = 'SID=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
  54. location.reload();
  55. } else Toast.methods.addToast(result.message, 4000);
  56. });
  57. },
  58. 'submitOnEnter': (cb, event) => {
  59. if (event.which == 13) cb();
  60. },
  61. getUsernameFromId: function(userId) {
  62. if (typeof this.userIdMap[userId] !== 'string' && !this.currentlyGettingUsernameFrom[userId]) {
  63. this.currentlyGettingUsernameFrom[userId] = true;
  64. io.getSocket(socket => {
  65. socket.emit('users.getUsernameFromId', userId, (data) => {
  66. if (data.status === 'success') this.$set(`userIdMap.${userId}`, data.data);
  67. this.currentlyGettingUsernameFrom[userId] = false;
  68. });
  69. });
  70. }
  71. }
  72. },
  73. ready: function () {
  74. let _this = this;
  75. if (localStorage.getItem('github_redirect')) {
  76. this.$router.go(localStorage.getItem('github_redirect'));
  77. localStorage.removeItem('github_redirect');
  78. }
  79. auth.isBanned((banned, ban) => {
  80. _this.ban = ban;
  81. _this.banned = banned;
  82. });
  83. auth.getStatus((authenticated, role, username, userId) => {
  84. _this.socket = window.socket;
  85. _this.loggedIn = authenticated;
  86. _this.role = role;
  87. _this.username = username;
  88. _this.userId = userId;
  89. });
  90. io.onConnect(true, () => {
  91. _this.socketConnected = true;
  92. });
  93. io.onConnectError(true, () => {
  94. _this.socketConnected = false;
  95. });
  96. io.onDisconnect(true, () => {
  97. _this.socketConnected = false;
  98. });
  99. lofig.get('serverDomain', res => {
  100. _this.serverDomain = res;
  101. });
  102. if (_this.$route.query.err) {
  103. let err = _this.$route.query.err;
  104. err = err.replace(new RegExp('<', 'g'), '&lt;').replace(new RegExp('>', 'g'), '&gt;');
  105. Toast.methods.addToast(err, 20000);
  106. }
  107. io.getSocket(true, socket => {
  108. socket.on('keep.event:user.session.removed', () => {
  109. location.reload();
  110. });
  111. });
  112. },
  113. events: {
  114. 'register': function (recaptchaId) {
  115. let { register: { email, username, password } } = this;
  116. let _this = this;
  117. if (!email || !username || !password) return Toast.methods.addToast('Please fill in all fields', 8000);
  118. if (!validation.isLength(email, 3, 254)) return Toast.methods.addToast('Email must have between 3 and 254 characters.', 8000);
  119. if (email.indexOf('@') !== email.lastIndexOf('@') || !validation.regex.emailSimple.test(email)) return Toast.methods.addToast('Invalid email format.', 8000);
  120. if (!validation.isLength(username, 2, 32)) return Toast.methods.addToast('Username must have between 2 and 32 characters.', 8000);
  121. if (!validation.regex.azAZ09_.test(username)) return Toast.methods.addToast('Invalid username format. Allowed characters: a-z, A-Z, 0-9 and _.', 8000);
  122. if (!validation.isLength(password, 6, 200)) return Toast.methods.addToast('Password must have between 6 and 200 characters.', 8000);
  123. if (!validation.regex.password.test(password)) return Toast.methods.addToast('Invalid password format. Must have one lowercase letter, one uppercase letter, one number and one special character.', 8000);
  124. this.socket.emit('users.register', username, email, password, grecaptcha.getResponse(recaptchaId), result => {
  125. if (result.status === 'success') {
  126. Toast.methods.addToast(`You have successfully registered.`, 4000);
  127. if (result.SID) {
  128. lofig.get('cookie', cookie => {
  129. let date = new Date();
  130. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  131. let secure = (cookie.secure) ? 'secure=true; ' : '';
  132. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; domain=${cookie.domain}; ${secure}path=/`;
  133. location.reload();
  134. });
  135. } else _this.$router.go('/login');
  136. } else Toast.methods.addToast(result.message, 8000);
  137. });
  138. },
  139. 'login': function () {
  140. let { login: { email, password } } = this;
  141. let _this = this;
  142. this.socket.emit('users.login', email, password, result => {
  143. if (result.status === 'success') {
  144. lofig.get('cookie', cookie => {
  145. let date = new Date();
  146. date.setTime(new Date().getTime() + (2 * 365 * 24 * 60 * 60 * 1000));
  147. let secure = (cookie.secure) ? 'secure=true; ' : '';
  148. let domain = '';
  149. if (cookie.domain !== 'localhost') domain = ` domain=${cookie.domain};`;
  150. document.cookie = `SID=${result.SID}; expires=${date.toGMTString()}; ${domain}${secure}path=/`;
  151. Toast.methods.addToast(`You have been successfully logged in`, 2000);
  152. location.reload();
  153. });
  154. } else Toast.methods.addToast(result.message, 2000);
  155. });
  156. },
  157. 'toggleModal': function (type) {
  158. switch(type) {
  159. case 'register':
  160. this.isRegisterActive = !this.isRegisterActive;
  161. break;
  162. case 'login':
  163. this.isLoginActive = !this.isLoginActive;
  164. break;
  165. }
  166. },
  167. 'closeModal': function() {
  168. this.$broadcast('closeModal');
  169. }
  170. },
  171. components: { Toast, WhatIsNew, LoginModal, RegisterModal, Banned }
  172. }
  173. </script>
  174. <style type='scss'>
  175. #toast-container { z-index: 10000 !important; }
  176. html {
  177. overflow: auto !important;
  178. }
  179. .modal-card {
  180. margin: 0 !important;
  181. }
  182. .absolute-a {
  183. width: 100%;
  184. height: 100%;
  185. position: absolute;
  186. top: 0;
  187. left: 0;
  188. }
  189. .alert {
  190. padding: 20px;
  191. color: white;
  192. background-color: red;
  193. position: fixed;
  194. top: 50px;
  195. right: 50px;
  196. font-size: 2em;
  197. border-radius: 5px;
  198. z-index: 10000000;
  199. }
  200. .tooltip {
  201. position: relative;
  202. &:after {
  203. position: absolute;
  204. min-width: 80px;
  205. margin-left: -75%;
  206. text-align: center;
  207. padding: 7.5px 6px;
  208. border-radius: 2px;
  209. background-color: #323232;
  210. font-size: .9em;
  211. color: #fff;
  212. content: attr(data-tooltip);
  213. opacity: 0;
  214. transition: all .2s ease-in-out .1s;
  215. visibility: hidden;
  216. }
  217. &:hover:after {
  218. opacity: 1;
  219. visibility: visible;
  220. }
  221. }
  222. .tooltip-top {
  223. &:after {
  224. bottom: 150%;
  225. }
  226. &:hover {
  227. &:after { bottom: 120%; }
  228. }
  229. }
  230. .tooltip-bottom {
  231. &:after {
  232. top: 155%;
  233. }
  234. &:hover {
  235. &:after { top: 125%; }
  236. }
  237. }
  238. .tooltip-left {
  239. &:after {
  240. bottom: -10px;
  241. right: 130%;
  242. min-width: 100px;
  243. }
  244. &:hover {
  245. &:after { right: 110%; }
  246. }
  247. }
  248. .tooltip-right {
  249. &:after {
  250. bottom: -10px;
  251. left: 190%;
  252. min-width: 100px;
  253. }
  254. &:hover {
  255. &:after { left: 200%; }
  256. }
  257. }
  258. .button:focus, .button:active { border-color: #dbdbdb !important; }
  259. .input:focus, .input:active { border-color: #03a9f4 !important; }
  260. button.delete:focus { background-color: rgba(10, 10, 10, 0.3); }
  261. .tag { padding-right: 6px !important; }
  262. .button.is-success { background-color: #00B16A !important; }
  263. </style>