chore(API): Add styling to credential callback and autoclose window (#…

…12648)
n8n-io · Jan 21, 2025 · fb4cb5a · fb4cb5a
1 parent 223ad7d
commit fb4cb5a
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,10 +1,85 @@
 <html>
-	<script>
-		(function messageParent() {
-			const broadcastChannel = new BroadcastChannel('oauth-callback');
-			broadcastChannel.postMessage('success');
-		})();
-	</script>
-
-	Got connected. The window can be closed now.
+	<head>
+		<style>
+			html {
+				font-size: 16px;
+			}
+			body {
+				font-family: sans-serif;
+			}
+
+			.center-container {
+				display: flex;
+				align-items: center;
+				height: 100vh
+			}
+
+			.left-container {
+				margin-left: auto;
+				margin-right: auto;
+				display: flex;
+				flex-direction: column;
+			}
+			.row {
+				display: flex;
+				flex-direction: row;
+				gap: 20px;
+			}
+
+			.icon {
+				width: 2.5rem;
+				fill: #2AA568;
+			}
+
+			.logo {
+				width: 8rem;
+			}
+
+			h1 {
+				font-size: 2.5rem;
+				color: #0F1430;
+			}
+
+			p {
+				font-size: 1.5rem;
+				font-weight: 500;
+				color: #707183;
+				font-size: 1.1rem;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="center-container">
+			<div class="left-container">
+				<div class="row">
+					<img src="{{imagePath}}" class="logo" />
+				</div>
+				<div class="row">
+					<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 512 512"
+							class="icon"
+					>
+							<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+							<path
+									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>
+					<h1>Connection successful</h1>
+				</div>
+				<div class="row">
+					<p>This window will close automatically in 5 seconds.</p>
+				</div>
+			</div>
+		</div>
+		<script type="text/javascript">
+			(function messageParent() {
+				const broadcastChannel = new BroadcastChannel('oauth-callback');
+				broadcastChannel.postMessage('success');
+			})();
+			(function autoclose(){
+				setTimeout(function() { window.close(); }, 5000);
+			})();
+		</script>
+	</body>
 </html>
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');
+		expect(renderSpy).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' });
 
 		const updatedCredential = await Container.get(CredentialsHelper).getCredentials(
 			credential,