@akemona-org/strapi-admin 3.7.0

package/admin/src/containers/Onboarding/Wrapper.js

@@ -0,0 +1,131 @@
+import styled, { keyframes } from 'styled-components';
+
+const fadeIn = keyframes`
+0% {
+  width: auto;
+  height: auto;
+  opacity: 0;
+}
+
+5% {
+  opacity: 0;
+}
+
+100% {
+  opacity: 1;
+}
+`;
+const fadeOut = keyframes`
+0% {
+  opacity: 1;
+}
+
+60% {
+  opacity: 0;
+}
+
+100% {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+`;
+
+const Wrapper = styled.div`
+  max-width: ${({ isOpen }) => (isOpen ? 'initial' : '0px')};
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  button,
+  button:focus,
+  a {
+    cursor: pointer;
+    outline: 0;
+  }
+  p {
+    margin-bottom: 0;
+  }
+  .videosHeader {
+    padding: 25px 15px 18px 15px;
+    p {
+      display: inline-block;
+      vertical-align: top;
+      width: 50%;
+      font-family: Lato;
+      font-weight: bold;
+      font-size: 11px;
+      color: #5c5f66;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      &:last-of-type {
+        color: #5a9e06;
+        text-align: right;
+      }
+    }
+  }
+  &.visible {
+    opacity: 1;
+    z-index: 10;
+  }
+  &.hidden {
+    opacity: 0;
+  }
+  .videosContent {
+    min-width: 320px;
+    margin-bottom: 10px;
+    margin-right: 15px;
+    background-color: white;
+    box-shadow: 0 2px 4px 0 #e3e9f3;
+    border-radius: 3px;
+    overflow: hidden;
+    &.shown {
+      animation: ${fadeIn} 0.5s forwards;
+    }
+    &.hide {
+      min-width: 0;
+      animation: ${fadeOut} 0.5s forwards;
+    }
+    ul {
+      padding: 0 0 8px 0;
+      margin-bottom: 0;
+      list-style: none;
+      &:last-of-type {
+        padding: 8px 0 10px 0;
+        border-top: 1px solid #f6f6f6;
+      }
+    }
+  }
+  .openBtn {
+    float: right;
+    width: 38px;
+    height: 38px;
+    button {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      color: white;
+      background: #0e7de7;
+      box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1);
+      i,
+      svg {
+        margin: auto;
+      }
+      i:last-of-type,
+      svg:last-of-type {
+        display: none;
+      }
+      &.active {
+        i:first-of-type,
+        svg:first-of-type {
+          display: none;
+        }
+        i:last-of-type,
+        svg:last-of-type {
+          display: block;
+        }
+      }
+    }
+  }
+`;
+
+export default Wrapper;

