@strapi/admin 4.15.0-alpha.0 → 4.15.1

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

@@ -1,319 +0,0 @@
-import React, { useEffect, useReducer } from 'react';
-
-import { auth, useFetchClient, useGuidedTour, useQuery, useTracking } from '@strapi/helper-plugin';
-import axios from 'axios';
-import camelCase from 'lodash/camelCase';
-import get from 'lodash/get';
-import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
-import { Redirect, useHistory, useRouteMatch } from 'react-router-dom';
-
-import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
-import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
-import { useEnterprise } from '../../hooks/useEnterprise';
-import formatAPIErrors from '../../utils/formatAPIErrors';
-
-import { LoginCE } from './components/Login';
-import { FORMS } from './constants';
-import init from './init';
-import { initialState, reducer } from './reducer';
-
-const AuthPage = ({ hasAdmin, setHasAdmin }) => {
-  const {
-    push,
-    location: { search },
-  } = useHistory();
-  const { changeLocale } = useLocalesProvider();
-  const { setSkipped } = useGuidedTour();
-  const { trackUsage } = useTracking();
-  const {
-    params: { authType },
-  } = useRouteMatch('/auth/:authType');
-  const query = useQuery();
-  const Login = useEnterprise(
-    LoginCE,
-    async () => (await import('../../../../ee/admin/pages/AuthPage/components/Login')).LoginEE
-  );
-  const forms = useEnterprise(
-    FORMS,
-    async () => (await import('../../../../ee/admin/pages/AuthPage/constants')).FORMS,
-    {
-      combine(ceForms, eeForms) {
-        return {
-          ...ceForms,
-          ...eeForms,
-        };
-      },
-
-      defaultValue: FORMS,
-    }
-  );
-  const [{ formErrors, modifiedData, requestError }, dispatch] = useReducer(
-    reducer,
-    initialState,
-    init
-  );
-  const CancelToken = axios.CancelToken;
-  const source = CancelToken.source();
-  const { endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } =
-    forms?.[authType] ?? {};
-
-  useEffect(() => {
-    // Cancel request on unmount
-    return () => {
-      source.cancel('Component unmounted');
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const { post } = useFetchClient();
-
-  // Reset the state on navigation change
-  useEffect(() => {
-    dispatch({
-      type: 'RESET_PROPS',
-    });
-  }, [authType]);
-
-  const handleChange = ({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE',
-      keys: name,
-      value,
-    });
-  };
-
-  const handleSubmit = async (e, { setSubmitting, setErrors }) => {
-    setSubmitting(true);
-    const body = omit(e, fieldsToOmit);
-    const requestURL = `/admin/${endPoint}`;
-
-    if (authType === 'login') {
-      await loginRequest(e, requestURL, { setSubmitting, setErrors });
-    }
-
-    if (authType === 'register' || authType === 'register-admin') {
-      await registerRequest(e, requestURL, { setSubmitting, setErrors });
-    }
-
-    if (authType === 'forgot-password') {
-      await forgotPasswordRequest(body, requestURL, { setSubmitting, setErrors });
-    }
-
-    if (authType === 'reset-password') {
-      await resetPasswordRequest(body, requestURL, { setSubmitting, setErrors });
-    }
-  };
-
-  const forgotPasswordRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
-    try {
-      await post(requestURL, body, { cancelToken: source.token });
-
-      push('/auth/forgot-password-success');
-    } catch (err) {
-      console.error(err);
-
-      setErrors({ errorMessage: 'notification.error' });
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const loginRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
-    try {
-      const {
-        data: {
-          data: { token, user },
-        },
-      } = await post(requestURL, omit(body, fieldsToOmit), { cancelToken: source.token });
-
-      if (user.preferedLanguage) {
-        changeLocale(user.preferedLanguage);
-      }
-
-      auth.setToken(token, body.rememberMe);
-      auth.setUserInfo(user, body.rememberMe);
-
-      redirectToPreviousLocation();
-    } catch (err) {
-      if (err.response) {
-        const errorMessage = get(
-          err,
-          ['response', 'data', 'error', 'message'],
-          'Something went wrong'
-        );
-
-        if (camelCase(errorMessage).toLowerCase() === 'usernotactive') {
-          push('/auth/oops');
-
-          dispatch({
-            type: 'RESET_PROPS',
-          });
-
-          return;
-        }
-
-        setErrors({ errorMessage });
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const registerRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
-    try {
-      trackUsage('willCreateFirstAdmin');
-      const {
-        data: {
-          data: { token, user },
-        },
-      } = await post(requestURL, omit(body, fieldsToOmit), { cancelToken: source.token });
-
-      auth.setToken(token, false);
-      auth.setUserInfo(user, false);
-
-      setSubmitting(false);
-      setHasAdmin(true);
-
-      const { roles } = user;
-
-      if (roles) {
-        const isUserSuperAdmin = roles.find(({ code }) => code === 'strapi-super-admin');
-
-        if (isUserSuperAdmin) {
-          persistStateToLocaleStorage.setSkipped(false);
-          setSkipped(false);
-          trackUsage('didLaunchGuidedtour');
-        }
-      }
-
-      if (
-        (authType === 'register' && body.userInfo.news === true) ||
-        (authType === 'register-admin' && body.news === true)
-      ) {
-        push({
-          pathname: '/usecase',
-          search: `?hasAdmin=${hasAdmin}`,
-        });
-
-        return;
-      }
-
-      redirectToPreviousLocation();
-    } catch (err) {
-      trackUsage('didNotCreateFirstAdmin');
-
-      if (err.response) {
-        const { data } = err.response;
-        const apiErrors = formatAPIErrors(data);
-
-        setErrors({ apiErrors });
-      }
-    }
-  };
-
-  const resetPasswordRequest = async (body, requestURL, { setErrors, setSubmitting }) => {
-    try {
-      const {
-        data: {
-          data: { token, user },
-        },
-      } = await post(
-        requestURL,
-        { ...body, resetPasswordToken: query.get('code') },
-        { cancelToken: source.token }
-      );
-
-      auth.setToken(token, false);
-      auth.setUserInfo(user, false);
-
-      // Redirect to the homePage
-      push('/');
-    } catch (err) {
-      if (err.response) {
-        const errorMessage = get(err, ['response', 'data', 'message'], 'Something went wrong');
-        const errorStatus = get(err, ['response', 'data', 'statusCode'], 400);
-
-        dispatch({
-          type: 'SET_REQUEST_ERROR',
-          errorMessage,
-          errorStatus,
-        });
-        setErrors({ errorMessage });
-      }
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const redirectToPreviousLocation = () => {
-    if (authType === 'login') {
-      const redirectTo = query.get('redirectTo');
-      const redirectUrl = redirectTo ? decodeURIComponent(redirectTo) : '/';
-
-      push(redirectUrl);
-    } else {
-      push('/');
-    }
-  };
-
-  // Redirect the user to the login page if
-  // the endpoint does not exist or
-  // there is already an admin user oo
-  // the user is already logged in
-  if (!forms[authType] || (hasAdmin && authType === 'register-admin') || auth.getToken()) {
-    return <Redirect to="/" />;
-  }
-
-  // Redirect the user to the register-admin if it is the first user
-  if (!hasAdmin && authType !== 'register-admin') {
-    return (
-      <Redirect
-        to={{
-          pathname: '/auth/register-admin',
-          // Forward the `?redirectTo` from /auth/login
-          // /abc => /auth/login?redirectTo=%2Fabc => /auth/register-admin?redirectTo=%2Fabc
-          search,
-        }}
-      />
-    );
-  }
-
-  if (Login) {
-    // Assign the component to render for the login form
-    forms.login.Component = Login;
-  }
-
-  // block rendering until the Login EE component is fully loaded
-  if (!Login) {
-    return null;
-  }
-
-  const { Component } = forms?.[authType] ?? {};
-
-  return (
-    <Component
-      {...rest}
-      authType={authType}
-      fieldsToDisable={fieldsToDisable}
-      formErrors={formErrors}
-      inputsPrefix={inputsPrefix}
-      modifiedData={modifiedData}
-      onChange={handleChange}
-      onSubmit={handleSubmit}
-      requestError={requestError}
-      schema={schema}
-    />
-  );
-};
-
-AuthPage.defaultProps = {
-  hasAdmin: false,
-};
-
-AuthPage.propTypes = {
-  hasAdmin: PropTypes.bool,
-  setHasAdmin: PropTypes.func.isRequired,
-};
-
-export default AuthPage;

package/admin/src/pages/AuthPage/init.js

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

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

@@ -1,41 +0,0 @@
-import produce from 'immer';
-import set from 'lodash/set';
-/* eslint-disable consistent-return */
-
-const initialState = {
-  formErrors: {},
-  modifiedData: {},
-  requestError: null,
-};
-
-const reducer = (state, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'ON_CHANGE': {
-        set(draftState.modifiedData, action.keys.split('.'), action.value);
-        break;
-      }
-      case 'RESET_PROPS': {
-        return initialState;
-      }
-      case 'SET_DATA': {
-        draftState.modifiedData = action.data;
-        break;
-      }
-      case 'SET_ERRORS': {
-        draftState.formErrors = action.errors;
-        break;
-      }
-      case 'SET_REQUEST_ERROR': {
-        draftState.requestError = {
-          errorMessage: action.errorMessage,
-          errorStatus: action.errorStatus,
-        };
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export { initialState, reducer };

package/admin/src/pages/HomePage/CloudBox.js

@@ -1,85 +0,0 @@
-import React from 'react';
-
-import { Box, Flex, Typography } from '@strapi/design-system';
-import { pxToRem, useTracking } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import cloudIconBackgroundImage from './assets/strapi-cloud-background.png';
-import cloudFlagsImage from './assets/strapi-cloud-flags.svg';
-import cloudIcon from './assets/strapi-cloud-icon.svg';
-
-const BlockLink = styled.a`
-  text-decoration: none;
-`;
-
-const CloudCustomWrapper = styled(Box)`
-  background-image: url(${({ backgroundImage }) => backgroundImage});
-`;
-
-const CloudIconWrapper = styled(Flex)`
-  background: rgba(255, 255, 255, 0.3);
-`;
-
-const CloudBox = () => {
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-
-  return (
-    <BlockLink
-      href="https://cloud.strapi.io"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-      onClick={() => {
-        trackUsage('didClickOnTryStrapiCloudSection');
-      }}
-    >
-      <Flex
-        shadow="tableShadow"
-        hasRadius
-        padding={6}
-        background="neutral0"
-        position="relative"
-        gap={6}
-      >
-        <CloudCustomWrapper backgroundImage={cloudIconBackgroundImage} hasRadius padding={3}>
-          <CloudIconWrapper
-            width={pxToRem(32)}
-            height={pxToRem(32)}
-            justifyContent="center"
-            hasRadius
-            alignItems="center"
-          >
-            <img
-              src={cloudIcon}
-              alt={formatMessage({
-                id: 'app.components.BlockLink.cloud',
-                defaultMessage: 'Strapi Cloud',
-              })}
-            />
-          </CloudIconWrapper>
-        </CloudCustomWrapper>
-        <Flex gap={1} direction="column" alignItems="start">
-          <Flex>
-            <Typography fontWeight="semiBold" variant="pi">
-              {formatMessage({
-                id: 'app.components.BlockLink.cloud',
-                defaultMessage: 'Strapi Cloud',
-              })}
-            </Typography>
-          </Flex>
-          <Typography textColor="neutral600">
-            {formatMessage({
-              id: 'app.components.BlockLink.cloud.content',
-              defaultMessage:
-                'A fully composable, and collaborative platform to boost your team velocity.',
-            })}
-          </Typography>
-          <Box src={cloudFlagsImage} position="absolute" top={0} right={0} as="img" />
-        </Flex>
-      </Flex>
-    </BlockLink>
-  );
-};
-
-export default CloudBox;

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -1,106 +0,0 @@
-import React from 'react';
-
-import { Flex } from '@strapi/design-system';
-import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import { CodeSquare, FeatherSquare, InformationSquare, PlaySquare } from '@strapi/icons';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-import CloudBox from './CloudBox';
-
-const BlockLink = styled.a`
-  text-decoration: none;
-`;
-
-const ContentBlocks = () => {
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-
-  const handleClick = (eventName) => {
-    trackUsage(eventName);
-  };
-
-  return (
-    <Flex direction="column" alignItems="stretch" gap={5}>
-      <CloudBox />
-      <BlockLink
-        href="https://strapi.io/resource-center"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        onClick={() => handleClick('didClickonReadTheDocumentationSection')}
-      >
-        <ContentBox
-          title={formatMessage({
-            id: 'global.documentation',
-            defaultMessage: 'Documentation',
-          })}
-          subtitle={formatMessage({
-            id: 'app.components.BlockLink.documentation.content',
-            defaultMessage: 'Discover the essential concepts, guides and instructions.',
-          })}
-          icon={<InformationSquare />}
-          iconBackground="primary100"
-        />
-      </BlockLink>
-      <BlockLink
-        href="https://strapi.io/starters"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        onClick={() => handleClick('didClickonCodeExampleSection')}
-      >
-        <ContentBox
-          title={formatMessage({
-            id: 'app.components.BlockLink.code',
-            defaultMessage: 'Code example',
-          })}
-          subtitle={formatMessage({
-            id: 'app.components.BlockLink.code.content',
-            defaultMessage: 'Learn by using ready-made starters for your projects.',
-          })}
-          icon={<CodeSquare />}
-          iconBackground="warning100"
-        />
-      </BlockLink>
-      <BlockLink
-        href="https://strapi.io/blog/categories/tutorials"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        onClick={() => handleClick('didClickonTutorialSection')}
-      >
-        <ContentBox
-          title={formatMessage({
-            id: 'app.components.BlockLink.tutorial',
-            defaultMessage: 'Tutorials',
-          })}
-          subtitle={formatMessage({
-            id: 'app.components.BlockLink.tutorial.content',
-            defaultMessage: 'Follow step-by-step instructions to use and customize Strapi.',
-          })}
-          icon={<PlaySquare />}
-          iconBackground="secondary100"
-        />
-      </BlockLink>
-      <BlockLink
-        href="https://strapi.io/blog"
-        target="_blank"
-        rel="noopener noreferrer nofollow"
-        onClick={() => handleClick('didClickonBlogSection')}
-      >
-        <ContentBox
-          title={formatMessage({
-            id: 'app.components.BlockLink.blog',
-            defaultMessage: 'Blog',
-          })}
-          subtitle={formatMessage({
-            id: 'app.components.BlockLink.blog.content',
-            defaultMessage: 'Read the latest news about Strapi and the ecosystem.',
-          })}
-          icon={<FeatherSquare />}
-          iconBackground="alternative100"
-        />
-      </BlockLink>
-    </Flex>
-  );
-};
-
-export default ContentBlocks;

package/admin/src/pages/HomePage/HomeHeader.js

@@ -1,76 +0,0 @@
-import React from 'react';
-
-import { Box, Button, Flex, Typography } from '@strapi/design-system';
-import { Link } from '@strapi/design-system/v2';
-import { ArrowRight } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-
-const WordWrap = styled(Typography)`
-  word-break: break-word;
-`;
-
-const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div>
-      <Box paddingLeft={6} paddingBottom={10}>
-        <Flex direction="column" alignItems="flex-start" gap={5}>
-          <Typography as="h1" variant="alpha">
-            {hasCreatedContentType
-              ? formatMessage({
-                  id: 'app.components.HomePage.welcome.again',
-                  defaultMessage: 'Welcome 👋',
-                })
-              : formatMessage({
-                  id: 'app.components.HomePage.welcome',
-                  defaultMessage: 'Welcome on board!',
-                })}
-          </Typography>
-          <WordWrap textColor="neutral600" variant="epsilon">
-            {hasCreatedContentType
-              ? formatMessage({
-                  id: 'app.components.HomePage.welcomeBlock.content.again',
-                  defaultMessage:
-                    'We hope you are making progress on your project! Feel free to read the latest news about Strapi. We are giving our best to improve the product based on your feedback.',
-                })
-              : formatMessage({
-                  id: 'app.components.HomePage.welcomeBlock.content',
-                  defaultMessage:
-                    'Congrats! You are logged as the first administrator. To discover the powerful features provided by Strapi, we recommend you to create your first Content type!',
-                })}
-          </WordWrap>
-          {hasCreatedContentType ? (
-            <Link isExternal href="https://strapi.io/blog">
-              {formatMessage({
-                id: 'app.components.HomePage.button.blog',
-                defaultMessage: 'See more on the blog',
-              })}
-            </Link>
-          ) : (
-            <Button size="L" onClick={onCreateCT} endIcon={<ArrowRight />}>
-              {formatMessage({
-                id: 'app.components.HomePage.create',
-                defaultMessage: 'Create your first Content type',
-              })}
-            </Button>
-          )}
-        </Flex>
-      </Box>
-    </div>
-  );
-};
-
-HomeHeader.defaultProps = {
-  hasCreatedContentType: undefined,
-  onCreateCT: undefined,
-};
-
-HomeHeader.propTypes = {
-  hasCreatedContentType: PropTypes.bool,
-  onCreateCT: PropTypes.func,
-};
-
-export default HomeHeader;