@strapi/admin 4.15.0 → 4.15.2

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

@@ -1,208 +0,0 @@
-/**
- *
- * App.js
- *
- */
-
-import React, { lazy, Suspense, useEffect, useMemo, useState } from 'react';
-
-import { SkipToContent } from '@strapi/design-system';
-import {
-  auth,
-  LoadingIndicatorPage,
-  prefixFileUrlWithBackendUrl,
-  TrackingProvider,
-  useAppInfo,
-  useFetchClient,
-  useNotification,
-} from '@strapi/helper-plugin';
-import merge from 'lodash/merge';
-import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
-
-import { PrivateRoute } from '../../components/PrivateRoute';
-import { ADMIN_PERMISSIONS_CE } from '../../constants';
-import { useConfiguration } from '../../hooks/useConfiguration';
-import { useEnterprise } from '../../hooks/useEnterprise';
-import { createRoute } from '../../utils/createRoute';
-import { makeUniqueRoutes } from '../../utils/makeUniqueRoutes';
-import AuthPage from '../AuthPage';
-import { NotFoundPage } from '../NotFoundPage';
-import { UseCasePage } from '../UseCasePage';
-
-import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants';
-
-const AuthenticatedApp = lazy(() =>
-  import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp').then(
-    (mod) => ({ default: mod.AuthenticatedApp })
-  )
-);
-
-function App() {
-  const adminPermissions = useEnterprise(
-    ADMIN_PERMISSIONS_CE,
-    async () => (await import('../../../../ee/admin/constants')).ADMIN_PERMISSIONS_EE,
-    {
-      combine(cePermissions, eePermissions) {
-        // the `settings` NS e.g. are deep nested objects, that need a deep merge
-        return merge({}, cePermissions, eePermissions);
-      },
-
-      defaultValue: ADMIN_PERMISSIONS_CE,
-    }
-  );
-  const routes = useEnterprise(
-    ROUTES_CE,
-    async () => (await import('../../../../ee/admin/pages/App/constants')).ROUTES_EE,
-    {
-      defaultValue: [],
-    }
-  );
-  const toggleNotification = useNotification();
-  const { updateProjectSettings } = useConfiguration();
-  const { formatMessage } = useIntl();
-  const [{ isLoading, hasAdmin, uuid, deviceId }, setState] = useState({
-    isLoading: true,
-    hasAdmin: false,
-  });
-  const dispatch = useDispatch();
-  const appInfo = useAppInfo();
-  const { get, post } = useFetchClient();
-
-  const authRoutes = useMemo(() => {
-    return makeUniqueRoutes(
-      routes.map(({ to, Component, exact }) => createRoute(Component, to, exact))
-    );
-  }, [routes]);
-
-  const [telemetryProperties, setTelemetryProperties] = useState(null);
-
-  useEffect(() => {
-    dispatch({ type: SET_ADMIN_PERMISSIONS, payload: adminPermissions });
-  }, [adminPermissions, dispatch]);
-
-  useEffect(() => {
-    const currentToken = auth.getToken();
-
-    const renewToken = async () => {
-      try {
-        const {
-          data: {
-            data: { token },
-          },
-        } = await post('/admin/renew-token', { token: currentToken });
-        auth.updateToken(token);
-      } catch (err) {
-        // Refresh app
-        auth.clearAppStorage();
-        window.location.reload();
-      }
-    };
-
-    if (currentToken) {
-      renewToken();
-    }
-  }, [post]);
-
-  useEffect(() => {
-    const getData = async () => {
-      try {
-        const {
-          data: {
-            data: { hasAdmin, uuid, menuLogo, authLogo },
-          },
-        } = await get(`/admin/init`);
-
-        updateProjectSettings({
-          menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
-          authLogo: prefixFileUrlWithBackendUrl(authLogo),
-        });
-
-        if (uuid) {
-          const {
-            data: { data: properties },
-          } = await get(`/admin/telemetry-properties`, {
-            // NOTE: needed because the interceptors of the fetchClient redirect to /login when receive a 401 and it would end up in an infinite loop when the user doesn't have a session.
-            validateStatus: (status) => status < 500,
-          });
-
-          setTelemetryProperties(properties);
-
-          try {
-            const event = 'didInitializeAdministration';
-            await post(
-              'https://analytics.strapi.io/api/v2/track',
-              {
-                // This event is anonymous
-                event,
-                userId: '',
-                deviceId,
-                eventPropeties: {},
-                userProperties: { environment: appInfo.currentEnvironment },
-                groupProperties: { ...properties, projectId: uuid },
-              },
-              {
-                headers: {
-                  'X-Strapi-Event': event,
-                },
-              }
-            );
-          } catch (e) {
-            // Silent.
-          }
-        }
-
-        setState({ isLoading: false, hasAdmin, uuid, deviceId });
-      } catch (err) {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'app.containers.App.notification.error.init' },
-        });
-      }
-    };
-
-    getData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toggleNotification, updateProjectSettings]);
-
-  const setHasAdmin = (hasAdmin) => setState((prev) => ({ ...prev, hasAdmin }));
-
-  const trackingInfo = useMemo(
-    () => ({
-      uuid,
-      telemetryProperties,
-      deviceId,
-    }),
-    [uuid, telemetryProperties, deviceId]
-  );
-
-  if (isLoading) {
-    return <LoadingIndicatorPage />;
-  }
-
-  return (
-    <Suspense fallback={<LoadingIndicatorPage />}>
-      <SkipToContent>
-        {formatMessage({ id: 'skipToContent', defaultMessage: 'Skip to content' })}
-      </SkipToContent>
-      <TrackingProvider value={trackingInfo}>
-        <Switch>
-          {authRoutes}
-          <Route
-            path="/auth/:authType"
-            render={(routerProps) => (
-              <AuthPage {...routerProps} setHasAdmin={setHasAdmin} hasAdmin={hasAdmin} />
-            )}
-            exact
-          />
-          <PrivateRoute path="/usecase" component={UseCasePage} />
-          <PrivateRoute path="/" component={AuthenticatedApp} />
-          <Route path="" component={NotFoundPage} />
-        </Switch>
-      </TrackingProvider>
-    </Suspense>
-  );
-}
-
-export default App;

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

