@akemona-org/strapi-admin 3.7.0

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

@@ -0,0 +1,157 @@
+/**
+ *
+ * App.js
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ * NOTE: while this component should technically be a stateless functional
+ * component (SFC), hot reloading does not currently support SFCs. If hot
+ * reloading is not a neccessity for you then you can refactor it and remove
+ * the linting exception.
+ */
+
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Switch, Route } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import { LoadingIndicatorPage, auth, request } from 'strapi-helper-plugin';
+import { QueryClientProvider, QueryClient } from 'react-query';
+
+import GlobalStyle from '../../components/GlobalStyle';
+import Admin from '../Admin';
+import AuthPage from '../AuthPage';
+import NotFoundPage from '../NotFoundPage';
+// eslint-disable-next-line import/no-cycle
+import NotificationProvider from '../NotificationProvider';
+import Theme from '../Theme';
+// import { getUID } from './utils';
+import { Content, Wrapper } from './components';
+import { getDataSucceeded } from './actions';
+import NewNotification from '../NewNotification';
+import PrivateRoute from '../PrivateRoute';
+import routes from './utils/routes';
+import { makeUniqueRoutes, createRoute } from '../SettingsPage/utils';
+
+const queryClient = new QueryClient();
+
+function App(props) {
+  const getDataRef = useRef();
+  const [{ isLoading, hasAdmin }, setState] = useState({ isLoading: true, hasAdmin: false });
+  getDataRef.current = props.getDataSucceeded;
+
+  const authRoutes = useMemo(() => {
+    return makeUniqueRoutes(
+      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
+    );
+  }, []);
+
+  useEffect(() => {
+    const currentToken = auth.getToken();
+
+    const renewToken = async () => {
+      try {
+        const {
+          data: { token },
+        } = await request('/admin/renew-token', {
+          method: 'POST',
+          body: { token: currentToken },
+        });
+        auth.updateToken(token);
+      } catch (err) {
+        // Refresh app
+        auth.clearAppStorage();
+        window.location.reload();
+      }
+    };
+
+    if (currentToken) {
+      renewToken();
+    }
+  }, []);
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const { data } = await request('/admin/init', { method: 'GET' });
+
+        const { uuid } = data;
+
+        if (uuid) {
+          try {
+            // const deviceId = await getUID();
+            /*   fetch('https://analytics.strapi.io/track', {
+              method: 'POST',
+              body: JSON.stringify({
+                event: 'didInitializeAdministration',
+                uuid,
+                deviceId,
+              }),
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            }); */
+          } catch (e) {
+            // Silent.
+          }
+        }
+
+        getDataRef.current(data);
+        setState({ isLoading: false, hasAdmin: data.hasAdmin });
+      } catch (err) {
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'app.containers.App.notification.error.init' },
+        });
+      }
+    };
+
+    getData();
+  }, []);
+
+  const setHasAdmin = (hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }));
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return (
+    <Theme>
+      <Wrapper>
+        <GlobalStyle />
+        <QueryClientProvider client={queryClient}>
+          <NotificationProvider />
+          <NewNotification />
+          <Content>
+            <Switch>
+              {authRoutes}
+              <Route
+                path="/auth/:authType"
+                render={(routerProps) => (
+                  <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
+                )}
+                exact
+              />
+              <PrivateRoute path="/" component={Admin} />
+              <Route path="" component={NotFoundPage} />
+            </Switch>
+          </Content>
+        </QueryClientProvider>
+      </Wrapper>
+    </Theme>
+  );
+}
+
+App.propTypes = {
+  getDataSucceeded: PropTypes.func.isRequired,
+};
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ getDataSucceeded }, dispatch);
+}
+
+const withConnect = connect(null, mapDispatchToProps);
+
+export default compose(withConnect)(App);
+export { App };

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

