diff --git a/src/context/directory/handlers/branding.ts b/src/context/directory/handlers/branding.ts index 58e6b518c..1af5d0b5c 100644 --- a/src/context/directory/handlers/branding.ts +++ b/src/context/directory/handlers/branding.ts @@ -51,12 +51,13 @@ async function dump(context: DirectoryContext) { if (!!templates) dumpBrandingTemplates(context); } -const dumpBrandingTemplates = ({ - filePath, - assets: { +const dumpBrandingTemplates = ({ filePath, assets }: DirectoryContext): void => { + if (!assets || !assets.branding) return; + + const { branding: { templates = [] }, - }, -}: DirectoryContext): void => { + } = assets; + const brandingTemplatesFolder = path.join( filePath, constants.BRANDING_DIRECTORY, @@ -86,19 +87,24 @@ const dumpBrandingTemplates = ({ }); }; -const dumpBranding = ({ - filePath, - assets: { - branding: { templates: _templates, ...branding }, - }, -}: DirectoryContext): void => { +const dumpBranding = ({ filePath, assets }: DirectoryContext): void => { + if (!assets || !assets.branding) return; + + const { branding } = assets; + + const brandingWithoutTemplates = (() => { + const newBranding = { ...branding }; + delete newBranding.templates; + return newBranding; + })(); + const brandingDirectory = path.join(filePath, constants.BRANDING_DIRECTORY); fs.ensureDirSync(brandingDirectory); const brandingFilePath = path.join(brandingDirectory, 'branding.json'); - dumpJSON(brandingFilePath, branding); + dumpJSON(brandingFilePath, brandingWithoutTemplates); }; const brandingHandler: DirectoryHandler = { diff --git a/src/context/yaml/handlers/branding.ts b/src/context/yaml/handlers/branding.ts index 33f4949d5..77efa1e8d 100644 --- a/src/context/yaml/handlers/branding.ts +++ b/src/context/yaml/handlers/branding.ts @@ -19,6 +19,9 @@ type ParsedBranding = { async function parse(context: YAMLContext): Promise { // Load the HTML file for each page + //@ts-ignore + if (!context.assets.branding) return { branding: undefined }; + const { branding: { templates, ...branding }, } = context.assets; @@ -44,7 +47,8 @@ async function parse(context: YAMLContext): Promise { } async function dump(context: YAMLContext): Promise { - const { branding } = context.assets.branding; + const { branding } = context.assets; + branding.templates = branding.templates || []; // create templates folder diff --git a/test/context/directory/branding.test.js b/test/context/directory/branding.test.js index f6ccb268d..c04e00714 100644 --- a/test/context/directory/branding.test.js +++ b/test/context/directory/branding.test.js @@ -10,20 +10,30 @@ import { cleanThenMkdir, mockMgmtClient, testDataDir } from '../../utils'; const html = '##foo##'; const htmlTransformed = 'bar'; +const brandingSettings = JSON.stringify({ + colors: { + primary: '#FFFFFF', + page_background: '#000000', + }, + font: { + url: 'https://mycompany.org/font/myfont.ttf', + }, +}); + describe('#directory context branding', () => { it('should process templates', async () => { const dir = path.join(testDataDir, 'directory', 'branding-process'); cleanThenMkdir(dir); - const brandingDir = path.join( - dir, - constants.BRANDING_DIRECTORY, - constants.BRANDING_TEMPLATES_DIRECTORY - ); + const brandingDir = path.join(dir, constants.BRANDING_DIRECTORY); cleanThenMkdir(brandingDir); - const markupFile = path.join(brandingDir, 'universal_login.html'); - fs.writeFileSync(markupFile, html); + const brandingTemplatesDir = path.join(brandingDir, constants.BRANDING_TEMPLATES_DIRECTORY); + cleanThenMkdir(brandingTemplatesDir); + + fs.writeFileSync(path.join(brandingDir, 'branding.json'), brandingSettings); + + fs.writeFileSync(path.join(brandingTemplatesDir, 'universal_login.html'), html); fs.writeFileSync( - path.join(brandingDir, 'universal_login.json'), + path.join(brandingTemplatesDir, 'universal_login.json'), JSON.stringify({ template: 'universal_login', body: `.${path.sep}universal_login.html` }) ); @@ -46,6 +56,13 @@ describe('#directory context branding', () => { const context = new Context({ AUTH0_INPUT_FILE: repoDir }, mockMgmtClient()); context.assets.branding = { + colors: { + primary: '#F8F8F2', + page_background: '#112', + }, + font: { + url: 'https://mycompany.org/font/myfont.ttf', + }, templates: [ { body: html, @@ -56,14 +73,29 @@ describe('#directory context branding', () => { await handler.dump(context); - const brandingDir = path.join( - repoDir, - constants.BRANDING_DIRECTORY, - constants.BRANDING_TEMPLATES_DIRECTORY - ); - const markup = fs.readFileSync(path.join(brandingDir, 'universal_login.html')).toString(); + const brandingDir = path.join(repoDir, constants.BRANDING_DIRECTORY); + const brandingTemplatesDir = path.join(brandingDir, constants.BRANDING_TEMPLATES_DIRECTORY); + + const brandingSettingsFile = fs + .readFileSync(path.join(brandingDir, 'branding.json')) + .toString(); + + expect(JSON.parse(brandingSettingsFile)).to.deep.equal({ + colors: { + primary: '#F8F8F2', + page_background: '#112', + }, + font: { + url: 'https://mycompany.org/font/myfont.ttf', + }, + }); + + const markup = fs + .readFileSync(path.join(brandingTemplatesDir, 'universal_login.html')) + .toString(); + expect(markup).to.equal(html); - const templateDefinition = loadJSON(path.join(brandingDir, 'universal_login.json')); + const templateDefinition = loadJSON(path.join(brandingTemplatesDir, 'universal_login.json')); expect(templateDefinition).to.deep.equal({ template: 'universal_login', body: `.${path.sep}universal_login.html`, diff --git a/test/context/yaml/branding.test.js b/test/context/yaml/branding.test.js index f28e74b2a..a862ac597 100644 --- a/test/context/yaml/branding.test.js +++ b/test/context/yaml/branding.test.js @@ -15,13 +15,14 @@ describe('#YAML context branding templates', () => { cleanThenMkdir(dir); const htmlFile = path.join(dir, 'universalLogin.html'); + fs.writeFileSync(htmlFile, html); const yaml = ` branding: templates: - template: universal_login - body: ${htmlFile} + body: universalLogin.html `; const yamlFile = path.join(dir, 'config.yaml'); fs.writeFileSync(yamlFile, yaml); diff --git a/test/utils.js b/test/utils.js index 61cb9f81c..98ac674a5 100644 --- a/test/utils.js +++ b/test/utils.js @@ -105,6 +105,7 @@ export function mockMgmtClient() { getBruteForceConfig: () => ({}), getSuspiciousIpThrottlingConfig: () => ({}), }, + branding: { getSettings: () => ({}) }, }; }