From f4f54cc6dc20e584804421d25f3f8206ffb1c313 Mon Sep 17 00:00:00 2001
From: Jared Tabor <jtabor@ansible.com>
Date: Tue, 8 Sep 2015 15:21:51 -0400
Subject: [PATCH] Refactoring login modal and services

refactoring login modal logic to extract html into its own partial
---
 awx/ui/client/src/app.js                      | 26 +------
 awx/ui/client/src/helpers.js                  |  2 -
 awx/ui/client/src/helpers/Access.js           | 66 -----------------
 awx/ui/client/src/helpers/Groups.js           |  2 +-
 awx/ui/client/src/helpers/Hosts.js            |  4 +-
 awx/ui/client/src/helpers/License.js          |  3 +-
 awx/ui/client/src/helpers/inventory.js        |  4 +-
 .../authentication.controller.js}             | 65 ++---------------
 .../authentication.service.js}                | 12 ++--
 .../client/src/login/checkAccess.factory.js   | 61 ++++++++++++++++
 awx/ui/client/src/login/isAdmin.factory.js    | 18 +++++
 awx/ui/client/src/login/login.route.js        | 19 +++++
 .../client/src/login/loginModal.directive.js  | 28 ++++++++
 .../client/src/login/loginModal.partial.html  | 40 +++++++++++
 .../client/src/login/loginScreen.partial.html |  3 +
 awx/ui/client/src/login/logout.route.js       | 22 ++++++
 awx/ui/client/src/login/main.js               | 30 ++++++++
 awx/ui/client/src/login/timer.factory.js      | 71 ++++++++++++++++++
 awx/ui/client/src/partials/login-dialog.html  | 34 ---------
 awx/ui/client/src/shared/RestServices.js      |  4 +-
 awx/ui/client/src/shared/Socket.js            |  2 +-
 awx/ui/client/src/shared/Timer.js             | 72 -------------------
 awx/ui/client/src/shared/directives.js        |  2 +-
 awx/ui/client/src/widgets/Stream.js           |  2 +-
 awx/ui/templates/ui/index.html                |  7 +-
 25 files changed, 316 insertions(+), 283 deletions(-)
 delete mode 100644 awx/ui/client/src/helpers/Access.js
 rename awx/ui/client/src/{controllers/Authentication.js => login/authentication.controller.js} (73%)
 rename awx/ui/client/src/{shared/AuthService.js => login/authentication.service.js} (95%)
 create mode 100644 awx/ui/client/src/login/checkAccess.factory.js
 create mode 100644 awx/ui/client/src/login/isAdmin.factory.js
 create mode 100644 awx/ui/client/src/login/login.route.js
 create mode 100644 awx/ui/client/src/login/loginModal.directive.js
 create mode 100644 awx/ui/client/src/login/loginModal.partial.html
 create mode 100644 awx/ui/client/src/login/loginScreen.partial.html
 create mode 100644 awx/ui/client/src/login/logout.route.js
 create mode 100644 awx/ui/client/src/login/main.js
 create mode 100644 awx/ui/client/src/login/timer.factory.js
 delete mode 100644 awx/ui/client/src/partials/login-dialog.html
 delete mode 100644 awx/ui/client/src/shared/Timer.js

diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index cce9620fef..7dbf97285f 100644
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@@ -24,7 +24,6 @@ import './help';
 import './filters';
 import {Home, HomeGroups, HomeHosts} from './controllers/Home';
 import {SocketsController} from './controllers/Sockets';
-import {Authenticate} from './controllers/Authentication';
 import {CredentialsAdd, CredentialsEdit, CredentialsList} from './controllers/Credentials';
 import {JobsListController} from './controllers/Jobs';
 import {PortalController} from './controllers/Portal';
@@ -44,7 +43,7 @@ import dashboard from './dashboard/main';
 import moment from './shared/moment/main';
 import templateUrl from './shared/template-url/main';
 import adhoc from './adhoc/main';
-
+import login from './login/main';
 import {JobDetailController} from './controllers/JobDetail';
 import {JobStdoutController} from './controllers/JobStdout';
 import {JobTemplatesList, JobTemplatesAdd, JobTemplatesEdit} from './controllers/JobTemplates';
@@ -64,9 +63,7 @@ import './shared/prompt-dialog';
 import './shared/directives';
 import './shared/filters';
 import './shared/InventoryTree';
-import './shared/Timer';
 import './shared/Socket';
-
 import './job-templates/main';
 import './shared/features/main';
 
