chore: Update version

Closes #43, closes #111, closes #272

Dockerfile

@@ -26,7 +26,7 @@ COPY server .
 RUN cp .env.sample .env
 
 COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views
+COPY --from=client-builder /app/build/index.html views/index.ejs
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images

client/config-overrides.js

@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+
+const BASE_URL_PLACEHOLDER = 'BASE_URL_PLACEHOLDER';
+
+const replaceInFile = (file, search, replace) => {
+  fs.readFile(file, 'utf8', (readError, data) => {
+    if (readError) {
+      throw new Error(`${readError}`);
+    }
+    const res = data.replaceAll(search, replace);
+    fs.writeFile(file, res, 'utf8', (writeError) => {
+      if (writeError) {
+        throw new Error(`${writeError}`);
+      }
+    });
+  });
+};
+
+const replaceBaseUrl = (compiler) => {
+  compiler.hooks.assetEmitted.tap('ReplaceBaseUrlPlaceholder', (file, info) => {
+    if (info.content.indexOf(BASE_URL_PLACEHOLDER) >= 0) {
+      if (/\.css$/.exec(info.targetPath)) {
+        // For CSS 'url(...)' import we can use relative import
+        const relPath = path.relative(path.dirname(info.targetPath), info.outputPath);
+        replaceInFile(info.targetPath, BASE_URL_PLACEHOLDER, `${relPath}/`);
+      } else if (/\.js$/.exec(info.targetPath)) {
+        // For JS 'import ... from "some-asset"' we can get the variable injected in the window object
+        // eslint-disable-next-line no-template-curly-in-string
+        replaceInFile(info.targetPath, `"${BASE_URL_PLACEHOLDER}"`, '`${window.BASE_URL}/`');
+      } else if (/index\.html$/.exec(info.targetPath)) {
+        // For the main html file, we set a placeholder for sails to inject the correct value as runtime
+        replaceInFile(info.targetPath, BASE_URL_PLACEHOLDER, '<%= BASE_URL %>');
+      }
+    }
+  });
+};
+
+module.exports = function override(config, env) {
+  if (env === 'production') {
+    const plugins = config.plugins.map((plugin) => {
+      if (plugin.constructor.name === 'InterpolateHtmlPlugin') {
+        const newPlugin = plugin;
+        newPlugin.replacements.PUBLIC_URL = BASE_URL_PLACEHOLDER;
+        return newPlugin;
+      }
+      return plugin;
+    });
+    return {
+      ...config,
+      output: { ...config.output, publicPath: BASE_URL_PLACEHOLDER },
+      plugins: [...plugins, { apply: replaceBaseUrl }],
+    };
+  }
+  return config;
+};

client/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "planka-client",
       "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
         "classnames": "^2.3.1",
         "connected-react-router": "^6.9.3",
         "date-fns": "^2.29.1",
@@ -44,7 +45,8 @@
         "semantic-ui-react": "^2.1.3",
         "socket.io-client": "^2.3.1",
         "validator": "^13.7.0",
-        "whatwg-fetch": "^3.6.2"
+        "whatwg-fetch": "^3.6.2",
+        "zxcvbn": "^4.4.2"
       },
       "devDependencies": {
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
@@ -61,6 +63,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "jest-enzyme": "^7.1.2",
         "prettier": "2.7.1",
+        "react-app-rewired": "^2.2.1",
         "react-test-renderer": "^17.0.2"
       }
     },
@@ -3029,6 +3032,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -18658,6 +18666,30 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-app-rewired": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
+      "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^5.6.0"
+      },
+      "bin": {
+        "react-app-rewired": "bin/index.js"
+      },
+      "peerDependencies": {
+        "react-scripts": ">=2.1.3"
+      }
+    },
+    "node_modules/react-app-rewired/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/react-beautiful-dnd": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
@@ -25310,6 +25342,11 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   },
   "dependencies": {
@@ -27327,6 +27364,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -38700,6 +38742,23 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-app-rewired": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
+      "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
+      "dev": true,
+      "requires": {
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "react-beautiful-dnd": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
@@ -43805,6 +43864,11 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
       "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA=="
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   }
 }

client/package.json

@@ -2,11 +2,11 @@
   "name": "planka-client",
   "private": true,
   "scripts": {
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext js,jsx src",
+    "lint": "eslint --ext js,jsx src config-overrides.js",
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "test": "react-scripts test"
+    "test": "react-app-rewired test"
   },
   "browserslist": {
     "production": [
@@ -63,6 +63,7 @@
     }
   },
   "dependencies": {
+    "@juggle/resize-observer": "^3.4.0",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.3",
     "date-fns": "^2.29.1",
@@ -101,7 +102,8 @@
     "semantic-ui-react": "^2.1.3",
     "socket.io-client": "^2.3.1",
     "validator": "^13.7.0",
-    "whatwg-fetch": "^3.6.2"
+    "whatwg-fetch": "^3.6.2",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
@@ -118,6 +120,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest-enzyme": "^7.1.2",
     "prettier": "2.7.1",
+    "react-app-rewired": "^2.2.1",
     "react-test-renderer": "^17.0.2"
   }
 }

client/public/index.html

@@ -26,6 +26,7 @@
     -->
     <title>Planka</title>
   </head>
+  <script>window.BASE_URL = "%PUBLIC_URL%";</script>
   <body id="app">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

client/src/actions/core.js

@@ -44,6 +44,11 @@ const logout = () => ({
   payload: {},
 });
 
+logout.invalidateAccessToken = () => ({
+  type: ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE,
+  payload: {},
+});
+
 export default {
   initializeCore,
   logout,

client/src/actions/users.js

@@ -103,10 +103,11 @@ const updateUserPassword = (id, data) => ({
   },
 });
 
-updateUserPassword.success = (user) => ({
+updateUserPassword.success = (user, accessToken) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE__SUCCESS,
   payload: {
     user,
+    accessToken,
   },
 });
 

client/src/api/access-tokens.js

@@ -1,9 +1,14 @@
 import http from './http';
+import socket from './socket';
 
 /* Actions */
 
 const createAccessToken = (data, headers) => http.post('/access-tokens', data, headers);
 
+const deleteCurrentAccessToken = (headers) =>
+  socket.delete('/access-tokens/me', undefined, headers);
+
 export default {
   createAccessToken,
+  deleteCurrentAccessToken,
 };

client/src/api/socket.js

@@ -5,7 +5,7 @@ import Config from '../constants/Config';
 
 const io = sailsIOClient(socketIOClient);
 
-io.sails.url = Config.SERVER_BASE_URL;
+io.sails.url = Config.SERVER_HOST_NAME;
 io.sails.autoConnect = false;
 io.sails.reconnection = true;
 io.sails.useCORSRouteToGetCookie = false;
@@ -13,6 +13,7 @@ io.sails.environment = process.env.NODE_ENV;
 
 const { socket } = io;
 
+socket.path = `${Config.BASE_PATH}/socket.io`;
 socket.connect = socket._connect; // eslint-disable-line no-underscore-dangle
 
 ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].forEach((method) => {

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -19,7 +19,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
       ...defaultData,
     }));
 
-    const handleRoleSelectClick = useCallback((role) => {
+    const handleSelectRoleClick = useCallback((role) => {
       setData((prevData) => ({
         ...prevData,
         role,
@@ -50,7 +50,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
             <Menu secondary vertical className={styles.menu}>
               <Menu.Item
                 active={data.role === BoardMembershipRoles.EDITOR}
-                onClick={() => handleRoleSelectClick(BoardMembershipRoles.EDITOR)}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.EDITOR)}
               >
                 <div className={styles.menuItemTitle}>{t('common.editor')}</div>
                 <div className={styles.menuItemDescription}>
@@ -59,7 +59,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
               </Menu.Item>
               <Menu.Item
                 active={data.role === BoardMembershipRoles.VIEWER}
-                onClick={() => handleRoleSelectClick(BoardMembershipRoles.VIEWER)}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.VIEWER)}
               >
                 <div className={styles.menuItemTitle}>{t('common.viewer')}</div>
                 <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>

client/src/components/Card/Card.jsx

@@ -5,6 +5,7 @@ import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 
+import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
 import NameEdit from './NameEdit';
@@ -57,6 +58,17 @@ const Card = React.memo(
       }
     }, []);
 
+    const handleToggleTimerClick = useCallback(
+      (event) => {
+        event.preventDefault();
+
+        onUpdate({
+          timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+        });
+      },
+      [timer, onUpdate],
+    );
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -108,7 +120,13 @@ const Card = React.memo(
               )}
               {timer && (
                 <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
+                  <Timer
+                    as="span"
+                    startedAt={timer.startedAt}
+                    total={timer.total}
+                    size="tiny"
+                    onClick={canEdit ? handleToggleTimerClick : undefined}
+                  />
                 </span>
               )}
             </span>
@@ -148,14 +166,11 @@ const Card = React.memo(
                     {canEdit && (
                       <ActionsPopup
                         card={{
-                          id,
-                          name,
                           dueDate,
                           timer,
                           boardId,
                           listId,
                           projectId,
-                          isPersisted,
                         }}
                         projectsToLists={allProjectsToLists}
                         boardMemberships={allBoardMemberships}

client/src/components/Card/Card.module.scss

@@ -78,7 +78,9 @@
   .cover {
     border-radius: 3px 3px 0 0;
     margin-bottom: 2px;
+    padding: 2px 2px 0;
     vertical-align: middle;
+    width: 100%;
   }
 
   .details {

client/src/components/CardModal/CardModal.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
 import { Markdown } from '../../lib/custom-ui';
 
+import { startTimer, stopTimer } from '../../utils/timer';
 import NameField from './NameField';
 import DescriptionEdit from './DescriptionEdit';
 import Tasks from './Tasks';
@@ -80,6 +81,12 @@ const CardModal = React.memo(
 
     const isGalleryOpened = useRef(false);
 
+    const handleToggleTimerClick = useCallback(() => {
+      onUpdate({
+        timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+      });
+    }, [timer, onUpdate]);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -291,6 +298,19 @@ const CardModal = React.memo(
                         <Timer startedAt={timer.startedAt} total={timer.total} />
                       )}
                     </span>
+                    {canEdit && (
+                      <button
+                        onClick={handleToggleTimerClick}
+                        type="button"
+                        className={classNames(styles.attachment, styles.dueDate)}
+                      >
+                        <Icon
+                          name={timer.startedAt ? 'pause' : 'play'}
+                          size="small"
+                          className={styles.addAttachment}
+                        />
+                      </button>
+                    )}
                   </div>
                 )}
               </div>

client/src/components/Header/Header.jsx

@@ -15,6 +15,7 @@ const Header = React.memo(
     project,
     user,
     notifications,
+    isLogouting,
     canEditProject,
     canEditUsers,
     onProjectSettingsClick,
@@ -75,7 +76,11 @@ const Header = React.memo(
                 )}
               </Menu.Item>
             </NotificationsPopup>
-            <UserPopup onSettingsClick={onUserSettingsClick} onLogout={onLogout}>
+            <UserPopup
+              isLogouting={isLogouting}
+              onSettingsClick={onUserSettingsClick}
+              onLogout={onLogout}
+            >
               <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
                 {user.name}
               </Menu.Item>
@@ -93,6 +98,7 @@ Header.propTypes = {
   user: PropTypes.object.isRequired,
   notifications: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  isLogouting: PropTypes.bool.isRequired,
   canEditProject: PropTypes.bool.isRequired,
   canEditUsers: PropTypes.bool.isRequired,
   onProjectSettingsClick: PropTypes.func.isRequired,

client/src/components/Timer/Timer.jsx

@@ -14,7 +14,7 @@ const SIZES = {
   MEDIUM: 'medium',
 };
 
-const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
+const Timer = React.memo(({ as, startedAt, total, size, isDisabled, onClick }) => {
   const prevStartedAt = usePrevious(startedAt);
   const forceUpdate = useForceUpdate();
 
@@ -52,6 +52,7 @@ const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
       className={classNames(
         styles.wrapper,
         styles[`wrapper${upperFirst(size)}`],
+        startedAt && styles.wrapperActive,
         onClick && styles.wrapperHoverable,
       )}
     >
@@ -59,16 +60,19 @@ const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
     </span>
   );
 
+  const ElementType = as;
+
   return onClick ? (
-    <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+    <ElementType type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
       {contentNode}
-    </button>
+    </ElementType>
   ) : (
     contentNode
   );
 });
 
 Timer.propTypes = {
+  as: PropTypes.elementType,
   startedAt: PropTypes.instanceOf(Date),
   total: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
   size: PropTypes.oneOf(Object.values(SIZES)),
@@ -77,6 +81,7 @@ Timer.propTypes = {
 };
 
 Timer.defaultProps = {
+  as: 'button',
   startedAt: undefined,
   size: SIZES.MEDIUM,
   isDisabled: false,

client/src/components/Timer/Timer.module.scss

@@ -9,17 +9,28 @@
   }
 
   .wrapper {
-    background: #f3f4f6;
+    background: #dce0e4;
     border: none;
     border-radius: 3px;
-    color: #7e8ea3;
+    color: #6a808b;
     display: inline-block;
+    font-variant-numeric: tabular-nums;
     outline: none;
     text-align: left;
     transition: background 0.3s ease;
     vertical-align: top;
   }
 
+  .wrapperActive {
+    background: #21ba45;
+    color: #fff;
+
+    &.wrapperHoverable:hover {
+      background: #16ab39;
+      color: #fff;
+    }
+  }
+
   .wrapperHoverable:hover {
     background: #d2d8dc;
     color: #17394d;
@@ -42,6 +53,5 @@
   .wrapperMedium {
     line-height: 20px;
     padding: 6px 12px;
-    text-decoration: underline;
   }
 }

client/src/components/UserAddPopup/UserAddPopup.jsx

@@ -8,7 +8,7 @@ import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
-import { isUsername } from '../../utils/validator';
+import { isPassword, isUsername } from '../../utils/validator';
 
 import styles from './UserAddPopup.module.scss';
 
@@ -69,7 +69,7 @@ const UserAddStep = React.memo(
         return;
       }
 
-      if (!cleanData.password) {
+      if (!cleanData.password || !isPassword(cleanData.password)) {
         passwordField.current.focus();
         return;
       }
@@ -143,6 +143,7 @@ const UserAddStep = React.memo(
             />
             <div className={styles.text}>{t('common.password')}</div>
             <Input.Password
+              withStrengthBar
               fluid
               ref={passwordField}
               name="password"

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -7,6 +7,7 @@ import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
+import { isPassword } from '../../utils/validator';
 
 import styles from './UserPasswordEditStep.module.scss';
 
@@ -56,7 +57,7 @@ const UserPasswordEditStep = React.memo(
     const currentPasswordField = useRef(null);
 
     const handleSubmit = useCallback(() => {
-      if (!data.password) {
+      if (!data.password || !isPassword(data.password)) {
         passwordField.current.select();
         return;
       }
@@ -113,6 +114,7 @@ const UserPasswordEditStep = React.memo(
           <Form onSubmit={handleSubmit}>
             <div className={styles.text}>{t('common.newPassword')}</div>
             <Input.Password
+              withStrengthBar
               fluid
               ref={passwordField}
               name="password"

client/src/components/UserPopup/UserPopup.jsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Button, Menu } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import styles from './UserPopup.module.scss';
 
-const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
+const UserStep = React.memo(({ isLogouting, onSettingsClick, onLogout, onClose }) => {
   const [t] = useTranslation();
 
   const handleSettingsClick = useCallback(() => {
@@ -15,6 +15,17 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
     onClose();
   }, [onSettingsClick, onClose]);
 
+  let logoutMenuItemProps;
+  if (isLogouting) {
+    logoutMenuItemProps = {
+      as: Button,
+      fluid: true,
+      basic: true,
+      loading: true,
+      disabled: true,
+    };
+  }
+
   return (
     <>
       <Popup.Header>
@@ -29,7 +40,11 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={onLogout}>
+          <Menu.Item
+            {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
+            className={styles.menuItem}
+            onClick={onLogout}
+          >
             {t('action.logOut', {
               context: 'title',
             })}
@@ -41,6 +56,7 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
 });
 
 UserStep.propTypes = {
+  isLogouting: PropTypes.bool.isRequired,
   onSettingsClick: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,

client/src/components/UserSettingsModal/AboutPane.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+// import { useTranslation } from 'react-i18next';
+import { Image, Tab } from 'semantic-ui-react';
+
+import logo from '../../assets/images/logo.png';
+
+import styles from './AboutPane.module.scss';
+
+const AboutPane = React.memo(() => {
+  // const [t] = useTranslation();
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <Image centered src={logo} size="large" className={styles.logo} />
+    </Tab.Pane>
+  );
+});
+
+export default AboutPane;

client/src/components/UserSettingsModal/AboutPane.module.scss

@@ -0,0 +1,10 @@
+:global(#app) {
+  /* .logo {
+    margin-bottom: 16px;
+  } */
+
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/UserSettingsModal/AccountPane/AvatarEditPopup.module.scss

@@ -1,6 +1,7 @@
 :global(#app) {
   .action {
     border: none;
+    border-radius: 0.28571429rem;
     display: inline-block;
     height: 36px;
     overflow: hidden;

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -5,6 +5,7 @@ import { Modal, Tab } from 'semantic-ui-react';
 
 import AccountPane from './AccountPane';
 import PreferencesPane from './PreferencesPane';
+import AboutPane from './AboutPane';
 
 const UserSettingsModal = React.memo(
   ({
@@ -71,6 +72,10 @@ const UserSettingsModal = React.memo(
           <PreferencesPane subscribeToOwnCards={subscribeToOwnCards} onUpdate={onUpdate} />
         ),
       },
+      {
+        menuItem: 'About Planka',
+        render: () => <AboutPane />,
+      },
     ];
 
     return (

client/src/constants/ActionTypes.js

@@ -21,6 +21,7 @@ export default {
 
   CORE_INITIALIZE: 'CORE_INITIALIZE',
   LOGOUT: 'LOGOUT',
+  LOGOUT__ACCESS_TOKEN_INVALIDATE: 'LOGOUT__ACCESS_TOKEN_INVALIDATE',
 
   /* Modals */
 

client/src/constants/Config.js

@@ -1,6 +1,11 @@
+const { BASE_URL } = window;
+const BASE_PATH = BASE_URL.replace(/^.*\/\/[^/]*(.*)[^?#]*.*$/, '$1');
+
 const SERVER_BASE_URL =
   process.env.REACT_APP_SERVER_BASE_URL ||
-  (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1337');
+  (process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:1337');
+
+const SERVER_HOST_NAME = SERVER_BASE_URL.replace(/^(.*\/\/[^/?#]*).*$/, '$1');
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
@@ -10,7 +15,9 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;
 
 export default {
+  BASE_PATH,
   SERVER_BASE_URL,
+  SERVER_HOST_NAME,
   ACCESS_TOKEN_KEY,
   ACCESS_TOKEN_VERSION_KEY,
   ACCESS_TOKEN_VERSION,

client/src/constants/Paths.js

@@ -1,8 +1,10 @@
-const ROOT = '/';
+import Config from './Config';
-const LOGIN = '/login';
+
-const PROJECTS = '/projects/:id';
+const ROOT = `${Config.BASE_PATH}/`;
-const BOARDS = '/boards/:id';
+const LOGIN = `${Config.BASE_PATH}/login`;
-const CARDS = '/cards/:id';
+const PROJECTS = `${Config.BASE_PATH}/projects/:id`;
+const BOARDS = `${Config.BASE_PATH}/boards/:id`;
+const CARDS = `${Config.BASE_PATH}/cards/:id`;
 
 export default {
   ROOT,

client/src/containers/HeaderContainer.js

@@ -6,6 +6,7 @@ import entryActions from '../entry-actions';
 import Header from '../components/Header';
 
 const mapStateToProps = (state) => {
+  const isLogouting = selectors.selectIsLogouting(state);
   const currentUser = selectors.selectCurrentUser(state);
   const currentProject = selectors.selectCurrentProject(state);
   const notifications = selectors.selectNotificationsForCurrentUser(state);
@@ -13,6 +14,7 @@ const mapStateToProps = (state) => {
 
   return {
     notifications,
+    isLogouting,
     project: currentProject,
     user: currentUser,
     canEditProject: isCurrentUserManager,

client/src/lib/custom-ui/components/Input/InputPassword.jsx

@@ -1,22 +1,74 @@
-import React, { useCallback } from 'react';
+import zxcvbn from 'zxcvbn';
-import { Icon, Input } from 'semantic-ui-react';
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Input, Progress } from 'semantic-ui-react';
 import { useToggle } from '../../../hooks';
 
-const InputPassword = React.forwardRef((props, ref) => {
+import styles from './InputPassword.module.css';
-  const [isVisible, toggleVisible] = useToggle();
 
-  const handleToggleClick = useCallback(() => {
+const STRENGTH_SCORE_COLORS = ['red', 'orange', 'yellow', 'olive', 'green'];
-    toggleVisible();
-  }, [toggleVisible]);
 
-  return (
+const InputPassword = React.forwardRef(
-    <Input
+  ({ value, withStrengthBar, minStrengthScore, className, ...props }, ref) => {
-      {...props} // eslint-disable-line react/jsx-props-no-spreading
+    const [isVisible, toggleVisible] = useToggle();
-      ref={ref}
+
-      type={isVisible ? 'text' : 'password'}
+    const strengthScore = useMemo(() => {
-      icon={<Icon link name={isVisible ? 'eye' : 'eye slash'} onClick={handleToggleClick} />}
+      if (!withStrengthBar) {
-    />
+        return undefined;
-  );
+      }
-});
+
+      return zxcvbn(value).score;
+    }, [value, withStrengthBar]);
+
+    const handleToggleClick = useCallback(() => {
+      toggleVisible();
+    }, [toggleVisible]);
+
+    const inputProps = {
+      ...props,
+      ref,
+      type: isVisible ? 'text' : 'password',
+      icon: <Icon link name={isVisible ? 'eye' : 'eye slash'} onClick={handleToggleClick} />,
+    };
+
+    if (!withStrengthBar) {
+      return (
+        <Input
+          {...inputProps} // eslint-disable-line react/jsx-props-no-spreading
+          className={className}
+        />
+      );
+    }
+
+    return (
+      <div className={className}>
+        <Input
+          {...inputProps} // eslint-disable-line react/jsx-props-no-spreading
+          error={!!value && strengthScore < minStrengthScore}
+        />
+        <Progress
+          value={value ? strengthScore + 1 : 0}
+          total={5}
+          color={STRENGTH_SCORE_COLORS[strengthScore]}
+          size="tiny"
+          className={styles.strengthBar}
+        />
+      </div>
+    );
+  },
+);
+
+InputPassword.propTypes = {
+  value: PropTypes.string.isRequired,
+  withStrengthBar: PropTypes.bool,
+  minStrengthScore: PropTypes.number,
+  className: PropTypes.string,
+};
+
+InputPassword.defaultProps = {
+  withStrengthBar: false,
+  minStrengthScore: 2,
+  className: undefined,
+};
 
 export default React.memo(InputPassword);

client/src/lib/custom-ui/components/Input/InputPassword.module.css

@@ -0,0 +1,4 @@
+.strengthBar {
+  margin: 4px 0 0 !important;
+  opacity: 0.5;
+}

client/src/lib/custom-ui/components/Markdown/Markdown.jsx

@@ -6,6 +6,8 @@ import remarkBreaks from 'remark-breaks';
 
 import './Markdown.module.scss'; // FIXME: import as styles?
 
+const ABSOLUTE_URL_REGEX = /^(?:https?:)?\/\//i;
+
 const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
   const handleLinkClick = useCallback((event) => {
     event.stopPropagation();
@@ -16,25 +18,30 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
                       jsx-a11y/click-events-have-key-events,
                       jsx-a11y/no-static-element-interactions,
                       react/jsx-props-no-spreading */
-    ({ node, ...linkProps }) => <a {...linkProps} onClick={handleLinkClick} />,
+    ({ node, ...linkProps }) => (
+      <a
+        {...linkProps}
+        rel={
+          ABSOLUTE_URL_REGEX.test(linkProps.href) && linkProps.target === '_blank'
+            ? 'noreferrer'
+            : undefined
+        }
+        onClick={linkStopPropagation ? handleLinkClick : undefined}
+      />
+    ),
     /* eslint-enable jsx-a11y/anchor-has-content,
                      jsx-a11y/click-events-have-key-events,
                      jsx-a11y/no-static-element-interactions,
                      react/jsx-props-no-spreading */
-    [handleLinkClick],
+    [linkStopPropagation, handleLinkClick],
   );
 
-  let components;
-  if (linkStopPropagation) {
-    components = {
-      a: linkRenderer,
-    };
-  }
-
   return (
     <ReactMarkdown
       {...props} // eslint-disable-line react/jsx-props-no-spreading
-      components={components}
+      components={{
+        a: linkRenderer,
+      }}
       remarkPlugins={[remarkGfm, remarkBreaks]}
       className="markdown-body"
     />

client/src/lib/custom-ui/styles.css

@@ -14453,11 +14453,11 @@ img.ui.bordered.image {
 ---------------------*/
 
 .ui.input.error > input {
-  background-color: #fff6f6;
+  background-color: #fff6f6 !important;
-  border-color: #e0b4b4;
+  border-color: #e0b4b4 !important;
-  color: #9f3a38;
+  color: #9f3a38 !important;
-  -webkit-box-shadow: none;
+  -webkit-box-shadow: none !important;
-  box-shadow: none;
+  box-shadow: none !important;
 }
 
 /* Error Placeholder */

client/src/lib/popup/with-popup.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 
@@ -8,6 +9,9 @@ export default (WrappedComponent, defaultProps) => {
   const Popup = React.memo(({ children, ...props }) => {
     const [isOpened, setIsOpened] = useState(false);
 
+    const wrapper = useRef(null);
+    const resizeObserver = useRef(null);
+
     const handleOpen = useCallback(() => {
       setIsOpened(true);
     }, []);
@@ -37,6 +41,29 @@ export default (WrappedComponent, defaultProps) => {
       [children],
     );
 
+    const handleContentRef = useCallback((element) => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+
+      if (!element) {
+        resizeObserver.current = null;
+        return;
+      }
+
+      resizeObserver.current = new ResizeObserver(() => {
+        if (resizeObserver.current.isInitial) {
+          resizeObserver.current.isInitial = false;
+          return;
+        }
+
+        wrapper.current.positionUpdate();
+      });
+
+      resizeObserver.current.isInitial = true;
+      resizeObserver.current.observe(element);
+    }, []);
+
     const tigger = React.cloneElement(children, {
       onClick: handleTriggerClick,
     });
@@ -45,6 +72,7 @@ export default (WrappedComponent, defaultProps) => {
       <SemanticUIPopup
         basic
         wide
+        ref={wrapper}
         trigger={tigger}
         on="click"
         open={isOpened}
@@ -64,9 +92,11 @@ export default (WrappedComponent, defaultProps) => {
         onClick={handleClick}
         {...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
       >
-        <Button icon="close" onClick={handleClose} className={styles.closeButton} />
+        <div ref={handleContentRef}>
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <Button icon="close" onClick={handleClose} className={styles.closeButton} />
-        <WrappedComponent {...props} onClose={handleClose} />
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <WrappedComponent {...props} onClose={handleClose} />
+        </div>
       </SemanticUIPopup>
     );
   });

client/src/locales/cs/core.js

@@ -117,7 +117,7 @@ export default {
       phone: 'Telefon',
       preferences: 'Volby',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tip: dejte Ctrl-V (Cmd-V na Mac) pro vložení přílohy ze schránky.',
+        'Tip: dejte Ctrl-V (Cmd-V na Mac) pro vložení přílohy ze schránky',
       project: 'Projekt',
       projectNotFound_title: 'Projekt nenalezen',
       removeManager_title: 'Odstranit vedoucího',

client/src/locales/de/core.js

@@ -23,7 +23,7 @@ export default {
       administrator: 'Administrator',
       all: 'Alle',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
-        'Alle Änderungen werden automatisch gespeichert,<br />sobald die Verbindung wiederhergestellt wurde.',
+        'Alle Änderungen werden automatisch gespeichert,<br />sobald die Verbindung wiederhergestellt wurde',
       areYouSureYouWantToDeleteThisAttachment:
         'Sind Sie sicher, dass Sie diesen Anhang löschen möchten?',
       areYouSureYouWantToDeleteThisBoard: 'Sind Sie sicher, dass Sie dieses Board löschen möchten?',
@@ -123,7 +123,7 @@ export default {
       phone: 'Telefon',
       preferences: 'Voreinstellungen',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tipp: Drücken Sie STRG-V (Cmd-V auf Mac), um einen Anhang aus der Zwischenablage hinzuzufügen.',
+        'Tipp: Drücken Sie STRG-V (Cmd-V auf Mac), um einen Anhang aus der Zwischenablage hinzuzufügen',
       project: 'Projekt',
       projectNotFound_title: 'Projekt nicht gefunden',
       removeManager_title: 'Manager entfernen',

client/src/locales/en/core.js

@@ -121,7 +121,7 @@ export default {
       phone: 'Phone',
       preferences: 'Preferences',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tip: press Ctrl-V (Cmd-V on Mac) to add an attachment from the clipboard.',
+        'Tip: press Ctrl-V (Cmd-V on Mac) to add an attachment from the clipboard',
       project: 'Project',
       projectNotFound_title: 'Project Not Found',
       removeManager_title: 'Remove Manager',

client/src/locales/en/index.js

@@ -5,7 +5,7 @@ import core from './core';
 
 export default {
   language: 'en',
-  country: 'us',
+  country: 'gb',
   name: 'English',
   embeddedLocale: merge(login, core),
 };

client/src/locales/es/core.js

@@ -106,7 +106,7 @@ export default {
       phone: 'Teléfono',
       preferences: 'Preferencias',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tip: presiona Ctrl-V (Cmd-V en Mac) para añadir adjuntos desde el portapapeles.',
+        'Tip: presiona Ctrl-V (Cmd-V en Mac) para añadir adjuntos desde el portapapeles',
       project: 'Proyecto',
       projectNotFound_title: 'Proyecto no encontrado',
       removeMember_title: 'Remover Miembro',
@@ -115,7 +115,7 @@ export default {
       selectList: 'Seleccionar Lista',
       selectProject: 'Seleccionar Proyecto',
       settings: 'Configuraciones',
-      subscribeToMyOwnCardsByDefault: 'Suscribirme a mis propias tarjetas por defecto.',
+      subscribeToMyOwnCardsByDefault: 'Suscribirme a mis propias tarjetas por defecto',
       taskActions_title: 'Acciones de Tareas',
       tasks: 'Tareas',
       time: 'Tiempo',

client/src/locales/it/core.js

@@ -121,7 +121,7 @@ export default {
       phone: 'Telefono',
       preferences: 'Preferenze',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tip: prmi Ctrl-V (Cmd-V on Mac) per aggiungere un allegato dalla clipboard.',
+        'Tip: prmi Ctrl-V (Cmd-V on Mac) per aggiungere un allegato dalla clipboard',
       project: 'Progetto',
       projectNotFound_title: 'Progetto non trovato',
       removeManager_title: 'Rimuovi Manager',

client/src/locales/ja/core.js

@@ -117,7 +117,7 @@ export default {
       phone: '電話番号',
       preferences: '環境設定',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'ヒント: Ctrl-V(MacではCmd-V)を押して、クリップボードから添付ファイルを追加します。',
+        'ヒント: Ctrl-V(MacではCmd-V)を押して、クリップボードから添付ファイルを追加します',
       project: 'プロジェクト',
       projectNotFound_title: 'プロジェクトがありません',
       removeManager_title: 'マネージャーを削除',

client/src/locales/pl/core.js

@@ -106,7 +106,7 @@ export default {
       phone: 'Telefon',
       preferences: 'Preferencje',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Podpowiedź: naciśnij Ctrl-V (Cmd-V na Macu) aby dodać załącznik ze schowka.',
+        'Podpowiedź: naciśnij Ctrl-V (Cmd-V na Macu) aby dodać załącznik ze schowka',
       project: 'Projekt',
       projectNotFound_title: 'Projekt Nie Znaleziony',
       removeMember_title: 'Usuń Członka',

client/src/locales/ru/core.js

@@ -116,7 +116,7 @@ export default {
       phone: 'Телефон',
       preferences: 'Предпочтения',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена.',
+        'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена',
       project: 'Проект',
       projectActions: 'Действия с проектом',
       projectNotFound: 'Проект не найден',

client/src/locales/sk/core.js

@@ -118,7 +118,7 @@ export default {
       phone: 'Telefón',
       preferences: 'Voľby',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tip: stlačte Ctrl-V (Cmd-V na Mac) pre vloženie prílohy zo schránky.',
+        'Tip: stlačte Ctrl-V (Cmd-V na Mac) pre vloženie prílohy zo schránky',
       project: 'Projekt',
       projectNotFound_title: 'Projekt neexistuje',
       removeManager_title: 'Odstrániť správcu',

client/src/locales/sv/core.js

@@ -119,7 +119,7 @@ export default {
       phone: 'Telefon',
       preferences: 'Preferenser',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Tips: tryck på Ctrl-V (Cmd-V på Mac) för att lägga till en bilaga från urklipp.',
+        'Tips: tryck på Ctrl-V (Cmd-V på Mac) för att lägga till en bilaga från urklipp',
       project: 'Projekt',
       projectNotFound_title: 'Projekt Ej Funnet',
       removeManager_title: 'Ta Bort Projektledare',

client/src/locales/uz/core.js

@@ -112,7 +112,7 @@ export default {
       phone: 'Telefon',
       preferences: 'Afzalliklar',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        "Tip: Buferdan ilova qo'shish uchun Ctrl-V (Mac da Cmd-V) ni bosing.",
+        "Tip: Buferdan ilova qo'shish uchun Ctrl-V (Mac da Cmd-V) ni bosing",
       project: 'Loyiha',
       projectNotFound_title: 'Loyiha Topilmadi',
       removeManager_title: "Boshqaruvchini O'chirish",

client/src/locales/zh/core.js

@@ -110,7 +110,7 @@ export default {
       phone: '电话',
       preferences: '偏好',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        '提示: 点击 Ctrl-V (Mac: Cmd-V) 从剪切板添加附件.',
+        '提示: 点击 Ctrl-V (Mac: Cmd-V) 从剪切板添加附件',
       project: '项目',
       projectNotFound_title: '项目未找到',
       removeManager_title: '删除管理员',

client/src/reducers/auth.js

@@ -1,18 +1,34 @@
+import { getAccessToken } from '../utils/access-token-storage';
 import ActionTypes from '../constants/ActionTypes';
 
 const initialState = {
+  accessToken: getAccessToken(),
   userId: null,
 };
 
 // eslint-disable-next-line default-param-last
 export default (state = initialState, { type, payload }) => {
   switch (type) {
+    case ActionTypes.AUTHENTICATE__SUCCESS:
+      return {
+        ...state,
+        accessToken: payload.accessToken,
+      };
     case ActionTypes.SOCKET_RECONNECT_HANDLE:
     case ActionTypes.CORE_INITIALIZE:
       return {
         ...state,
         userId: payload.user.id,
       };
+    case ActionTypes.USER_PASSWORD_UPDATE__SUCCESS:
+      if (payload.accessToken) {
+        return {
+          ...state,
+          accessToken: payload.accessToken,
+        };
+      }
+
+      return state;
     default:
       return state;
   }

client/src/reducers/core.js

@@ -5,6 +5,7 @@ import ModalTypes from '../constants/ModalTypes';
 
 const initialState = {
   isInitializing: true,
+  isLogouting: false,
   currentModal: null,
 };
 
@@ -22,6 +23,11 @@ export default (state = initialState, { type, payload }) => {
         ...state,
         isInitializing: false,
       };
+    case ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE:
+      return {
+        ...state,
+        isLogouting: true,
+      };
     case ActionTypes.MODAL_OPEN:
       return {
         ...state,

client/src/sagas/core/index.js

@@ -1,9 +1,8 @@
-import { all, apply, call, fork, take } from 'redux-saga/effects';
+import { all, apply, fork, take } from 'redux-saga/effects';
 
 import watchers from './watchers';
 import services from './services';
 import { socket } from '../../api';
-import { removeAccessToken } from '../../utils/access-token-storage';
 import ActionTypes from '../../constants/ActionTypes';
 import Paths from '../../constants/Paths';
 
@@ -15,6 +14,5 @@ export default function* coreSaga() {
 
   yield take(ActionTypes.LOGOUT);
 
-  yield call(removeAccessToken);
   window.location.href = Paths.LOGIN;
 }

client/src/sagas/core/request.js

@@ -1,7 +1,8 @@
-import { call, fork, join, put, take } from 'redux-saga/effects';
+import { call, fork, join, put, select, take } from 'redux-saga/effects';
 
+import selectors from '../../selectors';
 import actions from '../../actions';
-import { getAccessToken } from '../../utils/access-token-storage';
+import { removeAccessToken } from '../../utils/access-token-storage';
 import ErrorCodes from '../../constants/ErrorCodes';
 
 let lastRequestTask;
@@ -13,7 +14,7 @@ function* queueRequest(method, ...args) {
     } catch {} // eslint-disable-line no-empty
   }
 
-  const accessToken = yield call(getAccessToken);
+  const accessToken = yield select(selectors.selectAccessToken);
 
   try {
     return yield call(method, ...args, {
@@ -21,6 +22,7 @@ function* queueRequest(method, ...args) {
     });
   } catch (error) {
     if (error.code === ErrorCodes.UNAUTHORIZED) {
+      yield call(removeAccessToken);
       yield put(actions.logout()); // TODO: next url
       yield take();
     }

client/src/sagas/core/services/core.js

@@ -1,8 +1,11 @@
 import { call, put, take } from 'redux-saga/effects';
 
+import request from '../request';
 import requests from '../requests';
 import actions from '../../../actions';
+import api from '../../../api';
 import i18n from '../../../i18n';
+import { removeAccessToken } from '../../../utils/access-token-storage';
 
 export function* initializeCore() {
   const {
@@ -60,7 +63,17 @@ export function* changeCoreLanguage(language) {
   }
 }
 
-export function* logout() {
+export function* logout(invalidateAccessToken = true) {
+  yield call(removeAccessToken);
+
+  if (invalidateAccessToken) {
+    yield put(actions.logout.invalidateAccessToken());
+
+    try {
+      yield call(request, api.deleteCurrentAccessToken);
+    } catch (error) {} // eslint-disable-line no-empty
+  }
+
   yield put(actions.logout());
   yield take();
 }

client/src/sagas/core/services/users.js

@@ -124,11 +124,13 @@ export function* updateUserPassword(id, data) {
     return;
   }
 
-  if (accessTokens && accessTokens[0]) {
+  const accessToken = accessTokens && accessTokens[0];
-    yield call(setAccessToken, accessTokens[0]);
+
+  if (accessToken) {
+    yield call(setAccessToken, accessToken);
   }
 
-  yield put(actions.updateUserPassword.success(user));
+  yield put(actions.updateUserPassword.success(user, accessToken));
 }
 
 export function* updateCurrentUserPassword(data) {
@@ -215,7 +217,7 @@ export function* handleUserDelete(user) {
   const currentUserId = yield select(selectors.selectCurrentUserId);
 
   if (user.id === currentUserId) {
-    yield call(logout);
+    yield call(logout, false);
   }
 
   yield put(actions.handleUserDelete(user));

client/src/sagas/login/index.js

@@ -2,18 +2,13 @@ import { all, call, cancel, fork, take } from 'redux-saga/effects';
 
 import watchers from './watchers';
 import services from './services';
-import { setAccessToken } from '../../utils/access-token-storage';
 import ActionTypes from '../../constants/ActionTypes';
 
 export default function* loginSaga() {
   const watcherTasks = yield all(watchers.map((watcher) => fork(watcher)));
 
-  const {
+  yield take(ActionTypes.AUTHENTICATE__SUCCESS);
-    payload: { accessToken },
-  } = yield take(ActionTypes.AUTHENTICATE__SUCCESS);
 
   yield cancel(watcherTasks);
-
-  yield call(setAccessToken, accessToken);
   yield call(services.goToRoot);
 }

client/src/sagas/login/services/login.js

@@ -2,6 +2,7 @@ import { call, put } from 'redux-saga/effects';
 
 import actions from '../../../actions';
 import api from '../../../api';
+import { setAccessToken } from '../../../utils/access-token-storage';
 
 export function* authenticate(data) {
   yield put(actions.authenticate(data));
@@ -14,6 +15,7 @@ export function* authenticate(data) {
     return;
   }
 
+  yield call(setAccessToken, accessToken);
   yield put(actions.authenticate.success(accessToken));
 }
 

client/src/selectors/auth.js

@@ -1,5 +0,0 @@
-export const selectAccessToken = ({ auth: { accessToken } }) => accessToken;
-
-export default {
-  selectAccessToken,
-};

client/src/selectors/core.js

@@ -4,8 +4,12 @@ import isUndefined from 'lodash/isUndefined';
 import orm from '../orm';
 import Config from '../constants/Config';
 
+export const selectAccessToken = ({ auth: { accessToken } }) => accessToken;
+
 export const selectIsCoreInitializing = ({ core: { isInitializing } }) => isInitializing;
 
+export const selectIsLogouting = ({ core: { isLogouting } }) => isLogouting;
+
 const nextPosition = (items, index, excludedId) => {
   const filteredItems = isUndefined(excludedId)
     ? items
@@ -94,7 +98,9 @@ export const selectNextTaskPosition = createSelector(
 );
 
 export default {
+  selectAccessToken,
   selectIsCoreInitializing,
+  selectIsLogouting,
   selectNextBoardPosition,
   selectNextListPosition,
   selectNextCardPosition,

client/src/selectors/index.js

@@ -1,5 +1,4 @@
 import router from './router';
-import auth from './auth';
 import core from './core';
 import modals from './modals';
 import users from './users';
@@ -14,7 +13,6 @@ import attachments from './attachments';
 
 export default {
   ...router,
-  ...auth,
   ...core,
   ...modals,
   ...users,

client/src/utils/validator.js

@@ -1,6 +1,8 @@
+import zxcvbn from 'zxcvbn';
+
 const USERNAME_REGEX = /^[a-zA-Z0-9]+((_|\.)?[a-zA-Z0-9])*$/;
 
-// eslint-disable-next-line import/prefer-default-export
+export const isPassword = (string) => zxcvbn(string).score >= 2; // TODO: move to config
-export const isUsername = (string) => {
+
-  return string.length >= 3 && string.length <= 16 && USERNAME_REGEX.test(string);
+export const isUsername = (string) =>
-};
+  string.length >= 3 && string.length <= 16 && USERNAME_REGEX.test(string);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "1.7.1",
+  "version": "1.8.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.7.1",
+      "version": "1.8.3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.7.1",
+  "version": "1.8.3",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/access-tokens/create.js

@@ -40,24 +40,33 @@ module.exports = {
   },
 
   async fn(inputs) {
+    const remoteAddress = getRemoteAddress(this.req);
+
     const user = await sails.helpers.users.getOneByEmailOrUsername(inputs.emailOrUsername);
 
     if (!user) {
       sails.log.warn(
-        `Invalid email or username: "${inputs.emailOrUsername}"! (IP: ${getRemoteAddress(
+        `Invalid email or username: "${inputs.emailOrUsername}"! (IP: ${remoteAddress})`,
-          this.req,
-        )})`,
       );
       throw Errors.INVALID_EMAIL_OR_USERNAME;
     }
 
     if (!bcrypt.compareSync(inputs.password, user.password)) {
-      sails.log.warn(`Invalid password! (IP: ${getRemoteAddress(this.req)})`);
+      sails.log.warn(`Invalid password! (IP: ${remoteAddress})`);
       throw Errors.INVALID_PASSWORD;
     }
 
+    const accessToken = sails.helpers.utils.createToken(user.id);
+
+    await Session.create({
+      accessToken,
+      remoteAddress,
+      userId: user.id,
+      userAgent: this.req.headers['user-agent'],
+    });
+
     return {
-      item: sails.helpers.utils.createToken(user.id),
+      item: accessToken,
     };
   },
 };

server/api/controllers/access-tokens/delete.js

@@ -0,0 +1,16 @@
+module.exports = {
+  async fn() {
+    const { accessToken } = this.req;
+
+    await Session.updateOne({
+      accessToken,
+      deletedAt: null,
+    }).set({
+      deletedAt: new Date().toUTCString(),
+    });
+
+    return {
+      item: accessToken,
+    };
+  },
+};

server/api/controllers/attachments/create.js

@@ -1,3 +1,6 @@
+const util = require('util');
+const { v4: uuid } = require('uuid');
+
 const Errors = {
   NOT_ENOUGH_RIGHTS: {
     notEnoughRights: 'Not enough rights',
@@ -5,6 +8,9 @@ const Errors = {
   CARD_NOT_FOUND: {
     cardNotFound: 'Card not found',
   },
+  NO_FILE_WAS_UPLOADED: {
+    noFileWasUploaded: 'No file was uploaded',
+  },
 };
 
 module.exports = {
@@ -27,6 +33,9 @@ module.exports = {
     cardNotFound: {
       responseType: 'notFound',
     },
+    noFileWasUploaded: {
+      responseType: 'unprocessableEntity',
+    },
     uploadError: {
       responseType: 'unprocessableEntity',
     },
@@ -52,33 +61,37 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    this.req
+    const upload = util.promisify((options, callback) =>
-      .file('file')
+      this.req.file('file').upload(options, (error, files) => callback(error, files)),
-      .upload(sails.helpers.utils.createAttachmentReceiver(), async (error, files) => {
+    );
-        if (error) {
-          return exits.uploadError(error.message);
-        }
 
-        if (files.length === 0) {
+    let files;
-          return exits.uploadError('No file was uploaded');
+    try {
-        }
+      files = await upload({
-
+        saveAs: uuid(),
-        const file = files[0];
+        maxBytes: null,
-
-        const attachment = await sails.helpers.attachments.createOne(
-          {
-            ...file.extra,
-            filename: file.filename,
-          },
-          currentUser,
-          card,
-          inputs.requestId,
-          this.req,
-        );
-
-        return exits.success({
-          item: attachment.toJSON(),
-        });
       });
+    } catch (error) {
+      return exits.uploadError(error.message); // TODO: add error
+    }
+
+    if (files.length === 0) {
+      throw Errors.NO_FILE_WAS_UPLOADED;
+    }
+
+    const file = _.last(files);
+    const fileData = await sails.helpers.attachments.processUploadedFile(file);
+
+    const attachment = await sails.helpers.attachments.createOne(
+      fileData,
+      currentUser,
+      card,
+      inputs.requestId,
+      this.req,
+    );
+
+    return exits.success({
+      item: attachment,
+    });
   },
 };

server/api/controllers/cards/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
   },
 
-  async fn(inputs, exits) {
+  async fn(inputs) {
     const { currentUser } = this.req;
 
     const { board } = await sails.helpers.boards
@@ -61,7 +61,7 @@ module.exports = {
     const tasks = await sails.helpers.cards.getTasks(cardIds);
     const attachments = await sails.helpers.cards.getAttachments(cardIds);
 
-    return exits.success({
+    return {
       items: cards,
       included: {
         cardMemberships,
@@ -69,6 +69,6 @@ module.exports = {
         tasks,
         attachments,
       },
-    });
+    };
   },
 };

server/api/controllers/projects/update-background-image.js

@@ -1,7 +1,17 @@
+const util = require('util');
+const rimraf = require('rimraf');
+const { v4: uuid } = require('uuid');
+
 const Errors = {
   PROJECT_NOT_FOUND: {
     projectNotFound: 'Project not found',
   },
+  NO_FILE_WAS_UPLOADED: {
+    noFileWasUploaded: 'No file was uploaded',
+  },
+  FILE_IS_NOT_IMAGE: {
+    fileIsNotImage: 'File is not image',
+  },
 };
 
 module.exports = {
@@ -17,6 +27,12 @@ module.exports = {
     projectNotFound: {
       responseType: 'notFound',
     },
+    noFileWasUploaded: {
+      responseType: 'unprocessableEntity',
+    },
+    fileIsNotImage: {
+      responseType: 'unprocessableEntity',
+    },
     uploadError: {
       responseType: 'unprocessableEntity',
     },
@@ -37,32 +53,52 @@ module.exports = {
       throw Errors.PROJECT_NOT_FOUND; // Forbidden
     }
 
-    this.req
+    const upload = util.promisify((options, callback) =>
-      .file('file')
+      this.req.file('file').upload(options, (error, files) => callback(error, files)),
-      .upload(sails.helpers.utils.createProjectBackgroundImageReceiver(), async (error, files) => {
+    );
-        if (error) {
-          return exits.uploadError(error.message);
-        }
 
-        if (files.length === 0) {
+    let files;
-          return exits.uploadError('No file was uploaded');
+    try {
-        }
+      files = await upload({
-
+        saveAs: uuid(),
-        project = await sails.helpers.projects.updateOne(
+        maxBytes: null,
-          project,
-          {
-            backgroundImageDirname: files[0].extra.dirname,
-          },
-          this.req,
-        );
-
-        if (!project) {
-          throw Errors.PROJECT_NOT_FOUND;
-        }
-
-        return exits.success({
-          item: project.toJSON(),
-        });
       });
+    } catch (error) {
+      return exits.uploadError(error.message); // TODO: add error
+    }
+
+    if (files.length === 0) {
+      throw Errors.NO_FILE_WAS_UPLOADED;
+    }
+
+    const file = _.last(files);
+
+    const fileData = await sails.helpers.projects
+      .processUploadedBackgroundImageFile(file)
+      .intercept('fileIsNotImage', () => {
+        try {
+          rimraf.sync(file.fd);
+        } catch (error) {
+          console.warn(error.stack); // eslint-disable-line no-console
+        }
+
+        return Errors.FILE_IS_NOT_IMAGE;
+      });
+
+    project = await sails.helpers.projects.updateOne(
+      project,
+      {
+        backgroundImageDirname: fileData.dirname,
+      },
+      this.req,
+    );
+
+    if (!project) {
+      throw Errors.PROJECT_NOT_FOUND;
+    }
+
+    return exits.success({
+      item: project,
+    });
   },
 };

server/api/controllers/users/create.js

@@ -1,3 +1,5 @@
+const zxcvbn = require('zxcvbn');
+
 const Errors = {
   EMAIL_ALREADY_IN_USE: {
     emailAlreadyInUse: 'Email already in use',
@@ -16,6 +18,7 @@ module.exports = {
     },
     password: {
       type: 'string',
+      custom: (value) => zxcvbn(value).score >= 2, // TODO: move to config
       required: true,
     },
     name: {

server/api/controllers/users/update-avatar.js

@@ -1,7 +1,17 @@
+const util = require('util');
+const rimraf = require('rimraf');
+const { v4: uuid } = require('uuid');
+
 const Errors = {
   USER_NOT_FOUND: {
     userNotFound: 'User not found',
   },
+  NO_FILE_WAS_UPLOADED: {
+    noFileWasUploaded: 'No file was uploaded',
+  },
+  FILE_IS_NOT_IMAGE: {
+    fileIsNotImage: 'File is not image',
+  },
 };
 
 module.exports = {
@@ -17,6 +27,12 @@ module.exports = {
     userNotFound: {
       responseType: 'notFound',
     },
+    noFileWasUploaded: {
+      responseType: 'unprocessableEntity',
+    },
+    fileIsNotImage: {
+      responseType: 'unprocessableEntity',
+    },
     uploadError: {
       responseType: 'unprocessableEntity',
     },
@@ -38,33 +54,53 @@ module.exports = {
       user = currentUser;
     }
 
-    this.req
+    const upload = util.promisify((options, callback) =>
-      .file('file')
+      this.req.file('file').upload(options, (error, files) => callback(error, files)),
-      .upload(sails.helpers.utils.createUserAvatarReceiver(), async (error, files) => {
+    );
-        if (error) {
-          return exits.uploadError(error.message);
-        }
 
-        if (files.length === 0) {
+    let files;
-          return exits.uploadError('No file was uploaded');
+    try {
-        }
+      files = await upload({
-
+        saveAs: uuid(),
-        user = await sails.helpers.users.updateOne(
+        maxBytes: null,
-          user,
-          {
-            avatarDirname: files[0].extra.dirname,
-          },
-          currentUser,
-          this.req,
-        );
-
-        if (!user) {
-          throw Errors.USER_NOT_FOUND;
-        }
-
-        return exits.success({
-          item: user.toJSON(),
-        });
       });
+    } catch (error) {
+      return exits.uploadError(error.message); // TODO: add error
+    }
+
+    if (files.length === 0) {
+      throw Errors.NO_FILE_WAS_UPLOADED;
+    }
+
+    const file = _.last(files);
+
+    const fileData = await sails.helpers.users
+      .processUploadedAvatarFile(file)
+      .intercept('fileIsNotImage', () => {
+        try {
+          rimraf.sync(file.fd);
+        } catch (error) {
+          console.warn(error.stack); // eslint-disable-line no-console
+        }
+
+        return Errors.FILE_IS_NOT_IMAGE;
+      });
+
+    user = await sails.helpers.users.updateOne(
+      user,
+      {
+        avatarDirname: fileData.dirname,
+      },
+      currentUser,
+      this.req,
+    );
+
+    if (!user) {
+      throw Errors.USER_NOT_FOUND;
+    }
+
+    return exits.success({
+      item: user,
+    });
   },
 };

server/api/controllers/users/update-password.js

@@ -1,4 +1,7 @@
 const bcrypt = require('bcrypt');
+const zxcvbn = require('zxcvbn');
+
+const { getRemoteAddress } = require('../../../utils/remoteAddress');
 
 const Errors = {
   USER_NOT_FOUND: {
@@ -18,6 +21,7 @@ module.exports = {
     },
     password: {
       type: 'string',
+      custom: (value) => zxcvbn(value).score >= 2, // TODO: move to config
       required: true,
     },
     currentPassword: {
@@ -69,6 +73,13 @@ module.exports = {
     if (user.id === currentUser.id) {
       const accessToken = sails.helpers.utils.createToken(user.id, user.passwordUpdatedAt);
 
+      await Session.create({
+        accessToken,
+        userId: user.id,
+        remoteAddress: getRemoteAddress(this.req),
+        userAgent: this.req.headers['user-agent'],
+      });
+
       return {
         item: user,
         included: {

server/api/helpers/attachments/process-uploaded-file.js

@@ -0,0 +1,77 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+const moveFile = require('move-file');
+const filenamify = require('filenamify');
+const { v4: uuid } = require('uuid');
+const sharp = require('sharp');
+
+module.exports = {
+  inputs: {
+    file: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  async fn(inputs) {
+    const dirname = uuid();
+
+    // FIXME: https://github.com/sindresorhus/filenamify/issues/13
+    const filename = filenamify(inputs.file.filename);
+
+    const rootPath = path.join(sails.config.custom.attachmentsPath, dirname);
+    const filePath = path.join(rootPath, filename);
+
+    fs.mkdirSync(rootPath);
+    await moveFile(inputs.file.fd, filePath);
+
+    const image = sharp(filePath);
+    let metadata;
+
+    try {
+      metadata = await image.metadata();
+    } catch (error) {} // eslint-disable-line no-empty
+
+    const fileData = {
+      dirname,
+      filename,
+      image: null,
+      name: inputs.file.filename,
+    };
+
+    if (metadata && !['svg', 'pdf'].includes(metadata.format)) {
+      const thumbnailsPath = path.join(rootPath, 'thumbnails');
+      fs.mkdirSync(thumbnailsPath);
+
+      try {
+        await image
+          .resize(
+            metadata.height > metadata.width
+              ? {
+                  width: 256,
+                  height: 320,
+                }
+              : {
+                  width: 256,
+                },
+          )
+          .jpeg({
+            quality: 100,
+            chromaSubsampling: '4:4:4',
+          })
+          .toFile(path.join(thumbnailsPath, 'cover-256.jpg'));
+
+        fileData.image = _.pick(metadata, ['width', 'height']);
+      } catch (error1) {
+        try {
+          rimraf.sync(thumbnailsPath);
+        } catch (error2) {
+          console.warn(error2.stack); // eslint-disable-line no-console
+        }
+      }
+    }
+
+    return fileData;
+  },
+};

server/api/helpers/projects/process-uploaded-background-image-file.js

@@ -0,0 +1,63 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+const { v4: uuid } = require('uuid');
+const sharp = require('sharp');
+
+module.exports = {
+  inputs: {
+    file: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  exits: {
+    fileIsNotImage: {},
+  },
+
+  async fn(inputs) {
+    const image = sharp(inputs.file.fd);
+
+    try {
+      await image.metadata();
+    } catch (error) {
+      throw 'fileIsNotImage';
+    }
+
+    const dirname = uuid();
+    const rootPath = path.join(sails.config.custom.projectBackgroundImagesPath, dirname);
+
+    fs.mkdirSync(rootPath);
+
+    try {
+      await image.jpeg().toFile(path.join(rootPath, 'original.jpg'));
+
+      await image
+        .resize(336, 200)
+        .jpeg({
+          quality: 100,
+          chromaSubsampling: '4:4:4',
+        })
+        .toFile(path.join(rootPath, 'cover-336.jpg'));
+    } catch (error1) {
+      try {
+        rimraf.sync(rootPath);
+      } catch (error2) {
+        console.warn(error2.stack); // eslint-disable-line no-console
+      }
+
+      throw 'fileIsNotImage';
+    }
+
+    try {
+      rimraf.sync(inputs.file.fd);
+    } catch (error) {
+      console.warn(error.stack); // eslint-disable-line no-console
+    }
+
+    return {
+      dirname,
+    };
+  },
+};

server/api/helpers/users/process-uploaded-avatar-file.js

@@ -0,0 +1,68 @@
+const fs = require('fs');
+const path = require('path');
+const rimraf = require('rimraf');
+const { v4: uuid } = require('uuid');
+const sharp = require('sharp');
+
+module.exports = {
+  inputs: {
+    file: {
+      type: 'json',
+      required: true,
+    },
+  },
+
+  exits: {
+    fileIsNotImage: {},
+  },
+
+  async fn(inputs) {
+    const image = sharp(inputs.file.fd);
+
+    try {
+      await image.metadata();
+    } catch (error) {
+      throw 'fileIsNotImage';
+    }
+
+    const dirname = uuid();
+    const rootPath = path.join(sails.config.custom.userAvatarsPath, dirname);
+
+    fs.mkdirSync(rootPath);
+
+    try {
+      await image
+        .jpeg({
+          quality: 100,
+          chromaSubsampling: '4:4:4',
+        })
+        .toFile(path.join(rootPath, 'original.jpg'));
+
+      await image
+        .resize(100, 100)
+        .jpeg({
+          quality: 100,
+          chromaSubsampling: '4:4:4',
+        })
+        .toFile(path.join(rootPath, 'square-100.jpg'));
+    } catch (error1) {
+      try {
+        rimraf.sync(rootPath);
+      } catch (error2) {
+        console.warn(error2.stack); // eslint-disable-line no-console
+      }
+
+      throw 'fileIsNotImage';
+    }
+
+    try {
+      rimraf.sync(inputs.file.fd);
+    } catch (error) {
+      console.warn(error.stack); // eslint-disable-line no-console
+    }
+
+    return {
+      dirname,
+    };
+  },
+};

server/api/helpers/utils/create-attachment-receiver.js

@@ -1,102 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const util = require('util');
-const stream = require('stream');
-const streamToArray = require('stream-to-array');
-const filenamify = require('filenamify');
-const { v4: uuid } = require('uuid');
-const sharp = require('sharp');
-
-const writeFile = util.promisify(fs.writeFile);
-
-module.exports = {
-  sync: true,
-
-  fn() {
-    const receiver = stream.Writable({
-      objectMode: true,
-    });
-
-    let firstFileHandled = false;
-    // eslint-disable-next-line no-underscore-dangle
-    receiver._write = async (file, receiverEncoding, done) => {
-      if (firstFileHandled) {
-        file.pipe(new stream.Writable());
-
-        return done();
-      }
-      firstFileHandled = true;
-
-      const buffer = await streamToArray(file).then((parts) =>
-        Buffer.concat(parts.map((part) => (Buffer.isBuffer(part) ? part : Buffer.from(part)))),
-      );
-
-      try {
-        const dirname = uuid();
-
-        // FIXME: https://github.com/sindresorhus/filenamify/issues/13
-        const filename = filenamify(file.filename);
-
-        const rootPath = path.join(sails.config.custom.attachmentsPath, dirname);
-        fs.mkdirSync(rootPath);
-
-        await writeFile(path.join(rootPath, filename), buffer);
-
-        const image = sharp(buffer);
-        let metadata;
-
-        try {
-          metadata = await image.metadata();
-        } catch (error) {} // eslint-disable-line no-empty
-
-        const extra = {
-          dirname,
-          name: file.filename,
-        };
-
-        if (metadata && !['svg', 'pdf'].includes(metadata.format)) {
-          let cover256Buffer;
-          if (metadata.height > metadata.width) {
-            cover256Buffer = await image
-              .resize(256, 320)
-              .jpeg({
-                quality: 100,
-                chromaSubsampling: '4:4:4',
-              })
-              .toBuffer();
-          } else {
-            cover256Buffer = await image
-              .resize({
-                width: 256,
-              })
-              .jpeg({
-                quality: 100,
-                chromaSubsampling: '4:4:4',
-              })
-              .toBuffer();
-          }
-
-          const thumbnailsPath = path.join(rootPath, 'thumbnails');
-          fs.mkdirSync(thumbnailsPath);
-
-          await writeFile(path.join(thumbnailsPath, 'cover-256.jpg'), cover256Buffer);
-
-          extra.image = _.pick(metadata, ['width', 'height']);
-        } else {
-          extra.image = null;
-        }
-
-        Object.assign(file, {
-          filename,
-          extra,
-        });
-
-        return done();
-      } catch (error) {
-        return done(error);
-      }
-    };
-
-    return receiver;
-  },
-};

server/api/helpers/utils/create-project-background-image-receiver.js

@@ -1,65 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const util = require('util');
-const stream = require('stream');
-const streamToArray = require('stream-to-array');
-const { v4: uuid } = require('uuid');
-const sharp = require('sharp');
-
-const writeFile = util.promisify(fs.writeFile);
-
-module.exports = {
-  sync: true,
-
-  fn() {
-    const receiver = stream.Writable({
-      objectMode: true,
-    });
-
-    let firstFileHandled = false;
-    // eslint-disable-next-line no-underscore-dangle
-    receiver._write = async (file, receiverEncoding, done) => {
-      if (firstFileHandled) {
-        file.pipe(new stream.Writable());
-
-        return done();
-      }
-      firstFileHandled = true;
-
-      const buffer = await streamToArray(file).then((parts) =>
-        Buffer.concat(parts.map((part) => (Buffer.isBuffer(part) ? part : Buffer.from(part)))),
-      );
-
-      try {
-        const originalBuffer = await sharp(buffer).jpeg().toBuffer();
-
-        const cover336Buffer = await sharp(buffer)
-          .resize(336, 200)
-          .jpeg({
-            quality: 100,
-            chromaSubsampling: '4:4:4',
-          })
-          .toBuffer();
-
-        const dirname = uuid();
-
-        const rootPath = path.join(sails.config.custom.projectBackgroundImagesPath, dirname);
-        fs.mkdirSync(rootPath);
-
-        await writeFile(path.join(rootPath, 'original.jpg'), originalBuffer);
-        await writeFile(path.join(rootPath, 'cover-336.jpg'), cover336Buffer);
-
-        // eslint-disable-next-line no-param-reassign
-        file.extra = {
-          dirname,
-        };
-
-        return done();
-      } catch (error) {
-        return done(error);
-      }
-    };
-
-    return receiver;
-  },
-};

server/api/helpers/utils/create-token.js

@@ -1,3 +1,4 @@
+const { v4: uuid } = require('uuid');
 const jwt = require('jsonwebtoken');
 
 module.exports = {
@@ -24,6 +25,9 @@ module.exports = {
         exp: iat + sails.config.custom.tokenExpiresIn * 24 * 60 * 60,
       },
       sails.config.session.secret,
+      {
+        keyid: uuid(),
+      },
     );
   },
 };

server/api/helpers/utils/create-user-avatar-receiver.js

@@ -1,70 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const util = require('util');
-const stream = require('stream');
-const streamToArray = require('stream-to-array');
-const { v4: uuid } = require('uuid');
-const sharp = require('sharp');
-
-const writeFile = util.promisify(fs.writeFile);
-
-module.exports = {
-  sync: true,
-
-  fn() {
-    const receiver = stream.Writable({
-      objectMode: true,
-    });
-
-    let firstFileHandled = false;
-    // eslint-disable-next-line no-underscore-dangle
-    receiver._write = async (file, receiverEncoding, done) => {
-      if (firstFileHandled) {
-        file.pipe(new stream.Writable());
-
-        return done();
-      }
-      firstFileHandled = true;
-
-      const buffer = await streamToArray(file).then((parts) =>
-        Buffer.concat(parts.map((part) => (Buffer.isBuffer(part) ? part : Buffer.from(part)))),
-      );
-
-      try {
-        const originalBuffer = await sharp(buffer)
-          .jpeg({
-            quality: 100,
-            chromaSubsampling: '4:4:4',
-          })
-          .toBuffer();
-
-        const square100Buffer = await sharp(buffer)
-          .resize(100, 100)
-          .jpeg({
-            quality: 100,
-            chromaSubsampling: '4:4:4',
-          })
-          .toBuffer();
-
-        const dirname = uuid();
-
-        const rootPath = path.join(sails.config.custom.userAvatarsPath, dirname);
-        fs.mkdirSync(rootPath);
-
-        await writeFile(path.join(rootPath, 'original.jpg'), originalBuffer);
-        await writeFile(path.join(rootPath, 'square-100.jpg'), square100Buffer);
-
-        // eslint-disable-next-line no-param-reassign
-        file.extra = {
-          dirname,
-        };
-
-        return done();
-      } catch (error) {
-        return done(error);
-      }
-    };
-
-    return receiver;
-  },
-};

server/api/hooks/current-user/index.js

@@ -17,6 +17,15 @@ module.exports = function defineCurrentUserHook(sails) {
       return null;
     }
 
+    const session = await Session.findOne({
+      accessToken,
+      deletedAt: null,
+    });
+
+    if (!session) {
+      return null;
+    }
+
     const user = await sails.helpers.users.getOne(payload.subject);
 
     if (user && user.passwordChangedAt > payload.issuedAt) {
@@ -43,8 +52,14 @@ module.exports = function defineCurrentUserHook(sails) {
 
             if (authorizationHeader && TOKEN_PATTERN.test(authorizationHeader)) {
               const accessToken = authorizationHeader.replace(TOKEN_PATTERN, '');
+              const currentUser = await getUser(accessToken);
 
-              req.currentUser = await getUser(accessToken);
+              if (currentUser) {
+                Object.assign(req, {
+                  accessToken,
+                  currentUser,
+                });
+              }
             }
 
             return next();
@@ -52,8 +67,17 @@ module.exports = function defineCurrentUserHook(sails) {
         },
         '/attachments/*': {
           async fn(req, res, next) {
-            if (req.cookies.accessToken) {
+            const { accessToken } = req.cookies;
-              req.currentUser = await getUser(req.cookies.accessToken);
+
+            if (accessToken) {
+              const currentUser = await getUser(accessToken);
+
+              if (currentUser) {
+                Object.assign(req, {
+                  accessToken,
+                  currentUser,
+                });
+              }
             }
 
             return next();

server/api/models/Session.js

@@ -0,0 +1,49 @@
+/**
+ * Session.js
+ *
+ * @description :: A model definition represents a database table/collection.
+ * @docs        :: https://sailsjs.com/docs/concepts/models-and-orm/models
+ */
+
+module.exports = {
+  attributes: {
+    //  ╔═╗╦═╗╦╔╦╗╦╔╦╗╦╦  ╦╔═╗╔═╗
+    //  ╠═╝╠╦╝║║║║║ ║ ║╚╗╔╝║╣ ╚═╗
+    //  ╩  ╩╚═╩╩ ╩╩ ╩ ╩ ╚╝ ╚═╝╚═╝
+
+    accessToken: {
+      type: 'string',
+      required: true,
+      columnName: 'access_token',
+    },
+    remoteAddress: {
+      type: 'string',
+      required: true,
+      columnName: 'remote_address',
+    },
+    userAgent: {
+      type: 'string',
+      isNotEmptyString: true,
+      allowNull: true,
+      columnName: 'user_agent',
+    },
+    deletedAt: {
+      type: 'ref',
+      columnName: 'deleted_at',
+    },
+
+    //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗
+    //  ║╣ ║║║╠╩╗║╣  ║║╚═╗
+    //  ╚═╝╩ ╩╚═╝╚═╝═╩╝╚═╝
+
+    //  ╔═╗╔═╗╔═╗╔═╗╔═╗╦╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+    //  ╠═╣╚═╗╚═╗║ ║║  ║╠═╣ ║ ║║ ║║║║╚═╗
+    //  ╩ ╩╚═╝╚═╝╚═╝╚═╝╩╩ ╩ ╩ ╩╚═╝╝╚╝╚═╝
+
+    userId: {
+      model: 'User',
+      required: true,
+      columnName: 'user_id',
+    },
+  },
+};

server/config/env/production.js

@@ -290,7 +290,7 @@ module.exports = {
      *
      */
 
-    trustProxy: process.env.TRUST_PROXY,
+    trustProxy: !!process.env.TRUST_PROXY,
   },
 
   /**

server/config/routes.js

@@ -10,6 +10,7 @@
 
 module.exports.routes = {
   'POST /api/access-tokens': 'access-tokens/create',
+  'DELETE /api/access-tokens/me': 'access-tokens/delete',
 
   'GET /api/users': 'users/index',
   'POST /api/users': 'users/create',

server/config/views.js

@@ -24,7 +24,7 @@ module.exports.views = {
    *
    */
 
-  extension: 'html',
+  extension: 'ejs',
 
   /**
    *
@@ -36,4 +36,5 @@ module.exports.views = {
    */
 
   layout: false,
+  locals: { BASE_URL: process.env.BASE_URL },
 };

server/db/migrations/20220906094517_create_session_table.js

@@ -0,0 +1,24 @@
+module.exports.up = (knex) =>
+  knex.schema.createTable('session', (table) => {
+    /* Columns */
+
+    table.bigInteger('id').primary().defaultTo(knex.raw('next_id()'));
+
+    table.bigInteger('user_id').notNullable();
+
+    table.text('access_token').notNullable();
+    table.text('remote_address').notNullable();
+    table.text('user_agent');
+
+    table.timestamp('created_at', true);
+    table.timestamp('updated_at', true);
+    table.timestamp('deleted_at', true);
+
+    /* Indexes */
+
+    table.index('user_id');
+    table.unique('access_token');
+    table.index('remote_address');
+  });
+
+module.exports.down = (knex) => knex.schema.dropTable('session');

server/package-lock.json

@@ -14,6 +14,7 @@
         "knex": "^2.2.0",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
+        "move-file": "^2.1.0",
         "rimraf": "^3.0.2",
         "sails": "^1.5.2",
         "sails-hook-orm": "^4.0.1",
@@ -23,7 +24,8 @@
         "stream-to-array": "^2.3.0",
         "uuid": "^8.3.2",
         "validator": "^13.7.0",
-        "winston": "^3.8.1"
+        "winston": "^3.8.1",
+        "zxcvbn": "^4.4.2"
       },
       "devDependencies": {
         "chai": "^4.3.6",
@@ -4398,6 +4400,28 @@
         "node": "*"
       }
     },
+    "node_modules/move-file": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/move-file/-/move-file-2.1.0.tgz",
+      "integrity": "sha512-i9qLW6gqboJ5Ht8bauZi7KlTnQ3QFpBCvMvFfEcHADKgHGeJ9BZMO7SFCTwHPV9Qa0du9DYY1Yx3oqlGt30nXA==",
+      "dependencies": {
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/move-file/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7961,6 +7985,11 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   },
   "dependencies": {
@@ -11370,6 +11399,21 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
+    "move-file": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/move-file/-/move-file-2.1.0.tgz",
+      "integrity": "sha512-i9qLW6gqboJ5Ht8bauZi7KlTnQ3QFpBCvMvFfEcHADKgHGeJ9BZMO7SFCTwHPV9Qa0du9DYY1Yx3oqlGt30nXA==",
+      "requires": {
+        "path-exists": "^4.0.0"
+      },
+      "dependencies": {
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        }
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14206,6 +14250,11 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   }
 }

server/package.json

@@ -46,6 +46,7 @@
     "knex": "^2.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "move-file": "^2.1.0",
     "rimraf": "^3.0.2",
     "sails": "^1.5.2",
     "sails-hook-orm": "^4.0.1",
@@ -55,7 +56,8 @@
     "stream-to-array": "^2.3.0",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
-    "winston": "^3.8.1"
+    "winston": "^3.8.1",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "chai": "^4.3.6",