Merge pull request #1388 from vmware/feature/seesion_service_#1369

Implement session service

harbor-app/src/app/account/account.module.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
-import { SignInComponent } from './sign-in/sign-in.component';
 import { SharedModule } from '../shared/shared.module';
 import { RouterModule } from '@angular/router';
 
+import { SignInComponent } from './sign-in/sign-in.component';
+
 @NgModule({
   imports: [
     SharedModule,
     RouterModule
   ],
-  declarations: [ SignInComponent ],
+  declarations: [SignInComponent],
   exports: [SignInComponent]
 })
-export class AccountModule {}
+export class AccountModule { }

harbor-app/src/app/account/sign-in/sign-in.component.ts

@@ -5,6 +5,7 @@ import { NgForm } from '@angular/forms';
 
 import { SignInService } from './sign-in.service';
 import { SignInCredential } from './sign-in-credential'
+import { SessionService } from '../../shared/session.service';
 
 //Define status flags for signing in states
 export const signInStatusNormal = 0;
@@ -35,7 +36,8 @@ export class SignInComponent implements AfterViewChecked {
 
     constructor(
         private signInService: SignInService,
-        private router: Router
+        private router: Router,
+        private session: SessionService
     ) { }
 
     //For template accessing
@@ -53,6 +55,15 @@ export class SignInComponent implements AfterViewChecked {
         //return this.signInForm.valid;
     }
 
+    //General error handler
+    private handleError(error) {
+        //Set error status
+        this.signInStatus = signInStatusError;
+
+        let message = error.status ? error.status + ":" + error.statusText : error;
+        console.error("An error occurred when signing in:", message);
+    }
+
     //Hande form values changes
     private formChanged() {
         if (this.currentForm === this.signInForm) {
@@ -100,17 +111,16 @@ export class SignInComponent implements AfterViewChecked {
                 //Set status
                 this.signInStatus = signInStatusNormal;
 
-                //Routing to the right location
-                let nextRoute = ["/harbor", "dashboard"];
-                this.router.navigate(nextRoute);
+                //Validate the sign-in session
+                this.session.retrieveUser()
+                    .then(() => {
+                        //Routing to the right location
+                        let nextRoute = ["/harbor", "dashboard"];
+                        this.router.navigate(nextRoute);
+                    })
+                    .catch(this.handleError);
             })
-            .catch(error => {
-                //Set error status
-                this.signInStatus = signInStatusError;
-
-                let message = error.status ? error.status + ":" + error.statusText : error;
-                console.error("An error occurred when signing in:", message);
-            });
+            .catch(this.handleError);
     }
 
     //Help user navigate to the sign up

harbor-app/src/app/base/base-settings/base-settings.component.html

@@ -0,0 +1,12 @@
+<clr-dropdown [clrMenuPosition]="'bottom-right'">
+    <button class="nav-text" clrDropdownToggle>
+          <!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
+          <span>Administrator</span>
+          <clr-icon shape="caret down"></clr-icon>
+      </button>
+    <div class="dropdown-menu">
+        <a href="javascript:void(0)" clrDropdownItem>Add User</a>
+        <a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
+        <a href="javascript:void(0)" clrDropdownItem>About</a>
+    </div>
+</clr-dropdown>

harbor-app/src/app/base/base-settings/base-settings.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: "base-settings",
+    templateUrl: "base-settings.component.html"
+})
+
+/**
+ * Component to handle the account settings
+ */
+export class BaseSettingsComponent implements OnInit {
+    
+    ngOnInit(): void {
+    }
+
+}

harbor-app/src/app/base/base.module.ts

@@ -9,6 +9,7 @@ import { NavigatorComponent } from './navigator/navigator.component';
 import { GlobalSearchComponent } from './global-search/global-search.component';
 import { FooterComponent } from './footer/footer.component';
 import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
+import { BaseSettingsComponent } from './base-settings/base-settings.component';
 
 import { BaseRoutingModule } from './base-routing.module';
 
@@ -23,6 +24,7 @@ import { BaseRoutingModule } from './base-routing.module';
   declarations: [
     NavigatorComponent,
     GlobalSearchComponent,
+    BaseSettingsComponent,
     FooterComponent,
     HarborShellComponent
   ],

harbor-app/src/app/base/global-search/global-search.component.ts

@@ -1,10 +1,10 @@
-import { Component } from '@angular/core';
+import { Component} from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
     selector: 'global-search',
     templateUrl: "global-search.component.html"
 })