@@ -0,0 +1,86 @@
+// Shared constants
+import { fromJS } from 'immutable';
+import packageJSON from '../../../../package.json';
+
+import {
+  DISABLE_GLOBAL_OVERLAY_BLOCKER,
+  ENABLE_GLOBAL_OVERLAY_BLOCKER,
+  FREEZE_APP,
+  GET_INFOS_DATA_SUCCEEDED,
+  GET_DATA_SUCCEEDED,
+  PLUGIN_DELETED,
+  PLUGIN_LOADED,
+  UNFREEZE_APP,
+  UPDATE_PLUGIN,
+} from './constants';
+
+const packageVersion = packageJSON.version;
+const initialState = fromJS({
+  appInfos: {},
+  autoReload: false,
+  blockApp: false,
+  currentEnvironment: 'development',
+  hasAdminUser: false,
+  hasUserPlugin: true,
+  isLoading: true,
+  overlayBlockerData: null,
+  plugins: {},
+  showGlobalAppBlocker: true,
+  strapiVersion: packageVersion,
+  uuid: false,
+});
+
+function appReducer(state = initialState, action) {
+  switch (action.type) {
+    case DISABLE_GLOBAL_OVERLAY_BLOCKER:
+      return state.set('showGlobalAppBlocker', false);
+    case ENABLE_GLOBAL_OVERLAY_BLOCKER:
+      return state.set('showGlobalAppBlocker', true);
+    case FREEZE_APP:
+      return state.set('blockApp', true).update('overlayBlockerData', () => {
+        if (action.data) {
+          return action.data;
+        }
+
+        return null;
+      });
+    case GET_INFOS_DATA_SUCCEEDED: {
+      if (action.data.strapiVersion !== state.get('strapiVersion')) {
+        console.error(
+          `It seems that the built version ${packageVersion} is different than your project's one (${action.data.strapiVersion})`
+        );
+        console.error('Please delete your `.cache` and `build` folders and restart your app');
+      }
+
+      return (
+        state
+          .update('appInfos', () => action.data)
+          // Keep this for plugins legacy
+          .update('autoReload', () => action.data.autoReload)
+          .update('currentEnvironment', () => action.data.currentEnvironment)
+      );
+    }
+    case GET_DATA_SUCCEEDED: {
+      return state
+        .update('isLoading', () => false)
+        .update('hasAdminUser', () => action.data.hasAdmin)
+        .update('uuid', () => action.data.uuid);
+    }
+    case PLUGIN_LOADED:
+      return state.setIn(['plugins', action.plugin.id], fromJS(action.plugin));
+    case UPDATE_PLUGIN:
+      return state.setIn(
+        ['plugins', action.pluginId, action.updatedKey],
+        fromJS(action.updatedValue)
+      );
+    case PLUGIN_DELETED:
+      return state.deleteIn(['plugins', action.plugin]);
+    case UNFREEZE_APP:
+      return state.set('blockApp', false).set('overlayBlockerData', null);
+
+    default:
+      return state;
+  }
+}
+
+export default appReducer;

package/admin/src/containers/App/selectors.js

@@ -0,0 +1,38 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the languageToggle state domain
+ */
+const selectApp = () => state => state.get('app');
+
+/**
+ * Select the language locale
+ */
+
+const selectPlugins = () => createSelector(selectApp(), appState => appState.get('plugins'));
+
+const makeSelectApp = () => createSelector(selectApp(), appState => appState.toJS());
+
+const selectHasUserPlugin = () =>
+  createSelector(selectApp(), appState => appState.get('hasUserPlugin'));
+
+const makeSelectShowGlobalAppBlocker = () =>
+  createSelector(selectApp(), appState => appState.get('showGlobalAppBlocker'));
+
+const makeSelectBlockApp = () => createSelector(selectApp(), appState => appState.get('blockApp'));
+
+const makeSelectOverlayBlockerProps = () =>
+  createSelector(selectApp(), appState => appState.get('overlayBlockerData'));
+
+const makeSelectUuid = () => createSelector(selectApp(), appState => appState.get('uuid'));
+
+export default makeSelectApp;
+export {
+  selectApp,
+  selectHasUserPlugin,
+  selectPlugins,
+  makeSelectBlockApp,
+  makeSelectOverlayBlockerProps,
+  makeSelectShowGlobalAppBlocker,
+  makeSelectUuid,
+};

package/admin/src/containers/App/styles/website.css

@@ -0,0 +1,25 @@
+li.header{
+  color: #101622 !important;
+  font-weight: 600;
+  letter-spacing: 0.07rem;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+li.chapter > a{
+  transition: background-color 0.15s ease;
+  -webkit-transition: background-color 0.15s ease;
+}
+
+li.chapter:hover > a{
+  background: #eee !important;
+  text-decoration: none !important;
+}
+
+.versions-select select{
+  height: 36px;
+  border: 1px solid #ccc;
+}
+
+.book-summary{
+  background-color: #f7f7f7 !important;
+}

package/admin/src/containers/App/utils/customRoutes.js

@@ -0,0 +1,3 @@
+const customRoutes = [];
+
+export default customRoutes;

package/admin/src/containers/App/utils/defaultRoutes.js

@@ -0,0 +1,3 @@
+const defaultRoutes = [];
+
+export default defaultRoutes;

package/admin/src/containers/App/utils/index.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as getUID } from './unique-identifier';
+export { default as routes } from './routes';

package/admin/src/containers/App/utils/routes.js

