mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 16:51:11 +03:00
inegration of ui with api on pluggable auth
This commit is contained in:
John Mitchell
parent
c3a387c603
commit
56105e9e0d
@ -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">
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
};
|
||||
}];
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 });
|
||||
});
|
||||
};
|
||||
}];
|
||||
Loading…
Reference in New Issue
Block a user