@@ -94,8 +91,8 @@ var tower = angular.module('Tower', [
     moment.name,
     templateUrl.name,
     adhoc.name,
+    login.name,
     'templates',
-    'AuthService',
     'Utilities',
     'LicenseHelper',
     'OrganizationFormDefinition',
@@ -149,7 +146,6 @@ var tower = angular.module('Tower', [
     'ChildrenHelper',
     'ProjectPathHelper',
     'md5Helper',
-    'AccessHelper',
     'SelectionHelper',
     'HostGroupsFormDefinition',
     'PortalJobsWidget',
@@ -158,7 +154,6 @@ var tower = angular.module('Tower', [
     'InventoryGroupsHelpDefinition',
     'InventoryTree',
     'CredentialsHelper',
-    'TimerService',
     'StreamListDefinition',
     'HomeGroupListDefinition',
     'HomeHostListDefinition',
@@ -762,23 +757,6 @@ var tower = angular.module('Tower', [
                 }
             }).
 
-            when('/login', {
-                name: 'signIn',
-                templateUrl: urlPrefix + 'partials/blank.html',
-                controller: Authenticate
-            }).
-
-            when('/logout', {
-                name: 'signOut',
-                templateUrl: urlPrefix + 'partials/blank.html',
-                controller: Authenticate,
-                resolve: {
-                    features: ['FeaturesService', function(FeaturesService) {
-                        return FeaturesService.get();
-                    }]
-                }
-            }).
-
             when('/home', {
                 name: 'dashboard',
                 templateUrl: urlPrefix + 'partials/home.html',
diff --git a/awx/ui/client/src/helpers.js b/awx/ui/client/src/helpers.js
index e5477a186c..be09e70be5 100644
--- a/awx/ui/client/src/helpers.js
+++ b/awx/ui/client/src/helpers.js
@@ -8,7 +8,6 @@ import './forms';
 import './lists';
 
 import AboutAnsible from "./helpers/AboutAnsible";
-import Access from "./helpers/Access";
 import Children from "./helpers/Children";
 import Credentials from "./helpers/Credentials";
 import EventViewer from "./helpers/EventViewer";
@@ -45,7 +44,6 @@ import AdhocHelper from "./helpers/Adhoc";
 
 export
     {   AboutAnsible,
-        Access,
         Children,
         Credentials,
         EventViewer,
diff --git a/awx/ui/client/src/helpers/Access.js b/awx/ui/client/src/helpers/Access.js
deleted file mode 100644
index 055c0e00d7..0000000000
--- a/awx/ui/client/src/helpers/Access.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
- 
-  /**
- * @ngdoc function
- * @name helpers.function:Access
- * @description  routines checking user access
-*/
-
-
-export default
-    angular.module('AccessHelper', ['RestServices', 'Utilities'])
-
-        .factory('CheckAccess', ['$rootScope', 'Alert', 'Rest', 'GetBasePath', 'ProcessErrors', '$cookieStore', function ($rootScope, Alert, Rest, GetBasePath, ProcessErrors, $cookieStore) {
-            return function (params) {
-                // set PermissionAddAllowed to true or false based on user access. admins and org admins are granted
-                // accesss.
-                var scope = params.scope,
-                    callback = params.callback || undefined,
-                    me;
-
-                // uer may have refreshed the browser, in which case retrieve current user info from session cookie
-                me = ($rootScope.current_user) ? $rootScope.current_user : $cookieStore.get('current_user');
-
-                if (me.is_superuser) {
-                    scope.PermissionAddAllowed = true;
-                    if(callback){
-                        scope.$emit(callback);
-                    }
-                } else {
-                    if (me.related.admin_of_organizations) {
-                        Rest.setUrl(me.related.admin_of_organizations);
-                        Rest.get()
-                            .success(function (data) {
-                                if (data.results.length > 0) {
-                                    scope.PermissionAddAllowed = true;
-                                } else {
-                                    scope.PermissionAddAllowed = false;
-                                }
-                                if(callback){
-                                    scope.$emit(callback);
-                                }
-                            })
-                            .error(function (data, status) {
-                                ProcessErrors(scope, data, status, null, {
-                                    hdr: 'Error!',
-                                    msg: 'Call to ' + me.related.admin_of_organizations +
-                                        ' failed. DELETE returned status: ' + status
-                                });
-                            });
-                    }
-                }
-
-                //if (!access) {
-                //   Alert('Access Denied', 'You do not have access to this function. Please contact your system administrator.');
-                //}
-                //return access;
-            };
-        }])
-
-        .factory('IsAdmin', ['$rootScope', function($rootScope) {
-            return function() { return ($rootScope.current_user && $rootScope.current_user.is_superuser); };
-        }]);
diff --git a/awx/ui/client/src/helpers/Groups.js b/awx/ui/client/src/helpers/Groups.js
index 067b4e2a68..55e444fbcc 100644
--- a/awx/ui/client/src/helpers/Groups.js
+++ b/awx/ui/client/src/helpers/Groups.js
@@ -16,7 +16,7 @@ import listGenerator from '../shared/list-generator/main';
 
 export default
 angular.module('GroupsHelper', [ 'RestServices', 'Utilities', listGenerator.name, 'GroupListDefinition', 'SearchHelper',
-               'PaginationHelpers', listGenerator.name, 'AuthService', 'GroupsHelper', 'InventoryHelper', 'SelectionHelper',
+               'PaginationHelpers', listGenerator.name, 'GroupsHelper', 'InventoryHelper', 'SelectionHelper',
                'JobSubmissionHelper', 'RefreshHelper', 'PromptDialog', 'CredentialsListDefinition', 'InventoryTree',
                'InventoryStatusDefinition', 'VariablesHelper', 'SchedulesListDefinition', 'SourceFormDefinition', 'LogViewerHelper',
                'SchedulesHelper'
diff --git a/awx/ui/client/src/helpers/Hosts.js b/awx/ui/client/src/helpers/Hosts.js
index f228a8d5df..377b8aba51 100644
--- a/awx/ui/client/src/helpers/Hosts.js
+++ b/awx/ui/client/src/helpers/Hosts.js
@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 
 /* jshint loopfunc: true */
 /**
@@ -18,7 +18,7 @@ import listGenerator from '../shared/list-generator/main';
 
 export default
 angular.module('HostsHelper', [ 'RestServices', 'Utilities', listGenerator.name, 'HostListDefinition',
-               'SearchHelper', 'PaginationHelpers', listGenerator.name, 'AuthService', 'HostsHelper',
+               'SearchHelper', 'PaginationHelpers', listGenerator.name, 'HostsHelper',
                'InventoryHelper', 'RelatedSearchHelper', 'InventoryFormDefinition', 'SelectionHelper',
                'HostGroupsFormDefinition', 'VariablesHelper', 'ModalDialog', 'LogViewerHelper',
                'GroupListDefinition'
diff --git a/awx/ui/client/src/helpers/License.js b/awx/ui/client/src/helpers/License.js
index db6a2b80fc..66c40a64fe 100644
--- a/awx/ui/client/src/helpers/License.js
+++ b/awx/ui/client/src/helpers/License.js
@@ -20,8 +20,7 @@ import '../forms';
 
 export default
     angular.module('LicenseHelper', ['RestServices', 'Utilities', 'LicenseUpdateFormDefinition',
-    'FormGenerator', 'ParseHelper', 'ModalDialog', 'VariablesHelper', 'LicenseFormDefinition',
-    'AccessHelper'])
+    'FormGenerator', 'ParseHelper', 'ModalDialog', 'VariablesHelper', 'LicenseFormDefinition'])
 
 
     .factory('CheckLicense', ['$rootScope', '$compile', 'CreateDialog', 'Store',
diff --git a/awx/ui/client/src/helpers/inventory.js b/awx/ui/client/src/helpers/inventory.js
index 1f73174030..87a80f27e7 100644
--- a/awx/ui/client/src/helpers/inventory.js
+++ b/awx/ui/client/src/helpers/inventory.js
@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
    /**
  * @ngdoc function
  * @name helpers.function:Inventory
@@ -16,7 +16,7 @@
 import listGenerator from '../shared/list-generator/main';
 
 export default
-    angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationListDefinition', listGenerator.name, 'AuthService',
+    angular.module('InventoryHelper', ['RestServices', 'Utilities', 'OrganizationListDefinition', listGenerator.name,
         'InventoryHelper', 'InventoryFormDefinition', 'ParseHelper', 'SearchHelper', 'VariablesHelper',
     ])
 
diff --git a/awx/ui/client/src/controllers/Authentication.js b/awx/ui/client/src/login/authentication.controller.js
similarity index 73%
rename from awx/ui/client/src/controllers/Authentication.js
rename to awx/ui/client/src/login/authentication.controller.js
index 5b85c7c7e3..1bd4d91175 100644
--- a/awx/ui/client/src/controllers/Authentication.js
+++ b/awx/ui/client/src/login/authentication.controller.js
@@ -54,12 +54,13 @@
  * This is usage information.
  */
 
-
-export function Authenticate($log, $cookieStore, $compile, $window, $rootScope, $location, Authorization, ToggleClass, Alert, Wait,
-    Timer, Empty, ClearScope) {
+export default ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$location', 'Authorization', 'ToggleClass', 'Alert', 'Wait',
+    'Timer', 'Empty', 'ClearScope', '$scope',
+    function ($log, $cookieStore, $compile, $window, $rootScope, $location, Authorization, ToggleClass, Alert, Wait,
+    Timer, Empty, ClearScope, scope) {
 
     var setLoginFocus, lastPath, lastUser, sessionExpired, loginAgain,
-        e, html, scope = $rootScope.$new();
+        e, html;
 
     setLoginFocus = function () {
         // Need to clear out any open dialog windows that might be open when this modal opens.
@@ -68,10 +69,8 @@ export function Authenticate($log, $cookieStore, $compile, $window, $rootScope,
     };
 
     loginAgain = function() {
-        Authorization.logout();
         setTimeout(function() {
-            //$location.url('/logout');
-            window.location = '/#/logout';  // if we get here, force user back to re-login
+            $location.path('/logout');
         }, 1000);
     };
 
@@ -107,57 +106,11 @@ export function Authenticate($log, $cookieStore, $compile, $window, $rootScope,
     Wait('stop');
     window.scrollTo(0,0);
 
-    if ($location.path() === '/logout') {
-        //if logout request, clear AuthToken and user session data
-        Authorization.logout();
-    }
-
-    e = angular.element(document.getElementById('login-modal-content'));
-    html = "<div class=\"modal-header login-header\">\n" +
-        "<img src=\"" + $basePath + "assets/tower_console_logo.png\" />" +
-        "</div>\n" +
-        "<div class=\"modal-body\" id=\"login-modal-body\">\n" +
-        "<div class=\"login-alert\" ng-show=\"!sessionExpired\">Welcome to Ansible Tower! &nbsp;Please sign in.</div>\n" +
-        "<div class=\"login-alert\" ng-show=\"sessionExpired\">Your session timed out due to inactivity. Please sign in.</div>\n" +
-        "<form id=\"login-form\" name=\"loginForm\" class=\"form-horizontal\" autocomplete=\"off\" novalidate >\n" +
-        "<div class=\"form-group\">\n" +
-        "<label class=\"control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk prepend-asterisk--login\">Username</label>\n" +
-        "<div class=\"col-md-8 col-sm-8 col-xs-9\">\n" +
-        "<input type=\"text\" name=\"login_username\" class=\"form-control\" ng-model=\"login_username\"" +
-        "id=\"login-username\" autocomplete=\"off\" required>\n" +
-        "<div class=\"error\" ng-show=\"loginForm.login_username.$dirty && loginForm.login_username.$error.required\">Please enter a username.</div>\n" +
-        "<div class=\"error api-error\" ng-bind=\"usernameError\"></div>\n" +
-        "</div>\n" +
-        "</div>\n" +
-        "<div class=\"form-group\">\n" +
-        "<label class=\"control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk prepend-asterisk--login\">Password</label>\n" +
-        "<div class=\"col-md-8 col-sm-8 col-xs-9\">\n" +
-        "<input type=\"password\" name=\"login_password\" id=\"login-password\" class=\"form-control\"" +
-        "ng-model=\"login_password\" required autocomplete=\"off\">\n" +
-        "<div class=\"error\" ng-show=\"loginForm.login_password.$dirty && loginForm.login_password.$error.required\">Please enter a password.</div>\n" +
-        "<div class=\"error api-error\" ng-bind=\"passwordError\"></div>\n" +
-        "</div>\n" +
-        "</div>\n" +
-        "</form>\n" +
-        "</div>\n" +
-        "<div class=\"modal-footer\">\n" +
-        "<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>\n" +
-        "</div>\n";
-    e.empty().html(html);
-    $compile(e)(scope);
-
     // Set focus to username field
     $('#login-modal').on('shown.bs.modal', function () {
         setLoginFocus();
     });
 
-    // Display the login dialog
-    $('#login-modal').modal({
-        show: true,
-        keyboard: false,
-        backdrop: 'static'
-    });
-
     // Reset the login form
     //scope.loginForm.login_username.$setPristine();
     //scope.loginForm.login_password.$setPristine();
@@ -254,8 +207,4 @@ export function Authenticate($log, $cookieStore, $compile, $window, $rootScope,
                 });
         }
     };
-}
-
-Authenticate.$inject = ['$log', '$cookieStore', '$compile', '$window', '$rootScope', '$location', 'Authorization', 'ToggleClass', 'Alert', 'Wait',
-    'Timer', 'Empty', 'ClearScope'
-];
+}];
diff --git a/awx/ui/client/src/shared/AuthService.js b/awx/ui/client/src/login/authentication.service.js
similarity index 95%
rename from awx/ui/client/src/shared/AuthService.js
rename to awx/ui/client/src/login/authentication.service.js
index 5224f7580b..0473f1bd7e 100644
--- a/awx/ui/client/src/shared/AuthService.js
+++ b/awx/ui/client/src/login/authentication.service.js
@@ -1,4 +1,4 @@
-/*************************************************
+    /*************************************************
  * Copyright (c) 2015 Ansible, Inc.
  *
  * All Rights Reserved
@@ -14,12 +14,8 @@
  *
  */
 
-import Utilities from './Utilities';
-
 export default
-angular.module('AuthService', ['ngCookies', Utilities.name])
-
-.factory('Authorization', ['$http', '$rootScope', '$location', '$cookieStore', 'GetBasePath', 'Store',
+    ['$http', '$rootScope', '$location', '$cookieStore', 'GetBasePath', 'Store',
     function ($http, $rootScope, $location, $cookieStore, GetBasePath, Store) {
         return {
             setToken: function (token, expires) {
@@ -75,7 +71,7 @@ angular.module('AuthService', ['ngCookies', Utilities.name])
                 }
                 else if ($cookieStore.get('lastPath') !== '/home' || $cookieStore.get('lastPath') !== '/' || $cookieStore.get('lastPath') !== '/login' || $cookieStore.get('lastPath') !== '/logout'){
                     // do nothing
-                    $rootScope.lastPath = $cookieStore.get('lastPath');    
+                    $rootScope.lastPath = $cookieStore.get('lastPath');
                 }
                 else {
                     // your last path was home
@@ -169,4 +165,4 @@ angular.module('AuthService', ['ngCookies', Utilities.name])
             }
         };
     }
-]);
+];
diff --git a/awx/ui/client/src/login/checkAccess.factory.js b/awx/ui/client/src/login/checkAccess.factory.js
new file mode 100644
index 0000000000..1be4bab4b8
--- /dev/null
+++ b/awx/ui/client/src/login/checkAccess.factory.js
@@ -0,0 +1,61 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+  /**
+ * @ngdoc function
+ * @name helpers.function:Access
+ * @description  routines checking user access
+*/
+
+
+export default
+    ['$rootScope', 'Alert', 'Rest', 'GetBasePath', 'ProcessErrors', '$cookieStore',
+    function ($rootScope, Alert, Rest, GetBasePath, ProcessErrors, $cookieStore) {
+        return function (params) {
+            // set PermissionAddAllowed to true or false based on user access. admins and org admins are granted
+            // accesss.
+            var scope = params.scope,
+                callback = params.callback || undefined,
+                me;
+
+            // uer may have refreshed the browser, in which case retrieve current user info from session cookie
+            me = ($rootScope.current_user) ? $rootScope.current_user : $cookieStore.get('current_user');
+
+            if (me.is_superuser) {
+                scope.PermissionAddAllowed = true;
+                if(callback){
+                    scope.$emit(callback);
+                }
+            } else {
+                if (me.related.admin_of_organizations) {
+                    Rest.setUrl(me.related.admin_of_organizations);
+                    Rest.get()
+                        .success(function (data) {
+                            if (data.results.length > 0) {
+                                scope.PermissionAddAllowed = true;
+                            } else {
+                                scope.PermissionAddAllowed = false;
+                            }
+                            if(callback){
+                                scope.$emit(callback);
+                            }
+                        })
+                        .error(function (data, status) {
+                            ProcessErrors(scope, data, status, null, {
+                                hdr: 'Error!',
+                                msg: 'Call to ' + me.related.admin_of_organizations +
+                                    ' failed. DELETE returned status: ' + status
+                            });
+                        });
+                }
+            }
+
+            //if (!access) {
+            //   Alert('Access Denied', 'You do not have access to this function. Please contact your system administrator.');
+            //}
+            //return access;
+        };
+    }];
diff --git a/awx/ui/client/src/login/isAdmin.factory.js b/awx/ui/client/src/login/isAdmin.factory.js
new file mode 100644
index 0000000000..41b1b29447
--- /dev/null
+++ b/awx/ui/client/src/login/isAdmin.factory.js
@@ -0,0 +1,18 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+/**
+ * @ngdoc function
+ * @name 
+ * @description
+ *
+ *
+ */
+
+ export default
+    ['$rootScope', function($rootScope) {
+        return function() { return ($rootScope.current_user && $rootScope.current_user.is_superuser); };
+    }];
diff --git a/awx/ui/client/src/login/login.route.js b/awx/ui/client/src/login/login.route.js
new file mode 100644
index 0000000000..0a6c118db0
--- /dev/null
+++ b/awx/ui/client/src/login/login.route.js
@@ -0,0 +1,19 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import {templateUrl} from '../shared/template-url/template-url.factory';
+
+export default {
+    name: 'signIn',
+    route: '/login',
+    templateUrl: templateUrl('login/loginScreen'), //templateUrl('management-jobs/schedule/schedule'),
+    // controller: 'authenticationController',
+    resolve: {
+        features: ['FeaturesService', function(FeaturesService) {
+            return FeaturesService.get();
+        }]
+    }
+};
diff --git a/awx/ui/client/src/login/loginModal.directive.js b/awx/ui/client/src/login/loginModal.directive.js
new file mode 100644
index 0000000000..b0cbcc02b7
--- /dev/null
+++ b/awx/ui/client/src/login/loginModal.directive.js
@@ -0,0 +1,28 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+import authenticationController from './authentication.controller';
+
+/* jshint unused: vars */
+export default
+    [   'templateUrl',
+        function(templateUrl) {
+            return {
+                restrict: 'E',
+                scope: true,
+                controller: authenticationController,
+                templateUrl: templateUrl('login/loginModal'),
+                link: function(scope, element, attrs) {
+                    console.log('here you mfers');
+                    // Display the login dialog
+                    $('#login-modal').modal({
+                        show: true,
+                        keyboard: false,
+                        backdrop: 'static'
+                    });
+                }
+            };
+        }
+    ];
diff --git a/awx/ui/client/src/login/loginModal.partial.html b/awx/ui/client/src/login/loginModal.partial.html
new file mode 100644
index 0000000000..e6bd3215c1
--- /dev/null
+++ b/awx/ui/client/src/login/loginModal.partial.html
@@ -0,0 +1,40 @@
+<!-- login modal -->
+<div id="login-modal" class="modal fade">
+   <div class="modal-dialog">
+      <div class="modal-content" id="login-modal-content">
+
+          <div class="modal-header login-header">
+              <img src="" + $basePath + "assets/tower_console_logo.png" >
+          </div>
+          <div class="modal-body" id="login-modal-body">
+              <div class="login-alert" ng-show="!sessionExpired">Welcome to Ansible Tower! &nbsp;Please sign in.</div>
+              <div class="login-alert" ng-show="sessionExpired">Your session timed out due to inactivity. Please sign in.</div>
+              <form id="login-form" name="loginForm" class="form-horizontal" autocomplete="off" novalidate >
+                  <div class="form-group">
+                      <label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk prepend-asterisk--login">Username</label>
+                      <div class="col-md-8 col-sm-8 col-xs-9">
+                          <input type="text" name="login_username" class="form-control" ng-model="login_username"
+                              id="login-username" autocomplete="off" required>
+                          <div class="error" ng-show="loginForm.login_username.$dirty && loginForm.login_username.$error.required">Please enter a username.</div>
+                          <div class="error api-error" ng-bind="usernameError"></div>
+                      </div>
+                  </div>
+                  <div class="form-group">
+                      <label class="control-label col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-3 prepend-asterisk repend-asterisk--login">Password</label>
+                      <div class="col-md-8 col-sm-8 col-xs-9">
+                          <input type="password" name="login_password" id="login-password" class="form-control"
+                              ng-model="login_password" required autocomplete="off">
+                          <div class="error" ng-show="loginForm.login_password.$dirty && loginForm.login_password.$error.required">Please enter a password.</div>
+                          <div class="error api-error" ng-bind="passwordError"></div>
+                      </div>
+                  </div>
+              </form>
+          </div>
+          <div class="modal-footer">
+              <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><!-- modal-content -->
+   </div><!-- modal-dialog -->
+</div><!-- modal -->
diff --git a/awx/ui/client/src/login/loginScreen.partial.html b/awx/ui/client/src/login/loginScreen.partial.html
new file mode 100644
index 0000000000..d3804e3f78
--- /dev/null
+++ b/awx/ui/client/src/login/loginScreen.partial.html
@@ -0,0 +1,3 @@
+<div>
+    <login-modal></login-modal>
+</div>
diff --git a/awx/ui/client/src/login/logout.route.js b/awx/ui/client/src/login/logout.route.js
new file mode 100644
index 0000000000..cf3b965559
--- /dev/null
+++ b/awx/ui/client/src/login/logout.route.js
@@ -0,0 +1,22 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+// import {templateUrl} from '../../shared/template-url/template-url.factory';
+
+export default {
+    name: 'signOut',
+    route: '/logout',
+    controller: ['Authorization', '$location', function(Authorization, $location) {
+        Authorization.logout();
+        $location.path('/login');
+    }],
+    templateUrl: '/static/partials/blank.html', //templateUrl('management-jobs/schedule/schedule'),
+    resolve: {
+        features: ['FeaturesService', function(FeaturesService) {
+            return FeaturesService.get();
+        }]
+    }
+};
diff --git a/awx/ui/client/src/login/main.js b/awx/ui/client/src/login/main.js
new file mode 100644
index 0000000000..fe2e2273fe
--- /dev/null
+++ b/awx/ui/client/src/login/main.js
@@ -0,0 +1,30 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import authenticationService from './authentication.service';
+import checkAccess from './checkAccess.factory';
+import isAdmin from './isAdmin.factory';
+import timer from './timer.factory';
+import loginRoute from './login.route';
+import logoutRoute from './logout.route';
+import loginModalDirective from './loginModal.directive';
+
+export default
+    angular.module('login', [
+    ])
+    .factory('Authorization', authenticationService)
+    .factory('CheckAccess', checkAccess)
+    .factory('IsAdmin', isAdmin)
+    .factory('Timer', timer)
+    .directive('loginModal', loginModalDirective)
+    .config(['$routeProvider', function($routeProvider) {
+        var url = loginRoute.route;
+        delete loginRoute.route;
+        $routeProvider.when(url, loginRoute);
+        url = logoutRoute.route;
+        delete logoutRoute.route;
+        $routeProvider.when(url, logoutRoute);
+    }]);
diff --git a/awx/ui/client/src/login/timer.factory.js b/awx/ui/client/src/login/timer.factory.js
new file mode 100644
index 0000000000..481d6a899c
--- /dev/null
+++ b/awx/ui/client/src/login/timer.factory.js
@@ -0,0 +1,71 @@
+/*************************************************
+ * Copyright (c) 2015 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+  /**
+ *  @ngdoc function
+ *  @name shared.function:Timer
+ *  @description
+ *  Timer.js
+ *
+ *  Use to track user idle time and expire session. Timeout
+ *  duration set in config.js
+ *
+ */
+
+/**
+ * @ngdoc method
+ * @name shared.function:Timer#TimerService
+ * @methodOf shared.function:Timer
+ * @description
+ */
+export default
+    ['$rootScope', '$cookieStore', '$location', 'GetBasePath', 'Empty',
+    function ($rootScope, $cookieStore) {
+        return {
+
+            sessionTime: null,
+            timeout: null,
+
+            getSessionTime: function () {
+                return (this.sessionTime) ? this.sessionTime : $cookieStore.get('sessionTime');
+            },
+
+            isExpired: function () {
+                var stime = this.getSessionTime(),
+                    now = new Date().getTime();
+                if ((stime - now) <= 0) {
+                    //expired
+                    return true;
+                } else {
+                    // not expired. move timer forward.
+                    this.moveForward();
+                    return false;
+                }
+            },
+
+            expireSession: function () {
+                this.sessionTime = 0;
+                $rootScope.sessionExpired = true;
+                $cookieStore.put('sessionExpired', true);
+            },
+
+            moveForward: function () {
+                var tm, t;
+                tm = ($AnsibleConfig) ? $AnsibleConfig.session_timeout : 1800;
+                t = new Date().getTime() + (tm * 1000);
+                this.sessionTime = t;
+                $cookieStore.put('sessionTime', t);
+                $rootScope.sessionExpired = false;
+                $cookieStore.put('sessionExpired', false);
+            },
+
+            init: function () {
+                this.moveForward();
+                return this;
+            }
+        };
+    }
+];
diff --git a/awx/ui/client/src/partials/login-dialog.html b/awx/ui/client/src/partials/login-dialog.html
deleted file mode 100644
index 4e41aa5a8a..0000000000
--- a/awx/ui/client/src/partials/login-dialog.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div id="login-modal" class="modal hide">
-   <div class="modal-dialog">
-      <div class="modal-content">
-          <div class="modal-header login-header">
-            <img ng-src="{{ AWXLoginLogo }}" />
-          </div>
-          <div class="modal-body">
-            <div class="login-alert" ng-show="(sessionExpired == false)">Welcome to AnsibleWorks AWX! &nbsp;Please sign in.</div>
-            <div class="login-alert" ng-show="(sessionExpired == true)">Your session timed out due to inactivity. Please sign in.</div>
-            <form id="login-form" name="loginForm" class="form-horizontal" autocomplete="off" novalidate >
-              <div class="control-group">
-                <label class="control-label">Username:</label>
-                <div class="controls">
-                  <input type="text" name="login_username" ng-model="login_username" id="login-username" autocomplete="off" required><br />
-                  <span class="error" ng-show="loginForm.login_username.$dirty && loginForm.login_username.$error.required">Please enter a username.</span>
-                  <span class="error api-error" ng-bind="usernameError"></span>
-                </div>
-              </div>
-              <div class="control-group">
-                <label class="control-label">Password:</label>
-                <div class="controls">
-                  <input type="password" name="login_password" id="login-password" ng-model="login_password" required autocomplete="off"><br />
-                  <span class="error" ng-show="loginForm.login_password.$dirty && loginForm.login_password.$error.required">Please enter a password.</span>
-                  <span class="error api-error" ng-bind="passwordError"></span>
-                </div>
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button ng-click="systemLogin(login_username, login_password)" id="login-button" class="btn btn-primary"><i class="icon-signin"></i> Sign In</button>
-          </div>
-      </div><!-- modal-content -->
-   </div><!-- modal-dialog -->
-</div><!-- modal -->
\ No newline at end of file
diff --git a/awx/ui/client/src/shared/RestServices.js b/awx/ui/client/src/shared/RestServices.js
index 9f91b6bb35..b038232ef3 100644
--- a/awx/ui/client/src/shared/RestServices.js
+++ b/awx/ui/client/src/shared/RestServices.js
@@ -54,10 +54,8 @@
  *
  */
 
-import AuthService from './AuthService';
-
 export default
-angular.module('RestServices', ['ngCookies', AuthService.name])
+angular.module('RestServices', ['ngCookies'])
     .factory('Rest', ['$http', '$rootScope', '$cookieStore', '$q', 'Authorization',
         function ($http, $rootScope, $cookieStore, $q, Authorization) {
             return {
diff --git a/awx/ui/client/src/shared/Socket.js b/awx/ui/client/src/shared/Socket.js
index b8be09d2dc..c00c88d0b5 100644
--- a/awx/ui/client/src/shared/Socket.js
+++ b/awx/ui/client/src/shared/Socket.js
@@ -23,7 +23,7 @@
  * @description
  */
 export default
-angular.module('SocketIO', ['AuthService', 'Utilities'])
+angular.module('SocketIO', ['Utilities'])
 
     .factory('Socket', ['$rootScope', '$location', '$log', 'Authorization', 'Store', function ($rootScope, $location, $log, Authorization, Store) {
         return function(params) {
diff --git a/awx/ui/client/src/shared/Timer.js b/awx/ui/client/src/shared/Timer.js
deleted file mode 100644
index e9b3de4008..0000000000
--- a/awx/ui/client/src/shared/Timer.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-  /**
- *  @ngdoc function
- *  @name shared.function:Timer
- *  @description
- *  Timer.js
- *
- *  Use to track user idle time and expire session. Timeout
- *  duration set in config.js
- *
- */
-
-/**
- * @ngdoc method
- * @name shared.function:Timer#TimerService
- * @methodOf shared.function:Timer
- * @description
- */
-export default
-angular.module('TimerService', ['ngCookies', 'Utilities'])
-    .factory('Timer', ['$rootScope', '$cookieStore', '$location', 'GetBasePath', 'Empty',
-        function ($rootScope, $cookieStore) {
-            return {
-
-                sessionTime: null,
-                timeout: null,
-
-                getSessionTime: function () {
-                    return (this.sessionTime) ? this.sessionTime : $cookieStore.get('sessionTime');
-                },
-
-                isExpired: function () {
-                    var stime = this.getSessionTime(),
-                        now = new Date().getTime();
-                    if ((stime - now) <= 0) {
-                        //expired
-                        return true;
-                    } else {
-                        // not expired. move timer forward.
-                        this.moveForward();
-                        return false;
-                    }
-                },
-
-                expireSession: function () {
-                    this.sessionTime = 0;
-                    $rootScope.sessionExpired = true;
-                    $cookieStore.put('sessionExpired', true);
-                },
-
-                moveForward: function () {
-                    var tm, t;
-                    tm = ($AnsibleConfig) ? $AnsibleConfig.session_timeout : 1800;
-                    t = new Date().getTime() + (tm * 1000);
-                    this.sessionTime = t;
-                    $cookieStore.put('sessionTime', t);
-                    $rootScope.sessionExpired = false;
-                    $cookieStore.put('sessionExpired', false);
-                },
-
-                init: function () {
-                    this.moveForward();
-                    return this;
-                }
-            };
-        }
-    ]);
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index b7160f2f72..2b005b06d0 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -14,7 +14,7 @@
  */
 
 export default
-angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'JobsHelper'])
+angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
 
     // awpassmatch:  Add to password_confirm field. Will test if value
     //               matches that of 'input[name="password"]'
diff --git a/awx/ui/client/src/widgets/Stream.js b/awx/ui/client/src/widgets/Stream.js
index a8acfbe779..2e5a788b9f 100644
--- a/awx/ui/client/src/widgets/Stream.js
+++ b/awx/ui/client/src/widgets/Stream.js
@@ -19,7 +19,7 @@ import listGenerator from '../shared/list-generator/main';
 
 
 angular.module('StreamWidget', ['RestServices', 'Utilities', 'StreamListDefinition', 'SearchHelper', 'PaginationHelpers',
-    'RefreshHelper', listGenerator.name, 'StreamWidget', 'AuthService',
+    'RefreshHelper', listGenerator.name, 'StreamWidget',
 ])
 
 .factory('setStreamHeight', [
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index 48ee607e97..664b1474c1 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -44,12 +44,7 @@
       </div>
     </div>
 
-    <!-- login modal -->
-    <div id="login-modal" class="modal fade">
-       <div class="modal-dialog">
-          <div class="modal-content" id="login-modal-content"></div><!-- modal-content -->
-       </div><!-- modal-dialog -->
-    </div><!-- modal -->
+
 
     <!-- Password Dialog -->
     <div id="password-modal" style="display: none;"></div>