From 5c39359b87ed34d0a8cb7b8621d133689e67d920 Mon Sep 17 00:00:00 2001 From: Guilherme Pim Date: Mon, 28 Mar 2022 14:54:44 -0300 Subject: [PATCH 1/5] adding SSO login button --- modules/st2-login/login.component.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/modules/st2-login/login.component.js b/modules/st2-login/login.component.js index e8a1471e4..47bfc73b9 100644 --- a/modules/st2-login/login.component.js +++ b/modules/st2-login/login.component.js @@ -254,6 +254,14 @@ export default class Login extends React.Component { + +
Or
+ + + + Login with SSO + + From f80f13a8d1118aa54f8394d353ce97a1b5edd686 Mon Sep 17 00:00:00 2001 From: Guilherme Pim Date: Mon, 28 Mar 2022 14:56:25 -0300 Subject: [PATCH 2/5] adding SSO login button --- modules/st2-login/login.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/st2-login/login.component.js b/modules/st2-login/login.component.js index 47bfc73b9..561c96ca8 100644 --- a/modules/st2-login/login.component.js +++ b/modules/st2-login/login.component.js @@ -255,10 +255,10 @@ export default class Login extends React.Component { -
Or
+
Or
 - + Login with SSO From dd23c6301262c9c3a1fcb9d851202f42e8a17cf1 Mon Sep 17 00:00:00 2001 From: Guilherme Pim Date: Thu, 21 Jul 2022 11:21:19 -0300 Subject: [PATCH 3/5] implementing sso configuration --- CHANGELOG.rst | 2 ++ config.js | 2 ++ modules/st2-login/login.component.js | 30 +++++++++++++++++----------- modules/st2-login/style.css | 19 +++++++++++++++--- 4 files changed, 38 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.rst b/CHANGELOG.rst index f4a58317d..fb0ddb3db 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -4,6 +4,8 @@ Changelog in development -------------- +* Added SSO login button and relative configuration to config.json (`ssoEnabled`) + Added ~~~~~ diff --git a/config.js b/config.js index d074c7438..ba61bf54e 100644 --- a/config.js +++ b/config.js @@ -42,4 +42,6 @@ angular.module('main') // }, // ], + // ssoEnabled: false (controls whether SSO login button should be visible) + }); diff --git a/modules/st2-login/login.component.js b/modules/st2-login/login.component.js index 7f3dbea13..a01a5e957 100644 --- a/modules/st2-login/login.component.js +++ b/modules/st2-login/login.component.js @@ -148,17 +148,18 @@ export default class Login extends React.Component { super(props); const servers = window.st2constants.st2Config.hosts; - const server = servers && servers.length > 0 ? servers[0] : { auth: true }; this.state = { error: null, - + + ssoEnabled: !!window.st2constants.st2Config.ssoEnabled, + username: '', password: '', remember: true, disabled: false, - + server, servers, }; @@ -176,7 +177,7 @@ export default class Login extends React.Component { return api.connect(server, username, password, remember) .then(() => this.props.onConnect()) .catch((err) => this.setState({ error: err.message, disabled: false })) - ; + ; } render() { @@ -256,14 +257,19 @@ export default class Login extends React.Component { - -
Or
- - - - Login with SSO - - + { + this.state.ssoEnabled && + + +
Or
+ + + + Login with SSO + + + + } diff --git a/modules/st2-login/style.css b/modules/st2-login/style.css index a668206ee..848d97013 100644 --- a/modules/st2-login/style.css +++ b/modules/st2-login/style.css @@ -52,11 +52,24 @@ align-items: center; } +.row-divider { + padding: 0.5em 0em; + text-align: center; + width: 100% +} + .button { padding: 3px 12px; font-family: Roboto, sans-serif; } +.sso-button { + padding: 3px 12px; + font-family: Roboto, sans-serif; + color: #ffffff !important; + width: 100% !important +} + .checkbox-wrapper { flex: 1; @@ -111,7 +124,7 @@ vertical-align: top; } - & + &-label:before { + &+&-label:before { font-family: "brocadeicons"; font-size: 12px; font-weight: normal; @@ -132,7 +145,7 @@ background-color: transparent; } - &:not(:checked) + &-label:before { + &:not(:checked)+&-label:before { color: transparent; } -} +} \ No newline at end of file From a1015701fb53dc6cf8b5409fd5c895e5e217c848 Mon Sep 17 00:00:00 2001 From: Guilherme Pim Date: Thu, 21 Jul 2022 11:32:33 -0300 Subject: [PATCH 4/5] fixing lint issues --- modules/st2-login/login.component.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/modules/st2-login/login.component.js b/modules/st2-login/login.component.js index a01a5e957..a67eeb16e 100644 --- a/modules/st2-login/login.component.js +++ b/modules/st2-login/login.component.js @@ -177,7 +177,7 @@ export default class Login extends React.Component { return api.connect(server, username, password, remember) .then(() => this.props.onConnect()) .catch((err) => this.setState({ error: err.message, disabled: false })) - ; + ; } render() { @@ -258,17 +258,18 @@ export default class Login extends React.Component { { - this.state.ssoEnabled && - - -
Or
- - - - Login with SSO - - - + this.state.ssoEnabled && ( + + +
Or
+ + + + Login with SSO + + + + ) } From 2164077a220d03aa95a81505bd101bd597329343 Mon Sep 17 00:00:00 2001 From: Guilherme Pim Date: Thu, 21 Jul 2022 12:08:51 -0300 Subject: [PATCH 5/5] adjusting tests :) --- README.md | 5 ++++ modules/st2-login/login.component.js | 4 +-- modules/st2-login/tests/test-login.js | 37 +++++++++++++++++++++++++++ 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7058a29f5..7e754e1ca 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,11 @@ If for some reason st2web is served from another domain, edit [`config.js`](./co auth: true }] +SSO Support +----------- + +To enable SSO on the web gui (which basically means showing the SSO login button and redirecting to the SSO endpoint on click), use the configuration `ssoEnabled` to `true` on the `config.json` file. The heavy lift of SSO logic is done at the backend. Upon successful login, the user gets redirected to an intermediary callback endpoint which then sets up cookies with authenticated tokens, and then the web gui usage is the same as with local login. + Production ---------- While `gulp serve` is ideal for development purposes and quick preview, it requires browser to make lots and lots of requests downloading every single project file separately thus wasting a lot of time on making a request and waiting for response. Production version minimizes the number of files by concatenating them together and minifies some of the most heavy files reducing their size up to 5 times. It also makes compiled version completely independent of the rest of code allowing you to deploy it everywhere: static apache\nginx server, AWS, Heroku, Github Pages. diff --git a/modules/st2-login/login.component.js b/modules/st2-login/login.component.js index a67eeb16e..3a66a1754 100644 --- a/modules/st2-login/login.component.js +++ b/modules/st2-login/login.component.js @@ -258,7 +258,7 @@ export default class Login extends React.Component { { - this.state.ssoEnabled && ( + this.state.ssoEnabled ? (
Or
@@ -269,7 +269,7 @@ export default class Login extends React.Component { - ) + ) : null } diff --git a/modules/st2-login/tests/test-login.js b/modules/st2-login/tests/test-login.js index 7cb03c73b..e8a308f70 100644 --- a/modules/st2-login/tests/test-login.js +++ b/modules/st2-login/tests/test-login.js @@ -92,6 +92,9 @@ describe(`${Login.name} Component`, () => { expect(instance.node.children[0].props.children[3].props.children.type).to.equal('input'); expect(instance.node.children[0].props.children[3].props.children.props.name).to.equal('username'); + expect(instance.node.children[0].props.children[6]).to.equal(null); + + window.st2constants.st2Config = {}; }); @@ -128,4 +131,38 @@ describe(`${Login.name} Component`, () => { window.st2constants.st2Config = {}; }); + + it('works with sso enabled', () => { + window.st2constants.st2Config = { + hosts: [ + { + name: 'Dev Env', + url: '//172.168.50.50:9101/api', + auth: '//172.168.50.50:9101/auth', + }, + ], + ssoEnabled: true, + }; + + const instance = ReactTester.create( + { }} + /> + ); + + expect(instance.node.children[0].type.name).to.equal('LoginForm'); + expect(instance.node.children[0].props.children[1]).to.equal(null); + expect(instance.node.children[0].props.children[2]).to.equal(null); + expect(instance.node.children[0].props.children[3].type.name).to.equal('LoginRow'); + expect(instance.node.children[0].props.children[3].props.children.type).to.equal('input'); + expect(instance.node.children[0].props.children[3].props.children.props.name).to.equal('username'); + + expect(instance.node.children[0].props.children[6].props.children[0].type.name).to.equal('LoginRow'); + expect(instance.node.children[0].props.children[6].props.children[1].type.name).to.equal('LoginRow'); + expect(instance.node.children[0].props.children[6].props.children[1].props.children.type).to.equal('a'); + expect(instance.node.children[0].props.children[6].props.children[1].props.children.props.href).to.equal('/auth/sso/request/web'); + + window.st2constants.st2Config = {}; + }); + });