chore(API): Follow up design for credential callback (#12798)

Co-authored-by: Jonathan Bennetts <[email protected]>
n8n-io · Jan 27, 2025 · 0979a99 · 0979a99
1 parent 6dd90c8
commit 0979a99
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 29 deletions.
diff --git a/assets/n8n-logo.png → packages/cli/assets/n8n-logo.png b/assets/n8n-logo.png → packages/cli/assets/n8n-logo.png
diff --git a/packages/cli/src/abstract-server.ts b/packages/cli/src/abstract-server.ts
@@ -7,7 +7,6 @@ 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';
@@ -68,9 +67,6 @@ 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
@@ -255,7 +255,7 @@ describe('OAuth2CredentialController', () => {
 					type: 'oAuth2Api',
 				}),
 			);
-			expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' });
+			expect(res.render).toHaveBeenCalledWith('oauth-callback');
 		});
 
 		it('merges oauthTokenData if it already exists', async () => {
@@ -297,7 +297,7 @@ describe('OAuth2CredentialController', () => {
 					type: 'oAuth2Api',
 				}),
 			);
-			expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' });
+			expect(res.render).toHaveBeenCalledWith('oauth-callback');
 		});
 
 		it('overwrites oauthTokenData if it is a string', async () => {
@@ -335,7 +335,7 @@ describe('OAuth2CredentialController', () => {
 					type: 'oAuth2Api',
 				}),
 			);
-			expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' });
+			expect(res.render).toHaveBeenCalledWith('oauth-callback');
 		});
 	});
 });
diff --git 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', { imagePath: 'n8n-logo.png' });
+			return res.render('oauth-callback');
 		} catch (error) {
 			return this.renderCallbackError(
 				res,

diff --git a/packages/cli/templates/oauth-callback.handlebars b/packages/cli/templates/oauth-callback.handlebars
@@ -1,59 +1,71 @@
 <html>
 	<head>
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
 		<style>
 			html {
 				font-size: 16px;
 			}
 			body {
-				font-family: sans-serif;
+				font-family: "Open Sans", sans-serif;
+				padding: 1rem;
+				margin: 0;
+				display: flex;
+				flex-direction: column;
+				height: 100vh;
+				box-sizing: border-box;
 			}
 
 			.center-container {
 				display: flex;
 				align-items: center;
-				height: 100vh
+				justify-content: center;
+				flex: 1;
 			}
 
-			.left-container {
-				margin-left: auto;
-				margin-right: auto;
-				display: flex;
-				flex-direction: column;
-			}
 			.row {
 				display: flex;
 				flex-direction: row;
 				gap: 20px;
+				justify-content: center;
+				text-align: center;
 			}
 
 			.icon {
-				width: 2.5rem;
+				width: 1.4rem;
 				fill: #2AA568;
 			}
 
-			.logo {
+			img.logo {
 				width: 8rem;
 			}
 
+			div.logo {
+				display: flex;
+				justify-content: center;
+			}
+
 			h1 {
-				font-size: 2.5rem;
-				color: #0F1430;
+				font-size: 1.75rem;
+				font-weight: 400;
+				color: #525456;
+				margin-block-end: 0;
 			}
 
 			p {
-				font-size: 1.5rem;
-				font-weight: 500;
-				color: #707183;
-				font-size: 1.1rem;
+				font-size: 0.875rem;
+				font-weight: 400;
+				color: #909298;
 			}
 		</style>
 	</head>
 	<body>
+		<div class="logo">
+			<img src="/static/n8n-logo.png" class="logo" />
+		</div>
 		<div class="center-container">
-			<div class="left-container">
-				<div class="row">
-					<img src="{{imagePath}}" class="logo" />
-				</div>
+			<div>
 				<div class="row">
 					<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -65,6 +77,8 @@
 									d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
 							/>
 					</svg>
+				</div>
+				<div class="row">
 					<h1>Connection successful</h1>
 				</div>
 				<div class="row">

diff --git 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', { imagePath: 'n8n-logo.png' });
+		expect(renderSpy).toHaveBeenCalledWith('oauth-callback');
 
 		const updatedCredential = await Container.get(CredentialsHelper).getCredentials(
 			credential,

diff --git a/packages/editor-ui/public/static/n8n-logo.png b/packages/editor-ui/public/static/n8n-logo.png