diff --git a/awx/ui/client/src/login/loginModal/loginModal.partial.html b/awx/ui/client/src/login/loginModal/loginModal.partial.html index 8382cce5a5..09461b5032 100644 --- a/awx/ui/client/src/login/loginModal/loginModal.partial.html +++ b/awx/ui/client/src/login/loginModal/loginModal.partial.html @@ -69,6 +69,9 @@
Invalid username and/or password. Please try again.
+
+ {{ thirdPartyAttemptFailed }} +
Notice
{{ customLoginInfo | sanitize }}
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/main.js b/awx/ui/client/src/login/loginModal/thirdPartySignOn/main.js index ec674ad764..138930b047 100644 --- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/main.js +++ b/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) diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less index 5e251254a4..0f466f5075 100644 --- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.block.less +++ b/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; } diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.controller.js b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.controller.js new file mode 100644 index 0000000000..ada4a2e203 --- /dev/null +++ b/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; + }; + }]; diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.directive.js b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.directive.js index 319d852a1f..91c6a085c2 100644 --- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.directive.js +++ b/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; } }; } diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html index 8bf8928bd9..94e3ba9504 100644 --- a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html +++ b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.partial.html @@ -3,7 +3,10 @@ Sign In With
-
diff --git a/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js b/awx/ui/client/src/login/loginModal/thirdPartySignOn/thirdPartySignOn.service.js new file mode 100644 index 0000000000..4129b9b758 --- /dev/null +++ b/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 }); + }); + }; + }];