mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Dana 2025-01-21 15:21:42 +01:00 committed by GitHub
parent 223ad7d71a
commit fb4cb5afbb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 91 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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);

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

@ -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' });
});
});
});

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

@ -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,

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

@ -1,10 +1,85 @@
<html>
<script>
(function messageParent() {
const broadcastChannel = new BroadcastChannel('oauth-callback');
broadcastChannel.postMessage('success');
})();
</script>
<head>
<style>
html {
font-size: 16px;
}
body {
font-family: sans-serif;
}
Got connected. The window can be closed now.
.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>

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