@@ -1,30 +0,0 @@
-import produce from 'immer';
-
-import { SET_APP_RUNTIME_STATUS, SET_ADMIN_PERMISSIONS } from './constants';
-
-const initialState = {
-  permissions: {},
-  status: 'init',
-};
-
-const reducer = (state = initialState, action) =>
-  /* eslint-disable-next-line consistent-return */
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case SET_APP_RUNTIME_STATUS: {
-        draftState.status = 'runtime';
-        break;
-      }
-
-      case SET_ADMIN_PERMISSIONS: {
-        draftState.permissions = action.payload;
-        break;
-      }
-
-      default:
-        return draftState;
-    }
-  });
-
-export { initialState };
-export default reducer;

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

@@ -1,12 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-import { initialState } from './reducer';
-
-const selectAppDomain = () => (state) => {
-  return state.admin_app || initialState;
-};
-
-export const selectAdminPermissions = createSelector(
-  selectAppDomain(),
-  (state) => state.permissions
-);

package/admin/src/pages/AuthPage/components/FieldActionWrapper/index.js

@@ -1,14 +0,0 @@
-import { FieldAction } from '@strapi/design-system';
-import styled from 'styled-components';
-
-const FieldActionWrapper = styled(FieldAction)`
-  svg {
-    height: 1rem;
-    width: 1rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-
-export default FieldActionWrapper;

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -1,113 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Flex, Main, TextInput, Typography } from '@strapi/design-system';
-import { Form, Link } from '@strapi/helper-plugin';
-import { Formik } from 'formik';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { Logo } from '../../../../components/UnauthenticatedLogo';
-import {
-  Column,
-  LayoutContent,
-  UnauthenticatedLayout,
-} from '../../../../layouts/UnauthenticatedLayout';
-
-const ForgotPassword = ({ onSubmit, schema }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <UnauthenticatedLayout>
-      <Main>
-        <LayoutContent>
-          <Formik
-            enableReinitialize
-            initialValues={{
-              email: '',
-            }}
-            onSubmit={onSubmit}
-            validationSchema={schema}
-            validateOnChange={false}
-          >
-            {({ values, errors, handleChange }) => (
-              <Form noValidate>
-                <Column>
-                  <Logo />
-                  <Box paddingTop={6} paddingBottom={7}>
-                    <Typography as="h1" variant="alpha">
-                      {formatMessage({
-                        id: 'Auth.form.button.password-recovery',
-                        defaultMessage: 'Password Recovery',
-                      })}
-                    </Typography>
-                  </Box>
-                  {errors.errorMessage && (
-                    <Typography
-                      id="global-form-error"
-                      role="alert"
-                      tabIndex={-1}
-                      textColor="danger600"
-                    >
-                      {formatMessage({
-                        id: errors.errorMessage,
-                        defaultMessage: 'An error occurred',
-                      })}
-                    </Typography>
-                  )}
-                </Column>
-
-                <Flex direction="column" alignItems="stretch" gap={6}>
-                  <TextInput
-                    error={
-                      errors.email
-                        ? formatMessage({
-                            id: errors.email,
-                            defaultMessage: 'This email is invalid.',
-                          })
-                        : ''
-                    }
-                    value={values.email}
-                    onChange={handleChange}
-                    label={formatMessage({ id: 'Auth.form.email.label', defaultMessage: 'Email' })}
-                    placeholder={formatMessage({
-                      id: 'Auth.form.email.placeholder',
-                      defaultMessage: 'kai@doe.com',
-                    })}
-                    name="email"
-                    required
-                  />
-                  <Button type="submit" fullWidth>
-                    {formatMessage({
-                      id: 'Auth.form.button.forgot-password',
-                      defaultMessage: 'Send Email',
-                    })}
-                  </Button>
-                </Flex>
-              </Form>
-            )}
-          </Formik>
-        </LayoutContent>
-        <Flex justifyContent="center">
-          <Box paddingTop={4}>
-            <Link to="/auth/login">
-              {formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
-            </Link>
-          </Box>
-        </Flex>
-      </Main>
-    </UnauthenticatedLayout>
-  );
-};
-
-ForgotPassword.defaultProps = {
-  onSubmit: (e) => e.preventDefault(),
-};
-
-ForgotPassword.propTypes = {
-  onSubmit: PropTypes.func,
-  schema: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default ForgotPassword;

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import { Box, Flex, Main, Typography } from '@strapi/design-system';
-import { Link } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-
-import { Logo } from '../../../../components/UnauthenticatedLogo';
-import {
-  Column,
-  LayoutContent,
-  UnauthenticatedLayout,
-} from '../../../../layouts/UnauthenticatedLayout';
-
-const ForgotPasswordSuccess = () => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <UnauthenticatedLayout>
-      <Main>
-        <LayoutContent>
-          <Column>
-            <Logo />
-            <Box paddingTop={6} paddingBottom={7}>
-              <Typography as="h1" variant="alpha">
-                {formatMessage({
-                  id: 'app.containers.AuthPage.ForgotPasswordSuccess.title',
-                  defaultMessage: 'Email sent',
-                })}
-              </Typography>
-            </Box>
-            <Typography>
-              {formatMessage({
-                id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.email',
-                defaultMessage: 'It can take a few minutes to receive your password recovery link.',
-              })}
-            </Typography>
-            <Box paddingTop={4}>
-              <Typography>
-                {formatMessage({
-                  id: 'app.containers.AuthPage.ForgotPasswordSuccess.text.contact-admin',
-                  defaultMessage:
-                    'If you do not receive this link, please contact your administrator.',
-                })}
-              </Typography>
-            </Box>
-          </Column>
-        </LayoutContent>
-        <Flex justifyContent="center">
-          <Box paddingTop={4}>
-            <Link to="/auth/login">
-              {formatMessage({ id: 'Auth.link.signin', defaultMessage: 'Sign in' })}
-            </Link>
-          </Box>
-        </Flex>
-      </Main>
-    </UnauthenticatedLayout>
-  );
-};
-
-export default ForgotPasswordSuccess;

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,180 +0,0 @@
-import React, { useState } from 'react';
-
-import { Box, Button, Checkbox, Flex, Main, TextInput, Typography } from '@strapi/design-system';
-import { Form, Link } from '@strapi/helper-plugin';
-import { Eye, EyeStriked } from '@strapi/icons';
-import { Formik } from 'formik';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import { Logo } from '../../../../components/UnauthenticatedLogo';
-import { Column, LayoutContent } from '../../../../layouts/UnauthenticatedLayout';
-import FieldActionWrapper from '../FieldActionWrapper';
-
-const PasswordInput = styled(TextInput)`
-  ::-ms-reveal {
-    display: none;
-  }
-`;
-
-const Login = ({ onSubmit, schema, children }) => {
-  const [passwordShown, setPasswordShown] = useState(false);
-  const { formatMessage } = useIntl();
-
-  return (
-    <Main>
-      <LayoutContent>
-        <Formik
-          enableReinitialize
-          initialValues={{
-            email: '',
-            password: '',
-            rememberMe: false,
-          }}
-          onSubmit={onSubmit}
-          validationSchema={schema}
-          validateOnChange={false}
-        >
-          {({ values, errors, handleChange }) => (
-            <Form noValidate>
-              <Column>
-                <Logo />
-                <Box paddingTop={6} paddingBottom={1}>
-                  <Typography variant="alpha" as="h1">
-                    {formatMessage({
-                      id: 'Auth.form.welcome.title',
-                      defaultMessage: 'Welcome!',
-                    })}
-                  </Typography>
-                </Box>
-                <Box paddingBottom={7}>
-                  <Typography variant="epsilon" textColor="neutral600">
-                    {formatMessage({
-                      id: 'Auth.form.welcome.subtitle',
-                      defaultMessage: 'Log in to your Strapi account',
-                    })}
-                  </Typography>
-                </Box>
-                {errors.errorMessage && (
-                  <Typography
-                    id="global-form-error"
-                    role="alert"
-                    tabIndex={-1}
-                    textColor="danger600"
-                  >
-                    {errors.errorMessage}
-                  </Typography>
-                )}
-              </Column>
-
-              <Flex direction="column" alignItems="stretch" gap={6}>
-                <TextInput
-                  error={
-                    errors.email
-                      ? formatMessage({
-                          id: errors.email,
-                          defaultMessage: 'This value is required.',
-                        })
-                      : ''
-                  }
-                  value={values.email}
-                  onChange={handleChange}
-                  label={formatMessage({ id: 'Auth.form.email.label', defaultMessage: 'Email' })}
-                  placeholder={formatMessage({
-                    id: 'Auth.form.email.placeholder',
-                    defaultMessage: 'kai@doe.com',
-                  })}
-                  name="email"
-                  required
-                />
-                <PasswordInput
-                  error={
-                    errors.password
-                      ? formatMessage({
-                          id: errors.password,
-                          defaultMessage: 'This value is required.',
-                        })
-                      : ''
-                  }
-                  onChange={handleChange}
-                  value={values.password}
-                  label={formatMessage({
-                    id: 'global.password',
-                    defaultMessage: 'Password',
-                  })}
-                  name="password"
-                  type={passwordShown ? 'text' : 'password'}
-                  endAction={
-                    <FieldActionWrapper
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setPasswordShown((prev) => !prev);
-                      }}
-                      label={formatMessage(
-                        passwordShown
-                          ? {
-                              id: 'Auth.form.password.show-password',
-                              defaultMessage: 'Show password',
-                            }
-                          : {
-                              id: 'Auth.form.password.hide-password',
-                              defaultMessage: 'Hide password',
-                            }
-                      )}
-                    >
-                      {passwordShown ? <Eye /> : <EyeStriked />}
-                    </FieldActionWrapper>
-                  }
-                  required
-                />
-                <Checkbox
-                  onValueChange={(checked) => {
-                    handleChange({ target: { value: checked, name: 'rememberMe' } });
-                  }}
-                  value={values.rememberMe}
-                  aria-label="rememberMe"
-                  name="rememberMe"
-                >
-                  {formatMessage({
-                    id: 'Auth.form.rememberMe.label',
-                    defaultMessage: 'Remember me',
-                  })}
-                </Checkbox>
-                <Button fullWidth type="submit">
-                  {formatMessage({ id: 'Auth.form.button.login', defaultMessage: 'Login' })}
-                </Button>
-              </Flex>
-            </Form>
-          )}
-        </Formik>
-        {children}
-      </LayoutContent>
-      <Flex justifyContent="center">
-        <Box paddingTop={4}>
-          <Link to="/auth/forgot-password">
-            {formatMessage({
-              id: 'Auth.link.forgot-password',
-              defaultMessage: 'Forgot your password?',
-            })}
-          </Link>
-        </Box>
-      </Flex>
-    </Main>
-  );
-};
-
-Login.defaultProps = {
-  children: null,
-  onSubmit() {},
-};
-
-Login.propTypes = {
-  children: PropTypes.node,
-  onSubmit: PropTypes.func,
-  schema: PropTypes.shape({
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default Login;

package/admin/src/pages/AuthPage/components/Login/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import { UnauthenticatedLayout } from '../../../../layouts/UnauthenticatedLayout';
-
-import BaseLogin from './BaseLogin';
-
-export const LoginCE = (loginProps) => {
-  return (
-    <UnauthenticatedLayout>
-      <BaseLogin {...loginProps} />
-    </UnauthenticatedLayout>
-  );
-};
-
-LoginCE.defaultProps = {
-  onSubmit: (e) => e.preventDefault(),
-};
-
-LoginCE.propTypes = {
-  onSubmit: PropTypes.func,
-};