@@ -0,0 +1,4 @@
+import customRoutes from 'ee_else_ce/containers/App/utils/customRoutes';
+import defaultRoutes from './defaultRoutes';
+
+export default [...customRoutes, ...defaultRoutes];

package/admin/src/containers/App/utils/unique-identifier.js

@@ -0,0 +1,10 @@
+import FingerprintJS from '@fingerprintjs/fingerprintjs';
+
+const getUniqueIdentifier = async () => {
+  const fp = await FingerprintJS.load();
+  const result = await fp.get();
+
+  return result.visitorId;
+};
+
+export default getUniqueIdentifier;

package/admin/src/containers/ApplicationInfosPage/components/Detail/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+import InfoText from '../InfoText';
+import Link from '../Link';
+import Wrapper from '../Wrapper';
+
+const Detail = ({ content, link, title }) => {
+  return (
+    <Wrapper>
+      <Text fontSize="xs" color="grey" fontWeight="bold">
+        {title}
+      </Text>
+      <InfoText content={content} />
+      {link && <Link {...link} />}
+    </Wrapper>
+  );
+};
+
+Detail.defaultProps = {
+  link: null,
+};
+
+Detail.propTypes = {
+  content: PropTypes.string.isRequired,
+  link: PropTypes.object,
+  title: PropTypes.string.isRequired,
+};
+
+export default Detail;

package/admin/src/containers/ApplicationInfosPage/components/InfoText/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Padded, Text } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+
+const InfoText = ({ content }) => {
+  return (
+    <Padded top size="xs">
+      <Text fontWeight="semiBold" lineHeight="13px">
+        {content}
+      </Text>
+    </Padded>
+  );
+};
+
+InfoText.propTypes = {
+  content: PropTypes.string.isRequired,
+};
+
+export default InfoText;

package/admin/src/containers/ApplicationInfosPage/components/Link/components.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+import { Arrow } from '@buffetjs/icons';
+
+const LinkText = styled(Text)`
+  color: ${({ theme }) => theme.main.colors.mediumBlue};
+  > a {
+    &:hover {
+      color: ${({ theme }) => theme.main.colors.mediumBlue};
+      text-decoration: none;
+    }
+  }
+`;
+
+export const LinkArrow = styled(Arrow)`
+  transform: rotate(45deg);
+  margin-top: 2px;
+  margin-left: 10px;
+  color: ${({ theme }) => theme.main.colors.blue};
+`;
+
+export default LinkText;

package/admin/src/containers/ApplicationInfosPage/components/Link/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Padded } from '@buffetjs/core';
+import PropTypes from 'prop-types';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import LinkText, { LinkArrow } from './components';
+
+const Link = ({ href, label }) => {
+  return (
+    <Padded top size="smd">
+      <BaselineAlignment top size="1px" />
+      <LinkText fontWeight="semiBold">
+        <a href={href} target="_blank" rel="noopener noreferrer">
+          {label}
+          <LinkArrow />
+        </a>
+      </LinkText>
+    </Padded>
+  );
+};
+
+Link.propTypes = {
+  href: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+};
+
+export default Link;

package/admin/src/containers/ApplicationInfosPage/components/Wrapper/index.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 50%;
+`;
+
+export default Wrapper;

package/admin/src/containers/ApplicationInfosPage/components/index.js

@@ -0,0 +1,4 @@
+export { default as Detail } from './Detail';
+export { default as InfoText } from './InfoText';
+export { default as Link } from './Link';
+export { default as Wrapper } from './Wrapper';

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

@@ -0,0 +1,89 @@
+import React, { memo, useMemo } from 'react';
+import { Header } from '@buffetjs/custom';
+import { Flex, Padded, Text } from '@buffetjs/core';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import Bloc from '../../components/Bloc';
+import PageTitle from '../../components/SettingsPageTitle';
+import makeSelectApp from '../App/selectors';
+import makeSelectAdmin from '../Admin/selectors';
+import { Detail, InfoText } from './components';
+
+const makeSelectAppInfos = () => createSelector(makeSelectApp(), appState => appState.appInfos);
+const makeSelectLatestRelease = () =>
+  createSelector(makeSelectAdmin(), adminState => ({
+    latestStrapiReleaseTag: adminState.latestStrapiReleaseTag,
+    shouldUpdateStrapi: adminState.shouldUpdateStrapi,
+  }));
+
+const ApplicationInfosPage = () => {
+  const { formatMessage } = useIntl();
+  const selectAppInfos = useMemo(makeSelectAppInfos, []);
+  const selectLatestRealase = useMemo(makeSelectLatestRelease, []);
+  const appInfos = useSelector(state => selectAppInfos(state));
+  const { shouldUpdateStrapi, latestStrapiReleaseTag } = useSelector(state =>
+    selectLatestRealase(state)
+  );
+
+  const currentPlan = appInfos.communityEdition
+    ? 'app.components.UpgradePlanModal.text-ce'
+    : 'app.components.UpgradePlanModal.text-ee';
+
+  const headerProps = {
+    title: { label: formatMessage({ id: 'Settings.application.title' }) },
+    content: formatMessage({
+      id: 'Settings.application.description',
+    }),
+  };
+  const pricingLabel = formatMessage({ id: 'Settings.application.link-pricing' });
+  const upgradeLabel = formatMessage({ id: 'Settings.application.link-upgrade' });
+  const strapiVersion = formatMessage({ id: 'Settings.application.strapi-version' });
+  const nodeVersion = formatMessage({ id: 'Settings.application.node-version' });
+  const editionTitle = formatMessage({ id: 'Settings.application.edition-title' });
+
+  /* eslint-disable indent */
+  const upgradeLink = shouldUpdateStrapi
+    ? {
+        label: upgradeLabel,
+        href: `https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`,
+      }
+    : null;
+  /* eslint-enable indent */
+
+  return (
+    <div>
+      <PageTitle name="Application" />
+      <Header {...headerProps} />
+      <BaselineAlignment top size="3px" />
+      <Bloc>
+        <Padded left right top size="smd">
+          <Padded left right top size="xs">
+            <Flex justifyContent="space-between">
+              <Detail
+                link={upgradeLink}
+                title={strapiVersion}
+                content={`v${appInfos.strapiVersion}`}
+              />
+              <Detail
+                link={{ label: pricingLabel, href: 'https://strapi.akemona.com/pricing' }}
+                title={editionTitle}
+                content={formatMessage({ id: currentPlan })}
+              />
+            </Flex>
+            <Padded top size="lg">
+              <Text fontSize="xs" color="grey" fontWeight="bold">
+                {nodeVersion}
+              </Text>
+              <InfoText content={appInfos.nodeVersion} />
+            </Padded>
+          </Padded>
+        </Padded>
+        <BaselineAlignment top size="60px" />
+      </Bloc>
+    </div>
+  );
+};
+
+export default memo(ApplicationInfosPage);

package/admin/src/containers/AuthPage/components/AuthLink/Link.js

@@ -0,0 +1,13 @@
+import { Link as Base } from 'react-router-dom';
+import styled from 'styled-components';
+
+const Link = styled(Base)`
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    outline: 0;
+  }
+`;
+
+export default Link;

package/admin/src/containers/AuthPage/components/AuthLink/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin: auto;
+  width: 41.6rem;
+`;
+
+export default Wrapper;

package/admin/src/containers/AuthPage/components/AuthLink/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text } from '@buffetjs/core';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { BaselineAlignment } from 'strapi-helper-plugin';
+import Section from '../Section';
+import Link from './Link';
+import Wrapper from './Wrapper';
+
+const AuthLink = ({ children, label, to }) => {
+  const { formatMessage } = useIntl();
+  const message = formatMessage({ id: label });
+
+  return (
+    <Section textAlign="center">
+      <Wrapper>
+        <BaselineAlignment top size="24px">
+          <Link to={to}>{children || <Text fontSize="md">{message}</Text>}</Link>
+        </BaselineAlignment>
+      </Wrapper>
+    </Section>
+  );
+};
+
+AuthLink.defaultProps = {
+  children: null,
+};
+
+AuthLink.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+export default AuthLink;

package/admin/src/containers/AuthPage/components/Box/Wrapper.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin: auto;
+  width: 41.6rem;
+  padding: 20px 30px 25px 30px;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+  border-top: 2px solid ${({ theme }) => theme.main.colors.mediumBlue};
+  background-color: ${({ theme }) => theme.main.colors.white};
+  box-shadow: 0 2px 4px 0 ${({ theme }) => theme.main.colors.darkGrey};
+`;
+
+export default Wrapper;

package/admin/src/containers/AuthPage/components/Box/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+import Wrapper from './Wrapper';
+
+const Box = ({ children, errorMessage, withoutError }) => (
+  <Wrapper>
+    {!withoutError && (
+      <Text fontSize="md" color="lightOrange" style={{ textAlign: 'center' }} lineHeight="18px">
+        {errorMessage}&nbsp;
+      </Text>
+    )}
+    {children}
+  </Wrapper>
+);
+
+Box.defaultProps = {
+  errorMessage: null,
+  withoutError: false,
+};
+
+Box.propTypes = {
+  children: PropTypes.node.isRequired,
+  errorMessage: PropTypes.string,
+  withoutError: PropTypes.bool,
+};
+
+export default Box;