chore: Update version

Closes #294

.dockerignore

@@ -7,4 +7,5 @@
 
 server/public/*
 server/views/*
+server/logs
 client/build

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: meltyshev
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -44,6 +44,79 @@ docker-compose up -d
 
 Demo user: demo@demo.demo demo
 
+### Logging
+
+Planka currently allows you to expose the applciation's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
+
+To expose the logfile director to the host machine, add the item `./logs/:/app/logs/` under `services.planka.volumes`.
+
+Note that the directory to the left of the semicolon is regarding the host machine while the directory to the right of the semicolon is regarding the Docker container.
+
+For example, in the above step, `./logs/:/app/logs/` will create the folder `logs` in the same directory where the `docker-compose.yml` file lives.
+
+### Rotating Logs
+
+Logrotate is designed to ease administration of systems that generate large numbers of log files. It allows automatic rotation, compression, removal, and mailing of log files. Each log file may be handled daily, weekly, monthly, or when it grows too large.
+
+#### Setup logrotate for Planka logs
+
+Create a file in `/etc/logrotate.d` named `planka` with the following contents:
+
+```
+/path/to/planka/logs/planka.log {
+  daily
+  missingok
+  rotate 14
+  compress
+  delaycompress
+  notifempty
+  create 640 root adm
+  sharedscripts
+}
+```
+
+Ensure to replace logfile directory with your installation’s `/logs/planka.log` location.
+
+Restart the logrotate service.
+
+### Fail2ban
+
+Fail2ban is a service that uses iptables to automatically drop connections for a pre-defined amount of time from IPs that continuously failed to authenticate to the configured services.
+
+#### Setup a filter and a jail for Planka
+
+A filter defines regex rules to identify when users fail to authenticate on Planka's user interface.
+
+Create a file in `/etc/fail2ban/filter.d` named `planka.conf` with the following contents:
+
+```conf
+[Definition]
+failregex = ^(.*) Invalid (email or username:|password!) (\"(.*)\"!)? ?\(IP: <ADDR>\)$
+ignoreregex =
+```
+
+The jail file defines how to handle the failed authentication attempts found by the Planka filter.
+
+Create a file in `/etc/fail2ban/jail.d` named `planka.local` with the following contents:
+
+```conf
+[planka]
+enabled = true
+port = http,https
+filter = planka
+logpath = /path/to/planka/logs/planka.log
+maxretry = 5
+bantime = 900
+```
+
+Ensure to replace `logpath`'s value with your installation’s `/logs/planka.log` location. If you are using ports other than 80 and 443 for your Web server you should replace those too. The bantime and findtime are defined in seconds.
+
+Restart the fail2ban service. You can check the status of your Planka jail by running:
+
+```bash
+fail2ban-client status planka
+```
+
 ## Development
 
 Clone the repository and install dependencies:

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",
@@ -3029,6 +3031,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",
@@ -25310,6 +25317,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 +27339,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",
@@ -43805,6 +43822,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

@@ -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",

client/src/actions/board-memberships.js

@@ -69,6 +69,36 @@ handleBoardMembershipCreate.fetchProject = (id, currentUserId, currentBoardId) =
   },
 });
 
+const updateBoardMembership = (id, data) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateBoardMembership.success = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__SUCCESS,
+  payload: {
+    boardMembership,
+  },
+});
+
+updateBoardMembership.failure = (id, error) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleBoardMembershipUpdate = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE,
+  payload: {
+    boardMembership,
+  },
+});
+
 const deleteBoardMembership = (id) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_DELETE,
   payload: {
@@ -101,6 +131,8 @@ const handleBoardMembershipDelete = (boardMembership) => ({
 export default {
   createBoardMembership,
   handleBoardMembershipCreate,
+  updateBoardMembership,
+  handleBoardMembershipUpdate,
   deleteBoardMembership,
   handleBoardMembershipDelete,
 };

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/board-memberships.js

@@ -5,10 +5,14 @@ import socket from './socket';
 const createBoardMembership = (boardId, data, headers) =>
   socket.post(`/boards/${boardId}/memberships`, data, headers);
 
+const updateBoardMembership = (id, data, headers) =>
+  socket.patch(`/board-memberships/${id}`, data, headers);
+
 const deleteBoardMembership = (id, headers) =>
   socket.delete(`/board-memberships/${id}`, undefined, headers);
 
 export default {
   createBoardMembership,
+  updateBoardMembership,
   deleteBoardMembership,
 };

client/src/components/BoardActions/BoardActions.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Filters from './Filters';
 import Memberships from '../Memberships';
+import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';
 
 import styles from './BoardActions.module.scss';
 
@@ -15,6 +16,7 @@ const BoardActions = React.memo(
     allUsers,
     canEditMemberships,
     onMembershipCreate,
+    onMembershipUpdate,
     onMembershipDelete,
     onUserToFilterAdd,
     onUserFromFilterRemove,
@@ -30,8 +32,10 @@ const BoardActions = React.memo(
           <Memberships
             items={memberships}
             allUsers={allUsers}
+            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
             canEdit={canEditMemberships}
             onCreate={onMembershipCreate}
+            onUpdate={onMembershipUpdate}
             onDelete={onMembershipDelete}
           />
         </div>
@@ -65,6 +69,7 @@ BoardActions.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
+  onMembershipUpdate: PropTypes.func.isRequired,
   onMembershipDelete: PropTypes.func.isRequired,
   onUserToFilterAdd: PropTypes.func.isRequired,
   onUserFromFilterRemove: PropTypes.func.isRequired,

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -0,0 +1,101 @@
+import omit from 'lodash/omit';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Menu, Radio, Segment } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import { BoardMembershipRoles } from '../../constants/Enums';
+
+import styles from './BoardMembershipPermissionsSelectStep.module.scss';
+
+const BoardMembershipPermissionsSelectStep = React.memo(
+  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+    const [t] = useTranslation();
+
+    const [data, setData] = useState(() => ({
+      role: BoardMembershipRoles.EDITOR,
+      canComment: null,
+      ...defaultData,
+    }));
+
+    const handleSelectRoleClick = useCallback((role) => {
+      setData((prevData) => ({
+        ...prevData,
+        role,
+        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+      }));
+    }, []);
+
+    const handleSettingChange = useCallback((_, { name: fieldName, checked: value }) => {
+      setData((prevData) => ({
+        ...prevData,
+        [fieldName]: value,
+      }));
+    }, []);
+
+    const handleSubmit = useCallback(() => {
+      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
+    }, [onSelect, data]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Form onSubmit={handleSubmit}>
+            <Menu secondary vertical className={styles.menu}>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.EDITOR}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.EDITOR)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.editor')}</div>
+                <div className={styles.menuItemDescription}>
+                  {t('common.canEditContentOfBoard')}
+                </div>
+              </Menu.Item>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.VIEWER}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.VIEWER)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.viewer')}</div>
+                <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>
+              </Menu.Item>
+            </Menu>
+            {data.role !== BoardMembershipRoles.EDITOR && (
+              <Segment basic className={styles.settings}>
+                <Radio
+                  toggle
+                  name="canComment"
+                  checked={data.canComment}
+                  label={t('common.canComment')}
+                  onChange={handleSettingChange}
+                />
+              </Segment>
+            )}
+            <Button positive content={t(buttonContent)} />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+BoardMembershipPermissionsSelectStep.propTypes = {
+  defaultData: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  title: PropTypes.string,
+  buttonContent: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+BoardMembershipPermissionsSelectStep.defaultProps = {
+  defaultData: undefined,
+  title: 'common.selectPermissions',
+  buttonContent: 'action.selectPermissions',
+};
+
+export default BoardMembershipPermissionsSelectStep;

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.module.scss

@@ -0,0 +1,18 @@
+:global(#app) {
+  .menu {
+    margin: 0 auto 8px;
+    width: 100%;
+  }
+
+  .menuItemDescription {
+    opacity: 0.5;
+  }
+
+  .menuItemTitle {
+    margin-bottom: 8px;
+  }
+
+  .settings {
+    margin: 0 0 8px;
+  }
+}

client/src/components/BoardMembershipPermissionsSelectStep/index.js

@@ -0,0 +1,3 @@
+import BoardMembershipPermissionsSelectStep from './BoardMembershipPermissionsSelectStep';
+
+export default BoardMembershipPermissionsSelectStep;

client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
+import { useField } from '../../hooks';
 import Item from './Item';
 
 import styles from './BoardMembershipsStep.module.scss';
@@ -11,6 +12,21 @@ import styles from './BoardMembershipsStep.module.scss';
 const BoardMembershipsStep = React.memo(
   ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
     const [t] = useTranslation();
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          ({ user }) =>
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
+        ),
+      [items, cleanSearch],
+    );
+
+    const searchField = useRef(null);
 
     const handleUserSelect = useCallback(
       (id) => {
@@ -26,22 +42,40 @@ const BoardMembershipsStep = React.memo(
       [onUserDeselect],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     return (
       <>
-        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
         <Popup.Content>
-          <Menu secondary vertical className={styles.menu}>
+          <Input
-            {items.map((item) => (
+            fluid
-              <Item
+            ref={searchField}
-                key={item.id}
+            value={search}
-                isPersisted={item.isPersisted}
+            placeholder={t('common.searchMembers')}
-                isActive={currentUserIds.includes(item.user.id)}
+            icon="search"
-                user={item.user}
+            onChange={handleSearchChange}
-                onUserSelect={() => handleUserSelect(item.user.id)}
+          />
-                onUserDeselect={() => handleUserDeselect(item.user.id)}
+          {filteredItems.length > 0 && (
-              />
+            <Menu secondary vertical className={styles.menu}>
-            ))}
+              {filteredItems.map((item) => (
-          </Menu>
+                <Item
+                  key={item.id}
+                  isPersisted={item.isPersisted}
+                  isActive={currentUserIds.includes(item.user.id)}
+                  user={item.user}
+                  onUserSelect={() => handleUserSelect(item.user.id)}
+                  onUserDeselect={() => handleUserDeselect(item.user.id)}
+                />
+              ))}
+            </Menu>
+          )}
         </Popup.Content>
       </>
     );

client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss

@@ -1,6 +1,22 @@
 :global(#app) {
   .menu {
-    margin: -7px auto -5px;
+    margin: 8px auto 0;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
     width: 100%;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

client/src/components/BoardMembershipsStep/Item.module.scss

@@ -2,6 +2,7 @@
   .menuItem {
     display: block;
     margin: 0;
+    overflow: hidden;
     padding: 4px;
   }
 

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/Attachments/Attachments.jsx

@@ -13,7 +13,7 @@ import styles from './Attachments.module.scss';
 const INITIALLY_VISIBLE = 4;
 
 const Attachments = React.memo(
-  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+  ({ items, canEdit, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
     const [t] = useTranslation();
     const [isAllVisible, toggleAllVisible] = useToggle();
 
@@ -99,6 +99,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
+                canEdit={canEdit}
                 onClick={item.image || isPdf ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
@@ -151,6 +152,7 @@ const Attachments = React.memo(
 
 Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,

client/src/components/CardModal/Attachments/Item.jsx

@@ -17,6 +17,7 @@ const Item = React.forwardRef(
       createdAt,
       isCover,
       isPersisted,
+      canEdit,
       onCoverSelect,
       onCoverDeselect,
       onClick,
@@ -96,7 +97,7 @@ const Item = React.forwardRef(
               value: createdAt,
             })}
           </span>
-          {coverUrl && (
+          {coverUrl && canEdit && (
             <span className={styles.options}>
               <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
                 <Icon
@@ -118,17 +119,19 @@ const Item = React.forwardRef(
             </span>
           )}
         </div>
-        <EditPopup
+        {canEdit && (
-          defaultData={{
+          <EditPopup
-            name,
+            defaultData={{
-          }}
+              name,
-          onUpdate={onUpdate}
+            }}
-          onDelete={onDelete}
+            onUpdate={onUpdate}
-        >
+            onDelete={onDelete}
-          <Button className={classNames(styles.button, styles.target)}>
+          >
-            <Icon fitted name="pencil" size="small" />
+            <Button className={classNames(styles.button, styles.target)}>
-          </Button>
+              <Icon fitted name="pencil" size="small" />
-        </EditPopup>
+            </Button>
+          </EditPopup>
+        )}
       </div>
     );
   },
@@ -141,6 +144,7 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,

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';
@@ -48,6 +49,7 @@ const CardModal = React.memo(
     allBoardMemberships,
     allLabels,
     canEdit,
+    canEditCommentActivities,
     canEditAllCommentActivities,
     onUpdate,
     onMove,
@@ -79,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({
@@ -290,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>
@@ -302,7 +323,10 @@ const CardModal = React.memo(
                   {canEdit ? (
                     <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
-                        <button type="button" className={styles.descriptionText}>
+                        <button
+                          type="button"
+                          className={classNames(styles.descriptionText, styles.cursorPointer)}
+                        >
                           <Markdown linkStopPropagation linkTarget="_blank">
                             {description}
                           </Markdown>
@@ -348,6 +372,7 @@ const CardModal = React.memo(
                   <div className={styles.moduleHeader}>{t('common.attachments')}</div>
                   <Attachments
                     items={attachments}
+                    canEdit={canEdit}
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
@@ -363,7 +388,7 @@ const CardModal = React.memo(
               isAllFetched={isAllActivitiesFetched}
               isDetailsVisible={isActivitiesDetailsVisible}
               isDetailsFetching={isActivitiesDetailsFetching}
-              canEdit={canEdit}
+              canEdit={canEditCommentActivities}
               canEditAllComments={canEditAllCommentActivities}
               onFetch={onActivitiesFetch}
               onDetailsToggle={onActivitiesDetailsToggle}
@@ -508,6 +533,7 @@ CardModal.propTypes = {
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
+  canEditCommentActivities: PropTypes.bool.isRequired,
   canEditAllCommentActivities: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.module.scss

@@ -64,6 +64,10 @@
     padding: 8px 8px 0 16px;
   }
 
+  .cursorPointer {
+    cursor: pointer;
+  }
+
   .dueDate {
     background: rgba(9, 30, 66, 0.04);
     border: none;
@@ -114,7 +118,6 @@
     background: transparent;
     border: none;
     color: #17394d;
-    cursor: pointer;
     font-size: 15px;
     margin-bottom: 8px;
     outline: none;

client/src/components/CardMoveStep/CardMoveStep.jsx

@@ -36,7 +36,7 @@ const CardMoveStep = React.memo(
       [selectedBoard, path.listId],
     );
 
-    const handleBoardIdFieldChange = useCallback(
+    const handleBoardIdChange = useCallback(
       (event, data) => {
         if (selectedProject.boards.find((board) => board.id === data.value).isFetching === null) {
           onBoardFetch(data.value);
@@ -102,7 +102,7 @@ const CardMoveStep = React.memo(
                   }
                   disabled={selectedProject.boards.length === 0}
                   className={styles.field}
-                  onChange={handleBoardIdFieldChange}
+                  onChange={handleBoardIdChange}
                 />
               </>
             )}

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/Header/NotificationsPopup.jsx

@@ -74,7 +74,11 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
 
   return (
     <>
-      <Popup.Header>{t('common.notifications')}</Popup.Header>
+      <Popup.Header>
+        {t('common.notifications', {
+          context: 'title',
+        })}
+      </Popup.Header>
       <Popup.Content>
         {items.length > 0
           ? items.map((item) => (

client/src/components/LabelsStep/LabelsStep.jsx

@@ -1,11 +1,11 @@
 import pick from 'lodash/pick';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
-import { useSteps } from '../../hooks';
+import { useField, useSteps } from '../../hooks';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -21,6 +21,20 @@ const LabelsStep = React.memo(
   ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          (label) =>
+            (label.name && label.name.toLowerCase().includes(cleanSearch)) ||
+            label.color.includes(cleanSearch),
+        ),
+      [items, cleanSearch],
+    );
+
+    const searchField = useRef(null);
 
     const handleAddClick = useCallback(() => {
       openStep(StepTypes.ADD);
@@ -63,6 +77,10 @@ const LabelsStep = React.memo(
       [onDelete],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     if (step) {
       switch (step.type) {
         case StepTypes.ADD:
@@ -91,20 +109,36 @@ const LabelsStep = React.memo(
 
     return (
       <>
-        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
         <Popup.Content>
-          {items.map((item) => (
+          <Input
-            <Item
+            fluid
-              key={item.id}
+            ref={searchField}
-              name={item.name}
+            value={search}
-              color={item.color}
+            placeholder={t('common.searchLabels')}
-              isPersisted={item.isPersisted}
+            icon="search"
-              isActive={currentIds.includes(item.id)}
+            onChange={handleSearchChange}
-              onSelect={() => handleSelect(item.id)}
+          />
-              onDeselect={() => handleDeselect(item.id)}
+          {filteredItems.length > 0 && (
-              onEdit={() => handleEdit(item.id)}
+            <div className={styles.items}>
-            />
+              {filteredItems.map((item) => (
-          ))}
+                <Item
+                  key={item.id}
+                  name={item.name}
+                  color={item.color}
+                  isPersisted={item.isPersisted}
+                  isActive={currentIds.includes(item.id)}
+                  onSelect={() => handleSelect(item.id)}
+                  onDeselect={() => handleDeselect(item.id)}
+                  onEdit={() => handleEdit(item.id)}
+                />
+              ))}
+            </div>
+          )}
           <Button
             fluid
             content={t('action.createNewLabel')}

client/src/components/LabelsStep/LabelsStep.module.scss

@@ -14,4 +14,24 @@
       background: #e9e9e9;
     }
   }
+
+  .items {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
 }

client/src/components/Memberships/ActionsPopup.jsx

@@ -1,3 +1,4 @@
+import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -11,12 +12,14 @@ import DeleteStep from '../DeleteStep';
 import styles from './ActionsPopup.module.scss';
 
 const StepTypes = {
+  EDIT_PERMISSIONS: 'EDIT_PERMISSIONS',
   DELETE: 'DELETE',
 };
 
 const ActionsStep = React.memo(
   ({
-    user,
+    membership,
+    permissionsSelectStep,
     leaveButtonContent,
     leaveConfirmationTitle,
     leaveConfirmationContent,
@@ -26,63 +29,115 @@ const ActionsStep = React.memo(
     deleteConfirmationContent,
     deleteConfirmationButtonContent,
     canLeave,
-    canDelete,
+    canEdit,
+    onUpdate,
     onDelete,
+    onClose,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
 
+    const handleEditPermissionsClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PERMISSIONS);
+    }, [openStep]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
 
-    if (step && step.type === StepTypes.DELETE) {
+    const handleRoleSelect = useCallback(
-      return (
+      (data) => {
-        <DeleteStep
+        if (onUpdate) {
-          title={t(user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle, {
+          onUpdate(data);
-            context: 'title',
+        }
-          })}
+
-          content={t(user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent)}
+        onClose();
-          buttonContent={t(
+      },
-            user.isCurrent ? leaveConfirmationButtonContent : deleteConfirmationButtonContent,
+      [onUpdate, onClose],
-          )}
+    );
-          onConfirm={onDelete}
+
-          onBack={handleBack}
+    if (step) {
-        />
+      switch (step.type) {
-      );
+        case StepTypes.EDIT_PERMISSIONS: {
+          const PermissionsSelectStep = permissionsSelectStep;
+
+          return (
+            <PermissionsSelectStep
+              defaultData={pick(membership, ['role', 'canComment'])}
+              title="common.editPermissions"
+              buttonContent="action.save"
+              onSelect={handleRoleSelect}
+              onBack={handleBack}
+            />
+          );
+        }
+        case StepTypes.DELETE:
+          return (
+            <DeleteStep
+              title={t(
+                membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle,
+                {
+                  context: 'title',
+                },
+              )}
+              content={t(
+                membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent,
+              )}
+              buttonContent={t(
+                membership.user.isCurrent
+                  ? leaveConfirmationButtonContent
+                  : deleteConfirmationButtonContent,
+              )}
+              onConfirm={onDelete}
+              onBack={handleBack}
+            />
+          );
+        default:
+      }
     }
 
     return (
       <>
         <span className={styles.user}>
-          <User name={user.name} avatarUrl={user.avatarUrl} size="large" />
+          <User name={membership.user.name} avatarUrl={membership.user.avatarUrl} size="large" />
         </span>
         <span className={styles.content}>
-          <div className={styles.name}>{user.name}</div>
+          <div className={styles.name}>{membership.user.name}</div>
-          <div className={styles.email}>{user.email}</div>
+          <div className={styles.email}>{membership.user.email}</div>
-          {user.isCurrent
-            ? canLeave && (
-                <Button
-                  content={t(leaveButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )
-            : canDelete && (
-                <Button
-                  content={t(deleteButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )}
         </span>
+        {permissionsSelectStep && canEdit && (
+          <Button
+            fluid
+            content={t('action.editPermissions')}
+            className={styles.button}
+            onClick={handleEditPermissionsClick}
+          />
+        )}
+        {membership.user.isCurrent
+          ? canLeave && (
+              <Button
+                fluid
+                content={t(leaveButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )
+          : canEdit && (
+              <Button
+                fluid
+                content={t(deleteButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )}
       </>
     );
   },
 );
 
 ActionsStep.propTypes = {
-  user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  membership: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  permissionsSelectStep: PropTypes.elementType,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
   leaveConfirmationContent: PropTypes.string,
@@ -92,11 +147,14 @@ ActionsStep.propTypes = {
   deleteConfirmationContent: PropTypes.string,
   deleteConfirmationButtonContent: PropTypes.string,
   canLeave: PropTypes.bool.isRequired,
-  canDelete: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 ActionsStep.defaultProps = {
+  permissionsSelectStep: undefined,
   leaveButtonContent: 'action.leaveBoard',
   leaveConfirmationTitle: 'common.leaveBoard',
   leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
@@ -105,6 +163,7 @@ ActionsStep.defaultProps = {
   deleteConfirmationTitle: 'common.removeMember',
   deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
   deleteConfirmationButtonContent: 'action.removeMember',
+  onUpdate: undefined,
 };
 
 export default withPopup(ActionsStep);

client/src/components/Memberships/ActionsPopup.module.scss

@@ -1,28 +1,31 @@
 :global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
   .content {
     display: inline-block;
     width: calc(100% - 44px);
   }
 
-  .deleteButton {
-    background: transparent;
-    box-shadow: none;
-    flex: 0 0 auto;
-    font-weight: normal;
-    margin: 0 0 0 -10px;
-    padding: 11px 10px;
-    text-decoration: underline;
-
-    &:hover {
-      background: #e9e9e9;
-    }
-  }
-
   .email {
     color: #888888;
     font-size: 14px;
     line-height: 1.2;
-    padding: 4px 0 4px 2px;
+    padding: 2px 0 2px 2px;
   }
 
   .name {
@@ -36,7 +39,7 @@
   .user {
     display: inline-block;
     padding-right: 8px;
-    padding-top: 8px;
+    padding-top: 10px;
     vertical-align: top;
   }
 }

client/src/components/Memberships/AddPopup/AddPopup.jsx

@@ -1,62 +1,144 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
-import { Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
+import { useField, useSteps } from '../../../hooks';
 import UserItem from './UserItem';
 
 import styles from './AddPopup.module.scss';
 
-const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose }) => {
+const StepTypes = {
-  const [t] = useTranslation();
+  SELECT_PERMISSIONS: 'SELECT_PERMISSIONS',
+};
 
-  const handleUserSelect = useCallback(
+const AddStep = React.memo(
-    (id) => {
+  ({ users, currentUserIds, permissionsSelectStep, title, onCreate, onClose }) => {
-      onCreate({
+    const [t] = useTranslation();
-        userId: id,
+    const [step, openStep, handleBack] = useSteps();
-      });
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
 
-      onClose();
+    const filteredUsers = useMemo(
-    },
+      () =>
-    [onCreate, onClose],
+        users.filter(
-  );
+          (user) =>
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
+        ),
+      [users, cleanSearch],
+    );
 
-  return (
+    const searchField = useRef(null);
-    <>
+
-      <Popup.Header>
+    const handleUserSelect = useCallback(
-        {t(title, {
+      (id) => {
-          context: 'title',
+        if (permissionsSelectStep) {
-        })}
+          openStep(StepTypes.SELECT_PERMISSIONS, {
-      </Popup.Header>
+            userId: id,
-      <Popup.Content>
+          });
-        <div className={styles.menu}>
+        } else {
-          {users.map((user) => (
+          onCreate({
-            <UserItem
+            userId: id,
-              key={user.id}
+          });
-              name={user.name}
+
-              avatarUrl={user.avatarUrl}
+          onClose();
-              isActive={currentUserIds.includes(user.id)}
+        }
-              onSelect={() => handleUserSelect(user.id)}
+      },
-            />
+      [permissionsSelectStep, onCreate, onClose, openStep],
-          ))}
+    );
-        </div>
+
-      </Popup.Content>
+    const handleRoleSelect = useCallback(
-    </>
+      (data) => {
-  );
+        onCreate({
-});
+          userId: step.params.userId,
+          ...data,
+        });
+
+        onClose();
+      },
+      [onCreate, onClose, step],
+    );
+
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.SELECT_PERMISSIONS: {
+          const currentUser = users.find((user) => user.id === step.params.userId);
+
+          if (currentUser) {
+            const PermissionsSelectStep = permissionsSelectStep;
+
+            return (
+              <PermissionsSelectStep
+                buttonContent="action.addMember"
+                onSelect={handleRoleSelect}
+                onBack={handleBack}
+              />
+            );
+          }
+
+          openStep(null);
+
+          break;
+        }
+        default:
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Input
+            fluid
+            ref={searchField}
+            value={search}
+            placeholder={t('common.searchUsers')}
+            icon="search"
+            onChange={handleSearchChange}
+          />
+          {filteredUsers.length > 0 && (
+            <div className={styles.users}>
+              {filteredUsers.map((user) => (
+                <UserItem
+                  key={user.id}
+                  name={user.name}
+                  avatarUrl={user.avatarUrl}
+                  isActive={currentUserIds.includes(user.id)}
+                  onSelect={() => handleUserSelect(user.id)}
+                />
+              ))}
+            </div>
+          )}
+        </Popup.Content>
+      </>
+    );
+  },
+);
 
 AddStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
   /* eslint-disable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
   title: PropTypes.string,
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
 AddStep.defaultProps = {
+  permissionsSelectStep: undefined,
   title: 'common.addMember',
 };
 

client/src/components/Memberships/AddPopup/AddPopup.module.scss

@@ -1,7 +1,21 @@
 :global(#app) {
-  .menu {
+  .users {
-    border: none;
+    margin-top: 8px;
-    margin: -7px auto -5px;
+    max-height: 320px;
-    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

client/src/components/Memberships/AddPopup/UserItem.module.scss

@@ -2,10 +2,12 @@
   .menuItem {
     background: transparent;
     border: none;
+    border-radius: 0.28571429rem;
     cursor: pointer;
     display: block;
     margin: 0;
     outline: 0;
+    overflow: hidden;
     padding: 4px;
     text-align: left;
     width: 100%;

client/src/components/Memberships/Memberships.jsx

@@ -12,6 +12,7 @@ const Memberships = React.memo(
   ({
     items,
     allUsers,
+    permissionsSelectStep,
     addTitle,
     leaveButtonContent,
     leaveConfirmationTitle,
@@ -24,6 +25,7 @@ const Memberships = React.memo(
     canEdit,
     canLeaveIfLast,
     onCreate,
+    onUpdate,
     onDelete,
   }) => {
     return (
@@ -32,7 +34,8 @@ const Memberships = React.memo(
           {items.map((item) => (
             <span key={item.id} className={styles.user}>
               <ActionsPopup
-                user={item.user}
+                membership={item}
+                permissionsSelectStep={permissionsSelectStep}
                 leaveButtonContent={leaveButtonContent}
                 leaveConfirmationTitle={leaveConfirmationTitle}
                 leaveConfirmationContent={leaveConfirmationContent}
@@ -42,7 +45,8 @@ const Memberships = React.memo(
                 deleteConfirmationContent={deleteConfirmationContent}
                 deleteConfirmationButtonContent={deleteConfirmationButtonContent}
                 canLeave={items.length > 1 || canLeaveIfLast}
-                canDelete={canEdit}
+                canEdit={canEdit}
+                onUpdate={(data) => onUpdate(item.id, data)}
                 onDelete={() => onDelete(item.id)}
               >
                 <User
@@ -59,6 +63,7 @@ const Memberships = React.memo(
           <AddPopup
             users={allUsers}
             currentUserIds={items.map((item) => item.user.id)}
+            permissionsSelectStep={permissionsSelectStep}
             title={addTitle}
             onCreate={onCreate}
           >
@@ -75,6 +80,7 @@ Memberships.propTypes = {
   items: PropTypes.array.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
   addTitle: PropTypes.string,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
@@ -87,10 +93,12 @@ Memberships.propTypes = {
   canEdit: PropTypes.bool,
   canLeaveIfLast: PropTypes.bool,
   onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
 };
 
 Memberships.defaultProps = {
+  permissionsSelectStep: undefined,
   addTitle: undefined,
   leaveButtonContent: undefined,
   leaveConfirmationTitle: undefined,
@@ -102,6 +110,7 @@ Memberships.defaultProps = {
   deleteConfirmationButtonContent: undefined,
   canEdit: true,
   canLeaveIfLast: true,
+  onUpdate: undefined,
 };
 
 export default Memberships;

client/src/components/ProjectSettingsModal/BackgroundPane.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/ProjectSettingsModal/GeneralPane/GeneralPane.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/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/AccountPane.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/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/components/UsersModal/Item/Item.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Icon, Radio, Table } from 'semantic-ui-react';
 
 import ActionsPopup from './ActionsPopup';
+import User from '../../User';
 
 import styles from './Item.module.scss';
 
@@ -11,6 +12,7 @@ const Item = React.memo(
     email,
     username,
     name,
+    avatarUrl,
     organization,
     phone,
     isAdmin,
@@ -34,13 +36,16 @@ const Item = React.memo(
 
     return (
       <Table.Row>
+        <Table.Cell>
+          <User name={name} avatarUrl={avatarUrl} />
+        </Table.Cell>
         <Table.Cell>{name}</Table.Cell>
         <Table.Cell>{username || '-'}</Table.Cell>
         <Table.Cell>{email}</Table.Cell>
-        <Table.Cell collapsing>
+        <Table.Cell>
           <Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
         </Table.Cell>
-        <Table.Cell collapsing>
+        <Table.Cell textAlign="right">
           <ActionsPopup
             user={{
               email,
@@ -76,6 +81,7 @@ Item.propTypes = {
   email: PropTypes.string.isRequired,
   username: PropTypes.string,
   name: PropTypes.string.isRequired,
+  avatarUrl: PropTypes.string,
   organization: PropTypes.string,
   phone: PropTypes.string,
   isAdmin: PropTypes.bool.isRequired,
@@ -96,6 +102,7 @@ Item.propTypes = {
 
 Item.defaultProps = {
   username: undefined,
+  avatarUrl: undefined,
   organization: undefined,
   phone: undefined,
 };

client/src/components/UsersModal/UsersModal.jsx

@@ -84,10 +84,11 @@ const UsersModal = React.memo(
             context: 'title',
           })}
         </Modal.Header>
-        <Modal.Content>
+        <Modal.Content scrolling>
-          <Table basic="very">
+          <Table unstackable basic="very">
             <Table.Header>
               <Table.Row>
+                <Table.HeaderCell />
                 <Table.HeaderCell width={4}>{t('common.name')}</Table.HeaderCell>
                 <Table.HeaderCell width={4}>{t('common.username')}</Table.HeaderCell>
                 <Table.HeaderCell width={4}>{t('common.email')}</Table.HeaderCell>
@@ -102,6 +103,7 @@ const UsersModal = React.memo(
                   email={item.email}
                   username={item.username}
                   name={item.name}
+                  avatarUrl={item.avatarUrl}
                   organization={item.organization}
                   phone={item.phone}
                   isAdmin={item.isAdmin}

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 */
 
