mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
Co-authored-by: Jonathan Bennetts <jonathan.bennetts@gmail.com>
This commit is contained in:
Dana 2025-01-27 16:42:45 +01:00 committed by GitHub
parent 6dd90c8764
commit 0979a99309
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
assets/n8n-logo.png → packages/cli/assets/n8n-logo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

4
packages/cli/src/abstract-server.ts
View file

@ -7,7 +7,6 @@ import { readFile } from 'fs/promises';
import type { Server } from 'http'; import type { Server } from 'http';
import isbot from 'isbot'; import isbot from 'isbot';
import { Logger } from 'n8n-core'; import { Logger } from 'n8n-core';
import path from 'path';
import config from '@/config'; import config from '@/config';
import { N8N_VERSION, TEMPLATES_DIR, inDevelopment, inTest } from '@/constants'; 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('view engine', 'handlebars');
this.app.set('views', TEMPLATES_DIR); 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'); const proxyHops = config.getEnv('proxy_hops');
if (proxyHops > 0) this.app.set('trust proxy', proxyHops); if (proxyHops > 0) this.app.set('trust proxy', proxyHops);

6
packages/cli/src/controllers/oauth/__tests__/oauth2-credential.controller.test.ts
View file

@ -255,7 +255,7 @@ describe('OAuth2CredentialController', () => {
type: 'oAuth2Api', 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 () => { it('merges oauthTokenData if it already exists', async () => {
@ -297,7 +297,7 @@ describe('OAuth2CredentialController', () => {
type: 'oAuth2Api', 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 () => { it('overwrites oauthTokenData if it is a string', async () => {
@ -335,7 +335,7 @@ describe('OAuth2CredentialController', () => {
type: 'oAuth2Api', type: 'oAuth2Api',
}), }),
); );
expect(res.render).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); expect(res.render).toHaveBeenCalledWith('oauth-callback');
}); });
}); });
}); });

2
packages/cli/src/controllers/oauth/oauth2-credential.controller.ts
View file

@ -149,7 +149,7 @@ export class OAuth2CredentialController extends AbstractOAuthController {
credentialId: credential.id, credentialId: credential.id,
}); });
return res.render('oauth-callback', { imagePath: 'n8n-logo.png' }); return res.render('oauth-callback');
} catch (error) { } catch (error) {
return this.renderCallbackError( return this.renderCallbackError(
res, res,

54
packages/cli/templates/oauth-callback.handlebars
View file

@ -1,59 +1,71 @@
<html> <html>
<head> <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> <style>
html { html {
font-size: 16px; font-size: 16px;
} }
body { 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 { .center-container {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100vh justify-content: center;
flex: 1;
} }
.left-container {
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
justify-content: center;
text-align: center;
} }
.icon { .icon {
width: 2.5rem; width: 1.4rem;
fill: #2AA568; fill: #2AA568;
} }
.logo { img.logo {
width: 8rem; width: 8rem;
} }
div.logo {
display: flex;
justify-content: center;
}
h1 { h1 {
font-size: 2.5rem; font-size: 1.75rem;
color: #0F1430; font-weight: 400;
color: #525456;
margin-block-end: 0;
} }
p { p {
font-size: 1.5rem; font-size: 0.875rem;
font-weight: 500; font-weight: 400;
color: #707183; color: #909298;
font-size: 1.1rem;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="logo">
<img src="/static/n8n-logo.png" class="logo" />
</div>
<div class="center-container"> <div class="center-container">
<div class="left-container"> <div>
<div class="row">
<img src="{{imagePath}}" class="logo" />
</div>
<div class="row"> <div class="row">
<svg <svg
xmlns="http://www.w3.org/2000/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" 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> </svg>
</div>
<div class="row">
<h1>Connection successful</h1> <h1>Connection successful</h1>
</div> </div>
<div class="row"> <div class="row">

2
packages/cli/test/integration/controllers/oauth/oauth2.api.test.ts
View file

@ -116,7 +116,7 @@ describe('OAuth2 API', () => {
.query({ code: 'auth_code', state }) .query({ code: 'auth_code', state })
.expect(200); .expect(200);
expect(renderSpy).toHaveBeenCalledWith('oauth-callback', { imagePath: 'n8n-logo.png' }); expect(renderSpy).toHaveBeenCalledWith('oauth-callback');
const updatedCredential = await Container.get(CredentialsHelper).getCredentials( const updatedCredential = await Container.get(CredentialsHelper).getCredentials(
credential, credential,

BIN
packages/editor-ui/public/static/n8n-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB