Merge pull request #458 from jlmitch5/plugAuthUIAPIIntegration

inegration of ui with api on pluggable auth

awx/ui/client/src/login/loginModal/loginModal.partial.html

@@ -69,6 +69,9 @@
                 <div class="LoginModal-alert LoginModal-alert--error" ng-show="attemptFailed">
                     Invalid username and/or password.  Please try again.
                 </div>
+                <div class="LoginModal-alert LoginModal-alert--error" ng-show="thirdPartyAttemptFailed">
+                    {{ thirdPartyAttemptFailed }}
+                </div>
                 <div class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">Notice</div>{{ customLoginInfo | sanitize }}</div>
             </div>
             <div class="modal-footer LoginModal-footer">

awx/ui/client/src/login/loginModal/thirdPartySignOn/main.js

@@ -5,7 +5,9 @@
  *************************************************/
 
 import thirdPartySignOnDirective from './thirdPartySignOn.directive';
+import thirdPartySignOnService from './thirdPartySignOn.service';
 
 export default
     angular.module('thirdPartySignOn', [])
-        .directive('thirdPartySignOn', thirdPartySignOnDirective);
+        .directive('thirdPartySignOn', thirdPartySignOnDirective)
+        .factory('thirdPartySignOnService', thirdPartySignOnService)

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less

@@ -26,10 +26,18 @@
     padding: 0;
 }
 
+.ThirdPartySignOn-button--error {
+    color: #ff5850;
+}
+
 .ThirdPartySignOn-button:hover {
     color: #717680;
 }
 
+.ThirdPartySignOn-button--error:hover {
+    color: #FF1105;
+}
+
 .ThirdPartySignOn-icon {
     font-size: 35px;
 }

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.controller.js

@@ -0,0 +1,36 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/**
+ * @ngdoc function
+ * @name controllers.function:thirdPartySignOn
+ * @description
+ * Controller for handling third party supported login options.
+ */
+
+export default ['$window', '$scope', 'thirdPartySignOnService',
+    function ($window, $scope, thirdPartySignOnService) {
+
+        thirdPartySignOnService(
+            {scope: $scope, url: "api/v1/auth/"}).then(function (data) {
+            if (data && data.options && data.options.length > 0) {
+                $scope.thirdPartyLoginSupported = true;
+                $scope.loginItems = data.options;
+            } else {
+                $scope.thirdPartyLoginSupported = false;
+            }
+
+            if (data && data.error) {
+                $scope.$parent.thirdPartyAttemptFailed = data.error;
+            }
+        })
+
+        $scope.goTo = function(link) {
+            // this is used because $location only lets you navigate inside
+            // the "/#/" path, and these are API urls.
+            $window.location.href = link;
+        };
+    }];

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.directive.js

@@ -5,39 +5,18 @@
  *************************************************/
 
 /* jshint unused: vars */