-export class GlobalSearchComponent {
+export class GlobalSearchComponent{
     // constructor(private router: Router){}
 }

harbor-app/src/app/base/navigator/navigator.component.html

@@ -1,40 +1,41 @@
 <clr-header class="header-4 header">
-  <div class="branding">
-    <a href="#" class="nav-link">
-      <clr-icon shape="vm-bug"></clr-icon>
-      <span class="title">Harbor</span>
-    </a>
-  </div>
-  <div class="divider"></div>
-  <div class="header-nav">
-      <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'dashboard']" routerLinkActive="active">
-        <span class="nav-text">Dashboard</span>
-      </a>
-      <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'projects']" routerLinkActive="active">
-        <span class="nav-text">Project</span>
-      </a>
-  </div>
-  <div class="header-actions">
-    <clr-dropdown class="dropdown bottom-right">        
-      <button class="nav-text" clrDropdownToggle>
-          Administrator
-          <clr-icon shape="caret down"></clr-icon>
-      </button>
-      <div class="dropdown-menu">
-        <a href="javascript:void(0)" clrDropdownItem>Add User</a>
-        <a href="javascript:void(0)" clrDropdownItem (click)="account_settings_opened = true">Account Setting</a>
-        <a href="javascript:void(0)" clrDropdownItem>About</a>
-      </div>
-    </clr-dropdown>
-    <global-search></global-search>
-    <clr-dropdown class="dropdown bottom-right">
-      <button class="nav-text" clrDropdownToggle>
-          <clr-icon shape="cog"></clr-icon>
-      </button>
-      <div class="dropdown-menu">
-        <a href="javascript:void(0)" clrDropdownItem>Preferences</a>
-        <a href="javascript:void(0)" clrDropdownItem>Log out</a>
-      </div>
-    </clr-dropdown>
-  </div>
+    <div class="branding">
+        <a href="#" class="nav-link">
+            <clr-icon shape="vm-bug"></clr-icon>
+            <span class="title">Harbor</span>
+        </a>
+    </div>
+    <div class="divider"></div>
+    <div class="header-nav">
+        <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'dashboard']" routerLinkActive="active">
+            <span class="nav-text">Dashboard</span>
+        </a>
+        <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'projects']" routerLinkActive="active">
+            <span class="nav-text">Project</span>
+        </a>
+    </div>
+    <div class="header-actions">
+        <clr-dropdown [clrMenuPosition]="'bottom-right'">
+            <!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
+            <button class="nav-text" clrDropdownToggle>
+              <span>Administrator</span>
+              <clr-icon shape="caret down"></clr-icon>
+            </button>
+            <div class="dropdown-menu">
+                <a href="javascript:void(0)" clrDropdownItem>Add User</a>
+                <a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
+                <a href="javascript:void(0)" clrDropdownItem>About</a>
+            </div>
+        </clr-dropdown>
+        <global-search></global-search>
+        <clr-dropdown class="dropdown bottom-right">
+            <button class="nav-text" clrDropdownToggle>
+                <clr-icon shape="cog"></clr-icon>
+            </button>
+            <div class="dropdown-menu">
+                <a href="javascript:void(0)" clrDropdownItem>Preferences</a>
+                <a href="javascript:void(0)" clrDropdownItem>Log out</a>
+            </div>
+        </clr-dropdown>
+    </div>
 </clr-header>

harbor-app/src/app/shared/session.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+const currentUserEndpint = "/api/users/current";
+/**
+ * Define related methods to handle account and session corresponding things
+ * 
+ * @export
+ * @class SessionService
+ */
+@Injectable()
+export class SessionService {
+    currentUser: any = null;
+
+    private headers = new Headers({
+        "Content-Type": 'application/json'
+    });
+
+    constructor(private http: Http) {}
+
+    /**
+     * Get the related information of current signed in user from backend
+     * 
+     * @returns {Promise<any>}
+     * 
+     * @memberOf SessionService
+     */
+    retrieveUser(): Promise<any> {
+        return this.http.get(currentUserEndpint, { headers: this.headers }).toPromise()
+            .then(response => this.currentUser = response.json())
+            .catch(error => {
+                console.log("An error occurred when getting current user ", error);//TODO: Will replaced with general error handler
+            })
+    }
+
+    /**
+     * For getting info
+     */
+    getCurrentUser(): any {
+        return this.currentUser;
+    }
+}

harbor-app/src/app/shared/shared.module.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CoreModule } from '../core/core.module';
+
+import { SessionService } from '../shared/session.service';
 import { MessageComponent } from '../global-message/message.component';
 import { MessageService } from '../global-message/message.service';
+
 @NgModule({
   imports: [
     CoreModule
@@ -10,9 +13,10 @@ import { MessageService } from '../global-message/message.service';
     MessageComponent
   ],
   exports: [
-    CoreModule, MessageComponent
+    CoreModule,
+    MessageComponent
   ],
-  providers:[ MessageService ]
+  providers: [SessionService, MessageService]
 })
 export class SharedModule {