[features][Auth logo customization]

packages/core/admin/admin/src/components/ConfigurationsProvider/index.js

@@ -1,45 +1,48 @@
-import React, { useMemo, useReducer, useRef } from 'react';
+import React, { useCallback, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
 
 const ConfigurationsProvider = ({
   children,
-  authLogo,
+  authLogo: defaultAuthLogo,
   menuLogo: defaultMenuLogo,
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const updateProjectSettings = ({ menuLogo }) => {
-    return dispatch({
-      type: 'UPDATE_PROJECT_SETTINGS',
-      values: {
-        menuLogo: menuLogo || defaultMenuLogo,
-      },
-    });
-  };
-
-  const updateProjectSettingsRef = useRef(updateProjectSettings);
+  const updateProjectSettings = useCallback(
+    ({ menuLogo, authLogo }) => {
+      return dispatch({
+        type: 'UPDATE_PROJECT_SETTINGS',
+        values: {
+          menuLogo: menuLogo || defaultMenuLogo,
+          authLogo: authLogo || defaultAuthLogo,
+        },
+      });
+    },
+    [defaultAuthLogo, defaultMenuLogo]
+  );
 
   const configurationValue = useMemo(() => {
     return {
       logos: {
         menu: { custom: menuLogo, default: defaultMenuLogo },
-        auth: { custom: null, default: authLogo },
+        auth: { custom: authLogo, default: defaultAuthLogo },
       },
-      updateProjectSettings: updateProjectSettingsRef.current,
+      updateProjectSettings,
       showReleaseNotification,
       showTutorials,
     };
   }, [
-    authLogo,
     menuLogo,
+    defaultMenuLogo,
+    authLogo,
+    defaultAuthLogo,
+    updateProjectSettings,
     showReleaseNotification,
     showTutorials,
-    updateProjectSettingsRef,
-    defaultMenuLogo,
   ]);
 
   return (

packages/core/admin/admin/src/components/ConfigurationsProvider/reducer.js

@@ -9,6 +9,7 @@ import produce from 'immer';
 
 const initialState = {
   menuLogo: null,
+  authLogo: null,
 };
 
 const reducer = (state = initialState, action) =>

packages/core/admin/admin/src/components/ConfigurationsProvider/tests/reducer.test.js

@@ -17,12 +17,14 @@ describe('ConfigurationsProvider | reducer', () => {
     const action = {
       type: 'UPDATE_PROJECT_SETTINGS',
       values: {
-        menuLogo: 'strapi.jpeg',
+        menuLogo: 'menu-strapi.jpeg',
+        authLogo: 'auth-strapi.jpeg',
       },
     };
 
     const expected = {
-      menuLogo: 'strapi.jpeg',
+      menuLogo: 'menu-strapi.jpeg',
+      authLogo: 'auth-strapi.jpeg',
     };
 
     expect(reducer(state, action)).toEqual(expected);

packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js

@@ -11,7 +11,7 @@ const Logo = () => {
     logos: { auth },
   } = useConfigurations();
 
-  return <Img src={auth.default} aria-hidden alt="" />;
+  return <Img src={auth.custom} aria-hidden alt="" />;
 };
 
 export default Logo;

packages/core/admin/admin/src/core/utils/axiosInstance.js

@@ -3,14 +3,16 @@ import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
 });
 
 instance.interceptors.request.use(
   async (config) => {
     config.headers = {
       Authorization: `Bearer ${auth.getToken()}`,
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
     };
 
     return config;

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

@@ -79,11 +79,15 @@ function App() {
       try {
         const {
           data: {
-            data: { hasAdmin, uuid, menuLogo },
+            data: { hasAdmin, uuid, menuLogo, authLogo },
           },
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
-        updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        updateProjectSettings({
+          menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
+          authLogo: prefixFileUrlWithBackendUrl(authLogo),
+        });
+
         const deviceId = await getUID();
 
         if (uuid) {

packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js

@@ -636,7 +636,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                 alt=""
                 aria-hidden="true"
                 class="c6"
-                src="defaultAuthLogo.png"
+                src="customAuthLogo.png"
               />
               <div
                 class="c1 c7"

packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js

@@ -430,7 +430,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
                   alt=""
                   aria-hidden="true"
                   class="c15"
-                  src="defaultAuthLogo.png"
+                  src="customAuthLogo.png"
                 />
                 <div
                   class="c0 c16"

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

@@ -788,7 +788,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                     alt=""
                     aria-hidden="true"
                     class="c15"
-                    src="defaultAuthLogo.png"
+                    src="customAuthLogo.png"
                   />
                   <div
                     class="c0 c16"

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -669,7 +669,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                     alt=""
                     aria-hidden="true"
                     class="c15"
-                    src="defaultAuthLogo.png"
+                    src="customAuthLogo.png"
                   />
                   <div
                     class="c0 c16"

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js

@@ -5,18 +5,19 @@ import { useTracking } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Box } from '@strapi/design-system/Box';
 import { Typography } from '@strapi/design-system/Typography';
-import LogoInput from '../LogoInput';
 import { useConfigurations } from '../../../../../../hooks';
+import { DIMENSION, SIZE } from '../../utils/constants';
+import LogoInput from '../LogoInput';
 import reducer, { initialState } from './reducer';
 import init from './init';
 
-const Form = forwardRef(({ projectSettingsStored }, ref) => {
+const Form = forwardRef(({ canUpdate, projectSettingsStored }, ref) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
   const {
-    logos: { menu },
+    logos: { menu, auth },
   } = useConfigurations();
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState, () =>
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, projectSettingsStored)
   );
 
@@ -28,15 +29,34 @@ const Form = forwardRef(({ projectSettingsStored }, ref) => {
   };
 
   const handleResetMenuLogo = () => {
-    trackUsage('didClickResetLogo');
+    trackUsage('didClickResetLogo', {
+      logo: 'menu',
+    });
 
     dispatch({
       type: 'RESET_CUSTOM_MENU_LOGO',
     });
   };
 
+  const handleChangeAuthLogo = (asset) => {
+    dispatch({
+      type: 'SET_CUSTOM_AUTH_LOGO',
+      value: asset,
+    });
+  };
+
+  const handleResetAuthLogo = () => {
+    trackUsage('didClickResetLogo', {
+      logo: 'auth',
+    });
+
+    dispatch({
+      type: 'RESET_CUSTOM_AUTH_LOGO',
+    });
+  };
+
   useImperativeHandle(ref, () => ({
-    getValues: () => ({ menuLogo: menuLogo.submit }),
+    getValues: () => ({ menuLogo: menuLogo.submit, authLogo: authLogo.submit }),
   }));
 
   return (
@@ -55,13 +75,48 @@ const Form = forwardRef(({ projectSettingsStored }, ref) => {
           defaultMessage: 'Customization',
         })}
       </Typography>
-      <Grid paddingTop={4}>
+      <Typography variant="pi" textColor="neutral600">
+        {formatMessage(
+          {
+            id: 'Settings.application.customization.size-details',
+            defaultMessage: 'Max dimension: {dimension}×{dimension}, Max file size: {size}KB',
+          },
+          { dimension: DIMENSION, size: SIZE }
+        )}
+      </Typography>
+      <Grid paddingTop={4} gap={4}>
         <GridItem col={6} s={12}>
           <LogoInput
-            onChangeLogo={handleChangeMenuLogo}
+            canUpdate={canUpdate}
             customLogo={menuLogo.display}
             defaultLogo={menu.default}
-            onResetMenuLogo={handleResetMenuLogo}
+            hint={formatMessage({
+              id: 'Settings.application.customization.menu-logo.carousel-hint',
+              defaultMessage: 'Replace the logo in the main navigation',
+            })}
+            label={formatMessage({
+              id: 'Settings.application.customization.carousel.menu-logo.title',
+              defaultMessage: 'Menu logo',
+            })}
+            onChangeLogo={handleChangeMenuLogo}
+            onResetLogo={handleResetMenuLogo}
+          />
+        </GridItem>
+        <GridItem col={6} s={12}>
+          <LogoInput
+            canUpdate={canUpdate}
+            customLogo={authLogo.display}
+            defaultLogo={auth.default}
+            hint={formatMessage({
+              id: 'Settings.application.customization.auth-logo.carousel-hint',
+              defaultMessage: 'Replace the logo in the authentication pages',
+            })}
+            label={formatMessage({
+              id: 'Settings.application.customization.carousel.auth-logo.title',
+              defaultMessage: 'Auth logo',
+            })}
+            onChangeLogo={handleChangeAuthLogo}
+            onResetLogo={handleResetAuthLogo}
           />
         </GridItem>
       </Grid>
@@ -70,10 +125,12 @@ const Form = forwardRef(({ projectSettingsStored }, ref) => {
 });
 
 Form.defaultProps = {
+  canUpdate: false,
   projectSettingsStored: null,
 };
 
 Form.propTypes = {
+  canUpdate: PropTypes.bool,
   projectSettingsStored: PropTypes.shape({
     menuLogo: PropTypes.shape({
       url: PropTypes.string,

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/init.js

@@ -5,6 +5,9 @@ const init = (initialState, projectSettingsStored) => {
     menuLogo: {
       display: projectSettingsStored.menuLogo,
     },
+    authLogo: {
+      display: projectSettingsStored.authLogo,
+    },
   });
 
   return copyInitialState;

packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/reducer.js

@@ -15,6 +15,13 @@ const initialState = {
       isReset: false,
     },
   },
+  authLogo: {
+    display: null,
+    submit: {
+      rawFile: null,
+      isReset: false,
+    },
+  },
 };
 
 const reducer = (state = initialState, action) =>
@@ -25,6 +32,11 @@ const reducer = (state = initialState, action) =>
         draftState.menuLogo.submit.rawFile = action.value.rawFile;
         break;
       }
+      case 'SET_CUSTOM_AUTH_LOGO': {
+        draftState.authLogo.display = action.value;
+        draftState.authLogo.submit.rawFile = action.value.rawFile;
+        break;
+      }
       case 'RESET_CUSTOM_MENU_LOGO': {
         draftState.menuLogo.display = null;
         draftState.menuLogo.submit = {
@@ -33,6 +45,14 @@ const reducer = (state = initialState, action) =>
         };
         break;
       }
+      case 'RESET_CUSTOM_AUTH_LOGO': {
+        draftState.authLogo.display = null;
+        draftState.authLogo.submit = {
+          rawFile: null,
+          isReset: true,
+        };
+        break;
+      }
       default: {
         return draftState;
       }