pluggable auth ui styling

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

@@ -21,3 +21,17 @@
 .LoginModal-labelAsterisk:before {
     margin-right: -2px;
 }
+
+.LoginModal-footer {
+    display: flex;
+    align-items: center;
+}
+
+.LoginModal-footerBlock {
+    flex: 1 0 auto;
+    text-align: left;
+}
+
+.LoginModal-footerBlock--submit {
+    text-align: right;
+}

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

@@ -63,11 +63,17 @@
                 </form>
                 <div class="LoginModalNotice" ng-if="customLoginInfoPresent"><div class="LoginModalNotice-title">Notice</div>{{ customLoginInfo | sanitize }}</div>
             </div>
-            <div class="modal-footer">
+            <div class="modal-footer LoginModal-footer">
-                <button ng-click="systemLogin(login_username, login_password)"
+                <div class="LoginModal-footerBlock">
-                    id="login-button" class="btn btn-primary">
+                    <third-party-sign-on></third-party-sign-on>
-                    <i class="fa fa-sign-in"></i> Sign in
+                </div>
-                </button>
+                <div class="LoginModal-footerBlock
+                    LoginModal-footerBlock--submit">
+                    <button ng-click="systemLogin(login_username, login_password)"
+                        id="login-button" class="btn btn-primary">
+                        <i class="fa fa-sign-in"></i> Sign in
+                    </button>
+                </div>
             </div>
         </div>
    </div>

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

@@ -11,6 +11,7 @@ import timer from './timer.factory';
 import loginRoute from './login.route';
 import logoutRoute from './logout.route';
 import loginModalDirective from './loginModal.directive';
+import thirdPartySignOnDirective from './thirdPartySignOn.directive';
 
 export default
     angular.module('login', [
@@ -20,6 +21,7 @@ export default
     .factory('IsAdmin', isAdmin)
     .factory('Timer', timer)
     .directive('loginModal', loginModalDirective)
+    .directive('thirdPartySignOn', thirdPartySignOnDirective)
     .config(['$routeProvider', function($routeProvider) {
         var url = loginRoute.route;
         delete loginRoute.route;

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

@@ -0,0 +1,35 @@
+/** @define ThirdPartySignOn */
+
+.ThirdPartySignOn {
+    display: flex;
+    align-items: center;
+}
+
+.ThirdPartySignOn-label {
+    flex: initial;
+    font-weight: bold;
+    color: #717680;
+}
+
+.ThirdPartySignOn-item {
+    margin-left: 10px;
+}
+
+.ThirdPartySignOn-button {
+    flex: 1 0 auto;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    color: #C1C1C1;
+    background-color: #fff;
+    border: 0;
+    padding: 0;
+}
+
+.ThirdPartySignOn-button:hover {
+    color: #717680;
+}
+
+.ThirdPartySignOn-icon {
+    font-size: 35px;
+}

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

@@ -0,0 +1,40 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/* jshint unused: vars */
+export default
+    [   'templateUrl',
+        function(templateUrl) {
+            return {
+                restrict: 'E',
+                scope: true,
+                // controller: authenticationController,
+                templateUrl: templateUrl('login/thirdPartySignOn'),
+                link: function(scope, element, attrs) {
+                    scope.loginItems = [
+                        {
+                            type: "foo",
+                            icon: "fa-github",
+                            link: "https://google.com",
+                            tooltip: "Login in via Google"
+                        },
+                        {
+                            type: "foo",
+                            icon: "fa-github",
+                            link: "https://google.com",
+                            tooltip: "Login in via Github"
+                        },
+                        {
+                            type: "foo",
+                            icon: "fa-github",
+                            link: "https://google.com",
+                            tooltip: "Login in via SAML"
+                        }
+                    ]
+                }
+            };
+        }
+    ];

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

@@ -0,0 +1,10 @@
+<div class="ThirdPartySignOn">
+    <div class="ThirdPartySignOn-label">
+        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 }}">
+            <i class="fa ThirdPartySignOn-icon" ng-class="item.icon"></i>
+        </button>
+    </div>
+</div>