Merge branch 'develop' of github.com:tracim/tracim_v2 into develop

.gitignore

@@ -5,3 +5,4 @@ frontend/dist/asset/tracim/tracim.vendor.bundle.js
 frontend_app_html-document/dist/html-document.app.js
 frontend_lib/dist/tracim_frontend_lib.js
 npm-debug.log
+package-lock.json

backend/development.ini.sample

@@ -186,6 +186,13 @@ wsgidav.config_path = %(here)s/wsgidav.conf
 ## return error
 # preview.jpg.restricted_dims = True
 
+### Frontend
+frontend.serve = True
+# You can set dist folder of tracim frontend. by default, system
+# will try to get it automatically according to tracim_v2 repository
+# organisation.
+# frontend.dist_folder_path = /home/user/tracim_v2/frontend/dist
+
 ###
 # wsgi server configuration
 ###

backend/setup.py

@@ -41,6 +41,9 @@ requires = [
     'lxml',
     'redis',
     'rq',
+    # frontend file serve
+    'pyramid_mako',
+    'spectra',
 ]
 
 tests_require = [

backend/tests_configs.ini

@@ -4,7 +4,7 @@ depot_storage_name = test
 depot_storage_dir = /tmp/test/depot
 user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
-
+website.base_url = http://localhost:6543
 [app:command_test]
 use = egg:tracim_backend
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -12,6 +12,7 @@ depot_storage_name = test
 depot_storage_dir = /tmp/test/depot
 user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
+website.base_url = http://localhost:6543
 
 [mail_test]
 sqlalchemy.url = sqlite:///:memory:
@@ -37,6 +38,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543
 
 [mail_test_async]
 sqlalchemy.url = sqlite:///:memory:
@@ -63,6 +65,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543
 
 [functional_test]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -72,6 +75,7 @@ user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
 preview.jpg.restricted_dims = True
 email.notification.activated = false
+website.base_url = http://localhost:6543
 
 [functional_test_no_db]
 sqlalchemy.url = sqlite://
@@ -81,6 +85,7 @@ user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
 preview.jpg.restricted_dims = True
 email.notification.activated = false
+website.base_url = http://localhost:6543
 
 [functional_test_with_mail_test_sync]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -105,7 +110,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
-
+website.base_url = http://localhost:6543
 
 [functional_test_with_mail_test_async]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -129,4 +134,5 @@ email.notification.processing_mode = async
 email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
-email.notification.smtp.password = just_a_password
+email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543

backend/tracim_backend/__init__.py

@@ -1,6 +1,4 @@
 # -*- coding: utf-8 -*-
-
-
 try:  # Python 3.5+
     from http import HTTPStatus
 except ImportError:
@@ -9,7 +7,6 @@ except ImportError:
 from pyramid.config import Configurator
 from pyramid.authentication import BasicAuthAuthenticationPolicy
 from hapic.ext.pyramid import PyramidContext
-from pyramid.exceptions import NotFound
 from sqlalchemy.exc import OperationalError
 
 from tracim_backend.extensions import hapic
@@ -30,8 +27,10 @@ from tracim_backend.views.core_api.user_controller import UserController
 from tracim_backend.views.core_api.workspace_controller import WorkspaceController
 from tracim_backend.views.contents_api.comment_controller import CommentController
 from tracim_backend.views.contents_api.file_controller import FileController
+from tracim_backend.views.frontend import FrontendController
 from tracim_backend.views.errors import ErrorSchema
 from tracim_backend.exceptions import NotAuthenticated
+from tracim_backend.exceptions import PageNotFound
 from tracim_backend.exceptions import UserNotActive
 from tracim_backend.exceptions import InvalidId
 from tracim_backend.exceptions import InsufficientUserProfile
@@ -86,7 +85,7 @@ def web(global_config, **local_settings):
     hapic.set_context(context)
     # INFO - G.M - 2018-07-04 - global-context exceptions
     # Not found
-    context.handle_exception(NotFound, HTTPStatus.NOT_FOUND)
+    context.handle_exception(PageNotFound, HTTPStatus.NOT_FOUND)
     # Bad request
     context.handle_exception(WorkspaceNotFoundInTracimRequest, HTTPStatus.BAD_REQUEST)  # nopep8
     context.handle_exception(UserNotFoundInTracimRequest, HTTPStatus.BAD_REQUEST)  # nopep8
@@ -106,6 +105,7 @@ def web(global_config, **local_settings):
     context.handle_exception(OperationalError, HTTPStatus.INTERNAL_SERVER_ERROR)
     context.handle_exception(Exception, HTTPStatus.INTERNAL_SERVER_ERROR)
 
+
     # Add controllers
     session_controller = SessionController()
     system_controller = SystemController()
@@ -124,6 +124,11 @@ def web(global_config, **local_settings):
     configurator.include(thread_controller.bind, route_prefix=BASE_API_V2)
     configurator.include(file_controller.bind, route_prefix=BASE_API_V2)
 
+    if app_config.FRONTEND_SERVE:
+        configurator.include('pyramid_mako')
+        frontend_controller = FrontendController(app_config.FRONTEND_DIST_FOLDER_PATH)  # nopep8
+        configurator.include(frontend_controller.bind)
+
     hapic.add_documentation_view(
         '/api/v2/doc',
         'Tracim v2 API',

backend/tracim_backend/config.py

@@ -1,5 +1,7 @@
 # -*- coding: utf-8 -*-
 from urllib.parse import urlparse
+
+import os
 from paste.deploy.converters import asbool
 from tracim_backend.lib.utils.logger import logger
 from depot.manager import DepotManager
@@ -79,6 +81,12 @@ class CFG(object):
             'website.base_url',
             '',
         )
+        if not self.WEBSITE_BASE_URL:
+            raise Exception(
+                'website.base_url is needed in order to have correct path in'
+                'few place like in email.'
+                'You should set it with frontend root url.'
+            )
 
         # TODO - G.M - 26-03-2018 - [Cleanup] These params seems deprecated for tracimv2,  # nopep8
         # Verify this
@@ -435,6 +443,29 @@ class CFG(object):
 
         self.PREVIEW_JPG_ALLOWED_DIMS = allowed_dims
 
+        self.FRONTEND_SERVE = asbool(settings.get(
+            'frontend.serve', False
+        ))
+
+        # INFO - G.M - 2018-08-06 - we pretend that frontend_dist_folder
+        # is probably in frontend subfolder
+        # of tracim_v2 parent of both backend and frontend
+        backend_folder = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))  # nopep8
+        tracim_v2_folder = os.path.dirname(backend_folder)
+        frontend_dist_folder = os.path.join(tracim_v2_folder, 'frontend', 'dist')  # nopep8
+
+        self.FRONTEND_DIST_FOLDER_PATH = settings.get(
+            'frontend.dist_folder_path', frontend_dist_folder
+        )
+
+        # INFO - G.M - 2018-08-06 - We check dist folder existence
+        if self.FRONTEND_SERVE and not os.path.isdir(self.FRONTEND_DIST_FOLDER_PATH):  # nopep8
+            raise Exception(
+                'ERROR: {} folder does not exist as folder. '
+                'please set frontend.dist_folder.path'
+                'with a correct value'.format(self.FRONTEND_DIST_FOLDER_PATH)
+            )
+
     def configure_filedepot(self):
         depot_storage_name = self.DEPOT_STORAGE_NAME
         depot_storage_path = self.DEPOT_STORAGE_DIR

backend/tracim_backend/exceptions.py

@@ -207,3 +207,7 @@ class PreviewDimNotAllowed(TracimException):
 
 class TooShortAutocompleteString(TracimException):
     pass
+
+
+class PageNotFound(TracimException):
+    pass

backend/tracim_backend/lib/core/notifications.py

@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 from sqlalchemy.orm import Session
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.lib.utils.logger import logger
 from tracim_backend.models.auth import User
 from tracim_backend.models.data import Content

backend/tracim_backend/lib/core/user.py

@@ -9,7 +9,7 @@ from sqlalchemy.orm import Session
 from sqlalchemy.orm import Query
 from sqlalchemy.orm.exc import NoResultFound
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.models.auth import User
 from tracim_backend.models.auth import Group
 from tracim_backend.exceptions import NoUserSetted

backend/tracim_backend/lib/core/userworkspace.py

@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 import typing
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.models.context_models import UserRoleWorkspaceInContext
 from tracim_backend.models.roles import WorkspaceRoles
 

backend/tracim_backend/lib/core/workspace.py

@@ -5,7 +5,7 @@ from sqlalchemy.orm import Query
 from sqlalchemy.orm import Session
 from sqlalchemy.orm.exc import NoResultFound
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.exceptions import EmptyLabelNotAllowed
 from tracim_backend.exceptions import WorkspaceNotFound
 from tracim_backend.lib.utils.translation import fake_translator as _

backend/tracim_backend/lib/mail_notifier/notifier.py

@@ -10,16 +10,19 @@ from lxml.html.diff import htmldiff
 from mako.template import Template
 from sqlalchemy.orm import Session
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.lib.core.notifications import INotifier
 from tracim_backend.lib.mail_notifier.sender import EmailSender
 from tracim_backend.lib.mail_notifier.utils import SmtpConfiguration, EST
 from tracim_backend.lib.mail_notifier.sender import send_email_through
 from tracim_backend.lib.core.workspace import WorkspaceApi
 from tracim_backend.lib.utils.logger import logger
