Merge pull request #12722 from strapi/chore/events

Add events to monitor first administrator account creation

packages/core/admin/admin/src/pages/AuthPage/components/Register/index.js

@@ -15,7 +15,13 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
-import { Form, useQuery, useNotification } from '@strapi/helper-plugin';
+import {
+  Form,
+  useQuery,
+  useNotification,
+  useTracking,
+  getYupInnerErrors,
+} from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik';
@@ -41,12 +47,14 @@ const PasswordInput = styled(TextInput)`
   }
 `;
 
-const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
+const Register = ({ authType, fieldsToDisable, noSignin, onSubmit, schema }) => {
   const toggleNotification = useNotification();
   const { push } = useHistory();
   const [passwordShown, setPasswordShown] = useState(false);
   const [confirmPasswordShown, setConfirmPasswordShown] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
   const [userInfo, setUserInfo] = useState({});
+  const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
   const query = useQuery();
   const registrationToken = query.get('registrationToken');
@@ -97,18 +105,36 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
             registrationToken: registrationToken || undefined,
             news: false,
           }}
-          onSubmit={(data, formik) => {
+          onSubmit={async (data, formik) => {
+            try {
+              await schema.validate(data, { abortEarly: false });
+
+              if (submitCount > 0 && authType === 'register-admin') {
+                trackUsage('didSubmitWithErrorsFirstAdmin', { count: submitCount.toString() });
+              }
+
               if (registrationToken) {
                 // We need to pass the registration token in the url param to the api in order to submit another admin user
-              onSubmit({ userInfo: omit(data, ['registrationToken']), registrationToken }, formik);
+                onSubmit(
+                  { userInfo: omit(data, ['registrationToken']), registrationToken },
+                  formik
+                );
               } else {
                 onSubmit(data, formik);
               }
+            } catch (err) {
+              const errors = getYupInnerErrors(err);
+              setSubmitCount(submitCount + 1);
+
+              formik.setErrors(errors);
+            }
           }}
-          validationSchema={schema}
+          // Leaving this part commented when we remove the tracking for the submitCount
+          // validationSchema={schema}
           validateOnChange={false}
         >
-          {({ values, errors, handleChange }) => (
+          {({ values, errors, handleChange }) => {
+            return (
               <Form noValidate>
                 <Main>
                   <Column>
@@ -138,14 +164,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                           name="firstname"
                           required
                           value={values.firstname}
-                        error={
+                          error={errors.firstname ? formatMessage(errors.firstname) : undefined}
-                          errors.firstname
-                            ? formatMessage({
-                                id: errors.firstname,
-                                defaultMessage: 'This value is required.',
-                              })
-                            : undefined
-                        }
                           onChange={handleChange}
                           label={formatMessage({
                             id: 'Auth.form.firstname.label',
@@ -170,14 +189,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                       disabled={fieldsToDisable.includes('email')}
                       value={values.email}
                       onChange={handleChange}
-                    error={
+                      error={errors.email ? formatMessage(errors.email) : undefined}
-                      errors.email
-                        ? formatMessage({
-                            id: errors.email,
-                            defaultMessage: 'This value is required.',
-                          })
-                        : undefined
-                    }
                       required
                       label={formatMessage({
                         id: 'Auth.form.email.label',
@@ -189,14 +201,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                       name="password"
                       onChange={handleChange}
                       value={values.password}
-                    error={
+                      error={errors.password ? formatMessage(errors.password) : undefined}
-                      errors.password
-                        ? formatMessage({
-                            id: errors.password,
-                            defaultMessage: 'This value is required',
-                          })
-                        : undefined
-                    }
                       endAction={
                         // eslint-disable-next-line react/jsx-wrap-multilines
                         <FieldActionWrapper
@@ -236,12 +241,7 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                       onChange={handleChange}
                       value={values.confirmPassword}
                       error={
-                      errors.confirmPassword
+                        errors.confirmPassword ? formatMessage(errors.confirmPassword) : undefined
-                        ? formatMessage({
-                            id: errors.confirmPassword,
-                            defaultMessage: 'This value is required.',
-                          })
-                        : undefined
                       }
                       endAction={
                         // eslint-disable-next-line react/jsx-wrap-multilines
@@ -315,7 +315,8 @@ const Register = ({ fieldsToDisable, noSignin, onSubmit, schema }) => {
                   </Stack>
                 </Main>
               </Form>
-          )}
+            );
+          }}
         </Formik>
         {!noSignin && (
           <Box paddingTop={4}>
@@ -341,10 +342,14 @@ Register.defaultProps = {
 };
 
 Register.propTypes = {
+  authType: PropTypes.string.isRequired,
   fieldsToDisable: PropTypes.array,
   noSignin: PropTypes.bool,
   onSubmit: PropTypes.func,
-  schema: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired,
+  schema: PropTypes.shape({
+    validate: PropTypes.func.isRequired,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default Register;

packages/core/admin/admin/src/pages/AuthPage/index.js

@@ -4,7 +4,7 @@ import camelCase from 'lodash/camelCase';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
-import { auth, useQuery, useGuidedTour } from '@strapi/helper-plugin';
+import { auth, useQuery, useGuidedTour, useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import forms from 'ee_else_ce/pages/AuthPage/utils/forms';
 import persistStateToLocaleStorage from '../../components/GuidedTour/utils/persistStateToLocaleStorage';
@@ -17,6 +17,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   const { push } = useHistory();
   const { changeLocale } = useLocalesProvider();
   const { setSkipped } = useGuidedTour();
+  const { trackUsage } = useTracking();
   const {
     params: { authType },
   } = useRouteMatch('/auth/:authType');
@@ -146,6 +147,8 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
 
   const registerRequest = async (body, requestURL, { setSubmitting, setErrors }) => {
     try {
+      trackUsage('willCreateFirstAdmin');
+
       const {
         data: {
           data: { token, user },
@@ -189,6 +192,8 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
       // Redirect to the homePage
       push('/');
     } catch (err) {
+      trackUsage('didNotCreateFirstAdmin');
+
       if (err.response) {
         const { data } = err.response;
         const apiErrors = formatAPIErrors(data);
@@ -249,6 +254,7 @@ const AuthPage = ({ hasAdmin, setHasAdmin }) => {
   return (
     <Component
       {...rest}
+      authType={authType}
       fieldsToDisable={fieldsToDisable}
       formErrors={formErrors}
       inputsPrefix={inputsPrefix}

packages/core/strapi/lib/Strapi.js

@@ -205,7 +205,13 @@ class Strapi {
       this.config.get('admin.autoOpen', true) !== false;
 
     if (shouldOpenAdmin && !isInitialized) {
+      try {
         await utils.openBrowser(this.config);
+        this.telemetry.send('didOpenTab');
+      } catch (e) {
+        this.telemetry.send('didNotOpenTab');
+      }
+     ;
     }
   }