@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

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

@@ -1,73 +1,186 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Padded } from '@buffetjs/core';
-import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import { BaselineAlignment } from '@strapi/helper-plugin';
-import Button from '../../../../components/FullWidthButton';
-import AuthLink from '../AuthLink';
-import Input from '../Input';
+import { Form } from '@strapi/helper-plugin';
+import { Box } from '@strapi/parts/Box';
+import { Stack } from '@strapi/parts/Stack';
+import { Main } from '@strapi/parts/Main';
+import { Row } from '@strapi/parts/Row';
+import { Link } from '@strapi/parts/Link';
+import { Button } from '@strapi/parts/Button';
+import { TextInput } from '@strapi/parts/TextInput';
+import { H1, Text } from '@strapi/parts/Text';
+import Hide from '@strapi/icons/Hide';
+import Show from '@strapi/icons/Show';
+import { Formik } from 'formik';
+import UnauthenticatedLayout, {
+  Column,
+  LayoutContent,
+} from '../../../../layouts/UnauthenticatedLayout';
 import Logo from '../Logo';
-import Section from '../Section';
-import Box from '../Box';
+import FieldActionWrapper from '../FieldActionWrapper';
 
-const ResetPassword = ({ formErrors, modifiedData, onChange, onSubmit, requestError }) => {
+const ForgotPassword = ({ onSubmit, schema }) => {
+  const [passwordShown, setPasswordShown] = useState(false);
+  const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);
   const { formatMessage } = useIntl();
 
   return (
-    <>
-      <Section textAlign="center">
-        <Logo />
-      </Section>
-      <Section withBackground>
-        <BaselineAlignment top size="25px">
-          <Box errorMessage={get(requestError, 'errorMessage', null)}>
-            <form onSubmit={onSubmit}>
-              <Input
-                autoFocus
-                error={formErrors.password}
-                label="Auth.form.password.label"
-                name="password"
-                onChange={onChange}
-                type="password"
-                validations={{ required: true }}
-                value={modifiedData.password}
-              />
-              <Input
-                error={formErrors.confirmPassword}
-                label="Auth.form.confirmPassword.label"
-                name="confirmPassword"
-                onChange={onChange}
-                type="password"
-                validations={{ required: true }}
-                value={modifiedData.confirmPassword}
-              />
-              <BaselineAlignment top size="3px" />
-              <Padded top>
-                <Button type="submit" color="primary" textTransform="uppercase">
-                  {formatMessage({ id: 'Auth.form.button.reset-password' })}
-                </Button>
-              </Padded>
-            </form>
+    <UnauthenticatedLayout>
+      <Main>
+        <LayoutContent>
+          <Formik
+            enableReinitialize
+            initialValues={{
+              password: '',
+              confirmPassword: '',
+            }}
+            onSubmit={onSubmit}
+            validationSchema={schema}
+            validateOnChange={false}
+          >
+            {({ values, errors, handleChange }) => (
+              <Form noValidate>
+                <Column>
+                  <Logo />
+                  <Box paddingTop={6} paddingBottom={7}>
+                    <H1>
+                      {formatMessage({
+                        id: 'Auth.reset-password.title',
+                        defaultMessage: 'Reset password',
+                      })}
+                    </H1>
+                  </Box>
+                  {errors.errorMessage && (
+                    <Text id="global-form-error" role="alert" tabIndex={-1} textColor="danger600">
+                      {formatMessage({
+                        id: errors.errorMessage,
+                        defaultMessage: 'An error occurred',
+                      })}
+                    </Text>
+                  )}
+                </Column>
+
+                <Stack size={6}>
+                  <TextInput
+                    name="password"
+                    onChange={handleChange}
+                    value={values.password}
+                    error={
+                      errors.password
+                        ? formatMessage({
+                            id: errors.password,
+                            defaultMessage: 'This field is required.',
+                          })
+                        : undefined
+                    }
+                    endAction={
+                      <FieldActionWrapper
+                        onClick={e => {
+                          e.preventDefault();
+                          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 ? <Show /> : <Hide />}
+                      </FieldActionWrapper>
+                    }
+                    hint={formatMessage({
+                      id: 'Auth.form.password.hint',
+                      defaultMessage:
+                        'Password must contain at least 8 characters, 1 uppercase, 1 lowercase and 1 number',
+                    })}
+                    required
+                    label={formatMessage({
+                      id: 'Auth.form.password.label',
+                      defaultMessage: 'Password',
+                    })}
+                    type={passwordShown ? 'text' : 'password'}
+                  />
+                  <TextInput
+                    name="confirmPassword"
+                    onChange={handleChange}
+                    value={values.confirmPassword}
+                    error={
+                      errors.confirmPassword
+                        ? formatMessage({
+                            id: errors.confirmPassword,
+                            defaultMessage: 'This value is required.',
+                          })
+                        : undefined
+                    }
+                    endAction={
+                      <FieldActionWrapper
+                        onClick={e => {
+                          e.preventDefault();
+                          setConfirmPasswordShown(prev => !prev);
+                        }}
+                        label={formatMessage(
+                          passwordShown
+                            ? {
+                                id: 'Auth.form.password.show-password',
+                                defaultMessage: 'Show password',
+                              }
+                            : {
+                                id: 'Auth.form.password.hide-password',
+                                defaultMessage: 'Hide password',
+                              }
+                        )}
+                      >
+                        {confirmPasswordShown ? <Show /> : <Hide />}
+                      </FieldActionWrapper>
+                    }
+                    required
+                    label={formatMessage({
+                      id: 'Auth.form.confirmPassword.label',
+                      defaultMessage: 'Confirmation Password',
+                    })}
+                    type={confirmPasswordShown ? 'text' : 'password'}
+                  />
+                  <Button fullwidth type="submit">
+                    {formatMessage({
+                      id: 'Auth.form.button.reset-password',
+                      defaultMessage: 'Change password',
+                    })}
+                  </Button>
+                </Stack>
+              </Form>
+            )}
+          </Formik>
+        </LayoutContent>
+        <Row justifyContent="center">
+          <Box paddingTop={4}>
+            <Link to="/auth/login">
+              <Text small>
+                {formatMessage({ id: 'Auth.link.ready', defaultMessage: 'Ready to sign in?' })}
+              </Text>
+            </Link>
           </Box>
-        </BaselineAlignment>
-      </Section>
-      <AuthLink label="Auth.link.ready" to="/auth/login" />
-    </>
+        </Row>
+      </Main>
+    </UnauthenticatedLayout>
   );
 };
 
-ResetPassword.defaultProps = {
+ForgotPassword.defaultProps = {
   onSubmit: e => e.preventDefault(),
-  requestError: null,
 };
 
-ResetPassword.propTypes = {
-  formErrors: PropTypes.object.isRequired,
-  modifiedData: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
+ForgotPassword.propTypes = {
   onSubmit: PropTypes.func,
-  requestError: PropTypes.object,
+  schema: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
-export default ResetPassword;
+export default ForgotPassword;

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

@@ -1,29 +1,22 @@
 import React, { useEffect, useReducer } from 'react';
 import axios from 'axios';
-import { camelCase, get, omit, upperFirst } from 'lodash';
+import { camelCase, get, omit } from 'lodash';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
-import { BaselineAlignment, auth, useNotification, useQuery } from '@strapi/helper-plugin';
-import { Padded } from '@buffetjs/core';
+import { auth, useQuery } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import forms from 'ee_else_ce/pages/AuthPage/utils/forms';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
-import NavTopRightWrapper from '../../components/NavTopRightWrapper';
-import PageTitle from '../../components/PageTitle';
-import LocaleToggle from '../../components/LocaleToggle';
-import checkFormValidity from '../../utils/checkFormValidity';
 import formatAPIErrors from '../../utils/formatAPIErrors';
 import init from './init';
 import { initialState, reducer } from './reducer';
 
 const AuthPage = ({ hasAdmin, setHasAdmin }) => {
-  const toggleNotification = useNotification();
   const { push } = useHistory();
   const { changeLocale } = useLocalesProvider();
   const {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
   const query = useQuery();
-  const registrationToken = query.get('registrationToken');
   const { Component, endPoint, fieldsToDisable, fieldsToOmit, inputsPrefix, schema, ...rest } = get(
     forms,
     authType,
@@ -52,41 +45,6 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     });
   }, [authType]);
 
-  useEffect(() => {
-    if (authType === 'register') {
-      const getData = async () => {
-        try {
-          const {
-            data: { data },
-          } = await axios.get(
-            `${strapi.backendURL}/admin/registration-info?registrationToken=${registrationToken}`
-          );
-
-          if (data) {
-            dispatch({
-              type: 'SET_DATA',
-              data: { registrationToken, userInfo: data },
-            });
-          }
-        } catch (err) {
-          const errorMessage = get(err, ['response', 'data', 'message'], 'An error occurred');
-
-          toggleNotification({
-            type: 'warning',
-            message: errorMessage,
-          });
-
-          // Redirect to the oops page in case of an invalid token
-          // @alexandrebodin @JAB I am not sure it is the wanted behavior
-          push(`/auth/oops?info=${encodeURIComponent(errorMessage)}`);
-        }
-      };
-
-      getData();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authType]);
-
   const handleChange = ({ target: { name, value } }) => {
     dispatch({
       type: 'ON_CHANGE',
@@ -95,44 +53,29 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     });
   };
 
-  const handleSubmit = async e => {
-    e.preventDefault();
+  const handleSubmit = async (e, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+    const body = omit(e, fieldsToOmit);
+    const requestURL = `/admin/${endPoint}`;
 
-    dispatch({
-      type: 'SET_ERRORS',
-      errors: {},
-    });
-
-    const errors = await checkFormValidity(modifiedData, schema);
-
-    dispatch({
-      type: 'SET_ERRORS',
-      errors: errors || {},
-    });
-
-    if (!errors) {
-      const body = omit(modifiedData, fieldsToOmit);
-      const requestURL = `/admin/${endPoint}`;
-
-      if (authType === 'login') {
-        await loginRequest(body, requestURL);
-      }
+    if (authType === 'login') {
+      await loginRequest(e, requestURL, { setSubmitting, setErrors });
+    }
 
-      if (authType === 'register' || authType === 'register-admin') {
-        await registerRequest(body, requestURL);
-      }
+    if (authType === 'register' || authType === 'register-admin') {
+      await registerRequest(e, requestURL, { setSubmitting, setErrors });
+    }
 
-      if (authType === 'forgot-password') {
-        await forgotPasswordRequest(body, requestURL);
-      }
+    if (authType === 'forgot-password') {
+      await forgotPasswordRequest(body, requestURL, { setSubmitting, setErrors });
+    }
 
-      if (authType === 'reset-password') {
-        await resetPasswordRequest(body, requestURL);
-      }
+    if (authType === 'reset-password') {
+      await resetPasswordRequest(body, requestURL, { setSubmitting, setErrors });
     }
   };
 
-  const forgotPasswordRequest = async (body, requestURL) => {
+  const forgotPasswordRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
       await axios({
         method: 'POST',
@@ -145,14 +88,13 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
     } catch (err) {
       console.error(err);
 
-      toggleNotification({
-        type: 'warning',
-        message: { id: 'notification.error' },
-      });
+      setErrors({ errorMessage: 'notification.error' });
+    } finally {
+      setSubmitting(false);
     }
   };
 
-  const loginRequest = async (body, requestURL) => {
+  const loginRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
       const {
         data: {
@@ -161,7 +103,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       } = await axios({
         method: 'POST',
         url: `${strapi.backendURL}${requestURL}`,
-        data: body,
+        data: omit(body, fieldsToOmit),
         cancelToken: source.token,
       });
 
@@ -169,14 +111,13 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         changeLocale(user.preferedLanguage);
       }
 
-      auth.setToken(token, modifiedData.rememberMe);
-      auth.setUserInfo(user, modifiedData.rememberMe);
+      auth.setToken(token, body.rememberMe);
+      auth.setUserInfo(user, body.rememberMe);
 
       push('/');
     } catch (err) {
       if (err.response) {
         const errorMessage = get(err, ['response', 'data', 'message'], 'Something went wrong');
-        const errorStatus = get(err, ['response', 'data', 'statusCode'], 400);
 
         if (camelCase(errorMessage).toLowerCase() === 'usernotactive') {
           push('/auth/oops');
@@ -188,16 +129,14 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
           return;
         }
 
-        dispatch({
-          type: 'SET_REQUEST_ERROR',
-          errorMessage,
-          errorStatus,
-        });
+        setErrors({ errorMessage });
       }
+    } finally {
+      setSubmitting(false);
     }
   };
 
-  const registerRequest = async (body, requestURL) => {
+  const registerRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
       const {
         data: {
@@ -206,7 +145,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       } = await axios({
         method: 'POST',
         url: `${strapi.backendURL}${requestURL}`,
-        data: body,
+        data: omit(body, fieldsToOmit),
         cancelToken: source.token,
       });
 
@@ -214,8 +153,8 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       auth.setUserInfo(user, false);
 
       if (
-        (authType === 'register' && modifiedData.userInfo.news === true) ||
-        (authType === 'register-admin' && modifiedData.news === true)
+        (authType === 'register' && body.userInfo.news === true) ||
+        (authType === 'register-admin' && body.news === true)
       ) {
         axios({
           method: 'POST',
@@ -224,9 +163,11 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
             email: user.email,
             username: user.firstname,
           },
+          cancelToken: source.token,
         });
       }
       // Redirect to the homePage
+      setSubmitting(false);
       setHasAdmin(true);
       push('/');
     } catch (err) {
@@ -234,15 +175,12 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
         const { data } = err.response;
         const apiErrors = formatAPIErrors(data);
 
-        dispatch({
-          type: 'SET_ERRORS',
-          errors: apiErrors,
-        });
+        setErrors({ apiErrors });
       }
     }
   };
 
-  const resetPasswordRequest = async (body, requestURL) => {
+  const resetPasswordRequest = async (body, requestURL, { setErrors, setSubmitting }) => {
     try {
       const {
         data: {
@@ -270,7 +208,10 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
           errorMessage,
           errorStatus,
         });
+        setErrors({ errorMessage });
       }
+    } finally {
+      setSubmitting(false);
     }
   };
 
@@ -288,24 +229,17 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   }
 
   return (
-    <Padded bottom size="md">
-      <PageTitle title={upperFirst(authType)} />
-      <NavTopRightWrapper>
-        <LocaleToggle isLogged className="localeDropdownMenuNotLogged" />
-      </NavTopRightWrapper>
-      <BaselineAlignment top size="78px">
-        <Component
-          {...rest}
-          fieldsToDisable={fieldsToDisable}
-          formErrors={formErrors}
-          inputsPrefix={inputsPrefix}
-          modifiedData={modifiedData}
-          onChange={handleChange}
-          onSubmit={handleSubmit}
-          requestError={requestError}
-        />
-      </BaselineAlignment>
-    </Padded>
+    <Component
+      {...rest}
+      fieldsToDisable={fieldsToDisable}
+      formErrors={formErrors}
+      inputsPrefix={inputsPrefix}
+      modifiedData={modifiedData}
+      onChange={handleChange}
+      onSubmit={handleSubmit}
+      requestError={requestError}
+      schema={schema}
+    />
   );
 };
 

package/admin/src/pages/AuthPage/utils/forms.js

@@ -58,21 +58,19 @@ const forms = {
     fieldsToDisable: ['email'],
     fieldsToOmit: ['userInfo.confirmPassword', 'userInfo.news', 'userInfo.email'],
     schema: yup.object().shape({
-      userInfo: yup.object().shape({
-        firstname: yup.string().required(translatedErrors.required),
-        lastname: yup.string().required(translatedErrors.required),
-        password: yup
-          .string()
-          .min(8, translatedErrors.minLength)
-          .matches(/[a-z]/, 'components.Input.error.contain.lowercase')
-          .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
-          .matches(/\d/, 'components.Input.error.contain.number')
-          .required(translatedErrors.required),
-        confirmPassword: yup
-          .string()
-          .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')
-          .required(translatedErrors.required),
-      }),
+      firstname: yup.string().required(translatedErrors.required),
+      lastname: yup.string().required(translatedErrors.required),
+      password: yup
+        .string()
+        .min(8, translatedErrors.minLength)
+        .matches(/[a-z]/, 'components.Input.error.contain.lowercase')
+        .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
+        .matches(/\d/, 'components.Input.error.contain.number')
+        .required(translatedErrors.required),
+      confirmPassword: yup
+        .string()
+        .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')
+        .required(translatedErrors.required),
       registrationToken: yup.string().required(translatedErrors.required),
     }),
     inputsPrefix: 'userInfo.',
@@ -93,6 +91,10 @@ const forms = {
         .matches(/[A-Z]/, 'components.Input.error.contain.uppercase')
         .matches(/\d/, 'components.Input.error.contain.number')
         .required(translatedErrors.required),
+      email: yup
+        .string()
+        .email(translatedErrors.email)
+        .required(translatedErrors.required),
       confirmPassword: yup
         .string()
         .oneOf([yup.ref('password'), null], 'components.Input.error.password.noMatch')

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { Stack } from '@strapi/parts/Stack';
+import ReadDoc from '@strapi/icons/ReadDoc';
+import CodeExample from '@strapi/icons/CodeExample';
+import Tutorial from '@strapi/icons/Tutorial';
+import Blog from '@strapi/icons/Blog';
+import { ContentBox } from '@strapi/helper-plugin';
+
+const BlockLink = styled.a`
+  text-decoration: none;
+`;
+
+const ContentBlocks = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Stack size={5}>
+      <BlockLink
+        href="https://strapi.io/resource-center"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.documentation',
+            defaultMessage: 'Read the documentation',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.documentation.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
+          icon={<ReadDoc />}
+          iconBackground="primary100"
+        />
+      </BlockLink>
+      <BlockLink
+        href="https://strapi.io/starters"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.code',
+            defaultMessage: 'Code example',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.code.content',
+            defaultMessage: 'Learn by testing real project developed by the community',
+          })}
+          icon={<CodeExample />}
+          iconBackground="warning100"
+        />
+      </BlockLink>
+      <BlockLink
+        href="https://strapi.io/blog/categories/tutorials"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.tutorial',
+            defaultMessage: 'Tutorial',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.tutorial.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
+          icon={<Tutorial />}
+          iconBackground="secondary100"
+        />
+      </BlockLink>
+      <BlockLink href="https://strapi.io/blog" target="_blank" rel="noopener noreferrer nofollow">
+        <ContentBox
+          title={formatMessage({
+            id: 'app.components.BlockLink.blog',
+            defaultMessage: 'Blog',
+          })}
+          subtitle={formatMessage({
+            id: 'app.components.BlockLink.blog.content',
+            defaultMessage: 'Discover the concepts, reference, guides and tutorials',
+          })}
+          icon={<Blog />}
+          iconBackground="alternative100"
+        />
+      </BlockLink>
+    </Stack>
+  );
+};
+
+export default ContentBlocks;