Added login modal and controller

spira · Jul 15, 2015 · d1c4ce2 · d1c4ce2
1 parent 73b1fb9
commit d1c4ce2
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 10 deletions.
diff --git a/app/src/app/guest/login/login-dialog.tpl.html b/app/src/app/guest/login/login-dialog.tpl.html
@@ -0,0 +1,32 @@
+<md-dialog>
+    <md-dialog-content>
+
+        <form novalidate name="loginForm">
+
+            <md-input-container class="md-icon-float" >
+                <label for="loginForm.email">Email</label>
+                <md-icon>face</md-icon>
+                <input id="loginForm.email" ng-model="user.email" name="email" type="text" ng-required="true">
+                <ng-messages for="loginForm.email.$error">
+                    <ng-message when="required">This is required.</ng-message>
+                </ng-messages>
+            </md-input-container>
+
+            <md-input-container class="md-icon-float" >
+                <label for="loginForm.password">Password</label>
+                <md-icon>face</md-icon>
+                <input id="loginForm.password" name="password" ng-model="user.password" type="password" ng-required="true">
+                <ng-messages for="loginForm.password.$error">
+                    <ng-message when="required">This is required.</ng-message>
+                </ng-messages>
+            </md-input-container>
+
+        </form>
+
+    </md-dialog-content>
+
+    <div class="md-actions">
+        <md-button ng-disabled="loginForm.$invalid" ng-click="login(user.name, user.password)" class="md-primary">Login</md-button>
+        <md-button ng-click="cancelLoginDialog()" class="md-warn">Cancel</md-button>
+    </div>
+</md-dialog>
diff --git a/app/src/app/guest/login/login.tpl.html b/app/src/app/guest/login/login.tpl.html
diff --git a/app/src/app/guest/login/login.ts b/app/src/app/guest/login/login.ts
@@ -20,24 +20,55 @@ module app.guest.login {
 
     class LoginInit {
 
-        static $inject = ['ngJwtAuthService'];
+        static $inject = ['ngJwtAuthService', '$mdDialog'];
         constructor(
-            private ngJwtAuthService:NgJwtAuth.NgJwtAuthService
+            private ngJwtAuthService:NgJwtAuth.NgJwtAuthService,
+            private $mdDialog:ng.material.IDialogService
         ) {
 
-            ngJwtAuthService.init(); //initialise the auth service (kicks off the timers etc)
+            ngJwtAuthService
+                .registerCredentialPromiseFactory(function(existingUser){
+
+                    let dialogConfig:ng.material.IDialogOptions = {
+                        templateUrl: 'templates/app/guest/login/login-dialog.tpl.html',
+                        controller: namespace+'.controller',
+                        clickOutsideToClose: true,
+                    };
+
+                    return $mdDialog.show(dialogConfig);
+                })
+                .init(); //initialise the auth service (kicks off the timers etc)
         }
 
     }
 
     interface IScope extends ng.IScope
     {
+        login(username:string, password:string):void;
+        cancelLoginDialog():void;
     }
 
     class LoginController {
 
-        static $inject = ['$scope'];
-        constructor(private $scope : IScope) {
+        static $inject = ['$scope', '$mdDialog'];
+        constructor(
+            private $scope : IScope,
+            private $mdDialog:ng.material.IDialogService
+        ) {
+
+            $scope.login = function (username, password) {
+
+                let credentials:NgJwtAuth.ICredentials = {
+                    username: username,
+                    password: password,
+                };
+
+                $mdDialog.hide(credentials);
+            };
+
+            $scope.cancelLoginDialog = () => {
+                $mdDialog.cancel();
+            }
 
         }
 

diff --git a/app/src/app/guest/sandbox/sandbox.tpl.html b/app/src/app/guest/sandbox/sandbox.tpl.html
@@ -35,3 +35,13 @@ <h3 class="panel-title">API Result</h3>
     </md-card-content>
 </md-card>
 
+<md-card>
+    <h3>Login</h3>
+    <md-card-content>
+
+
+        <md-button class="md-raised md-primary" ng-click="promptLogin()">Prompt Login</md-button>
+
+    </md-card-content>
+</md-card>
+
diff --git a/app/src/app/guest/sandbox/sandbox.ts b/app/src/app/guest/sandbox/sandbox.ts
@@ -38,16 +38,28 @@ module app.guest.sandbox {
     interface IScope extends ng.IScope
     {
         callApi(apiEndpoint:string):void;
+        promptLogin():void;
         apiResult: any;
     }
 
     class SandboxController {
 
-        static $inject = ['$scope', 'ngRestAdapter'];
-        constructor(private $scope : IScope, private ngRestAdapter:NgRestAdapter.NgRestAdapterService) {
+        static $inject = ['$scope', 'ngRestAdapter', 'ngJwtAuthService', '$window'];
+        constructor(
+            private $scope : IScope,
+            private ngRestAdapter:NgRestAdapter.NgRestAdapterService,
+            private ngJwtAuthService:NgJwtAuth.NgJwtAuthService,
+            private $window:ng.IWindowService
+        ) {
 
             $scope.callApi = _.bind(this.callApi, this); //bind method to scope
 
+            $scope.promptLogin = () => {
+                ngJwtAuthService.getPromisedUser()
+                    .then((user) => $window.alert(user))
+
+            };
+
         }
 
         public callApi(apiEndpoint):void {