Feat/saml

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

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.

config.js

@@ -42,4 +42,6 @@ angular.module('main')
     //   },
     // ],
 
+    // ssoEnabled: false (controls whether SSO login button should be visible)
+
   });

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 {
               </span>
             </label>
           </LoginRow>
+          {
+            this.state.ssoEnabled ? (
+              <React.Fragment>
+                <LoginRow>
+                  <div className={style.rowDivider}>Or</div>
+                </LoginRow>
+                <LoginRow style={style} >
+                  <a href="/auth/sso/request/web" className={cx('st2-forms__button', style.ssoButton)}>
+                    Login with SSO
+                  </a>
+                </LoginRow>
+              </React.Fragment>
+            ) : null
+          }
 
           <LoginBottomRow style={style} >
             <a target="_blank" rel="noopener noreferrer" href={this.docsLink}>

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;
   }
-}
+}

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(
+      <Login
+        onConnect={() => { }}
+      />
+    );
+
+    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 = {};
+  });
+
 });