diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 7d95c907a..d054c23e0 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -4,7 +4,6 @@ Changelog
in development
--------------
-
Added
~~~~~
* Added feature for disabling button for synchronous responses. Button gets disabled onClick on `Connect` and `Submit` in st2-login and st2-history module respectively.
@@ -20,6 +19,10 @@ Added
Contributed by @Jappzy and @cded from @Bitovi
+* Added SSO login button and relative configuration to config.json (`ssoEnabled`)
+
+ Contributed by @pimguilherme
+
* Added an optional auto-save capability in the workflow composer. #965, #993
Contributed by @Jappzy and @cded from @Bitovi
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/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 af5ceae64..3a66a1754 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,
};
@@ -256,6 +257,20 @@ export default class Login extends React.Component {
+ {
+ this.state.ssoEnabled ? (
+
+
+ Or
+
+
+
+ Login with SSO
+
+
+
+ ) : null
+ }
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
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 = {};
+ });
+
});