package/admin/src/containers/Onboarding/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useReducer, memo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import axios from 'axios';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuestion, faTimes } from '@fortawesome/free-solid-svg-icons';
+import cn from 'classnames';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+import formatVideoArray from './utils/formatAndStoreVideoArray';
+
+import StaticLinks from './StaticLinks';
+import Video from './Video';
+import Wrapper from './Wrapper';
+import init from './init';
+import reducer, { initialState } from './reducer';
+
+const OnboardingVideos = () => {
+  const { emitEvent } = useGlobalContext();
+  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
+  const { isLoading, isOpen, videos } = reducerState.toJS();
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const { data } = await axios.get('https://strapi.akemona.com/videos', {
+          timeout: 1000,
+        });
+        const { didWatchVideos, videos } = formatVideoArray(data);
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          didWatchVideos,
+          videos,
+        });
+      } catch (err) {
+        console.error(err);
+        dispatch({
+          type: 'HIDE_VIDEO_ONBOARDING',
+        });
+      }
+    };
+
+    getData();
+  }, []);
+
+  // Hide the player in case of request error
+  if (isLoading) {
+    return null;
+  }
+
+  const handleClick = () => {
+    const eventName = isOpen
+      ? 'didOpenGetStartedVideoContainer'
+      : 'didCloseGetStartedVideoContainer';
+
+    dispatch({ type: 'SET_IS_OPEN' });
+    emitEvent(eventName);
+  };
+  const handleClickOpenVideo = videoIndexToOpen => {
+    dispatch({
+      type: 'TOGGLE_VIDEO_MODAL',
+      videoIndexToOpen,
+    });
+  };
+  const handleUpdateVideoStartTime = (videoIndex, elapsedTime) => {
+    dispatch({
+      type: 'UPDATE_VIDEO_STARTED_TIME_AND_PLAYED_INFOS',
+      videoIndex,
+      elapsedTime,
+    });
+  };
+  const setVideoDuration = (videoIndex, duration) => {
+    dispatch({
+      type: 'SET_VIDEO_DURATION',
+      duration,
+      videoIndex,
+    });
+  };
+
+  const hasVideos = videos.length > 0;
+  const className = hasVideos ? 'visible' : 'hidden';
+
+  return (
+    <Wrapper className={className} isOpen={isOpen}>
+      <div className={cn('videosContent', isOpen ? 'shown' : 'hide')}>
+        <div className="videosHeader">
+          <p>
+            <FormattedMessage id="app.components.Onboarding.title" />
+          </p>
+          <p>
+            {Math.floor((videos.filter(v => v.end).length * 100) / videos.length)}
+            <FormattedMessage id="app.components.Onboarding.label.completed" />
+          </p>
+        </div>
+        <ul className="onboardingList">
+          {videos.map((video, index) => (
+            <Video
+              key={video.id || index}
+              id={index}
+              video={video}
+              onClick={() => handleClickOpenVideo(index)}
+              setVideoDuration={(_, duration) => {
+                setVideoDuration(index, duration);
+              }}
+              getVideoCurrentTime={(_, elapsedTime) => {
+                handleUpdateVideoStartTime(index, elapsedTime);
+              }}
+              didPlayVideo={(_, elapsedTime) => {
+                const eventName = `didPlay${index}GetStartedVideo`;
+
+                emitEvent(eventName, { timestamp: elapsedTime });
+              }}
+              didStopVideo={(_, elapsedTime) => {
+                const eventName = `didStop${index}Video`;
+
+                emitEvent(eventName, { timestamp: elapsedTime });
+              }}
+            />
+          ))}
+        </ul>
+        <StaticLinks />
+      </div>
+      <div className="openBtn">
+        <button onClick={handleClick} className={isOpen ? 'active' : ''} type="button">
+          <FontAwesomeIcon icon={faQuestion} />
+          <FontAwesomeIcon icon={faTimes} />
+          <span />
+        </button>
+      </div>
+    </Wrapper>
+  );
+};
+
+export default memo(OnboardingVideos);

package/admin/src/containers/Onboarding/init.js

@@ -0,0 +1,5 @@
+const init = initialState => {
+  return initialState;
+};
+
+export default init;

package/admin/src/containers/Onboarding/reducer.js

@@ -0,0 +1,62 @@
+import { fromJS } from 'immutable';
+
+const initialState = fromJS({
+  isLoading: true,
+  isOpen: false,
+  videos: [],
+});
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'GET_DATA_SUCCEEDED':
+      return state
+        .update('isOpen', () => !action.didWatchVideos)
+        .update('isLoading', () => false)
+        .update('videos', () => fromJS(action.videos));
+    case 'SET_IS_OPEN':
+      return state.update('isOpen', v => !v);
+    case 'SET_VIDEO_DURATION':
+      return state.updateIn(['videos', action.videoIndex, 'duration'], () => {
+        return parseFloat(action.duration, 10);
+      });
+    case 'TOGGLE_VIDEO_MODAL':
+      return state.update('videos', list => {
+        return list.map((item, index) => {
+          if (index === action.videoIndexToOpen) {
+            return item.update('isOpen', v => !v);
+          }
+
+          return item.set('isOpen', false);
+        });
+      });
+    case 'UPDATE_VIDEO_STARTED_TIME_AND_PLAYED_INFOS': {
+      const updatedState = state.updateIn(['videos', action.videoIndex], video => {
+        const elapsedTime = parseFloat(action.elapsedTime, 10);
+        const videoDuration = parseFloat(video.get('duration', 10));
+        const percentElapsedTime = (elapsedTime * 100) / videoDuration;
+
+        return video
+          .update('startTime', () => elapsedTime)
+          .update('end', oldValue => {
+            if (oldValue === true) {
+              return true;
+            }
+
+            return percentElapsedTime > 80;
+          });
+      });
+
+      const videos = updatedState.get('videos').map(video => video.set('isOpen', false));
+
+      // Update the local storage
+      localStorage.setItem('videos', JSON.stringify(videos.toJS()));
+
+      return updatedState;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;
+export { initialState };

package/admin/src/containers/Onboarding/utils/formatAndStoreVideoArray.js

@@ -0,0 +1,27 @@
+const formatVideosArray = array => {
+  const alreadyFetchedVideos = JSON.parse(localStorage.getItem('videos')) || [];
+  const didWatchVideos = alreadyFetchedVideos.length === array.length;
+  let videos;
+
+  if (!didWatchVideos) {
+    videos = array.map(video => {
+      return {
+        ...video,
+        duration: null,
+        end: false,
+        isOpen: false,
+        key: video.order,
+        startTime: 0,
+      };
+    });
+
+    // Store the videos in the localStorage
+    localStorage.setItem('videos', JSON.stringify(videos));
+  } else {
+    videos = alreadyFetchedVideos;
+  }
+
+  return { didWatchVideos, videos };
+};
+
+export default formatVideosArray;

package/admin/src/containers/PermissionsManager/actions.js

@@ -0,0 +1,25 @@
+import {
+  GET_USER_PERMISSIONS,
+  GET_USER_PERMISSIONS_SUCCEEDED,
+  GET_USER_PERMISSIONS_ERROR,
+} from './constants';
+
+export function getUserPermissions() {
+  return {
+    type: GET_USER_PERMISSIONS,
+  };
+}
+
+export function getUserPermissionsError(error) {
+  return {
+    type: GET_USER_PERMISSIONS_ERROR,
+    error,
+  };
+}
+
+export function getUserPermissionsSucceeded(data) {
+  return {
+    type: GET_USER_PERMISSIONS_SUCCEEDED,
+    data,
+  };
+}

package/admin/src/containers/PermissionsManager/constants.js

@@ -0,0 +1,5 @@
+export const GET_USER_PERMISSIONS = 'StrapiAdmin/PermissionsManager/GET_USER_PERMISSIONS';
+export const GET_USER_PERMISSIONS_ERROR =
+  'StrapiAdmin/PermissionsManager/GET_USER_PERMISSIONS_ERROR';
+export const GET_USER_PERMISSIONS_SUCCEEDED =
+  'StrapiAdmin/PermissionsManager/GET_USER_PERMISSIONS_SUCCEEDED';

package/admin/src/containers/PermissionsManager/index.js

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector, useDispatch } from 'react-redux';
+import { LoadingIndicatorPage, UserProvider, request } from 'strapi-helper-plugin';
+import {
+  getUserPermissions,
+  getUserPermissionsError,
+  getUserPermissionsSucceeded,
+} from './actions';
+
+const PermissionsManager = ({ children }) => {
+  const { isLoading, userPermissions } = useSelector(state => state.get('permissionsManager'));
+
+  const dispatch = useDispatch();
+  const fetchUserPermissions = async (resetState = false) => {
+    if (resetState) {
+      // Show a loader
+      dispatch(getUserPermissions());
+    }
+
+    try {
+      const { data } = await request('/admin/users/me/permissions', { method: 'GET' });
+
+      dispatch(getUserPermissionsSucceeded(data));
+    } catch (err) {
+      console.error(err);
+      dispatch(getUserPermissionsError(err));
+    }
+  };
+
+  useEffect(() => {
+    fetchUserPermissions(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <UserProvider value={{ userPermissions, fetchUserPermissions }}>{children}</UserProvider>;
+};
+
+PermissionsManager.defaultProps = {};
+
+PermissionsManager.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default PermissionsManager;

package/admin/src/containers/PermissionsManager/reducer.js

@@ -0,0 +1,66 @@
+/*
+ *
+ * PermissionsManager reducer
+ * The goal of this reducer is to provide
+ * the plugins with an access to the user's permissions
+ * in our middleware system
+ *
+ */
+
+import produce from 'immer';
+
+import {
+  GET_USER_PERMISSIONS,
+  GET_USER_PERMISSIONS_ERROR,
+  GET_USER_PERMISSIONS_SUCCEEDED,
+} from './constants';
+
+const initialState = {
+  isLoading: true,
+  userPermissions: [],
+  collectionTypesRelatedPermissions: {},
+};
+
+const reducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case GET_USER_PERMISSIONS: {
+        draftState.isLoading = true;
+        draftState.userPermissions = [];
+        draftState.collectionTypesRelatedPermissions = {};
+        break;
+      }
+
+      case GET_USER_PERMISSIONS_ERROR: {
+        draftState.error = action.error;
+        draftState.isLoading = false;
+        break;
+      }
+      case GET_USER_PERMISSIONS_SUCCEEDED: {
+        draftState.isLoading = false;
+        draftState.userPermissions = action.data;
+        draftState.collectionTypesRelatedPermissions = action.data
+          .filter(perm => perm.subject)
+          .reduce((acc, current) => {
+            const { subject, action } = current;
+
+            if (!acc[subject]) {
+              acc[subject] = {};
+            }
+
+            acc[subject] = acc[subject][action]
+              ? { ...acc[subject], [action]: [...acc[subject][action], current] }
+              : { ...acc[subject], [action]: [current] };
+
+            return acc;
+          }, {});
+        break;
+      }
+      default:
+        return state;
+    }
+  });
+
+export default reducer;
+export { initialState };

package/admin/src/containers/PluginDispatcher/index.js

@@ -0,0 +1,69 @@
+/**
+ *
+ * PluginDispatcher
+ *
+ */
+
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+import { get } from 'lodash';
+import { ErrorBoundary } from 'react-error-boundary';
+import { BlockerComponent, ErrorFallback } from 'strapi-helper-plugin';
+import PageTitle from '../../components/PageTitle';
+import { LOGIN_LOGO } from '../../config';
+
+export function PluginDispatcher(props) {
+  const {
+    global: { plugins },
+    match: {
+      params: { pluginId },
+    },
+  } = props;
+
+  const pluginToRender = get(plugins, pluginId, null);
+
+  if (!pluginToRender) {
+    return <Redirect to="/404" />;
+  }
+
+  const {
+    blockerComponent,
+    blockerComponentProps,
+    mainComponent,
+    name,
+    preventComponentRendering,
+  } = pluginToRender;
+  let PluginEntryComponent = preventComponentRendering ? BlockerComponent : mainComponent;
+
+  // Change the plugin's blockerComponent if the plugin uses a custom one.
+  if (preventComponentRendering && blockerComponent) {
+    PluginEntryComponent = blockerComponent;
+  }
+
+  return (
+    <div>
+      <PageTitle title={`Strapi - ${name}`} />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <PluginEntryComponent
+          {...props}
+          {...blockerComponentProps}
+          assets={{ loginLogo: LOGIN_LOGO }}
+        />
+      </ErrorBoundary>
+    </div>
+  );
+}
+
+PluginDispatcher.defaultProps = {};
+
+PluginDispatcher.propTypes = {
+  global: PropTypes.object.isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      pluginId: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default memo(PluginDispatcher);

package/admin/src/containers/PrivateRoute/index.js

@@ -0,0 +1,39 @@
+/**
+ *
+ * PrivateRoute
+ * Higher Order Component that blocks navigation when the user is not logged in
+ * and redirect the user to login page
+ *
+ * Wrap your protected routes to secure your container
+ */
+
+import React, { memo } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { auth } from 'strapi-helper-plugin';
+
+/* eslint-disable react/jsx-curly-newline */
+
+const PrivateRoute = ({ component: Component, path, ...rest }) => (
+  <Route
+    path={path}
+    render={props =>
+      auth.getToken() !== null ? (
+        <Component {...rest} {...props} />
+      ) : (
+        <Redirect
+          to={{
+            pathname: '/auth/login',
+          }}
+        />
+      )
+    }
+  />
+);
+
+PrivateRoute.propTypes = {
+  component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  path: PropTypes.string.isRequired,
+};
+
+export default memo(PrivateRoute);

package/admin/src/containers/ProfilePage/components.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Label } from '@buffetjs/core';
+
+const ProfilePageLabel = styled(Label)`
+  margin-bottom: 1rem;
+  padding-left: 15px;
+`;
+
+export default ProfilePageLabel;