-from tracim_backend.models import User
+from tracim_backend.lib.utils.utils import get_login_frontend_url
+from tracim_backend.lib.utils.utils import get_email_logo_frontend_url
 from tracim_backend.models.auth import User
 from tracim_backend.models.contents import CONTENT_TYPES
+from tracim_backend.models.context_models import ContentInContext
+from tracim_backend.models.context_models import WorkspaceInContext
 from tracim_backend.models.data import ActionDescription
 from tracim_backend.models.data import Content
 from tracim_backend.models.data import UserRoleInWorkspace
@@ -234,7 +237,13 @@ class EmailManager(object):
             show_archived=True,
             show_deleted=True,
         ).get_one(event_content_id, CONTENT_TYPES.Any_SLUG)
-        main_content = content.parent if content.type == CONTENT_TYPES.Comment.slug else content
+        workspace_api = WorkspaceApi(
+            session=self.session,
+            current_user=user,
+            config=self.config,
+        )
+        workpace_in_context = workspace_api.get_workspace_with_context(workspace_api.get_one(content.workspace_id))  # nopep8
+        main_content = content.parent if content.type == CONTENT_TYPES.Comment.slug else content  # nopep8
         notifiable_roles = WorkspaceApi(
             current_user=user,
             session=self.session,
@@ -265,7 +274,7 @@ class EmailManager(object):
             # INFO - G.M - 2017-11-15 - set content_id in header to permit reply
             # references can have multiple values, but only one in this case.
             replyto_addr = self.config.EMAIL_NOTIFICATION_REPLY_TO_EMAIL.replace( # nopep8
-                '{content_id}',str(content.content_id)
+                '{content_id}', str(content.content_id)
             )
 
             reference_addr = self.config.EMAIL_NOTIFICATION_REFERENCES_EMAIL.replace( #nopep8
@@ -297,8 +306,21 @@ class EmailManager(object):
             # To link this email to a content we create a virtual parent
             # in reference who contain the content_id.
             message['References'] = formataddr(('',reference_addr))
-            body_text = self._build_email_body_for_content(self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_TEXT, role, content, user)
-            body_html = self._build_email_body_for_content(self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_HTML, role, content, user)
+            content_in_context = content_api.get_content_in_context(content)
+            body_text = self._build_email_body_for_content(
+                self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_TEXT,
+                role,
+                content_in_context,
+                workpace_in_context,
+                user
+            )
+            body_html = self._build_email_body_for_content(
+                self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_HTML,
+                role,
+                content_in_context,
+                workpace_in_context,
+                user
+            )
 
             part1 = MIMEText(body_text, 'plain', 'utf-8')
             part2 = MIMEText(body_html, 'html', 'utf-8')
@@ -362,9 +384,9 @@ class EmailManager(object):
             'user': user,
             'password': password,
             # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for logo_url  # nopep8
-            'logo_url': '',
+            'logo_url': get_email_logo_frontend_url(self.config),
             # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for login_url  # nopep8
-            'login_url': self.config.WEBSITE_BASE_URL,
+            'login_url': get_login_frontend_url(self.config),
         }
         body_text = self._render_template(
             mako_template_filepath=text_template_file_path,
@@ -415,8 +437,9 @@ class EmailManager(object):
             self,
             mako_template_filepath: str,
             role: UserRoleInWorkspace,
-            content: Content,
-            actor: User
+            content_in_context: ContentInContext,
+            workspace_in_context: WorkspaceInContext,
+            actor: User,
     ) -> str:
         """
         Build an email body and return it as a string
@@ -424,24 +447,21 @@ class EmailManager(object):
         :param role: the role related to user to whom the email must be sent. The role is required (and not the user only) in order to show in the mail why the user receive the notification
         :param content: the content item related to the notification
         :param actor: the user at the origin of the action / notification (for example the one who wrote a comment
-        :param config: the global configuration
         :return: the built email body as string. In case of multipart email, this method must be called one time for text and one time for html
         """
         logger.debug(self, 'Building email content from MAKO template {}'.format(mako_template_filepath))
-
+        content = content_in_context.content
         main_title = content.label
         content_intro = ''
         content_text = ''
         call_to_action_text = ''
 
-        # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for call_to_action_url  # nopep8
-        call_to_action_url =''
+        call_to_action_url = content_in_context.frontend_url
         # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for status_icon_url  # nopep8
         status_icon_url = ''
-        # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for workspace_url  # nopep8
-        workspace_url = ''
+        workspace_url = workspace_in_context.frontend_url
         # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for logo_url  # nopep8
-        logo_url = ''
+        logo_url = get_email_logo_frontend_url(self.config)
 
         action = content.get_last_action().id
         if ActionDescription.COMMENT == action:

backend/tracim_backend/lib/utils/utils.py

@@ -2,6 +2,8 @@
 import datetime
 import random
 import string
+from enum import Enum
+
 from redis import Redis
 from rq import Queue
 
@@ -10,6 +12,32 @@ from tracim_backend.config import CFG
 DATETIME_FORMAT = '%Y-%m-%dT%H:%M:%SZ'
 DEFAULT_WEBDAV_CONFIG_FILE = "wsgidav.conf"
 DEFAULT_TRACIM_CONFIG_FILE = "development.ini"
+CONTENT_FRONTEND_URL_SCHEMA = 'workspaces/{workspace_id}/contents/{content_type}/{content_id}'  # nopep8
+WORKSPACE_FRONTEND_URL_SCHEMA = 'workspaces/{workspace_id}'  # nopep8
+
+
+def get_root_frontend_url(config: CFG) -> str:
+    """
+    Return website base url with always '/' at the end
+    """
+    base_url = ''
+    if config.WEBSITE_BASE_URL[-1] == '/':
+        base_url = config.WEBSITE_BASE_URL
+    else:
+        base_url = config.WEBSITE_BASE_URL + '/'
+    return base_url
+
+
+def get_login_frontend_url(config: CFG):
+    """
+    Return login page url
+    """
+    return get_root_frontend_url(config) + 'login'
+
+
+def get_email_logo_frontend_url(config: CFG):
+    # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for email_logo_frontend_url  # nopep8
+    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4QUTDjMSlsws9AAAB89JREFUaN7tmWtwlFcZx3/PeXeXXLmKQJEGsFZApIUBnaqjUm4VgdYyCUib0cJoKLmHW5EWmlGoQkMICURgEPuhtiYDU7XcyVgKVugULZVCQAwUYyENYAmEXHb3PH7IFjYQNgnZHfnA+bKz+7573v//PPf/C/fWvdWhJWHfMbO4P479OpCAigeowWglPq3ARWfU9AJ7Cb/3MAXZn95dBLKKHsfIQmAUIq7rv6t6gU+BKCAGaEBkN9h88tLe7sgjTdjAJ5Y4OGYMIo80Aw8g4kakJyLxiDiIxABPoMwj5+XP3R0ESpP8WC1H1YuqBj4bUWwIB5gA0d/6/xFQFUpKHBJLHADyU9chTEc1BdEZqJ0O+ofb4xcPyuBIxoBQuHc4ov3w2zrwH0Nd0aBDccwgVPsjEg/4Uc4jegKfvkfMmQ9JSfECkFP0HGJeuu0TrJZhSacg9Xh4Caze2wsXC1B9GugO+BAqUIkC/QIinhYsYoEqYDt+fY2s8WXkFE5CnBIg+vaWtJuQukzy5te2l4Bz2ysTkxchshCRWERMU2BKT4RuiLT0vwagHsENPIyR7zAx2eGybws09AUZEQLHcNS5wMEdB8NjgaKyBNTuQuTLoWOAs6AHUd5DpRzxX0KMBe0M+gA4D4Hdw5mT72LJQORxkM6IfgxSC3wjyHpHEN8M8jKPtYeAq2VgvhHg9A4RvPUIKzCyBVe346SM9LZw1y5KShzOxfUhL60SmMfcNUXgisXYS/iNA/IzhNmBgH4I3E8Cxzpmgby9ffFoMSKTQxA4jZjRpI35qENZbF5Rb1SWgcwM7HsQr28KhZnVd55GPfqTkOCbaB+i2lR1uHa8nHYeda0EygJWGILHGXzndaBgz3CQ5Fb8/hSqr5E7uj4sBXBVSjlqN6FaixKHlS8BxCYtHhs/bUly9JT597U9C30/eRYiU4Nc5Q1gH+AG/gvsxJBH2vg3w9pDPTjqFDGxX0FkKOih2PtHOcbIBiPMMi5XT9eDo9/xlu+rDW2BpX+MAQnOCudRWcWFA3OwncYhrke5VpuK1SrW7+sTVgKv5NYjsr2p6TMY1QEGvhi4mmw89unWXaiX6QQEN1YHuHjpELm5lsxvV2MbhxAdWwCSiNfnCXsb7mc/Ih8hXED8J1T1k6awEAG+R+LCLqEJOL2vInwQOP46VHaSm9QYiI1nMU4xwv2oa3OHs0+LiaHuHKr/wOo/r1yuOQwcDEqVw2KdqITQBFJGelFWojITPz8kY+wmAAp3pWLkJVT7oGwkY3R5REar/Ln1qO7AyIfsLGxQ1eB60E3UDmi9kKWPOwmcvP69cM8kROYCXVB5FW18I4LToeLSbTGnKh2T9MIChLHBOI2lT9srMUDB9s7AM8CApj7H/yaZExsiOd9GnbngcjzOciPyVPOuW0RFB7ZvHnDck4FJgbOpwPoPRHpAdxs782bwQSwei3ty0aC2EVh61ANMutEy63Gi/l0VUfSJC7sIjAnhYYON4x7eNgI9KgeifDPIOyuuDygRWnGuKDcQF6roWrGxbSNgzDAgqBuV6ki7z9WT5y4DR0LdoqoVbSOgZhAi7hv4bXzEFarDG7yqbPmsgN2aovhdLdf+2jqBorIE4JGbIugZCvcsijQHr5ojN1tbVaustUWNNP6S0vy60AR+ut4Ndj7CYzdlgL7AixTtmRnRLOToVNAhQeDfR+yPr+iJrIbf/+pM62l0WP8RKNNCSCCTySuJjgT42MTnv4rqjEDvg6J+VH5T8/qynZSW+ts40EgCQtcQDcsDEN2d9IKe4U2hiR5jmG1ERt4QKrS4pkqK2zmRSQMaUsj6D5cuu3C5ppCY6IQLf2dn8CIjZk4Q+N961VnJvlxf+4Z6v/cojvsDYEQL4BXRHVTXfkysjqPfd3tA6YqOnXx293gnLgvV5xFBVa2iv/b6dEX91p+fbf9ImTnxX6gWAadbILARX+0rbEjxohwCFpBVlH1nyJea2KTFY+OduHUGeaFJoNN3gcwr1smu37qsze16y7pQ4a7pYFYj0iuAvho0jbTxJQBkrB6Ky70VGIDqamA9+WmnWtwrZ20/fN4uQA1rss52Slw8wIOZKg4/QIlTKBfY32DttobSZafDJS0Ka3YXYEx6UCXZid8/n6wJRwHIXrsEI7kB6+xHtQTDn8hLPQuipBb2oJOkgSQBPREuAlupq98cfa6mXsXnOFpfV5uQMBRxlMpP/kJpbmP4tNHC3SNBNiLycJAbleLlOXLGVTB33edRLUBkepAuegyRd1D7Pphh10Wr5mJuMT5fNo67L45NQSUlIBqsYlXqkqaiGy51es3eWQh5CDfmUeufTcaE9QBkFY7AyIuImXxT3bfI7doUvQayFbUDMSZYRHiLq64n2JByOXzvBzLGbkJ1GarnP4OPmBt60Or0v+E381Fdj+ILOhYT4p1ADOhTzcA3EdjeXvCtEwDIGNc0J6vNB/0FDXXbmk9uc05wMSYLq+nAgYArtWJ3keYW0eVUVheE9/3ArbYXkND+mbO2H8gk0AnAlGZAb3WlWpQ/I/o6q9JevWMxIyJdWWZ+V4xnOUaebQH4MVS2I/59eO3bFGbWdEiNiVhrmVncH+NfhMg0IA4RH1bfQnQlq9LKwiYnRbTB/9HmKLrWfg2j94HUoI1/Z3XOOe6te+vuWf8DkM0cb7DOQZgAAAAASUVORK5CYII='  # nopep8'
 
 
 def get_redis_connection(config: CFG) -> Redis:
@@ -96,3 +124,4 @@ def password_generator(
     :return: password as string
     """
     return ''.join(random.choice(chars) for char_number in range(length))
+

backend/tracim_backend/models/applications.py

@@ -36,6 +36,12 @@ class Application(object):
         self.config = config
         self.main_route = main_route
 
+    # TODO - G.M - 2018-08-07 - Refactor slug coherence issue like this one.
+    # we probably should not have 2 kind of slug
+    @property
+    def minislug(self):
+        return self.slug.replace('contents/', '')
+
 
 # default apps
 calendar = Application(

backend/tracim_backend/models/context_models.py

@@ -5,8 +5,11 @@ from enum import Enum
 
 from slugify import slugify
 from sqlalchemy.orm import Session
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.config import PreviewDim
+from tracim_backend.lib.utils.utils import get_root_frontend_url
+from tracim_backend.lib.utils.utils import CONTENT_FRONTEND_URL_SCHEMA
+from tracim_backend.lib.utils.utils import WORKSPACE_FRONTEND_URL_SCHEMA
 from tracim_backend.models import User
 from tracim_backend.models.auth import Profile
 from tracim_backend.models.data import Content
@@ -14,7 +17,7 @@ from tracim_backend.models.data import ContentRevisionRO
 from tracim_backend.models.data import Workspace
 from tracim_backend.models.data import UserRoleInWorkspace
 from tracim_backend.models.roles import WorkspaceRoles
-from tracim_backend.models.workspace_menu_entries import default_workspace_menu_entry
+from tracim_backend.models.workspace_menu_entries import default_workspace_menu_entry  # nopep8
 from tracim_backend.models.workspace_menu_entries import WorkspaceMenuEntry
 from tracim_backend.models.contents import CONTENT_TYPES
 
@@ -462,6 +465,14 @@ class WorkspaceInContext(object):
         # apps)
         return default_workspace_menu_entry(self.workspace)
 
+    @property
+    def frontend_url(self):
+        root_frontend_url = get_root_frontend_url(self.config)
+        workspace_frontend_url = WORKSPACE_FRONTEND_URL_SCHEMA.format(
+            workspace_id=self.workspace_id,
+        )
+        return root_frontend_url + workspace_frontend_url
+
 
 class UserRoleWorkspaceInContext(object):
     """
@@ -660,6 +671,16 @@ class ContentInContext(object):
         assert self._user
         return not self.content.has_new_information_for(self._user)
 
+    @property
+    def frontend_url(self):
+        root_frontend_url = get_root_frontend_url(self.config)
+        content_frontend_url = CONTENT_FRONTEND_URL_SCHEMA.format(
+            workspace_id=self.workspace_id,
+            content_type=self.content_type,
+            content_id=self.content_id,
+        )
+        return root_frontend_url + content_frontend_url
+
 
 class RevisionInContext(object):
     """

backend/tracim_backend/templates/mail/content_update_body_html.mak

@@ -45,7 +45,7 @@
             ${main_title}
             &mdash;&nbsp;<span style="font-weight: bold; color: #999; font-weight: bold;">
               ${status_label|n}
-              <img alt="status_icon" src="${status_icon_url}" style="vertical-align: middle;">
+              <img alt="" src="${status_icon_url}" style="vertical-align: middle;">
             </span>
         </td>
       </tr>
@@ -55,6 +55,8 @@
     <div id="content-body">
         <div>${content_text|n}</div>
         <div href='' id="call-to-action-container">
+            <span style=""> <a href="${call_to_action_url}"
+            id="call-to-action-button">${call_to_action_text}</a> </span> </div>
         </div>
     </div>
     

backend/tracim_backend/templates/mail/created_account_body_html.mak

@@ -68,10 +68,9 @@
         </div>
         <div id="call-to-action-container">
 
-            ${_('To go to {website_title}, please click on following link'.format(
+            ${_('To go to {website_title}, please click on following link :'.format(
                 website_title=config.WEBSITE_TITLE
             ))}
-
             <span style="">
                 <a href="${login_url}" id='call-to-action-button'>${login_url}</a>
             </span>

backend/tracim_backend/tests/library/test_webdav.py

@@ -29,6 +29,7 @@ class TestWebdavFactory(StandardTest):
         :return:
         """
         tracim_settings = {
+            'website.base_url': 'http://localhost:6543',
             'sqlalchemy.url': 'sqlite:///:memory:',
             'user.auth_token.validity': '604800',
             'depot_storage_dir': '/tmp/test/depot',

backend/tracim_backend/views/core_api/schemas.py

@@ -48,7 +48,7 @@ class UserDigestSchema(marshmallow.Schema):
     user_id = marshmallow.fields.Int(dump_only=True, example=3)
     avatar_url = marshmallow.fields.Url(
         allow_none=True,
-        example="/api/v2/assets/avatars/suri-cate.jpg",
+        example="/api/v2/asset/avatars/suri-cate.jpg",
         description="avatar_url is the url to the image file. "
                     "If no avatar, then set it to null "
                     "(and frontend will interpret this with a default avatar)",

backend/tracim_backend/views/core_api/user_controller.py

@@ -39,7 +39,6 @@ from tracim_backend.models.contents import CONTENT_TYPES
 SWAGGER_TAG__USER_ENDPOINTS = 'Users'
 
 
-
 class UserController(Controller):
 
     @hapic.with_api_doc(tags=[SWAGGER_TAG__USER_ENDPOINTS])

backend/tracim_backend/views/frontend.py

@@ -0,0 +1,67 @@
+import os
+
+from pyramid.renderers import render_to_response
+from pyramid.config import Configurator
+from tracim_backend.exceptions import PageNotFound
+from tracim_backend.models.applications import applications
+from tracim_backend.views import BASE_API_V2
+from tracim_backend.lib.utils.request import TracimRequest
+from tracim_backend.views.controllers import Controller
+import spectra
+
+INDEX_PAGE_NAME = 'index.mak'
+APP_FRONTEND_PATH = 'app/{minislug}.app.js'
+
+
+class FrontendController(Controller):
+
+    def __init__(self, dist_folder_path: str):
+        self.dist_folder_path = dist_folder_path
+
+    def _get_index_file_path(self):
+        index_file_path = os.path.join(self.dist_folder_path, INDEX_PAGE_NAME)
+        if not os.path.exists(index_file_path):
+            raise FileNotFoundError()
+        return index_file_path
+
+    def not_found_view(self, context, request: TracimRequest):
+
+        if request.path.startswith(BASE_API_V2):
+            raise PageNotFound('{} is not a valid path'.format(request.path)) from context  # nopep8
+        return self.index(context, request)
+
+    def index(self, context, request: TracimRequest):
+        app_config = request.registry.settings['CFG']
+        # TODO - G.M - 2018-08-07 - Refactor autogen valid app list for frontend
+        frontend_apps = []
+        for app in applications:
+            app_frontend_path = APP_FRONTEND_PATH.replace('{minislug}',
+                                                          app.minislug)  # nopep8
+            app_path = os.path.join(self.dist_folder_path,
+                                    app_frontend_path)  # nopep8
+            if os.path.exists(app_path):
+                frontend_apps.append(app)
+        return render_to_response(
+            self._get_index_file_path(),
+            {
+                'colors': {
+                    'primary': spectra.html('#7d4e24'),
+                },
+                'applications': frontend_apps,
+            }
+        )
+
+    def bind(self, configurator: Configurator) -> None:
+
+        configurator.add_notfound_view(self.not_found_view)
+        # index.html for /index.html and /
+        configurator.add_route('root', '/', request_method='GET')
+        configurator.add_view(self.index, route_name='root')
+        configurator.add_route('index', INDEX_PAGE_NAME, request_method='GET')
+        configurator.add_view(self.index, route_name='index')
+
+        for dirname in os.listdir(self.dist_folder_path):
+            configurator.add_static_view(
+                name=dirname,
+                path=os.path.join(self.dist_folder_path, dirname)
+            )

frontend/dist/index.html

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <title>Tracim</title>
-    <link rel='shortcut icon' type='image/x-icon' href='/asset/favicon.ico' >
-
-    <link rel="stylesheet" type="text/css" href="/asset/font/font-awesome-4.7.0/css/font-awesome.css">
-    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
-    <!--
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
-    -->
-    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
-    <link rel="stylesheet" type="text/css" href="/asset/bootstrap/bootstrap-4.0.0-beta.css">
-
-    <style>
-      /* code bellow will be generated by backend */
-      .primaryColorFont { color: #7d4e24; }
-      .primaryColorFontDarken { color: #572800; }
-      .primaryColorFontLighten { color: #a3744a; }
-
-      .primaryColorFontHover:hover { color: #7d4e24; }
-      .primaryColorFontDarkenHover:hover { color: #572800; }
-      .primaryColorFontLightenHover:hover { color: #a3744a; }
-
-      .primaryColorBg { background-color: #7d4e24; }
-      .primaryColorBgDarken { background-color: #572800; }
-      .primaryColorBgLighten { background-color: #a3744a; }
-
-      .primaryColorBgHover:hover { background-color: #7d4e24; }
-      .primaryColorBgDarkenHover:hover { background-color: #572800; }
-      .primaryColorBgLightenHover:hover { background-color: #a3744a; }
-
-      .primaryColorBorder { border-color: #7d4e24; }
-      .primaryColorBorderDarken { border-color: #572800; }
-      .primaryColorBorderLighten { border-color: #a3744a; }
-
-      .primaryColorBorderHover:hover { border-color: #7d4e24; }
-      .primaryColorBorderDarkenHover:hover { border-color: #572800; }
-      .primaryColorBorderLightenHover:hover { border-color: #a3744a; }
-
-    </style>
-  </head>
-
-  <body>
-    <div id='content'></div>
-
-    <script type='text/javascript' src='/asset/tracim.vendor.bundle.js'></script>
-    <script type='text/javascript' src='/asset/tracim.app.entry.js'></script>
-
-    <script type='text/javascript' src='/app/workspace.app.js'></script>
-    <script type='text/javascript' src='/app/html-document.app.js'></script>
-    <script type='text/javascript' src='/app/thread.app.js'></script>
-    <!-- <script type='text/javascript' src='/app/file.app.js'></script> -->
-    <script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
-
-    <script type='text/javascript' src='/asset/bootstrap/jquery-3.2.1.js'></script>
-    <script type='text/javascript' src='/asset/bootstrap/popper-1.12.3.js'></script>
-    <script type='text/javascript' src='/asset/bootstrap/bootstrap-4.0.0-beta.2.js'></script>
-
-    <script type='text/javascript' src='/asset/tinymce/js/tinymce/jquery.tinymce.min.js'></script>
-    <script type='text/javascript' src='/asset/tinymce/js/tinymce/tinymce.min.js'></script>
-
-    <script type='text/javascript' src='/asset/tracim/appInterface.js'></script>
-    <script type='text/javascript' src='/asset/tracim/tinymceInit.js'></script>
-  </body>
-</html>

frontend/dist/index.mak

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <title>Tracim</title>
+    <link rel='shortcut icon' type='image/x-icon' href='/asset/favicon.ico' >
+
+    <link rel="stylesheet" type="text/css" href="/asset/font/font-awesome-4.7.0/css/font-awesome.css">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
+    <!--
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+    -->
+    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
+    <link rel="stylesheet" type="text/css" href="/asset/bootstrap/bootstrap-4.0.0-beta.css">
+
+    <style>
+      <%
+        primary = colors['primary']
+        html_class = '.primaryColorFont{state}'
+        param = 'color'
+        color_change_value = 15
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+       <% html_class = '.primaryColorFont{state}Hover.hover' %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+
+      <%
+        html_class = '.primaryColorBg{state}'
+        param = 'background-color'
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      <% html_class = '.primaryColorBg{state}Hover.hover'%>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+
+      <%
+        param = 'border-color'
+        html_class = '.primaryColorBorder{state}'
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      <% html_class = '.primaryColorBorder{state}Hover.hover' %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+    </style>
+  </head>
+
+  <body>
+    <div id='content'></div>
+
+    <script type='text/javascript' src='/asset/tracim.vendor.bundle.js'></script>
+    <script type='text/javascript' src='/asset/tracim.app.entry.js'></script>
+
+    <script type='text/javascript' src='/app/workspace.app.js'></script>
+    % for app in applications:
+    <script type='text/javascript' src='/app/${app.minislug}.app.js'></script>
+    %endfor
+    <script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
+
+    <script type='text/javascript' src='/asset/bootstrap/jquery-3.2.1.js'></script>
+    <script type='text/javascript' src='/asset/bootstrap/popper-1.12.3.js'></script>
+    <script type='text/javascript' src='/asset/bootstrap/bootstrap-4.0.0-beta.2.js'></script>
+
+    <script type='text/javascript' src='/asset/tinymce/js/tinymce/jquery.tinymce.min.js'></script>
+    <script type='text/javascript' src='/asset/tinymce/js/tinymce/tinymce.min.js'></script>
+
+    <script type='text/javascript' src='/asset/tracim/appInterface.js'></script>
+    <script type='text/javascript' src='/asset/tracim/tinymceInit.js'></script>
+  </body>
+</html>

frontend/src/action-creator.async.js

@@ -6,11 +6,13 @@ import {
   USER_LOGOUT,
   USER_ROLE,
   USER_CONNECTED,
+  USER_KNOWN_MEMBER_LIST,
   setUserRole,
   WORKSPACE,
   WORKSPACE_LIST,
   WORKSPACE_DETAIL,
   WORKSPACE_MEMBER_LIST,
+  WORKSPACE_MEMBER_ADD,
   FOLDER,
   setFolderData,
   APP_LIST,
@@ -148,6 +150,36 @@ export const getUserRole = user => async dispatch => {
   if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
+export const getUserKnownMember = (user, userNameToSearch) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/known_members?acp=${userNameToSearch}`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET'
+    },
+    actionName: USER_KNOWN_MEMBER_LIST,
+    dispatch
+  })
+}
+
+export const putUserWorkspaceRead = (user, idWorkspace) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/read`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'PUT'
+    },
+    actionName: USER_KNOWN_MEMBER_LIST,
+    dispatch
+  })
+}
+
 export const getWorkspaceList = user => dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces`,
@@ -238,6 +270,26 @@ export const getWorkspaceReadStatusList = (user, idWorkspace) => dispatch => {
   })
 }
 
+export const postWorkspaceMember = (user, idWorkspace, newMember) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/members`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'POST',
+      body: JSON.stringify({
+        user_id: newMember.id,
+        user_email_or_public_name: newMember.name,
+        role: newMember.role
+      })
+    },
+    actionName: WORKSPACE_MEMBER_ADD,
+    dispatch
+  })
+}
+
 export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
   const fetchGetFolderContent = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/?parent_id=${idFolder}`,
@@ -252,7 +304,6 @@ export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
 }
 
 export const getAppList = user => dispatch => {
-  console.log(user)
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/system/applications`,
     param: {
@@ -260,8 +311,7 @@ export const getAppList = user => dispatch => {
         ...FETCH_CONFIG.headers,
         'Authorization': 'Basic ' + user.auth
       },
-      method: 'GET',
-      'Authorization': 'Basic ' + user.auth
+      method: 'GET'
     },
     actionName: APP_LIST,
     dispatch

frontend/src/action-creator.sync.js

@@ -17,18 +17,20 @@ export const removeFlashMessage = msg => ({ type: `${REMOVE}/${FLASH_MESSAGE}`,
 export const USER = 'User'
 export const USER_LOGIN = `${USER}/Login`
 export const USER_LOGOUT = `${USER}/Logout`
-export const USER_DATA = `${USER}/Data`
-export const USER_ROLE = `${USER}/Role`
 export const USER_CONNECTED = `${USER}/Connected`
 export const USER_DISCONNECTED = `${USER}/Disconnected`
-export const USER_LANG = `${USER}/Lang`
 export const setUserConnected = user => ({ type: `${SET}/${USER}/Connected`, user })
 export const setUserDisconnected = () => ({ type: `${SET}/${USER}/Disconnected` })
+export const USER_DATA = `${USER}/Data`
 export const updateUserData = userData => ({ type: `${UPDATE}/${USER}/Data`, data: userData })
+export const USER_ROLE = `${USER}/Role`
 export const setUserRole = userRole => ({ type: `${SET}/${USER}/Role`, userRole }) // this actually update workspaceList state
-export const setUserLang = lang => ({ type: `${SET}/${USER}/Lang`, lang })
 export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
   ({ type: `${UPDATE}/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
+export const USER_LANG = `${USER}/Lang`
+export const setUserLang = lang => ({ type: `${SET}/${USER}/Lang`, lang })
+export const USER_KNOWN_MEMBER = `${USER}/KnownMember`
+export const USER_KNOWN_MEMBER_LIST = `${USER_KNOWN_MEMBER}/List`
 
 export const WORKSPACE = 'Workspace'
 export const WORKSPACE_CONTENT = `${WORKSPACE}/Content`
@@ -45,10 +47,13 @@ export const setWorkspaceDetail = workspaceDetail => ({ type: `${SET}/${WORKSPAC
 export const WORKSPACE_MEMBER = `${WORKSPACE}/Member`
 export const WORKSPACE_MEMBER_LIST = `${WORKSPACE_MEMBER}/List`
 export const setWorkspaceMemberList = workspaceMemberList => ({ type: `${SET}/${WORKSPACE_MEMBER_LIST}`, workspaceMemberList })
+export const WORKSPACE_MEMBER_ADD = `${WORKSPACE_MEMBER}/${ADD}`
 
 export const WORKSPACE_RECENT_ACTIVITY = `${WORKSPACE}/RecentActivity/List`
 export const WORKSPACE_RECENT_ACTIVITY_LIST = `${WORKSPACE_RECENT_ACTIVITY}/List`
 export const setWorkspaceRecentActivityList = workspaceRecentActivityList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_LIST}`, workspaceRecentActivityList })
+export const WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST = `${WORKSPACE_RECENT_ACTIVITY}/ForUser/List`
+export const setWorkspaceRecentActivityForUserList = workspaceRecentActivityForUserList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`, workspaceRecentActivityForUserList })
 
 export const WORKSPACE_READ_STATUS = `${WORKSPACE}/ReadStatus`
 export const WORKSPACE_READ_STATUS_LIST = `${WORKSPACE_READ_STATUS}/List`

frontend/src/component/Dashboard/ContentTypeBtn.styl

@@ -1,8 +1,10 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 .contentTypeBtn
   display flex
   flex-direction column
   justify-content center
-  margin 0 15px
+  margin 15px
   border-radius 10px
   padding 15px
   width 230px

frontend/src/component/Dashboard/MemberList.jsx

@@ -1,16 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Checkbox } from 'tracim_frontend_lib'
+// import { Checkbox } from 'tracim_frontend_lib'
 
 require('./MemberList.styl')
 
 export class MemberList extends React.Component {
   constructor (props) {
     super(props)
-
     this.state = {
-      displayNewMemberList: true,
-      createAccountCheckbox: false
+      displayNewMemberList: true
     }
   }
 
@@ -21,7 +19,12 @@ export class MemberList extends React.Component {
   handleClickCheckboxCreateAccount = e => {
     e.preventDefault()
     e.stopPropagation()
-    this.setState(prev => ({createAccountCheckbox: !prev.createAccountCheckbox}))
+    this.props.onChangeCreateAccount(!this.props.createAccount)
+  }
+
+  handleClickBtnValidate = () => {
+    this.props.onClickValidateNewMember()
+    this.setState({displayNewMemberList: true})
   }
 
   render () {
@@ -40,7 +43,7 @@ export class MemberList extends React.Component {
               <div>
                 <ul className='memberlist__list'>
                   {props.memberList.map(m =>
-                    <li className='memberlist__list__item primaryColorBgLightenHover' key={m.id}>
+                    <li className='memberlist__list__item' key={m.id}>
                       <div className='memberlist__list__item__avatar'>
                         {m.avatarUrl ? <img src={m.avatarUrl} /> : <img src='NYI' />}
                       </div>
@@ -78,7 +81,7 @@ export class MemberList extends React.Component {
               </div>
             )
             : (
-              <form className='memberlist__form'>
+              <div className='memberlist__form'>
                 <div className='memberlist__form__close d-flex justify-content-end'>
                   <i className='fa fa-times' onClick={this.handleClickCloseAddMemberBtn} />
                 </div>
@@ -94,10 +97,34 @@ export class MemberList extends React.Component {
                       className='name__input form-control'
                       id='addmember'
                       placeholder='Nom ou Email'
-                      onChange={props.onChangeName}
+                      value={props.nameOrEmail}
+                      onChange={e => props.onChangeNameOrEmail(e.target.value)}
+                      autoComplete='off'
                     />
+
+                    {props.searchedKnownMemberList.length > 0 &&
+                      <div className='autocomplete primaryColorBorder'>
+                        {props.searchedKnownMemberList.filter((u, i) => i < 5).map(u => // only displays the first 5
+                          <div
+                            className='autocomplete__item primaryColorBgHover'
+                            onClick={() => props.onClickKnownMember(u)}
+                            key={u.user_id}
+                          >
+                            <div className='autocomplete__item__avatar primaryColorBorder'>
+                              <img src={u.avatar_url} />
+                            </div>
+
+                            <div className='autocomplete__item__name'>
+                              {u.public_name}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    }
                   </div>
 
+                  {/*
+                  // @TODO validate with DA that this checkbox is useless since the backend handle everything
                   <div className='memberlist__form__member__create'>
                     <div className='memberlist__form__member__create__checkbox mr-3'>
                       <Checkbox
@@ -111,6 +138,7 @@ export class MemberList extends React.Component {
                       {props.t('Create an account')}
                     </div>
                   </div>
+                  */}
                 </div>
 
                 <div className='memberlist__form__role'>
@@ -120,20 +148,29 @@ export class MemberList extends React.Component {
 
                   <ul className='memberlist__form__role__list'>
                     {props.roleList.map(r =>
-                      <li className='memberlist__form__role__list__item' key={r.slug}>
-                        <div className='item__radiobtn mr-3'>
-                          <input type='radio' name='role' value={r.slug} />
-                        </div>
-
-                        <div className='item__text'>
-                          <div className='item_text_icon mr-2' style={{color: r.hexcolor}}>
-                            <i className={`fa fa-${r.faIcon}`} />
+                      <li key={r.slug}>
+                        <label className='memberlist__form__role__list__item' htmlFor={r.slug}>
+                          <div className='item__radiobtn mr-3'>
+                            <input
+                              id={r.slug}
+                              type='radio'
+                              name='role'
+                              value={r.slug}
+                              checked={r.slug === props.role}
+                              onChange={() => props.onChangeRole(r.slug)}
+                            />
                           </div>
 
-                          <div className='item__text__name'>
-                            {r.label}
+                          <div className='item__text'>
+                            <div className='item__text__icon mr-2' style={{color: r.hexcolor}}>
+                              <i className={`fa fa-${r.faIcon}`} />
+                            </div>
+
+                            <div className='item__text__name'>
+                              {r.label}
+                            </div>
                           </div>
-                        </div>
+                        </label>
                       </li>
                     )}
 
@@ -141,11 +178,11 @@ export class MemberList extends React.Component {
                 </div>
 
                 <div className='memberlist__form__submitbtn'>
-                  <button className='btn btn-outline-primary'>
+                  <button className='btn btn-outline-primary' onClick={this.handleClickBtnValidate}>
                     {props.t('Validate')}
                   </button>
                 </div>
-              </form>
+              </div>
             )
           }
         </div>

frontend/src/component/Dashboard/MemberList.styl

@@ -1,3 +1,5 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 .memberlist
   margin 0 0 50px 0
   width 35%
@@ -76,11 +78,38 @@
         cursor pointer
     &__member
       &__name
+        position relative
+        margin 0 0 20px 0
         .name__label
           margin 30px 0 20px 0
           label()
+        .autocomplete
+          position absolute
+          min-width 300px
+          background-color off-white
+          border-radius 10px
+          border-width 1px
+          border-style solid
+          &__item
+            display flex
+            align-items center
+            cursor pointer
+            padding 5px 8px
+            &:first-child
+              border-top-left-radius 10px
+              border-top-right-radius 10px
+            &:last-child
+              border-bottom-left-radius 10px
+              border-bottom-right-radius 10px
+            &__avatar
+              width 45px
+              height 45px
+              border-radius 50%
+              border-width 1px
+              border-style solid
+            &__name
+              margin-left 15px
       .name__input
-        margin-bottom 20px
         border 1px solid grey
         border-radius 10px
         padding 10px
@@ -106,6 +135,7 @@
           display flex
           align-items center
           margin 10px 25px 10px 0
+          cursor pointer
           .item
             &__text
               display flex
@@ -115,3 +145,28 @@
       & > button
         padding 8px 30px
         cursor pointer
+
+@media (min-width min-sm) and (max-width: max-lg)
+  .memberlist
+    width 50%
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .memberlist
+    margin 50px 0
+    width 90%
+
+@media (max-width: max-xs)
+  .memberlist
+    margin 50px 0
+    width 100%
+    &__title
+      margin-left 10px
+    &__wrapper
+      height auto
+    &__list
+      height auto
+      overflow-Y visible
+      &__item:nth-last-child(1)
+        border-bottom 1px solid grey
+    &__btnadd
+      border-top 0

frontend/src/component/Dashboard/MoreInfo.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+require('./MoreInfo.styl')
+
+export const MoreInfo = props =>
+  <div className='moreinfo'>
+    <div className='moreinfo__webdav genericBtnInfoDashboard'>
+      <div
+        className='moreinfo__webdav__btn genericBtnInfoDashboard__btn'
+        onClick={props.onClickToggleWebdav}
+      >
+        <div className='moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
+          <i className='fa fa-windows' />
+        </div>
+
+        <div className='moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
+          {props.t('Implement Tracim in your explorer')}
+        </div>
+      </div>
+
+      {props.displayWebdavBtn === true &&
+      <div className='moreinfo__webdav__information genericBtnInfoDashboard__info'>
+        <div className='moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
+          {props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
+        </div>
+
+        <div className='moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+          http://algoo.trac.im/webdav/
+        </div>
+      </div>
+      }
+    </div>
+
+    <div className='moreinfo__calendar genericBtnInfoDashboard'>
+      <div className='moreinfo__calendar__wrapperBtn'>
+        <div
+          className='moreinfo__calendar__btn genericBtnInfoDashboard__btn'
+          onClick={props.onClickToggleCalendar}
+        >
+          <div className='moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
+            <i className='fa fa-calendar' />
+          </div>
+
+          <div className='moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
+            {props.t('Workspace Calendar')}
+          </div>
+        </div>
+      </div>
+
+      <div className='moreinfo__calendar__wrapperText'>
+        {props.displayCalendarBtn === true &&
+        <div className='moreinfo__calendar__information genericBtnInfoDashboard__info'>
+          <div className='moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
+            {props.t('Each workspace has its own calendar.')}
+          </div>
+
+          <div className='moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+            http://algoo.trac.im/calendar/
+          </div>
+        </div>
+        }
+      </div>
+    </div>
+  </div>
+
+export default MoreInfo

frontend/src/component/Dashboard/MoreInfo.styl

@@ -0,0 +1,29 @@
+.moreinfo
+  display flex
+  justify-content space-between
+  flexwrap wrap
+  &__webdav
+    margin 0 15px 40px 0
+    &__btn
+      width 300px
+    &__information
+      width 300px
+  &__calendar
+    margin-bottom 100px
+    &__wrapperBtn
+      margin-right 290px
+    &__btn
+      width 300px
+    &__information
+      width 300px
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .moreinfo__webdav__information
+    width 500px
+
+@media (max-width: max-xs)
+  .moreinfo
+    &__webdav
+      margin-left 10px
+      &__information
+        width 350px

frontend/src/component/Dashboard/RecentActivity.jsx

@@ -2,36 +2,45 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+require('./RecentActivity.styl')
+
 export const RecentActivity = props =>
-  <div className={props.customClass}>
-    <div className={`${props.customClass}__header`}>
-      <div className={classnames(`${props.customClass}__header__title`, 'subTitle')}>
+  <div className='activity'>
+    <div className='activity__header'>
+      <div className={classnames('activity__header__title', 'subTitle')}>
         {props.t('Recent activity')}
       </div>
 
-      <div className={classnames(`${props.customClass}__header__allread`, 'btn btn-outline-primary')}>
+      <div
+        className={classnames('activity__header__allread', 'btn btn-outline-primary')}
+        onClick={props.onClickEverythingAsRead}
+      >
         {props.t('Mark everything as read')}
       </div>
     </div>
 
-    <div className={`${props.customClass}__wrapper`}>
+    <div className='activity__wrapper'>
       {props.recentActivityFilteredForUser.map(content => {
         const contentType = props.contentTypeList.find(ct => ct.slug === content.type)
         return (
-          <div className={`${props.customClass}__workspace`} key={content.id}>
-            <div className={`${props.customClass}__workspace__icon`} style={{color: contentType.hexcolor}}>
+          <div
+            className='activity__workspace'
+            onClick={() => props.onClickRecentContent(content.id, content.type)}
+            key={content.id}
+          >
+            <div className='activity__workspace__icon' style={{color: contentType.hexcolor}}>
               <i className={`fa fa-${contentType.faIcon}`} />
             </div>
-            <div className={`${props.customClass}__workspace__name`}>
+            <div className='activity__workspace__name'>
               {content.label}
             </div>
           </div>
         )
       })}
 
-      <div className={classnames(`${props.customClass}__more`, 'd-flex flex-row-reverse')}>
+      <div className={classnames('activity__more', 'd-flex flex-row-reverse')}>
         <div
-          className={classnames(`${props.customClass}__more__btn`, 'btn btn-outline-primary')}
+          className={classnames('activity__more__btn', 'btn btn-outline-primary')}
           onClick={props.onClickSeeMore}
         >
           {props.t('See more')}

frontend/src/component/Dashboard/RecentActivity.styl

@@ -0,0 +1,67 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.activity
+  margin 0 35px 50px 0
+  width 60%
+  &__wrapper
+    border 1px solid grey
+    height 480px
+    overflow-y scroll
+  &__header
+    display flex
+    justify-content space-between
+    align-items center
+    margin-bottom 20px
+    height 44px
+    &__allread
+      padding 10px 25px
+      font-size 18px
+      cursor pointer
+  &__workspace
+    display flex
+    align-items center
+    border-bottom 1px solid grey
+    padding 15px
+    cursor pointer
+    &:hover
+      background-color fourthColor
+    &:nth-child(even)
+      background-color grey-hover
+      &:hover
+        background-color fourthColor
+    &__icon
+      margin 0 25px
+      font-size 25px
+    &__name
+      font-size 18px
+      font-weight 500
+      span
+        font-weight 400
+  &__more
+    &__btn
+      margin 15px
+      padding 10px 25px
+      cursor pointer
+
+@media (min-width min-sm) and (max-width: max-lg)
+  .activity
+    width 100%
+
+@media (min-width: min-md) and (max-width: max-md)
+  .activity
+    margin 25px 15px 25px 0
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .activity
+    margin 25px 15px 25px 0
+
+@media (max-width: max-xs)
+  .activity
+    margin 25px 0
+    width 100%
+    &__header
+      display block
+      height auto
+      margin 0 15px 20px 15px
+      &__title
+        margin-bottom 20px

frontend/src/component/Dashboard/UserStatus.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {ROLE} from '../../helper.js'
+
+require('./UserStatus.styl')
+
+// @TODO Côme - 2018/08/07 - since api yet doesn't handle notification subscriptions, this file is WIP
+export const UserStatus = props =>
+  <div className='userstatus'>
+    <div className='userstatus__role'>
+      <div className='userstatus__role__msg'>
+        {props.t('Hi {{name}} ! Currently, you are ', {name: props.user.public_name})}
+      </div>
+
+      {(() => {
+        const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
+        if (myself === undefined) return
+
+        const myRole = ROLE.find(r => r.slug === myself.role)
+
+        return (
+          <div className='userstatus__role__definition'>
+            <div className='userstatus__role__definition__icon'>
+              <i className={`fa fa-${myRole.faIcon}`} />
+            </div>
+
+            <div className='userstatus__role__definition__text'>
+              {myRole.label}
+            </div>
+          </div>
+        )
+      })()}
+    </div>
+
+    <div className='userstatus__notification'>
+      <div className='userstatus__notification__text'>
+        {props.t("You have subscribed to this workspace's notifications")} (NYI)
+      </div>
+
+      {props.displayNotifBtn
+        ? (
+          <div className='userstatus__notification__subscribe dropdown'>
+            <button
+              className='userstatus__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
+              type='button'
+              id='dropdownMenuButton'
+              data-toggle='dropdown'
+              aria-haspopup='true'
+              aria-expanded='false'
+            >
+              {props.t('subscribed')}
+            </button>
+
+            <div className='userstatus__notification__subscribe__submenu dropdown-menu'>
+              <div className='userstatus__notification__subscribe__submenu__item dropdown-item'>
+                {props.t('subscriber')}
+              </div>
+              <div className='userstatus__notification__subscribe__submenu__item dropdown-item dropdown-item'>
+                {props.t('unsubscribed')}
+              </div>
+            </div>
+          </div>
+        )
+        : (
+          <div
+            className='userstatus__notification__btn btn btn-outline-primary'
+            onClick={props.onClickToggleNotifBtn}
+          >
+            {props.t('Change your status')}
+          </div>
+        )
+      }
+    </div>
+  </div>
+
+export default UserStatus

frontend/src/component/Dashboard/UserStatus.styl

@@ -0,0 +1,30 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.userstatus
+  width 35%
+  &__role
+    margin 20px 0
+    font-size 18px
+    &__msg
+      margin-right 15px
+    &__definition
+      display flex
+      &__icon
+        margin-right 15px
+        color gestionnaire
+  &__notification
+    font-size 18px
+    &__btn
+      margin 20px 0
+      border 1px solid thirdColor
+      padding 10px 15px
+      cursor pointer
+    &__subscribe
+      &__btn
+        margin 20px 0
+        border 1px solid thirdColor
+        padding 10px 15px
+      &__submenu
+        padding 0
+        &__item
+          padding 10px

frontend/src/container/Dashboard.jsx

@@ -10,25 +10,39 @@ import {
   getWorkspaceDetail,
   getWorkspaceMemberList,
   getWorkspaceRecentActivityList,
-  getWorkspaceReadStatusList
+  getWorkspaceReadStatusList,
+  getUserKnownMember,
+  postWorkspaceMember,
+  putUserWorkspaceRead
 } from '../action-creator.async.js'
 import {
   newFlashMessage,
   setWorkspaceDetail,
   setWorkspaceMemberList,
   setWorkspaceRecentActivityList,
+  setWorkspaceRecentActivityForUserList,
   setWorkspaceReadStatusList
 } from '../action-creator.sync.js'
-import { ROLE } from '../helper.js'
+import { ROLE, PAGE } from '../helper.js'
+import UserStatus from '../component/Dashboard/UserStatus.jsx'
 import ContentTypeBtn from '../component/Dashboard/ContentTypeBtn.jsx'
 import RecentActivity from '../component/Dashboard/RecentActivity.jsx'
 import MemberList from '../component/Dashboard/MemberList.jsx'
+import MoreInfo from '../component/Dashboard/MoreInfo.jsx'
 
 class Dashboard extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
       workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
+      newMember: {
+        id: '',
+        avatarUrl: '',
+        nameOrEmail: '',
+        // createAccount: false, // @TODO ask DA about this checkbox if it is still usefull (since backend handles it all)
+        role: ''
+      },
+      searchedKnownMemberList: [],
       displayNewMemberDashboard: false,
       displayNotifBtn: false,
       displayWebdavBtn: false,
@@ -41,52 +55,126 @@ class Dashboard extends React.Component {
 
     const fetchWorkspaceDetail = await props.dispatch(getWorkspaceDetail(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceDetail.status) {
-      case 200:
-        props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching workspace detail'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('workspace detail')}`, 'warning')); break
     }
+    this.loadMemberList()
+    this.loadRecentActivity()
+  }
+
+  loadMemberList = async () => {
+    const { props, state } = this
 
     const fetchWorkspaceMemberList = await props.dispatch(getWorkspaceMemberList(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceMemberList.status) {
-      case 200:
-        props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching member list'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('member list')}`, 'warning')); break
     }
+  }
+
+  loadRecentActivity = async () => {
+    const { props, state } = this
 
     const fetchWorkspaceRecentActivityList = await props.dispatch(getWorkspaceRecentActivityList(props.user, state.workspaceIdInUrl))
+    const fetchWorkspaceReadStatusList = await props.dispatch(getWorkspaceReadStatusList(props.user, state.workspaceIdInUrl))
+
     switch (fetchWorkspaceRecentActivityList.status) {
-      case 200:
-        props.dispatch(setWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching recent activity list'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('recent activity list')}`, 'warning')); break
     }
 
-    const fetchWorkspaceReadStatusList = await props.dispatch(getWorkspaceReadStatusList(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceReadStatusList.status) {
+      case 200: props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('read status list')}`, 'warning')); break
+    }
+
+    const readStatusForUserList = fetchWorkspaceReadStatusList.json.filter(c => c.read_by_user).map(c => c.content_id)
+    const recentActivityForUserList = fetchWorkspaceRecentActivityList.json.filter(content => !readStatusForUserList.includes(content.content_id))
+
+    props.dispatch(setWorkspaceRecentActivityForUserList(recentActivityForUserList))
+  }
+
+  handleToggleNewMemberDashboard = () => this.setState(prevState => ({displayNewMemberDashboard: !prevState.displayNewMemberDashboard}))
+
+  handleToggleNotifBtn = () => this.setState(prevState => ({displayNotifBtn: !prevState.displayNotifBtn}))
+
+  handleToggleWebdavBtn = () => this.setState(prevState => ({displayWebdavBtn: !prevState.displayWebdavBtn}))
+
+  handleToggleCalendarBtn = () => this.setState(prevState => ({displayCalendarBtn: !prevState.displayCalendarBtn}))
+
+  handleClickRecentContent = (idContent, typeContent) => this.props.history.push(PAGE.WORKSPACE.CONTENT(this.props.curWs.id, typeContent, idContent))
+
+  handleClickMarkRecentActivityAsRead = async () => {
+    const { props } = this
+    const fetchUserWorkspaceAllRead = await props.dispatch(putUserWorkspaceRead(props.user, props.curWs.id))
+    switch (fetchUserWorkspaceAllRead.status) {
+      case 204: this.loadRecentActivity(); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching "mark all as read"')}`, 'warning')); break
+    }
+  }
+
+  handleClickSeeMore = async () => {
+    console.log('nyi')
+  }
+
+  handleSearchUser = async userNameToSearch => {
+    const { props } = this
+    const fetchUserKnownMemberList = await props.dispatch(getUserKnownMember(props.user, userNameToSearch))
+    switch (fetchUserKnownMemberList.status) {
       case 200:
-        props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
+        this.setState({searchedKnownMemberList: fetchUserKnownMemberList.json}); break
       default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching read status list'), 'warning')); break
+        props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('known members list')}`, 'warning')); break
     }
   }
 
-  handleToggleNewMemberDashboard = () => this.setState(prevState => ({
-    displayNewMemberDashboard: !prevState.displayNewMemberDashboard
-  }))
+  handleChangeNewMemberNameOrEmail = newNameOrEmail => {
+    if (newNameOrEmail.length >= 2) this.handleSearchUser(newNameOrEmail)
+    this.setState(prev => ({newMember: {...prev.newMember, nameOrEmail: newNameOrEmail}}))
+  }
+
+  handleClickKnownMember = knownMember => {
+    this.setState(prev => ({
+      newMember: {
+        ...prev.newMember,
+        id: knownMember.user_id,
+        nameOrEmail: knownMember.public_name,
+        avatarUrl: knownMember.avatar_url
+      },
+      searchedKnownMemberList: []
+    }))
+  }
+
+  // handleChangeNewMemberCreateAccount = newCreateAccount => this.setState(prev => ({newMember: {...prev.newMember, createAccount: newCreateAccount}}))
+
+  handleChangeNewMemberRole = newRole => this.setState(prev => ({newMember: {...prev.newMember, role: newRole}}))
+
+  handleClickValidateNewMember = async () => {
+    const { props, state } = this
+
+    if (state.newMember.nameOrEmail === '') {
+      props.dispatch(newFlashMessage(props.t('Please set a name or email'), 'warning'))
+      return
+    }
 
-  handleToggleNotifBtn = () => this.setState(prevState => ({
-    displayNotifBtn: !prevState.displayNotifBtn
-  }))
+    if (state.newMember.role === '') {
+      props.dispatch(newFlashMessage(props.t('Please set a role'), 'warning'))
+      return
+    }
 
-  handleToggleWebdavBtn = () => this.setState(prevState => ({
-    displayWebdavBtn: !prevState.displayWebdavBtn
-  }))
+    const fetchWorkspaceNewMember = await props.dispatch(postWorkspaceMember(props.user, props.curWs.id, {
+      id: state.newMember.id,
+      name: state.newMember.nameOrEmail,
+      role: state.newMember.role
+    }))
 
-  handleToggleCalendarBtn = () => this.setState(prevState => ({
-    displayCalendarBtn: !prevState.displayCalendarBtn
-  }))
+    switch (fetchWorkspaceNewMember.status) {
+      case 200:
+        this.loadMemberList(); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened while adding the member'), 'warning')); break
+    }
+  }
 
   render () {
     const { props, state } = this
@@ -118,72 +206,13 @@ class Dashboard extends React.Component {
                 </div>
               </div>
 
-              <div className='dashboard__userstatut'>
-                <div className='dashboard__userstatut__role'>
-                  <div className='dashboard__userstatut__role__msg'>
-                    {props.t('Hi {{name}} ! Currently, you are ', {name: props.user.public_name})}
-                  </div>
-
-                  {(() => {
-                    const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
-                    if (myself === undefined) return
-
-                    const myRole = ROLE.find(r => r.slug === myself.role)
-
-                    return (
-                      <div className='dashboard__userstatut__role__definition'>
-                        <div className='dashboard__userstatut__role__definition__icon'>
-                          <i className={`fa fa-${myRole.faIcon}`} />
-                        </div>
-
-                        <div className='dashboard__userstatut__role__definition__text'>
-                          {myRole.label}
-                        </div>
-                      </div>
-                    )
-                  })()}
-                </div>
-
-                <div className='dashboard__userstatut__notification'>
-                  <div className='dashboard__userstatut__notification__text'>
-                    {props.t("You have subscribed to this workspace's notifications")} (nyi)
-                  </div>
-
-                  {state.displayNotifBtn
-                    ? (
-                      <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                        <button
-                          className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
-                          type='button'
-                          id='dropdownMenuButton'
-                          data-toggle='dropdown'
-                          aria-haspopup='true'
-                          aria-expanded='false'
-                        >
-                          {props.t('subscriber')}
-                        </button>
-
-                        <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
-                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
-                            {props.t('subscriber')}
-                          </div>
-                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
-                            {props.t('unsubscribed')}
-                          </div>
-                        </div>
-                      </div>
-                    )
-                    : (
-                      <div
-                        className='dashboard__userstatut__notification__btn btn btn-outline-primary'
-                        onClick={this.handleToggleNotifBtn}
-                      >
-                        {props.t('Change your status')}
-                      </div>
-                    )
-                  }
-                </div>
-              </div>
+              <UserStatus
+                user={props.user}
+                curWs={props.curWs}
+                displayNotifBtn={state.displayNotifBtn}
+                onClickToggleNotifBtn={this.handleToggleNotifBtn}
+                t={props.t}
+              />
             </div>
 
             <div className='dashboard__calltoaction justify-content-xl-center'>
@@ -202,9 +231,11 @@ class Dashboard extends React.Component {
             <div className='dashboard__workspaceInfo'>
               <RecentActivity
                 customClass='dashboard__activity'
-                recentActivityFilteredForUser={props.curWs.recentActivityList.filter(content => !props.curWs.contentReadStatusList.includes(content.id))}
+                recentActivityFilteredForUser={props.curWs.recentActivityForUserList}
                 contentTypeList={props.contentType}
-                onClickSeeMore={() => {}}
+                onClickRecentContent={this.handleClickRecentContent}
+                onClickEverythingAsRead={this.handleClickMarkRecentActivityAsRead}
+                onClickSeeMore={this.handleClickSeeMore}
                 t={props.t}
               />
 
@@ -212,70 +243,26 @@ class Dashboard extends React.Component {
                 customClass='dashboard__memberlist'
                 memberList={props.curWs.memberList}
                 roleList={ROLE}
+                searchedKnownMemberList={state.searchedKnownMemberList}
+                nameOrEmail={state.newMember.nameOrEmail}
+                onChangeNameOrEmail={this.handleChangeNewMemberNameOrEmail}
+                onClickKnownMember={this.handleClickKnownMember}
+                // createAccount={state.newMember.createAccount}
+                // onChangeCreateAccount={this.handleChangeNewMemberCreateAccount}
+                role={state.newMember.role}
+                onChangeRole={this.handleChangeNewMemberRole}
+                onClickValidateNewMember={this.handleClickValidateNewMember}
                 t={props.t}
               />
             </div>
 
-            <div className='dashboard__moreinfo'>
-              <div className='dashboard__moreinfo__webdav genericBtnInfoDashboard'>
-                <div
-                  className='dashboard__moreinfo__webdav__btn genericBtnInfoDashboard__btn'
-                  onClick={this.handleToggleWebdavBtn}
-                >
-                  <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
-                    <i className='fa fa-windows' />
-                  </div>
-
-                  <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
-                    {this.props.t('Implement Tracim in your explorer')}
-                  </div>
-                </div>
-                {this.state.displayWebdavBtn === true &&
-                <div>
-                  <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
-                    <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
-                      {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
-                    </div>
-
-                    <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
-                      http://algoo.trac.im/webdav/
-                    </div>
-                  </div>
-                </div>
-                }
-              </div>
-              <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
-                <div className='dashboard__moreinfo__calendar__wrapperBtn'>
-                  <div
-                    className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'
-                    onClick={this.handleToggleCalendarBtn}
-                  >
-                    <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
-                      <i className='fa fa-calendar' />
-                    </div>
-
-                    <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
-                      {this.props.t('Workspace Calendar')}
-                    </div>
-                  </div>
-                </div>
-                <div className='dashboard__moreinfo__calendar__wrapperText'>
-                  {this.state.displayCalendarBtn === true &&
-                  <div>
-                    <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
-                      <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
-                        {this.props.t('Each workspace has its own calendar.')}
-                      </div>
-
-                      <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
-                        http://algoo.trac.im/calendar/
-                      </div>
-                    </div>
-                  </div>
-                  }
-                </div>
-              </div>
-            </div>
+            <MoreInfo
+              onClickToggleWebdav={this.handleToggleWebdavBtn}
+              displayWebdavBtn={state.displayWebdavBtn}
+              onClickToggleCalendar={this.handleToggleCalendarBtn}
+              displayCalendarBtn={state.displayCalendarBtn}
+              t={props.t}
+            />
           </PageContent>
         </PageWrapper>
       </div>

frontend/src/css/Dashboard.styl

@@ -1,35 +1,9 @@
+@import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 flexwrap()
   display flex
   flex-wrap wrap
 
-btnNotification()
-  margin 20px 0
-  border 1px solid thirdColor
-  padding 10px 15px
-
-hoverfocus()
-  background-color thirdColor
-  color white
-
-bgandcolor()
-  background-color transparent
-  color thirdColor
-
-label()
-  font-weight 500
-  font-size 18px
-  color thirdColor
-
-coloricon()
-  .fa-gavel
-    color responsable
-  .fa-graduation-cap
-    color gestionnaire
-  .fa-pencil
-    color contributeur
-  .fa-eye
-    color lecteur
-
 .dashboard
   width 100%
   &__header
@@ -55,30 +29,6 @@ coloricon()
     &__detail
       margin-bottom 20px
       font-size 18px
-  &__userstatut
-    width 35%
-    &__role
-      margin 20px 0
-      font-size 18px
-      &__msg
-        margin-right 15px
-      &__definition
-        display flex
-        &__icon
-          margin-right 15px
-          color gestionnaire
-    &__notification
-      font-size 18px
-      &__btn
-        btnNotification()
-        cursor pointer
-      &__subscribe
-        &__btn
-          btnNotification()
-        &__submenu
-          padding 0
-          &__item
-            padding 10px
   &__calltoaction
     flexwrap()
     margin 100px 0
@@ -93,66 +43,6 @@ coloricon()
           font-size 18px
   &__workspaceInfo
     flexwrap()
-  &__activity
-    margin 0 35px 50px 0
-    width 60%
-    &__wrapper
-      border 1px solid grey
-      height 480px
-      overflow-y scroll
-    &__header
-      display flex
-      justify-content space-between
-      align-items center
-      margin-bottom 20px
-      height 44px
-      &__allread
-        padding 10px 25px
-        font-size 18px
-        cursor pointer
-    &__workspace
-      display flex
-      align-items center
-      border-bottom 1px solid grey
-      padding 15px
-      cursor pointer
-      &:hover
-        background-color fourthColor
-      &:nth-child(even)
-        background-color grey-hover
-        &:hover
-          background-color fourthColor
-      &__icon
-        margin 0 25px
-        font-size 25px
-      &__name
-        font-size 18px
-        font-weight 500
-        span
-          font-weight 400
-    &__more
-      &__btn
-        margin 15px
-        padding 10px 25px
-        cursor pointer
-  &__moreinfo
-    display flex
-    justify-content space-between
-    flexwrap wrap
-    &__webdav
-      margin 0 15px 40px 0
-      &__btn
-        width 300px
-      &__information
-        width 300px
-    &__calendar
-      margin-bottom 100px
-      &__wrapperBtn
-        margin-right 290px
-      &__btn
-        width 300px
-      &__information
-        width 300px
 
 /**** MEDIAQUERIES *****/
 
@@ -169,10 +59,6 @@ coloricon()
       width auto
     &__calltoaction
       justify-content center
-    &__activity
-      width 100%
-    &__memberlist
-      width 50%
 
 /**** MEDIA 992px & 1199px ****/
 
@@ -181,14 +67,6 @@ coloricon()
   .dashboard
     margin-left 15px
 
-/**** MEDIA 768px & 991px ****/
-
-@media (min-width: min-md) and (max-width: max-md)
-
-  .dashboard
-    &__activity
-      margin 25px 15px 25px 0
-
 /**** MEDIA 576px & 767px ****/
 
 @media (min-width: min-sm) and (max-width: max-sm)
@@ -196,57 +74,22 @@ coloricon()
   .dashboard
     &__activity
       margin 25px 15px 25px 0
-    &__memberlist
-      margin 50px 0
-      width 90%
-    &__moreinfo__webdav__information
-      width 500px
 
 /**** MEDIA 575px ****/
 
 @media (max-width: max-xs)
 
-  position()
-    margin-left 10px
-    width auto
-
   .dashboard
     margin-left 0
     &__title
       margin-left 10px
     &__workspace
-      position()
+      margin-left 10px
+      width auto
     &__userstatut
-     position()
+      margin-left 10px
+      width auto
     &__calltoaction
       justify-content center
       &__button
         margin 10px
-    &__activity
-      margin 25px 0
-      width 100%
-      &__header
-        display block
-        height auto
-        margin 0 15px 20px 15px
-        &__title
-          margin-bottom 20px
-    &__memberlist
-      margin 50px 0
-      width 100%
-      &__title
-        margin-left 10px
-      &__wrapper
-        height auto
-      &__list
-        height auto
-        overflow-Y visible
-        &__item:nth-last-child(1)
-          border-bottom 1px solid grey
-      &__btnadd
-        border-top 0
-    &__moreinfo
-      &__webdav
-        margin-left 10px
-        &__information
-          width 350px

frontend/src/reducer/currentWorkspace.js

@@ -2,7 +2,7 @@ import {
   SET,
   WORKSPACE_DETAIL,
   WORKSPACE_MEMBER_LIST,
-  WORKSPACE_READ_STATUS_LIST,
+  WORKSPACE_READ_STATUS_LIST, WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST,
   WORKSPACE_RECENT_ACTIVITY_LIST
 } from '../action-creator.sync.js'
 import { handleRouteFromApi } from '../helper.js'
@@ -15,6 +15,7 @@ const defaultWorkspace = {
   sidebarEntryList: [],
   memberList: [],
   recentActivityList: [],
+  recentActivityForUserList: [],
   contentReadStatusList: []
 }
 
@@ -65,6 +66,23 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
         }))
       }
 
+    case `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`:
+      return {
+        ...state,
+        recentActivityForUserList: action.workspaceRecentActivityForUserList.map(ra => ({
+          id: ra.content_id,
+          slug: ra.slug,
+          label: ra.label,
+          type: ra.content_type,
+          idParent: ra.parent_id,
+          showInUi: ra.show_in_ui,
+          isArchived: ra.is_archived,
+          isDeleted: ra.is_deleted,
+          statusSlug: ra.status,
+          subContentTypeSlug: ra.sub_content_types
+        }))
+      }
+
     case `${SET}/${WORKSPACE_READ_STATUS_LIST}`:
       return {
         ...state,