+
+import thirdPartySignOnController from './thirdPartySignOn.controller';
+
 export default
     [   'templateUrl',
         function(templateUrl) {
             return {
                 restrict: 'E',
                 scope: true,
-                // controller: authenticationController,
+                controller: thirdPartySignOnController,
                 templateUrl: templateUrl('login/loginModal/thirdPartySignOn/thirdPartySignOn'),
                 link: function(scope, element, attrs) {
-                    // these vars will be set programatically once
-                    // api stuff lands
-                    scope.loginItems = [
-                        {
-                            type: "foo",
-                            icon: "ThirdPartySignOn-icon--fontCustom icon-google",
-                            link: "https://google.com",
-                            tooltip: "Sign in with Google"
-                        },
-                        {
-                            type: "foo",
-                            icon: "fa-github",
-                            link: "https://google.com",
-                            tooltip: "Sign in with Github"
-                        },
-                        {
-                            type: "foo",
-                            icon: "ThirdPartySignOn-icon--fontCustom icon-saml-02",
-                            link: "https://google.com",
-                            tooltip: "Sign in with SAML"
-                        }
-                    ]
-
-                    scope.thirdPartyLoginSupported = true;
                 }
             };
         }

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html

@@ -3,7 +3,10 @@
         Sign In With
     </div>
     <div ng-repeat="item in loginItems" class="ThirdPartySignOn-item">
-        <button type="button" class="ThirdPartySignOn-button" data-placement="top" ng-attr-aw-tool-tip="{{ item.tooltip }}">
+        <button type="button" class="ThirdPartySignOn-button"   
+            ng-class="item.button" data-placement="top"
+            ng-attr-aw-tool-tip="{{ item.tooltip }}"
+            ng-click="goTo(item.link)">
             <i class="fa ThirdPartySignOn-icon" ng-class="item.icon"></i>
         </button>
     </div>

awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js

@@ -0,0 +1,110 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+    /**
+ * @ngdoc function
+ * @name helpers.function:Permissions
+ * @description
+ *  Gets the configured auth types based on the configurations set in the server
+ *
+ */
+
+ export default
+    ['$http', 'ProcessErrors', function($http, ProcessErrors) {
+        return function (params) {
+            var scope = params.scope,
+                url = params.url;
+
+                return $http({
+                    method: 'GET',
+                    url: url,
+                }).then(function (data) {
+                    var options = [],
+                        error = "";
+
+                    function parseGoogle(option, key) {
+                        var newOption = {};
+
+                        newOption.type = "google";
+                        newOption.icon = "ThirdPartySignOn-icon--fontCustom icon-google";
+                        newOption.link = option.login_url;
+                        newOption.tooltip = "Sign in with Google";
+
+                        return newOption;
+                    }
+
+                    function parseGithub(option, key) {
+                        var newOption = {};
+
+                        newOption.type = "github";
+                        newOption.icon = "fa-github";
+                        newOption.link = option.login_url;
+                        newOption.tooltip = "Sign in with GitHub";
+
+                        // if this is a GitHub team or org, add that to
+                        // the tooltip
+                        if (key.split("-")[1]){
+                            if (key.split("-")[1] === "team") {
+                                newOption.tooltip += " Teams";
+                            } else if (key.split("-")[1] === "org") {
+                                newOption.tooltip += " Organizations";
+                            }
+                        }
+
+                        return newOption;
+                    }
+
+                    function parseSaml(option, key) {
+                        var newOption = {};
+
+                        newOption.type = "saml";
+                        newOption.icon = "ThirdPartySignOn-icon--fontCustom icon-saml-02";
+                        newOption.link = option.login_url;
+                        newOption.tooltip = "Sign in with SAML";
+
+                        // add the idp of the saml type to the tooltip
+                        if (key.split(":")[1]){
+                            newOption.tooltip += " (" + key.split(":")[1] + ")";
+                        }
+
+                        return newOption;
+                    }
+
+                    function parseLoginOption(option, key) {
+                        var finalOption;
+
+                        // set up the particular tooltip, icon, etc.
+                        // needed by the login type
+                        if (key.split("-")[0] === "google") {
+                            finalOption = parseGoogle(option, key);
+                        } else if (key.split("-")[0] === "github") {
+                            finalOption = parseGithub(option, key);
+                        } else if (key.split(":")[0] === "saml") {
+                            finalOption = parseSaml(option, key);
+                        }
+
+                        // set the button to error red and set the error message to be passed to the login modal.
+                        if (option.error) {
+                            finalOption.button = "ThirdPartySignOn-button--error";
+                            error = option.error;
+                        }
+
+                        options.push(finalOption);
+                    }
+
+                    // iterate over each login option passed from the API
+                    _.forEach(data.data, parseLoginOption);
+
+                    // return the options and the error to be utilized
+                    // by the loginModal
+                    return {"options": options, "error": error};
+                })
+                .catch(function (data) {
+                    ProcessErrors(scope, data.data, data.status, null, { hdr: 'Error!',
+                            msg: 'Failed to get third-party login types.  Returned status: ' + data.status });
+                });
+        };
+    }];