@@ -123,6 +124,10 @@ export default {
   BOARD_MEMBERSHIP_CREATE__FAILURE: 'BOARD_MEMBERSHIP_CREATE__FAILURE',
   BOARD_MEMBERSHIP_CREATE_HANDLE: 'BOARD_MEMBERSHIP_CREATE_HANDLE',
   BOARD_MEMBERSHIP_CREATE_HANDLE__PROJECT_FETCH: 'BOARD_MEMBERSHIP_CREATE_HANDLE__PROJECT_FETCH',
+  BOARD_MEMBERSHIP_UPDATE: 'BOARD_MEMBERSHIP_UPDATE',
+  BOARD_MEMBERSHIP_UPDATE__SUCCESS: 'BOARD_MEMBERSHIP_UPDATE__SUCCESS',
+  BOARD_MEMBERSHIP_UPDATE__FAILURE: 'BOARD_MEMBERSHIP_UPDATE__FAILURE',
+  BOARD_MEMBERSHIP_UPDATE_HANDLE: 'BOARD_MEMBERSHIP_UPDATE_HANDLE',
   BOARD_MEMBERSHIP_DELETE: 'BOARD_MEMBERSHIP_DELETE',
   BOARD_MEMBERSHIP_DELETE__SUCCESS: 'BOARD_MEMBERSHIP_DELETE__SUCCESS',
   BOARD_MEMBERSHIP_DELETE__FAILURE: 'BOARD_MEMBERSHIP_DELETE__FAILURE',

client/src/constants/EntryActionTypes.js

@@ -88,6 +88,8 @@ export default {
 
   MEMBERSHIP_IN_CURRENT_BOARD_CREATE: `${PREFIX}/MEMBERSHIP_IN_CURRENT_BOARD_CREATE`,
   BOARD_MEMBERSHIP_CREATE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_CREATE_HANDLE`,
+  BOARD_MEMBERSHIP_UPDATE: `${PREFIX}/BOARD_MEMBERSHIP_UPDATE`,
+  BOARD_MEMBERSHIP_UPDATE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_UPDATE_HANDLE`,
   BOARD_MEMBERSHIP_DELETE: `${PREFIX}/BOARD_MEMBERSHIP_DELETE`,
   BOARD_MEMBERSHIP_DELETE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_DELETE_HANDLE`,
 

client/src/constants/Enums.js

@@ -7,6 +7,11 @@ export const BoardTypes = {
   KANBAN: 'kanban',
 };
 
+export const BoardMembershipRoles = {
+  EDITOR: 'editor',
+  VIEWER: 'viewer',
+};
+
 export const ActivityTypes = {
   CREATE_CARD: 'createCard',
   MOVE_CARD: 'moveCard',

client/src/containers/BoardActionsContainer.js

@@ -27,6 +27,7 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       onMembershipCreate: entryActions.createMembershipInCurrentBoard,
+      onMembershipUpdate: entryActions.updateBoardMembership,
       onMembershipDelete: entryActions.deleteBoardMembership,
       onUserToFilterAdd: entryActions.addUserToFilterInCurrentBoard,
       onUserFromFilterRemove: entryActions.removeUserFromFilterInCurrentBoard,

client/src/containers/BoardKanbanContainer.js

@@ -3,17 +3,18 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import BoardKanban from '../components/BoardKanban';
 
 const mapStateToProps = (state) => {
   const { cardId } = selectors.selectPath(state);
-  const isCurrentUserMember = selectors.selectIsCurrentUserMemberForCurrentBoard(state);
+  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
   const listIds = selectors.selectListIdsForCurrentBoard(state);
 
   return {
     listIds,
     isCardModalOpened: !!cardId,
-    canEdit: isCurrentUserMember,
+    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
   };
 };
 

client/src/containers/CardContainer.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import Card from '../components/Card';
 
 const makeMapStateToProps = () => {
@@ -17,7 +18,7 @@ const makeMapStateToProps = () => {
     const allProjectsToLists = selectors.selectProjectsToListsForCurrentUser(state);
     const allBoardMemberships = selectors.selectMembershipsForCurrentBoard(state);
     const allLabels = selectors.selectLabelsForCurrentBoard(state);
-    const isCurrentUserMember = selectors.selectIsCurrentUserMemberForCurrentBoard(state);
+    const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
     const { name, dueDate, timer, coverUrl, boardId, listId, isPersisted } = selectCardById(
       state,
@@ -47,7 +48,8 @@ const makeMapStateToProps = () => {
       allProjectsToLists,
       allBoardMemberships,
       allLabels,
-      canEdit: isCurrentUserMember,
+      canEdit:
+        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
     };
   };
 };

client/src/containers/CardModalContainer.js

@@ -6,6 +6,7 @@ import omit from 'lodash/omit';
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
 import Paths from '../constants/Paths';
+import { BoardMembershipRoles } from '../constants/Enums';
 import CardModal from '../components/CardModal';
 
 const mapStateToProps = (state) => {
@@ -14,7 +15,7 @@ const mapStateToProps = (state) => {
   const isCurrentUserManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
   const allBoardMemberships = selectors.selectMembershipsForCurrentBoard(state);
   const allLabels = selectors.selectLabelsForCurrentBoard(state);
-  const isCurrentUserMember = selectors.selectIsCurrentUserMemberForCurrentBoard(state);
+  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
   const {
     name,
@@ -57,7 +58,11 @@ const mapStateToProps = (state) => {
     allProjectsToLists,
     allBoardMemberships,
     allLabels,
-    canEdit: isCurrentUserMember,
+    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEditCommentActivities:
+      !!currentUserMembership &&
+      (currentUserMembership.role === BoardMembershipRoles.EDITOR ||
+        currentUserMembership.canComment),
     canEditAllCommentActivities: isCurrentUserManager,
   };
 };

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/containers/ListContainer.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import List from '../components/List';
 
 const makeMapStateToProps = () => {
@@ -12,7 +13,7 @@ const makeMapStateToProps = () => {
   return (state, { id, index }) => {
     const { name, isPersisted } = selectListById(state, id);
     const cardIds = selectCardIdsByListId(state, id);
-    const isCurrentUserMember = selectors.selectIsCurrentUserMemberForCurrentBoard(state);
+    const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
     return {
       id,
@@ -20,7 +21,8 @@ const makeMapStateToProps = () => {
       name,
       isPersisted,
       cardIds,
-      canEdit: isCurrentUserMember,
+      canEdit:
+        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
     };
   };
 };

client/src/entry-actions/board-memberships.js

@@ -14,6 +14,21 @@ const handleBoardMembershipCreate = (boardMembership) => ({
   },
 });
 
+const updateBoardMembership = (id, data) => ({
+  type: EntryActionTypes.BOARD_MEMBERSHIP_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+const handleBoardMembershipUpdate = (boardMembership) => ({
+  type: EntryActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE,
+  payload: {
+    boardMembership,
+  },
+});
+
 const deleteBoardMembership = (id) => ({
   type: EntryActionTypes.BOARD_MEMBERSHIP_DELETE,
   payload: {
@@ -31,6 +46,8 @@ const handleBoardMembershipDelete = (boardMembership) => ({
 export default {
   createMembershipInCurrentBoard,
   handleBoardMembershipCreate,
+  updateBoardMembership,
+  handleBoardMembershipUpdate,
   deleteBoardMembership,
   handleBoardMembershipDelete,
 };

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

@@ -41,6 +41,9 @@ export default {
       background: 'Background',
       board: 'Board',
       boardNotFound_title: 'Board Not Found',
+      canComment: 'Can comment',
+      canEditContentOfBoard: 'Can edit the content of the board',
+      canOnlyViewBoard: 'Can only view the board',
       cardActions_title: 'Card Actions',
       cardNotFound_title: 'Card Not Found',
       cardOrActionAreDeleted: 'Card or action are deleted',
@@ -66,6 +69,7 @@ export default {
       description: 'Description',
       detectAutomatically: 'Detect automatically',
       dropFileToUpload: 'Drop file to upload',
+      editor: 'Editor',
       editAttachment_title: 'Edit Attachment',
       editAvatar_title: 'Edit Avatar',
       editBoard_title: 'Edit Board',
@@ -74,6 +78,7 @@ export default {
       editInformation_title: 'Edit Information',
       editLabel_title: 'Edit Label',
       editPassword_title: 'Edit Password',
+      editPermissions_title: 'Edit Permissions',
       editTimer_title: 'Edit Timer',
       editUsername_title: 'Edit Username',
       email: 'E-mail',
@@ -116,14 +121,18 @@ 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',
       removeMember_title: 'Remove Member',
+      searchLabels: 'Search labels...',
+      searchMembers: 'Search members...',
+      searchUsers: 'Search users...',
       seconds: 'Seconds',
       selectBoard: 'Select board',
       selectList: 'Select list',
+      selectPermissions_title: 'Select Permissions',
       selectProject: 'Select project',
       settings: 'Settings',
       subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
@@ -143,6 +152,7 @@ export default {
       username: 'Username',
       usernameAlreadyInUse: 'Username already in use',
       users: 'Users',
+      viewer: 'Viewer',
       writeComment: 'Write a comment...',
     },
 
@@ -154,6 +164,7 @@ export default {
       addCard_title: 'Add Card',
       addComment: 'Add comment',
       addList: 'Add list',
+      addMember: 'Add member',
       addMoreDetailedDescription: 'Add more detailed description',
       addTask: 'Add task',
       addToCard: 'Add to card',
@@ -185,6 +196,7 @@ export default {
       editEmail_title: 'Edit E-mail',
       editInformation_title: 'Edit Information',
       editPassword_title: 'Edit Password',
+      editPermissions: 'Edit permissions',
       editTimer_title: 'Edit Timer',
       editTitle_title: 'Edit Title',
       editUsername_title: 'Edit Username',

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/index.js

@@ -4,6 +4,7 @@ import de from './de';
 import en from './en';
 import es from './es';
 import fr from './fr';
+import it from './it';
 import ja from './ja';
 import ko from './ko';
 import pl from './pl';
@@ -13,7 +14,7 @@ import sv from './sv';
 import uz from './uz';
 import zh from './zh';
 
-const locales = [cs, da, de, en, es, fr, ja, ko, pl, ru, sk, sv, uz, zh];
+const locales = [cs, da, de, en, es, fr, it, ja, ko, pl, ru, sk, sv, uz, zh];
 
 export default locales;
 

client/src/locales/it/core.js

@@ -0,0 +1,230 @@
+export default {
+  format: {
+    date: 'd/M/yyyy',
+    time: 'p',
+    dateTime: '$t(format:date) $t(format:time)',
+    longDate: 'MMM d',
+    longDateTime: "MMMM d 'at' p",
+  },
+
+  translation: {
+    common: {
+      account: 'Account',
+      actions: 'Azioni',
+      addAttachment_title: 'Aggiungi Allegato',
+      addComment: 'Aggiungi commento',
+      addManager_title: 'Aggiungi Manager',
+      addMember_title: 'Aggiungi Membro',
+      addUser_title: 'Aggiungi Utente',
+      administrator: 'Amministratore',
+      all: 'tutto',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        'All changes will be automatically saved<br />after connection restored',
+      areYouSureYouWantToDeleteThisAttachment: 'Sei sicuro di voler eliminare questo allegato?',
+      areYouSureYouWantToDeleteThisBoard: 'Sei sicuro di voler eliminare questa bacheca?',
+      areYouSureYouWantToDeleteThisCard: 'Sei sicuro di voler eliminare questa card?',
+      areYouSureYouWantToDeleteThisComment: 'Sei sicuro di voler eliminare questo commento?',
+      areYouSureYouWantToDeleteThisLabel: 'Sei sicuro di voler eliminare questa etichetta?',
+      areYouSureYouWantToDeleteThisList: 'Sei sicuro di voler eliminare questo elenco?',
+      areYouSureYouWantToDeleteThisProject: 'Sei sicuro di voler eliminare questo progetto?',
+      areYouSureYouWantToDeleteThisTask: 'Sei sicuro di voler eliminare questo task?',
+      areYouSureYouWantToDeleteThisUser: 'Sei sicuro di voler eliminare questo utente?',
+      areYouSureYouWantToLeaveBoard: 'Sei sicuro di voler abbandonare la bacheca?',
+      areYouSureYouWantToLeaveProject: 'Sei sicuro di voler abbandonare il progetto?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Sei sicuro di voler rimuovere questo amministratore dal progetto?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Sei sicuro di voler rimuovere questo membro dalla bacheca?',
+      attachment: 'Allegato',
+      attachments: 'Allegati',
+      authentication: 'Autenticazione',
+      background: 'Background',
+      board: 'Bacheca',
+      boardNotFound_title: 'Bacheca non trovata',
+      canComment: 'Può commentare',
+      canEditContentOfBoard: 'Può modificare il contenuto della bacheca',
+      canOnlyViewBoard: 'Può solo vedere la bacheca',
+      cardActions_title: 'Card Azioni',
+      cardNotFound_title: 'Card non trovata',
+      cardOrActionAreDeleted: "La card o l'azione vengono eliminate",
+      color: 'Colore',
+      createBoard_title: 'Crea Bacheca',
+      createLabel_title: 'Crea Etichetta',
+      createNewOneOrSelectExistingOne: 'Crea nuovo o seleziona <br /> esistente',
+      createProject_title: 'Crea Progetto',
+      createTextFile_title: 'Create File di Testo',
+      currentPassword: 'Password corrente',
+      dangerZone_title: 'Danger Zone',
+      date: 'Data',
+      dueDate_title: 'Data di scadenza',
+      deleteAttachment_title: 'Elimina Allegato',
+      deleteBoard_title: 'Elimina Bacheca',
+      deleteCard_title: 'Elimina card',
+      deleteComment_title: 'Elimina Commento',
+      deleteLabel_title: 'Elimina Etichetta',
+      deleteList_title: 'Elimina Elenco',
+      deleteProject_title: 'Elimina Progetto',
+      deleteTask_title: 'Elimina Task',
+      deleteUser_title: 'Elimina Utente',
+      description: 'Descrizione',
+      detectAutomatically: 'Rileva automaticamente',
+      dropFileToUpload: 'Trascina il file da caricare',
+      editor: 'Editor',
+      editAttachment_title: 'Modifica Allegato',
+      editAvatar_title: 'Modifica Avatar',
+      editBoard_title: 'Modifica Board',
+      editDueDate_title: 'Modifica Data di Scadenza',
+      editEmail_title: 'Modifica E-mail',
+      editInformation_title: 'Modifica Informazioni',
+      editLabel_title: 'Modifica Etichetta',
+      editPassword_title: 'Modifica Password',
+      editPermissions_title: 'Modifica Permessi',
+      editTimer_title: 'Modifica Timer',
+      editUsername_title: 'Modifica Username',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail già in uso',
+      enterCardTitle: 'Inserire titolo della card...',
+      enterDescription: 'Inserire descrizione...',
+      enterFilename: 'Inserire nome del file',
+      enterListTitle: 'Inserire titolo della lista...',
+      enterProjectTitle: 'Inserire titolo del progetto',
+      enterTaskDescription: 'Inserire descrizione del task...',
+      filterByLabels_title: 'Filtra per Etichetta',
+      filterByMembers_title: 'Filtra per Membro',
+      fromComputer_title: 'Dal Computer',
+      general: 'Generale',
+      hours: 'Ore',
+      invalidCurrentPassword: 'Password corrente non valida',
+      labels: 'Etichette',
+      language: 'Lingua',
+      leaveBoard_title: 'Lascia Bacheca',
+      leaveProject_title: 'Lascia Progetto',
+      list: 'Lista',
+      listActions_title: 'Lista delle Azioni',
+      managers: 'Managers',
+      members: 'Membri',
+      minutes: 'Minuti',
+      moveCard_title: 'Sposta card',
+      name: 'Nome',
+      newEmail: 'Nuova e-mail',
+      newPassword: 'Nuova password',
+      newUsername: 'Nuovo username',
+      noConnectionToServer: 'Nessuna connessione al server',
+      noBoards: 'No bacheche',
+      noLists: 'No liste',
+      noProjects: 'No progetti',
+      notifications: 'Notifiche',
+      noUnreadNotifications: 'Nessuna notifica non letta',
+      openBoard_title: 'Bacheca aperta',
+      optional_inline: 'opzionale',
+      organization: 'Organizazzione',
+      phone: 'Telefono',
+      preferences: 'Preferenze',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        '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',
+      removeMember_title: 'Rimuovi Membro',
+      searchLabels: 'Cerca etichette...',
+      searchMembers: 'Cerca membri...',
+      searchUsers: 'Cerca utenti...',
+      seconds: 'Secondi',
+      selectBoard: 'Seleziona bacheca',
+      selectList: 'Seleziona lista',
+      selectPermissions_title: 'Seleziona Permessi',
+      selectProject: 'Seleziona progetto',
+      settings: 'Impostazioni',
+      subscribeToMyOwnCardsByDefault: 'Abbonati alle mie card per impostazione predefinita',
+      taskActions_title: 'Task Azioni',
+      tasks: 'Tasks',
+      thereIsNoPreviewAvailableForThisAttachment:
+        'Non è disponibile alcuna anteprima per questo allegato',
+      time: 'Tempo',
+      timer: 'Timer',
+      title: 'Titolo',
+      userActions_title: 'Azioni Utente',
+      userAddedThisCardToList: '<0>{{user}}</0><1> ha aggiunto questa card a {{list}}</1>',
+      userLeftNewCommentToCard:
+        '{{user}} ha lasciato un nuovo commento «{{comment}}» a <2>{{card}}</2>',
+      userMovedCardFromListToList: '{{user}} ha mosso <2>{{card}}</2> da {{fromList}} a {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> ha mosso questa card da {{fromList}} a {{toList}}</1>',
+      username: 'Username',
+      usernameAlreadyInUse: 'Username già in uso',
+      users: 'Utenti',
+      viewer: 'Viewer',
+      writeComment: 'Scrivi un commento...',
+    },
+
+    action: {
+      addAnotherCard: "Aggiungi un'altra card",
+      addAnotherList: "Aggiungi un'altra lista",
+      addAnotherTask: 'Aggiungi un altro task',
+      addCard: 'Aggiungi card',
+      addCard_title: 'Aggiungi Card',
+      addComment: 'Aggiungi commento',
+      addList: 'Aggiungi lista',
+      addMember: 'Add membro',
+      addMoreDetailedDescription: 'Aggiungi una descrizione più dettagliata',
+      addTask: 'Aggiungi task',
+      addToCard: 'Aggiungi alla card',
+      addUser: 'Aggiungi utente',
+      createBoard: 'Crea bacheca',
+      createFile: 'Crea file',
+      createLabel: 'Crea etichetta',
+      createNewLabel: 'Crea nuova etichetta',
+      createProject: 'Crea progetto',
+      delete: 'Elimina',
+      deleteAttachment: 'Elimina allegato',
+      deleteAvatar: 'Elimina avatar',
+      deleteBoard: 'Elimina bacheca',
+      deleteCard: 'Elimina card',
+      deleteCard_title: 'Elimina Card',
+      deleteComment: 'Elimina commento',
+      deleteImage: 'Elimina immagine',
+      deleteLabel: 'Elimina etichetta',
+      deleteList: 'Elimina lista',
+      deleteList_title: 'Elimina Lista',
+      deleteProject: 'Elimina progetto',
+      deleteProject_title: 'Elimina Progetto',
+      deleteTask: 'Elimina task',
+      deleteTask_title: 'Elimina Task',
+      deleteUser: 'Elimina utente',
+      edit: 'Modifica',
+      editDueDate_title: 'Modifica data di scadenza',
+      editDescription_title: 'Modifica Descrizione',
+      editEmail_title: 'Modifica E-mail',
+      editInformation_title: 'Modifca Informazioni',
+      editPassword_title: 'Modifica Password',
+      editPermissions: 'Modifica permessi',
+      editTimer_title: 'Modifica Timer',
+      editTitle_title: 'Modifica Titolo',
+      editUsername_title: 'Modifica Username',
+      hideDetails: 'Nascondi dettagli',
+      leaveBoard: 'Lascia bacheca',
+      leaveProject: 'Lascia progetto',
+      logOut_title: 'Log Out',
+      makeCover_title: 'Crea Cover',
+      move: 'Muovi',
+      moveCard_title: 'Muovi Card',
+      remove: 'Rimuovi',
+      removeBackground: 'Rimuovi background',
+      removeCover_title: 'Rimuovi Cover',
+      removeFromBoard: 'Rimuovi dalla bacheca',
+      removeFromProject: 'Rimuovi dal Progetto',
+      removeManager: 'Rimuovi manager',
+      removeMember: 'Rimuovi membro',
+      save: 'Salva',
+      showAllAttachments: 'Mostra tutti gli allegati ({{hidden}} hidden)',
+      showDetails: 'Mostra dettagli',
+      showFewerAttachments: 'Mostra meno allegati',
+      start: 'Start',
+      stop: 'Stop',
+      subscribe: 'Subscribe',
+      unsubscribe: 'Unsubscribe',
+      uploadNewAvatar: 'Carica nuovo avatar',
+      uploadNewImage: 'Carica nuova immagine',
+    },
+  },
+};

client/src/locales/it/index.js

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'it',
+  country: 'it',
+  name: 'Italiano',
+  embeddedLocale: login,
+};

client/src/locales/it/login.js

@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'E-mail o username',
+      invalidEmailOrUsername: 'E-mail or username invalido',
+      invalidPassword: 'Password non valida',
+      logInToPlanka: 'Log in Planka',
+      noInternetConnection: 'Nessuna connessione internet',
+      pageNotFound_title: 'Pagina non trovata',
+      password: 'Password',
+      projectManagement: 'Project management',
+      serverConnectionFailed: 'Connesione al server fallita',
+      unknownError: 'Errore sconosciuto, prova ancora',
+    },
+
+    action: {
+      logIn: 'Log in',
+    },
+  },
+};

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

@@ -39,6 +39,9 @@ export default {
       authentication: 'Аутентификация',
       board: 'Доска',
       boardNotFound: 'Доска не найдена',
+      canComment: 'Может комментировать',
+      canEditContentOfBoard: 'Может редактировать содержимое доски',
+      canOnlyViewBoard: 'Может только просматривать доску',
       cardActions: 'Действия с карточкой',
       cardNotFound: 'Карточка не найдена',
       cardOrActionAreDeleted: 'Карточка или действие удалены',
@@ -64,6 +67,7 @@ export default {
       description: 'Описание',
       detectAutomatically: 'Определить автоматически',
       dropFileToUpload: 'Перетяните файл, чтобы загрузить',
+      editor: 'Редактор',
       editAttachment: 'Изменение вложения',
       editAvatar: 'Изменение аватара',
       editBoard: 'Изменение доски',
@@ -72,6 +76,7 @@ export default {
       editEmail: 'Изменение e-mail',
       editLabel: 'Изменения метки',
       editPassword: 'Изменение пароля',
+      editPermissions: 'Редактирование разрешений',
       editTimer: 'Изменение таймера',
       editTitle: 'Изменение названия',
       editUsername: 'Изменение имени пользователя',
@@ -111,14 +116,18 @@ export default {
       phone: 'Телефон',
       preferences: 'Предпочтения',
       pressPasteShortcutToAddAttachmentFromClipboard:
-        'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена.',
+        'Совет: нажмите Ctrl-V (Cmd-V на Mac), чтобы добавить вложение из буфера обмена',
       project: 'Проект',
       projectActions: 'Действия с проектом',
       projectNotFound: 'Проект не найден',
       removeMember: 'Удаление участника',
+      searchLabels: 'Поиск меток...',
+      searchMembers: 'Поиск участников...',
+      searchUsers: 'Поиск пользователей...',
       seconds: 'Секунды',
       selectBoard: 'Выберите доску',
       selectList: 'Выберите список',
+      selectPermissions: 'Выбор разрешений',
       selectProject: 'Выберите проект',
       settings: 'Настройки',
       subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
@@ -128,7 +137,7 @@ export default {
       time: 'Время',
       timer: 'Таймер',
       title: 'Название',
-      userActions_title: 'Действия с пользователем',
+      userActions: 'Действия с пользователем',
       userAddedThisCardToList: '<0>{{user}}</0><1> добавил(а) эту карточку в {{list}}</1>',
       userLeftNewCommentToCard: '{{user}} оставил(а) комментарий «{{comment}}» к <2>{{card}}</2>',
       userMovedCardFromListToList:
@@ -138,6 +147,7 @@ export default {
       username: 'Имя пользователя',
       usernameAlreadyInUse: 'Имя пользователя уже занято',
       users: 'Пользователи',
+      viewer: 'Читатель',
       writeComment: 'Напишите комментарий...',
     },
 
@@ -148,6 +158,7 @@ export default {
       addCard: 'Добавить карточку',
       addComment: 'Добавить комментарий',
       addList: 'Добавить список',
+      addMember: 'Добавить участника',
       addMoreDetailedDescription: 'Добавить более подробное описание',
       addTask: 'Добавить задачу',
       addToCard: 'Добавить на карточку',
@@ -175,6 +186,7 @@ export default {
       editDescription: 'Изменить описание',
       editEmail: 'Изменить e-mail',
       editPassword: 'Изменить пароль',
+      editPermissions: 'Изменить разрешения',
       editTask: 'Изменить задачу',
       editTimer: 'Изменить таймер',
       editTitle: 'Изменить название',

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/models/Board.js

@@ -175,6 +175,14 @@ export default class extends Model {
     return this.lists.orderBy('position');
   }
 
+  getMembershipModel(userId) {
+    return this.memberships
+      .filter({
+        userId,
+      })
+      .first();
+  }
+
   hasMemberUser(userId) {
     return this.memberships
       .filter({

client/src/models/BoardMembership.js

@@ -7,6 +7,8 @@ export default class extends Model {
 
   static fields = {
     id: attr(),
+    role: attr(),
+    canComment: attr(),
     boardId: fk({
       to: 'Board',
       as: 'board',
@@ -65,6 +67,15 @@ export default class extends Model {
           });
         }
 
+        break;
+      case ActionTypes.BOARD_MEMBERSHIP_UPDATE:
+        BoardMembership.withId(payload.id).update(payload.data);
+
+        break;
+      case ActionTypes.BOARD_MEMBERSHIP_UPDATE__SUCCESS:
+      case ActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE:
+        BoardMembership.upsert(payload.boardMembership);
+
         break;
       case ActionTypes.BOARD_MEMBERSHIP_DELETE:
         BoardMembership.withId(payload.id).deleteWithRelated();

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/board-memberships.js

@@ -84,7 +84,7 @@ export function* handleBoardMembershipCreate(boardMembership) {
 
     let body;
     try {
-      body = yield call(requests.fetchBoardByCurrentPathRequest);
+      body = yield call(requests.fetchBoardByCurrentPath);
     } catch {} // eslint-disable-line no-empty
 
     if (body && body.project && body.project.id === board2.projectId) {
@@ -135,6 +135,24 @@ export function* handleBoardMembershipCreate(boardMembership) {
   );
 }
 
+export function* updateBoardMembership(id, data) {
+  yield put(actions.updateBoardMembership(id, data));
+
+  let boardMembership;
+  try {
+    ({ item: boardMembership } = yield call(request, api.updateBoardMembership, id, data));
+  } catch (error) {
+    yield put(actions.updateBoardMembership.failure(id, error));
+    return;
+  }
+
+  yield put(actions.updateBoardMembership.success(boardMembership));
+}
+
+export function* handleBoardMembershipUpdate(boardMembership) {
+  yield put(actions.handleBoardMembershipUpdate(boardMembership));
+}
+
 export function* deleteBoardMembership(id) {
   let boardMembership = yield select(selectors.selectBoardMembershipById, id);
 
@@ -184,6 +202,8 @@ export default {
   createBoardMembership,
   createMembershipInCurrentBoard,
   handleBoardMembershipCreate,
+  updateBoardMembership,
+  handleBoardMembershipUpdate,
   deleteBoardMembership,
   handleBoardMembershipDelete,
 };

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/core/watchers/board-memberships.js

@@ -11,6 +11,12 @@ export default function* boardMembershipsWatchers() {
     takeEvery(EntryActionTypes.BOARD_MEMBERSHIP_CREATE_HANDLE, ({ payload: { boardMembership } }) =>
       services.handleBoardMembershipCreate(boardMembership),
     ),
+    takeEvery(EntryActionTypes.BOARD_MEMBERSHIP_UPDATE, ({ payload: { id, data } }) =>
+      services.updateBoardMembership(id, data),
+    ),
+    takeEvery(EntryActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE, ({ payload: { boardMembership } }) =>
+      services.handleBoardMembershipUpdate(boardMembership),
+    ),
     takeEvery(EntryActionTypes.BOARD_MEMBERSHIP_DELETE, ({ payload: { id } }) =>
       services.deleteBoardMembership(id),
     ),

client/src/sagas/core/watchers/socket.js

@@ -64,6 +64,10 @@ const createSocketEventsChannel = () =>
       emit(entryActions.handleBoardMembershipCreate(item));
     };
 
+    const handleBoardMembershipUpdate = ({ item }) => {
+      emit(entryActions.handleBoardMembershipUpdate(item));
+    };
+
     const handleBoardMembershipDelete = ({ item }) => {
       emit(entryActions.handleBoardMembershipDelete(item));
     };
@@ -183,6 +187,7 @@ const createSocketEventsChannel = () =>
     socket.on('boardDelete', handleBoardDelete);
 
     socket.on('boardMembershipCreate', handleBoardMembershipCreate);
+    socket.on('boardMembershipUpdate', handleBoardMembershipUpdate);
     socket.on('boardMembershipDelete', handleBoardMembershipDelete);
 
     socket.on('listCreate', handleListCreate);
@@ -238,6 +243,7 @@ const createSocketEventsChannel = () =>
       socket.off('boardDelete', handleBoardDelete);
 
       socket.off('boardMembershipCreate', handleBoardMembershipCreate);
+      socket.off('boardMembershipUpdate', handleBoardMembershipUpdate);
       socket.off('boardMembershipDelete', handleBoardMembershipDelete);
 
       socket.off('listCreate', handleListCreate);

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/boards.js

@@ -147,22 +147,28 @@ export const selectFilterLabelsForCurrentBoard = createSelector(
   },
 );
 
-export const selectIsCurrentUserMemberForCurrentBoard = createSelector(
+export const selectCurrentUserMembershipForCurrentBoard = createSelector(
   orm,
   (state) => selectPath(state).boardId,
   (state) => selectCurrentUserId(state),
   ({ Board }, id, currentUserId) => {
     if (!id) {
-      return false;
+      return id;
     }
 
     const boardModel = Board.withId(id);
 
     if (!boardModel) {
-      return false;
+      return boardModel;
     }
 
-    return boardModel.hasMemberUser(currentUserId);
+    const boardMembershipModel = boardModel.getMembershipModel(currentUserId);
+
+    if (!boardMembershipModel) {
+      return boardMembershipModel;
+    }
+
+    return boardMembershipModel.ref;
   },
 );
 
@@ -175,5 +181,5 @@ export default {
   selectListIdsForCurrentBoard,
   selectFilterUsersForCurrentBoard,
   selectFilterLabelsForCurrentBoard,
-  selectIsCurrentUserMemberForCurrentBoard,
+  selectCurrentUserMembershipForCurrentBoard,
 };

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.6.0",
+  "version": "1.8.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.6.0",
+      "version": "1.8.2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

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