diff --git a/src/client/components/Routes.js b/src/client/components/Routes.js index 4f90d12d8d..d1f8c1bfe2 100644 --- a/src/client/components/Routes.js +++ b/src/client/components/Routes.js @@ -14,7 +14,7 @@ import MediaLibrary from './views/MediaLibrary'; import Edit from './views/collections/Edit'; import EditGlobal from './views/globals/Edit'; import { requests } from '../api'; -import customComponents from './custom-components'; +import customComponents from './customComponents'; import RedirectToLogin from './utilities/RedirectToLogin'; const Routes = () => { diff --git a/src/client/components/custom-components.js b/src/client/components/customComponents.js similarity index 65% rename from src/client/components/custom-components.js rename to src/client/components/customComponents.js index fdf789537c..599fc87d2c 100644 --- a/src/client/components/custom-components.js +++ b/src/client/components/customComponents.js @@ -1,21 +1,20 @@ function stringify(obj) { if (typeof obj === 'object') { - var result = [] - Object.keys(obj).forEach(function (key) { - var val = stringify(obj[key]) + const result = []; + Object.keys(obj).forEach((key) => { + const val = stringify(obj[key]); if (val !== null) { - result.push('"' + key + '": ' + val) + result.push(`"${key}": ${val}`); } - }) - return "{" + result.join(",") + "}" + }); + return `{${result.join(',')}}`; } return `React.lazy(() => import('${obj}'))`; } module.exports = function (config) { - let allCollectionComponents = config.collections.reduce((obj, collection) => { - + const allCollectionComponents = config.collections.reduce((obj, collection) => { obj[collection.slug] = { fields: {}, ...(collection.components || {}), @@ -24,7 +23,7 @@ module.exports = function (config) { collection.fields.forEach((field) => { if (field.component) { obj[collection.slug].fields[field.name] = field.component; - }; + } }); return obj; @@ -38,6 +37,7 @@ module.exports = function (config) { return { code: ` const React = require('react'); - module.exports = ${string} - ` }; + module.exports = ${string}; + `, + }; }; diff --git a/src/client/components/forms/field-types/Relationship/index.js b/src/client/components/forms/field-types/Relationship/index.js index 6caab269ef..20b38d5e33 100644 --- a/src/client/components/forms/field-types/Relationship/index.js +++ b/src/client/components/forms/field-types/Relationship/index.js @@ -28,7 +28,6 @@ class Relationship extends Component { this.state = { relations, - search: '', lastFullyLoadedRelation: -1, lastLoadedPage: 1, options: [], diff --git a/src/client/components/layout/DefaultTemplate/index.js b/src/client/components/layout/DefaultTemplate/index.js index 55e756259a..004b7d46bd 100644 --- a/src/client/components/layout/DefaultTemplate/index.js +++ b/src/client/components/layout/DefaultTemplate/index.js @@ -4,7 +4,7 @@ import DefaultSidebar from '../Sidebar'; import StepNav, { useStepNav, StepNavProvider } from '../../modules/StepNav'; import { StatusListProvider } from '../../modules/Status'; import Localizer from '../../modules/Localizer'; -import customComponents from '../../custom-components'; +import customComponents from '../../customComponents'; import './index.scss'; diff --git a/src/client/components/modules/Localizer/index.js b/src/client/components/modules/Localizer/index.js index ae9060bf99..d16618f5dd 100644 --- a/src/client/components/modules/Localizer/index.js +++ b/src/client/components/modules/Localizer/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { Link } from 'react-router-dom'; -import config from 'payload-config'; import qs from 'qs'; +import config from '../../../config/sanitizedClientConfig'; import { useLocale } from '../../utilities/Locale'; import { useSearchParams } from '../../utilities/SearchParams'; import Arrow from '../../graphics/Arrow'; diff --git a/src/client/components/utilities/Locale/index.js b/src/client/components/utilities/Locale/index.js index 73dd1852a6..42da6f2493 100644 --- a/src/client/components/utilities/Locale/index.js +++ b/src/client/components/utilities/Locale/index.js @@ -1,8 +1,8 @@ import React, { createContext, useContext, useState, useEffect, } from 'react'; -import config from 'payload-config'; import PropTypes from 'prop-types'; +import config from '../../../config/sanitizedClientConfig'; import { useSearchParams } from '../SearchParams'; const defaultLocale = (config.localization && config.localization.defaultLocale) ? config.localization.defaultLocale : 'en'; diff --git a/src/client/components/views/collections/Edit/index.js b/src/client/components/views/collections/Edit/index.js index 49247960e1..33527005f5 100644 --- a/src/client/components/views/collections/Edit/index.js +++ b/src/client/components/views/collections/Edit/index.js @@ -10,7 +10,7 @@ import APIURL from '../../../modules/APIURL'; import Button from '../../../controls/Button'; import FormSubmit from '../../../forms/Submit'; import RenderFields from '../../../forms/RenderFields'; -import customComponents from '../../../custom-components'; +import customComponents from '../../../customComponents'; import './index.scss'; @@ -123,6 +123,7 @@ EditView.propTypes = { }), slug: PropTypes.string, useAsTitle: PropTypes.string, + fields: PropTypes.arrayOf(PropTypes.shape({})), }).isRequired, isEditing: PropTypes.bool, }; diff --git a/src/client/config/getWebpackDevConfig.js b/src/client/config/getWebpackDevConfig.js index b70671752c..76bbddd93e 100644 --- a/src/client/config/getWebpackDevConfig.js +++ b/src/client/config/getWebpackDevConfig.js @@ -25,7 +25,16 @@ module.exports = (config) => { module: { rules: [ { - test: require.resolve('../components/custom-components.js'), + test: require.resolve('../components/customComponents'), + use: [ + { + loader: 'val-loader', + options: config, + }, + ], + }, + { + test: require.resolve('./sanitizedClientConfig'), use: [ { loader: 'val-loader', @@ -116,7 +125,6 @@ module.exports = (config) => { modules: ['node_modules', path.resolve(__dirname, '../../../node_modules')], alias: { 'payload-scss-overrides': config.paths.scssOverrides, - 'payload-config': config.paths.config, }, }, }; diff --git a/src/client/config/getWebpackProdConfig.js b/src/client/config/getWebpackProdConfig.js index e1abcc85bc..9e3b266067 100644 --- a/src/client/config/getWebpackProdConfig.js +++ b/src/client/config/getWebpackProdConfig.js @@ -97,8 +97,6 @@ module.exports = (config) => { modules: ['node_modules', path.resolve(__dirname, '../../../node_modules')], alias: { 'payload-scss-overrides': config.paths.scssOverrides, - 'payload-custom-components': config.paths.components, - 'payload-config': config.paths.config, }, }, }; diff --git a/src/client/config/sanitizedClientConfig.js b/src/client/config/sanitizedClientConfig.js index 1501947792..a1bbb6e7e0 100644 --- a/src/client/config/sanitizedClientConfig.js +++ b/src/client/config/sanitizedClientConfig.js @@ -1,6 +1,12 @@ -import config from 'payload-config'; -import sanitizeConfig from '../../utilities/sanitizeConfig'; +const sanitizeConfig = require('../../utilities/sanitizeConfig'); +const secureConfig = require('../../utilities/secureConfig'); -const sanitizedConfig = sanitizeConfig(config); +module.exports = (config) => { + const sanitizedConfig = sanitizeConfig(config); + const securedConfig = secureConfig(sanitizedConfig); -export default sanitizedConfig; + return { + code: ` + module.exports = ${JSON.stringify(securedConfig)}`, + }; +}; diff --git a/src/utilities/secureConfig.js b/src/utilities/secureConfig.js new file mode 100644 index 0000000000..7213f406e7 --- /dev/null +++ b/src/utilities/secureConfig.js @@ -0,0 +1,9 @@ +const secureConfig = (config) => { + const securedConfig = { ...config }; + + delete securedConfig.user.auth.secretKey; + + return securedConfig; +}; + +module.exports = secureConfig;