From fb4cb5afbb5550020a88e0ee786eee0991c224a3 Mon Sep 17 00:00:00 2001 From: Dana <152518854+dana-gill@users.noreply.github.com> Date: Tue, 21 Jan 2025 15:21:42 +0100 Subject: [PATCH] chore(API): Add styling to credential callback and autoclose window (#12648) --- packages/cli/src/abstract-server.ts | 4 + .../oauth2-credential.controller.test.ts | 6 +- .../oauth/oauth2-credential.controller.ts | 2 +- .../cli/templates/oauth-callback.handlebars | 89 +++++++++++++++++-- .../controllers/oauth/oauth2.api.test.ts | 2 +- 5 files changed, 91 insertions(+), 12 deletions(-) diff --git a/packages/cli/src/abstract-server.ts b/packages/cli/src/abstract-server.ts index a9340b0a87..8a2ba38b4a 100644 --- a/packages/cli/src/abstract-server.ts +++ b/packages/cli/src/abstract-server.ts @@ -7,6 +7,7 @@ import { readFile } from 'fs/promises'; import type { Server } from 'http'; import isbot from 'isbot'; import { Logger } from 'n8n-core'; +import path from 'path'; import config from '@/config'; import { N8N_VERSION, TEMPLATES_DIR, inDevelopment, inTest } from '@/constants'; @@ -67,6 +68,9 @@ export abstract class AbstractServer { this.app.set('view engine', 'handlebars'); this.app.set('views', TEMPLATES_DIR); + const assetsPath: string = path.join(__dirname, '../../../assets'); + this.app.use(express.static(assetsPath)); + const proxyHops = config.getEnv('proxy_hops'); if (proxyHops > 0) this.app.set('trust proxy', proxyHops); diff --git a/packages/cli/src/controllers/oauth/__tests__/oauth2-credential.controller.test.ts b/packages/cli/src/controllers/oauth/__tests__/oauth2-credential.controller.test.ts index 1984d12f59..5281378fe0 100644 --- a/packages/cli/src/controllers/oauth/__tests__/oauth2-credential.controller.test.ts +++ b/packages/cli/src/controllers/oauth/__tests__/oauth2-credential.controller.test.ts @@ -255,7 +255,7 @@ describe('OAuth2CredentialController', () => { type: 'oAuth2Api', }), ); - expect(res.render).toHaveBeenCalledWith('oauth-callback'); + expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); }); it('merges oauthTokenData if it already exists', async () => { @@ -297,7 +297,7 @@ describe('OAuth2CredentialController', () => { type: 'oAuth2Api', }), ); - expect(res.render).toHaveBeenCalledWith('oauth-callback'); + expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); }); it('overwrites oauthTokenData if it is a string', async () => { @@ -335,7 +335,7 @@ describe('OAuth2CredentialController', () => { type: 'oAuth2Api', }), ); - expect(res.render).toHaveBeenCalledWith('oauth-callback'); + expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); }); }); }); diff --git a/packages/cli/src/controllers/oauth/oauth2-credential.controller.ts b/packages/cli/src/controllers/oauth/oauth2-credential.controller.ts index e188670fde..c4c24de0bc 100644 --- a/packages/cli/src/controllers/oauth/oauth2-credential.controller.ts +++ b/packages/cli/src/controllers/oauth/oauth2-credential.controller.ts @@ -149,7 +149,7 @@ export class OAuth2CredentialController extends AbstractOAuthController { credentialId: credential.id, }); - return res.render('oauth-callback'); + return res.render('oauth-callback', { imagePath: 'n8n-logo.png' }); } catch (error) { return this.renderCallbackError( res, diff --git a/packages/cli/templates/oauth-callback.handlebars b/packages/cli/templates/oauth-callback.handlebars index c0d8a0cfab..74d57db303 100644 --- a/packages/cli/templates/oauth-callback.handlebars +++ b/packages/cli/templates/oauth-callback.handlebars @@ -1,10 +1,85 @@ - + + + + +
+
+
+ +
+
+ + + + +

Connection successful

+
+
+

This window will close automatically in 5 seconds.

+
+
+
+ + diff --git a/packages/cli/test/integration/controllers/oauth/oauth2.api.test.ts b/packages/cli/test/integration/controllers/oauth/oauth2.api.test.ts index f20f9df550..6411966dbf 100644 --- a/packages/cli/test/integration/controllers/oauth/oauth2.api.test.ts +++ b/packages/cli/test/integration/controllers/oauth/oauth2.api.test.ts @@ -116,7 +116,7 @@ describe('OAuth2 API', () => { .query({ code: 'auth_code', state }) .expect(200); - expect(renderSpy).toHaveBeenCalledWith('oauth-callback'); + expect(renderSpy).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); const updatedCredential = await Container.get(CredentialsHelper).getCredentials( credential,