add touch event listeners to windows

window styling
fix window closing
fix mute evasion exploit

src/actions/index.js

@@ -567,6 +567,26 @@ export function initTimer(): ThunkAction {
   };
 }
 
+/*
+ * fullscreen means to open as modal
+ */
+export function openWindow(
+  windowType: string,
+  title: string,
+  fullscreen: boolean,
+  cloneable: boolean,
+  args: Object,
+): Action {
+  return {
+    type: 'OPEN_WINDOW',
+    windowType,
+    title,
+    fullscreen,
+    cloneable,
+    args,
+  };
+}
+
 export function showModal(modalType: string, title: string): Action {
   return openWindow(
     modalType,
@@ -735,26 +755,6 @@ export function addToChatInputMessage(windowId: number, msg: string): Action {
   };
 }
 
-/*
- * fullscreen means to open as modal
- */
-export function openWindow(
-  windowType: string,
-  title: string,
-  fullscreen: boolean,
-  cloneable: boolean,
-  args: Object,
-): Action {
-  return {
-    type: 'OPEN_WINDOW',
-    windowType,
-    title,
-    fullscreen,
-    cloneable,
-    args,
-  };
-}
-
 export function closeWindow(windowId): Action {
   return {
     type: 'CLOSE_WINDOW',

src/components/ChannelDropDown.jsx

@@ -11,8 +11,6 @@ import { useSelector } from 'react-redux';
 import { MdChat } from 'react-icons/md';
 import { FaUserFriends } from 'react-icons/fa';
 
-import type { State } from '../reducers';
-
 const ChannelDropDown = ({
   setChatChannel,
   chatChannel,

src/components/ModalRoot.jsx

@@ -55,7 +55,7 @@ const ModalRoot = () => {
         <div
           className={(open && render) ? 'Modal show' : 'Modal'}
         >
-          <h2 style={{ paddingLeft: '5%' }}>{title}</h2>
+          <h2>{title}</h2>
           <div
             onClick={() => dispatch(closeWindow(0))}
             className="ModalClose"
@@ -71,8 +71,8 @@ const ModalRoot = () => {
             label="restore"
             title={t`Restore`}
             tabIndex={-1}
-          >♥</div>
-          <div className="win-content">
+          >↓</div>
+          <div className="Modal-content">
             <Content windowId={0} />
           </div>
         </div>,

src/components/UserContextMenu.jsx

@@ -17,9 +17,7 @@ import {
   setChatChannel,
 } from '../actions';
 
-const UserContextMenu = ({
-  setChannel,
-}) => {
+const UserContextMenu = () => {
   const wrapperRef = useRef(null);
 
   const { xPos, yPos, args } = useSelector((state) => state.contextMenu);

src/components/Window.jsx

@@ -68,11 +68,31 @@ const Window = ({ id }) => {
       document.removeEventListener('mousemove', resize);
       document.removeEventListener('mouseup', stopResize);
       document.removeEventListener('touchcancel', stopResize);
+      document.removeEventListener('touchend', stopResize);
     };
     document.addEventListener('mouseup', stopResize);
     document.addEventListener('touchcancel', stopResize);
+    document.addEventListener('touchend', stopResize);
   }, []);
 
+  const clone = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    dispatch(cloneWindow(id));
+  };
+
+  const maximize = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    dispatch(maximizeWindow(id));
+  };
+
+  const close = (evt) => {
+    evt.stopPropagation();
+    evt.preventDefault();
+    dispatch(closeWindow(id));
+  };
+
   if (!win) {
     return null;
   }
@@ -101,40 +121,42 @@ const Window = ({ id }) => {
     >
       <div
         className="win-topbar"
+        onMouseDown={startMove}
+        onTouchStart={startMove}
       >
         <span
           className="win-topbtn"
-          onMouseDown={() => dispatch(cloneWindow(id))}
+          onMouseDown={clone}
         >
           +
         </span>
         <span
           className="win-title"
-          onMouseDown={startMove}
         >
           {title}
         </span>
         <span
           className="win-topbtn"
-          onMouseDown={() => dispatch(maximizeWindow(id))}
+          onMouseDown={maximize}
         >
           ↑
         </span>
         <span
           className="win-topbtn"
-          onMouseDown={() => dispatch(closeWindow(id))}
+          onMouseDown={close}
         >
           X
         </span>
       </div>
-      <div className="win-content">
-        <Content windowId={id} />
-      </div>
       <div
         onMouseDown={startResize}
+        onTouchStart={startResize}
         className="win-resize"
       >
-        R
+        ▨
+      </div>
+      <div className="win-content">
+        <Content windowId={id} />
       </div>
     </div>
   );

src/components/windows/index.jsx

@@ -2,6 +2,8 @@
  * @flow
  */
 
+import React from 'react';
+
 import Help from './Help';
 import Settings from './Settings';
 import UserArea from './UserArea';

src/data/models/User.js

@@ -60,6 +60,8 @@ class User {
   setRegUser(reguser) {
     this.regUser = reguser;
     this.id = reguser.id;
+    this.channels = {};
+    this.blocked = [];
 
     if (this.regUser.isMod) {
       this.userlvl = 2;
@@ -116,6 +118,12 @@ class User {
     }
   }
 
+  async reload() {
+    if (!this.regUser) return;
+    await this.regUser.reload();
+    this.setRegUser(this.regUser);
+  }
+
   addChannel(cid, channelArray) {
     this.channels[cid] = channelArray;
   }

src/reducers/windows.js

@@ -211,14 +211,17 @@ export default function windows(
       const {
         windows: oldWindows,
       } = state;
-      if (!oldWindows
-        || oldWindows[oldWindows.length - 1].windowId === windowId) {
+      if (oldWindows.length === 0
+        || oldWindows[oldWindows.length - 1].windowId === windowId
+      ) {
         return state;
       }
       console.log(`focus window ${windowId}`);
       const newWindows = oldWindows.filter((w) => w.windowId !== windowId);
       const win = oldWindows.find((w) => w.windowId === windowId);
-      newWindows.push(win);
+      if (win) {
+        newWindows.push(win);
+      }
       return {
         ...state,
         windows: newWindows,

src/routes/api/auth/change_name.js

@@ -6,6 +6,7 @@
 
 import type { Request, Response } from 'express';
 
+import webSockets from '../../../socket/websockets';
 import { RegUser } from '../../../data/models';
 import { validateName } from '../../../utils/validation';
 
@@ -33,7 +34,8 @@ export default async (req: Request, res: Response) => {
     return;
   }
 
-  const error = await validate(user.regUser.name, name);
+  const oldname = user.regUser.name;
+  const error = await validate(oldname, name);
   if (error) {
     res.status(400);
     res.json({
@@ -44,6 +46,8 @@ export default async (req: Request, res: Response) => {
 
   await user.regUser.update({ name });
 
+  webSockets.reloadUser(oldname);
+
   res.json({
     success: true,
   });

src/socket/SocketServer.js

@@ -261,6 +261,17 @@ class SocketServer extends WebSocketEvents {
     });
   }
 
+  reloadUser(name) {
+    this.wss.clients.forEach(async (ws) => {
+      if (ws.name === name) {
+        await ws.user.reload();
+        ws.name = ws.user.getName();
+        const buffer = ChangedMe.dehydrate();
+        ws.send(buffer);
+      }
+    });
+  }
+
   killOld() {
     const now = Date.now();
     this.wss.clients.forEach((ws) => {

src/socket/WebSocketEvents.js

@@ -40,6 +40,9 @@ class WebSocketEvents {
   notifyChangedMe(name: string) {
   }
 
+  reloadUser(name: string) {
+  }
+
   broadcastMinecraftTP(minecraftid: string, x: number, y: number) {
   }
 

src/socket/websockets.js

@@ -144,7 +144,6 @@ class WebSockets {
 
   /*
    * Notify user on websocket that he should rerequest api/message
-   * Currently just used for getting minecraft link message.
    */
   notifyChangedMe(name: string) {
     this.listeners.forEach(
@@ -152,6 +151,15 @@ class WebSockets {
     );
   }
 
+  /*
+   * reload user on websocket to get changes
+   */
+  reloadUser(name: string) {
+    this.listeners.forEach(
+      (listener) => listener.reloadUser(name),
+    );
+  }
+
   /*
    * broadcast mc tp request to API
    * @param minecraftid minecraftid

src/styles/default.css

@@ -116,6 +116,13 @@ td, th {
   overflow-x: hidden;
 }
 
+h2 {
+  font-size: 22px;
+  padding-left: 5%;
+  margin-bottom: 10px;
+  margin-top: 12px;
+}
+
 tr:nth-child(even) {
   background-color: #dddddd;
 }
@@ -140,30 +147,44 @@ tr:nth-child(even) {
   border: solid black;
   border-width: thin;
   overflow: hidden;
+  padding: 3px;
   z-index: 3;
 }
 
 .win-topbar {
   display: flex;
-  height: 16px;
+  height: 24px;
+  vertical-align: middle;
 }
 
 .win-title {
   cursor: move;
   flex-grow: 1;
+  line-height: 19px;
+  margin: 2px;
+  padding-left: 10px;
+  font-size: 15px;
 }
 
 .win-topbtn {
   border: solid black;
   border-width: thin;
-  background-color: blue;
+  background-color: #f7f7f7;
   cursor: pointer;
+  margin: 2px;
+  text-align: center;
+  height: 17px;
+  width: 17px;
+  line-height: 17px;
+  font-size: 17px;
+  font-weight: bold;
 }
 
 .win-resize {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  bottom: -3px;
+  right: -3px;
+  font-size: 22px;
   cursor: se-resize;
 }
 
@@ -172,13 +193,13 @@ tr:nth-child(even) {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100% - 4px);
+  height: calc(100% - 1px);
 }
 
 .win-content {
   position: relative;
-  width: 100%;
-  height: calc(100% - 16px);
+  width: calc(100% - 3px);
+  height: calc(100% - 28px);
   overflow-y: auto;
 }
 
@@ -379,7 +400,6 @@ tr:nth-child(even) {
   bottom: auto;
   border: 1px solid rgb(204, 204, 204);
   background: rgb(255, 255, 255) none repeat scroll 0% 0%;
-  overflow-y: auto;
   border-radius: 4px;
   outline: currentcolor none medium;
   transform: translate(-50%, -50%);
@@ -394,7 +414,15 @@ tr:nth-child(even) {
   z-index: 5;
 }
 
+.Modal-content {
+  position: relative;
+  width: calc(100% - 3px);
+  height: calc(100% - 50px);
+  overflow-y: auto;
+}
+
 .Alert {
+  overflow-y: auto;
   max-height: 100%;
   padding: 15px;
   text-align: center;
@@ -474,25 +502,24 @@ tr:nth-child(even) {
   display: flex;
   justify-content: center;
   align-items: center;
-  flex: 0 0 36px;
   border-width: 2px;
   border-style: solid;
   border-radius: 50%;
-  width: 36px;
-  height: 36px;
+  width: 27px;
+  height: 27px;
   cursor: pointer;
   background-color: #f6f6f7;
   border-color: #dcddde;
-  top: 30px;
+  top: 11px;
   z-index: 5;
 }
 
 .ModalClose {
-  right: 40px;
+  right: 14px;
 }
 
 .ModalRestore {
-  right: 90px;
+  right: 52px;
 }
 
 .ModalClose:hover, .ModalRestore:hover {