Added lastest UI codes.

2024-11-22 10:15:35 +01:00 · 2017-02-24 18:06:08 +08:00 · 2017-02-24 18:06:08 +08:00 · 5619e4e7e3
commit 5619e4e7e3
parent 23f0ff1ea5
53 changed files with 1044 additions and 240 deletions
--- a/src/clarity-seed/src/app/account/account-settings/account-settings-modal.component.html
+++ b/src/clarity-seed/src/app/account/account-settings/account-settings-modal.component.html
@ -1,6 +1,6 @@
 <clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalSize]="'lg'">
-    <h3 class="modal-title">Accout Settings</h3>
-    <div class="modal-body">
+    <h3 class="modal-title">User Profile</h3>
+    <div class="modal-body" style="overflow-y: hidden;">
        <form #accountSettingsFrom="ngForm" class="form">
            <section class="form-block">
                <div class="form-group">
@ -21,7 +21,7 @@
                <div class="form-group">
                    <label for="account_settings_full_name" class="col-md-4 required">Full name</label>
                    <label for="account_settings_email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="fullNameInput.invalid && (fullNameInput.dirty || fullNameInput.touched)">
-                      <input type="text" name="account_settings_full_name" #fullNameInput="ngModel" [(ngModel)]="account.realname" required maxLength="20" maxLengthExt="20" id="account_settings_full_name" size="48">
+                      <input type="text" name="account_settings_full_name" #fullNameInput="ngModel" [(ngModel)]="account.realname" required maxLengthExt="20" id="account_settings_full_name" size="48">
                      <span class="tooltip-content">
                          Max length of full name is 20
                      </span>
@ -29,14 +29,20 @@
                </div>
                <div class="form-group">
                    <label for="account_settings_comments" class="col-md-4">Comments</label>
-                    <input type="text" name="account_settings_comments" [(ngModel)]="account.comment" id="account_settings_comments" size="51">
+                    <label for="account_settings_comments" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="commentInput.invalid && (commentInput.dirty || commentInput.touched)">
+                    <input type="text" #commentInput="ngModel" maxLengthExt="20" name="account_settings_comments" [(ngModel)]="account.comment" id="account_settings_comments" size="48">
+                    <span class="tooltip-content">
+                        Length of comment should be less than 20
+                    </span>
+                    </label>
                </div>
            </section>
        </form>
-        <clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [hidden]='errorMessage === ""'>
+        <div style="height: 30px;"></div>
+        <clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [(clrAlertClosed)]="alertClose">
            <div class="alert-item">
                <span class="alert-text">
-                   This alert indicates success.
+                   {{errorMessage}}
                </span>
            </div>
        </clr-alert>
--- a/src/clarity-seed/src/app/account/account-settings/account-settings-modal.component.ts
+++ b/src/clarity-seed/src/app/account/account-settings/account-settings-modal.component.ts
@ -14,6 +14,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
    staticBackdrop: boolean = true;
    account: SessionUser;
    error: any;
+    alertClose: boolean = true;

    private isOnCalling: boolean = false;
    private formValueChanged: boolean = false;
@ -37,7 +38,16 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
    }

    public get errorMessage(): string {
-        return this.error ? (this.error.message ? this.error.message : this.error) : "";
+        if(this.error){
+            if(this.error.message){
+                return this.error.message;
+            }else{
+                if(this.error._body){
+                    return this.error._body;
+                }
+            }
+        }
+        return "";
    }

    ngAfterViewChecked(): void {
@ -85,7 +95,8 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
            })
            .catch(error => {
                this.isOnCalling = false;
-                this.error = error
+                this.error = error;
+                this.alertClose = false;
            });
    }

--- a/src/clarity-seed/src/app/account/account.module.ts
+++ b/src/clarity-seed/src/app/account/account.module.ts
@ -5,13 +5,15 @@ import { CoreModule } from '../core/core.module';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { PasswordSettingComponent } from './password/password-setting.component';
 import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component';
+import { SharedModule } from '../shared/shared.module';

 import { PasswordSettingService } from './password/password-setting.service';

@NgModule({
  imports: [
    CoreModule,
-    RouterModule
+    RouterModule,
+    SharedModule
  ],
  declarations: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent],
  exports: [SignInComponent, PasswordSettingComponent, AccountSettingsModalComponent],
--- a/src/clarity-seed/src/app/account/password/password-setting.component.ts
+++ b/src/clarity-seed/src/app/account/password/password-setting.component.ts
@ -1,4 +1,4 @@
-import { Component, ViewChild, AfterViewChecked, Output, EventEmitter } from '@angular/core';
+import { Component, ViewChild, AfterViewChecked } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgForm } from '@angular/forms';

@ -20,9 +20,6 @@ export class PasswordSettingComponent implements AfterViewChecked {

    pwdFormRef: NgForm;
    @ViewChild("changepwdForm") pwdForm: NgForm;
-
-    @Output() private pwdChange = new EventEmitter<any>();
-
    constructor(private passwordService: PasswordSettingService, private session: SessionService){}

    //If form is valid
@ -90,9 +87,6 @@ export class PasswordSettingComponent implements AfterViewChecked {
        })
        .then(() => {
            this.onCalling = false;
-            //Tell shell to reset current view
-            this.pwdChange.emit(true);
-
            this.close();
        })
        .catch(error => {
--- a/src/clarity-seed/src/app/account/sign-in/sign-in.component.html
+++ b/src/clarity-seed/src/app/account/sign-in/sign-in.component.html
@ -31,8 +31,7 @@
            <div [class.visibility-hidden]="signInStatus != statusError" class="error active">
                Invalid user name or password
            </div>
-            <button [class.visibility-hidden]="signInStatus === statusOnGoing" [disabled]="signInStatus === statusOnGoing" type="submit" class="btn btn-primary" (click)="signIn()">LOG IN</button>
-            <div [class.visibility-hidden]="signInStatus != statusOnGoing" class="progress loop progress-size-small"><progress></progress></div>
+            <button [disabled]="signInStatus === statusOnGoing" type="submit" class="btn btn-primary" (click)="signIn()">LOG IN</button>
            <a href="javascript:void(0)" class="signup" (click)="signUp()">Sign up for an account</a>
        </div>
    </form>
--- a/src/clarity-seed/src/app/app.module.ts
+++ b/src/clarity-seed/src/app/app.module.ts
@ -6,9 +6,9 @@ import { ClarityModule } from 'clarity-angular';
 import { AppComponent } from './app.component';

 import { BaseModule } from './base/base.module';
-
 import { HarborRoutingModule } from './harbor-routing.module';
 import { SharedModule } from './shared/shared.module';
+import { AccountModule } from './account/account.module';

@NgModule({
    declarations: [
@ -17,6 +17,7 @@ import { SharedModule } from './shared/shared.module';
    imports: [
        SharedModule,
        BaseModule,
+        AccountModule,
        HarborRoutingModule
    ],
    providers: [],
--- a/src/clarity-seed/src/app/base/base-routing.module.ts
+++ b/src/clarity-seed/src/app/base/base-routing.module.ts
@ -4,6 +4,7 @@ import { HarborShellComponent } from './harbor-shell/harbor-shell.component';

 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { ProjectComponent } from '../project/project.component';
+import { UserComponent } from '../user/user.component';

 import { BaseRoutingResolver } from './base-routing-resolver.service';

@ -19,6 +20,13 @@ const baseRoutes: Routes = [
      {
        path: 'projects',
        component: ProjectComponent
+      },
+      {
+        path: 'users',
+        component: UserComponent,
+        resolve: {
+          projectsResolver: BaseRoutingResolver
+        }
      }
    ]
  }];
--- a/src/clarity-seed/src/app/base/base.module.ts
+++ b/src/clarity-seed/src/app/base/base.module.ts
@ -4,6 +4,7 @@ import { SharedModule } from '../shared/shared.module';
 import { DashboardModule } from '../dashboard/dashboard.module';
 import { ProjectModule } from '../project/project.module';
 import { UserModule } from '../user/user.module';
+import { AccountModule } from '../account/account.module';

 import { NavigatorComponent } from './navigator/navigator.component';
 import { GlobalSearchComponent } from './global-search/global-search.component';
@ -19,7 +20,8 @@ import { BaseRoutingModule } from './base-routing.module';
    DashboardModule,
    ProjectModule,
    UserModule,
-    BaseRoutingModule
+    BaseRoutingModule,
+    AccountModule
  ],
  declarations: [
    NavigatorComponent,
--- a/src/clarity-seed/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/clarity-seed/src/app/base/harbor-shell/harbor-shell.component.html
@ -16,7 +16,7 @@
                    <input id="tabsystem" type="checkbox">
                    <label for="tabsystem">System Managements</label>
                    <ul class="nav-list">
-                        <li><a class="nav-link">Users</a></li>
+                        <li><a class="nav-link" routerLink="/harbor/users" routerLinkActive="active">Users</a></li>
                        <li><a class="nav-link">Replications</a></li>
                        <li><a class="nav-link">Quarantine[*]</a></li>
                        <li><a class="nav-link">Configurations[*]</a></li>
@ -27,4 +27,4 @@
    </div>
 </clr-main-container>
 <account-settings-modal></account-settings-modal>
-<password-setting (pwdChange)="watchPwdChange($event)"></password-setting>
+<password-setting></password-setting>
--- a/src/clarity-seed/src/app/base/harbor-shell/harbor-shell.component.ts
+++ b/src/clarity-seed/src/app/base/harbor-shell/harbor-shell.component.ts
@ -77,11 +77,4 @@ export class HarborShellComponent implements OnInit {
            this.isSearchResultsOpened = false;
        }
    }
-
-    //Watch password whether changed
-    watchPwdChange(event: any): void {
-        if (event) {
-            this.navigator.logOut(true);
-        }
-    }
 }
--- a/src/clarity-seed/src/app/base/navigator/navigator.component.html
+++ b/src/clarity-seed/src/app/base/navigator/navigator.component.html
@ -12,19 +12,6 @@
            <span class="custom-divider"></span>
            <a href="javascript:void(0)" class="nav-link nav-text sign-up-override" routerLink="/sign-up" routerLinkActive="active">Sign Up</a>
        </div>
-        <clr-dropdown [clrMenuPosition]="'bottom-left'" class="dropdown" *ngIf="isSessionValid">
-            <button class="nav-text" clrDropdownToggle>
-              <clr-icon shape="user" class="is-inverse" size="24" style="left: -2px;"></clr-icon>
-              <span>Administrator</span>
-              <clr-icon shape="caret down"></clr-icon>
-            </button>
-            <div class="dropdown-menu">
-                <a href="javascript:void(0)" clrDropdownItem (click)="openAccountSettingsModal()">Account Settings</a>
-                <a href="javascript:void(0)" clrDropdownItem (click)="openChangePwdModal()">Change Password</a>
-                <div class="dropdown-divider"></div>
-                <a href="javascript:void(0)" clrDropdownItem (click)="logOut(false)">Log out</a>
-            </div>
-        </clr-dropdown>
        <clr-dropdown class="dropdown bottom-left">
            <button class="nav-icon" clrDropdownToggle style="width: 90px;">
                <clr-icon shape="world" style="left:-5px;"></clr-icon>
@ -37,15 +24,18 @@
                <a href="javascript:void(0)" clrDropdownItem>中文繁體</a>
            </div>
        </clr-dropdown>
-        <clr-dropdown class="dropdown bottom-right">
-            <button class="nav-icon" clrDropdownToggle>
-                <clr-icon shape="cog"></clr-icon>
-                <clr-icon shape="caret down"></clr-icon>
+        <clr-dropdown [clrMenuPosition]="'bottom-right'" class="dropdown" *ngIf="isSessionValid">
+            <button class="nav-text" clrDropdownToggle>
+              <clr-icon shape="user" class="is-inverse" size="24" style="left: -2px;"></clr-icon>
+              <span>{{accountName}}</span>
+              <clr-icon shape="caret down"></clr-icon>
            </button>
            <div class="dropdown-menu">
-                <a href="javascript:void(0)" clrDropdownItem>Preferences</a>
-                <a href="javascript:void(0)" clrDropdownItem>Add User</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)="openAccountSettingsModal()">User Profile</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)="openChangePwdModal()">Change Password</a>
                <a href="javascript:void(0)" clrDropdownItem>About</a>
+                <div class="dropdown-divider"></div>
+                <a href="javascript:void(0)" clrDropdownItem (click)="logOut()">Log out</a>
            </div>
        </clr-dropdown>
    </div>
--- a/src/clarity-seed/src/app/base/navigator/navigator.component.ts
+++ b/src/clarity-seed/src/app/base/navigator/navigator.component.ts
@ -32,6 +32,10 @@ export class NavigatorComponent implements OnInit {
        return this.sessionUser != null;
    }

+    public get accountName(): string {
+        return this.sessionUser?this.sessionUser.username: "";
+    }
+
    //Open the account setting dialog
    openAccountSettingsModal(): void {
        this.showAccountSettingsModal.emit({
@ -54,17 +58,12 @@ export class NavigatorComponent implements OnInit {
    }

    //Log out system
-    logOut(reSignIn: boolean): void {
+    logOut(): void {
        this.session.signOff()
            .then(() => {
                this.sessionUser = null;
-                if (reSignIn) {
-                    //Naviagte to the sign in route
-                    this.router.navigate(["/sign-in"]);
-                } else {
-                    //Naviagte to the default route
-                    this.router.navigate(["/harbor"]);
-                }
+                //Naviagte to the sign in route
+                this.router.navigate(["/sign-in"]);
            })
            .catch()//TODO:
    }
--- a/src/clarity-seed/src/app/log/audit-log.component.html
+++ b/src/clarity-seed/src/app/log/audit-log.component.html
@ -1,8 +1,28 @@
 <div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
-    <div class="row flex-items-xs-between">
-      <div class="col-md-2 push-md-8">
-        <input type="text" placeholder="Search for user">
+    <div class="row flex-items-xs-right">
+      <div class="col-xs-3 push-md-2 flex-xs-middle">
+        <button class="btn btn-link" (click)="toggleOptionalName(currentOption)">{{toggleName[currentOption]}}</button>
+      </div>
+      <div class="col-xs-3 flex-xs-middle">
+        <clr-icon shape="filter" style="position: relative; left: 15px;"></clr-icon><input style="padding-left: 20px;" type="text" placeholder="Filter logs" #searchUsername (keyup.enter)="doSearchAuditLogs(searchUsername.value)">
+      </div>
+    </div>
+    <div class="row flex-items-xs-right advance-option" [hidden]="currentOption === 0">
+      <div class="col-xs-2 push-md-1">
+        <clr-dropdown [clrMenuPosition]="'bottom-left'" >
+          <button class="btn btn-link" clrDropdownToggle>
+            All Operations
+            <clr-icon shape="caret down"></clr-icon>
+          </button>
+          <div class="dropdown-menu">
+            <a href="javascript:void(0)" clrDropdownItem *ngFor="let f of filterOptions" (click)="toggleFilterOption(f.key)"><clr-icon shape="check" [hidden]="!f.checked"></clr-icon> {{f.description}}</a>
+          </div>
+        </clr-dropdown>
+      </div>
+      <div class="col-xs-5 push-md-1">
+        <clr-icon shape="date"></clr-icon><input type="date" #fromTime  (change)="doSearchByTimeRange(fromTime.value, 'begin')">
+        <clr-icon shape="date"></clr-icon><input type="date" #toTime  (change)="doSearchByTimeRange(toTime.value, 'end')">
      </div>
    </div>
    <clr-datagrid>
@ -13,12 +33,12 @@
      <clr-dg-column>Timestamp</clr-dg-column>
      <clr-dg-row *ngFor="let l of auditLogs">
        <clr-dg-cell>{{l.username}}</clr-dg-cell>
-        <clr-dg-cell>{{l.repoName}}</clr-dg-cell>
-        <clr-dg-cell>{{l.tag}}</clr-dg-cell>
+        <clr-dg-cell>{{l.repo_name}}</clr-dg-cell>
+        <clr-dg-cell>{{l.repo_tag}}</clr-dg-cell>
        <clr-dg-cell>{{l.operation}}</clr-dg-cell>
-        <clr-dg-cell>{{l.timestamp}}</clr-dg-cell>
+        <clr-dg-cell>{{l.op_time}}</clr-dg-cell>
      </clr-dg-row>
-      <clr-dg-footer>{{auditLogs.length}} item(s)</clr-dg-footer>
+      <clr-dg-footer>{{ (auditLogs ? auditLogs.length : 0) }} item(s)</clr-dg-footer>
    </clr-datagrid>
  </div>
 </div>
--- a/src/clarity-seed/src/app/log/audit-log.component.ts
+++ b/src/clarity-seed/src/app/log/audit-log.component.ts
@ -1,18 +1,138 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+
 import { AuditLog } from './audit-log';
+import { SessionUser } from '../shared/session-user';
+
+import { AuditLogService } from './audit-log.service';
+import { SessionService } from '../shared/session.service';
+import { MessageService } from '../global-message/message.service';
+
+export const optionalSearch: {} = {0: 'Advanced', 1: 'Simple'};
+
+
+export class FilterOption {
+  key: string;
+  description: string;
+  checked: boolean;
+
+  constructor(private iKey: string, private iDescription: string, private iChecked: boolean) {
+    this.key = iKey;
+    this.description = iDescription;
+    this.checked = iChecked;
+  }
+
+  toString(): string {
+    return 'key:' + this.key + ', description:' + this.description + ', checked:' + this.checked + '\n';
+  }
+}

@Component({
-  templateUrl: './audit-log.component.html'
+  selector: 'audit-log',
+  templateUrl: './audit-log.component.html',
+  styleUrls: [ 'audit-log.css' ]
 })
 export class AuditLogComponent implements OnInit {

+  currentUser: SessionUser;
+  projectId: number;
+  queryParam: AuditLog = new AuditLog();
  auditLogs: AuditLog[];
+ 
+  toggleName = optionalSearch;
+  currentOption: number = 0;
+  filterOptions: FilterOption[] = [ 
+    new FilterOption('all', 'All Operations', true),
+    new FilterOption('pull', 'Pull', true),
+    new FilterOption('push', 'Push', true),
+    new FilterOption('create', 'Create', true),
+    new FilterOption('delete', 'Delete', true),
+    new FilterOption('others', 'Others', true) 
+ ];
+
+  constructor(private route: ActivatedRoute, private router: Router, private auditLogService: AuditLogService, private messageService: MessageService) {
+    //Get current user from registered resolver.
+    this.route.data.subscribe(data=>this.currentUser = <SessionUser>data['auditLogResolver']);    
+  }

  ngOnInit(): void {
-    this.auditLogs = [
-      { username: 'Admin', repoName: 'project01', tag: '', operation: 'create', timestamp: '2016-12-23 12:05:17' },
-      { username: 'Admin', repoName: 'project01/ubuntu', tag: '14.04', operation: 'push', timestamp: '2016-12-30 14:52:23' },
-      { username: 'user1', repoName: 'project01/mysql', tag: '5.6', operation: 'pull', timestamp: '2016-12-30 12:12:33' }
-    ];
+    this.projectId = +this.route.snapshot.parent.params['id'];
+    console.log('Get projectId from route params snapshot:' + this.projectId);
+    this.queryParam.project_id = this.projectId;
+    this.retrieve(this.queryParam);
+  }
+
+  retrieve(queryParam: AuditLog): void {
+    this.auditLogService
+        .listAuditLogs(queryParam)
+        .subscribe(
+          response=>this.auditLogs = response,
+          error=>{
+            this.router.navigate(['/harbor', 'projects']);
+            this.messageService.announceMessage('Failed to list audit logs with project ID:' + queryParam.project_id);
+          }
+        );
+  }
+
+  doSearchAuditLogs(searchUsername: string): void {
+    this.queryParam.username = searchUsername;
+    this.retrieve(this.queryParam);
+  }
+
+  doSearchByTimeRange(strDate: string, target: string): void {
+    let oneDayOffset = 3600 * 24;
+    switch(target) {
+    case 'begin':
+      this.queryParam.begin_timestamp = new Date(strDate).getTime() / 1000;
+      break;
+    case 'end':
+      this.queryParam.end_timestamp = new Date(strDate).getTime() / 1000 + oneDayOffset;
+      break;
+    }
+    console.log('Search audit log filtered by time range, begin: ' + this.queryParam.begin_timestamp + ', end:' + this.queryParam.end_timestamp);
+    this.retrieve(this.queryParam);
+  }
+
+  doSearchByOptions() {
+    let selectAll = true;
+    let operationFilter: string[] = [];
+    for(var i in this.filterOptions) {
+      let filterOption = this.filterOptions[i];
+      if(filterOption.checked) {
+        operationFilter.push(this.filterOptions[i].key);
+      }else{
+        selectAll = false;
+      }
+    }
+    if(selectAll) {
+      operationFilter = [];
+    }
+    this.queryParam.keywords = operationFilter.join('/');
+    this.retrieve(this.queryParam);
+    console.log('Search option filter:' + operationFilter.join('/'));
+  }
+
+  toggleOptionalName(option: number): void {
+    (option === 1) ? this.currentOption = 0 : this.currentOption = 1;
+  }
+
+  toggleFilterOption(option: string): void {
+    let selectedOption = this.filterOptions.find(value =>(value.key === option));
+    selectedOption.checked = !selectedOption.checked;
+    if(selectedOption.key === 'all') {
+      this.filterOptions.filter(value=> value.key !== selectedOption.key).forEach(value => value.checked = selectedOption.checked);
+    } else {
+      if(!selectedOption.checked) {
+        this.filterOptions.find(value=>value.key === 'all').checked = false;
+      }
+      let selectAll = true;
+      this.filterOptions.filter(value=> value.key !== 'all').forEach(value =>{
+        if(!value.checked) {
+          selectAll = false;
+        }
+      });
+      this.filterOptions.find(value=>value.key === 'all').checked = selectAll;
+    }
+    this.doSearchByOptions();
  }
 }
--- a/src/clarity-seed/src/app/log/audit-log.css
+++ b/src/clarity-seed/src/app/log/audit-log.css
@ -0,0 +1,3 @@
+.advance-option {
+  font-size: 12px;
+}
--- a/src/clarity-seed/src/app/log/audit-log.service.ts
+++ b/src/clarity-seed/src/app/log/audit-log.service.ts
@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions } from '@angular/http';
+
+import { BaseService } from '../service/base.service';
+
+import { AuditLog } from './audit-log';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/throw';
+
+export const urlPrefix = '';
+
+@Injectable()
+export class AuditLogService extends BaseService {
+  
+  constructor(private http: Http) {
+    super();
+  }
+
+  listAuditLogs(queryParam: AuditLog): Observable<AuditLog[]> {
+    return this.http
+               .post(urlPrefix + `/api/projects/${queryParam.project_id}/logs/filter`, {
+                  begin_timestamp: queryParam.begin_timestamp,
+                  end_timestamp: queryParam.end_timestamp,
+                  keywords: queryParam.keywords,
+                  operation: queryParam.operation,
+                  project_id: queryParam.project_id,
+                  username: queryParam.username })
+                .map(response=>response.json() as AuditLog[])
+                .catch(error=>this.handleError(error));
+  }
+
+}
--- a/src/clarity-seed/src/app/log/audit-log.ts
+++ b/src/clarity-seed/src/app/log/audit-log.ts
@ -1,7 +1,30 @@
+/*
+ {
+    "log_id": 3,
+    "user_id": 0,
+    "project_id": 0,
+    "repo_name": "library/mysql",
+    "repo_tag": "5.6",
+    "guid": "",
+    "operation": "push",
+    "op_time": "2017-02-14T09:22:58Z",
+    "username": "admin",
+    "keywords": "",
+    "BeginTime": "0001-01-01T00:00:00Z",
+    "begin_timestamp": 0,
+    "EndTime": "0001-01-01T00:00:00Z",
+    "end_timestamp": 0
+  }
+*/
 export class AuditLog {
+  log_id: number;
+  project_id: number;
  username: string;
-  repoName: string;
-  tag: string;
+  repo_name: string;
+  repo_tag: string;
  operation: string;
-  timestamp: string;
+  op_time: Date;
+  begin_timestamp: number = 0;
+  end_timestamp: number = 0;
+  keywords: string;
 }
--- a/src/clarity-seed/src/app/log/log.module.ts
+++ b/src/clarity-seed/src/app/log/log.module.ts
@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { AuditLogComponent } from './audit-log.component';
 import { SharedModule } from '../shared/shared.module';
-
+import { AuditLogService } from './audit-log.service';
@NgModule({
  imports: [ SharedModule ],
  declarations: [ AuditLogComponent ],
+  providers: [ AuditLogService ],
  exports: [ AuditLogComponent ]
 })
 export class LogModule {}
--- a/src/clarity-seed/src/app/project/create-project/create-project.component.ts
+++ b/src/clarity-seed/src/app/project/create-project/create-project.component.ts
@ -37,9 +37,11 @@ export class CreateProjectComponent {
            if (error instanceof Response) { 
              switch(error.status) {
              case 409:
-                this.errorMessage = 'Project name already exists.'; break;
+                this.errorMessage = 'Project name already exists.'; 
+                break;
              case 400:
-                this.errorMessage = 'Project name is illegal.'; break;
+                this.errorMessage = 'Project name is illegal.'; 
+                break;
              default:
                this.errorMessage = 'Unknown error for project name.';
                this.messageService.announceMessage(this.errorMessage);
--- a/src/clarity-seed/src/app/project/filter-project/filter-project.component.html
+++ b/src/clarity-seed/src/app/project/filter-project/filter-project.component.html
@ -1,9 +0,0 @@
-<clr-dropdown [clrMenuPosition]="'bottom-left'">
-  <button class="btn btn-sm btn-link" clrDropdownToggle>
-    {{currentType.value}}
-    <clr-icon shape="caret down"></clr-icon>
-  </button>
-  <div class="dropdown-menu">
-    <a href="javascript:void(0)" clrDropdownItem *ngFor="let p of types" (click)="doFilter(p.key)">{{p.value}}</a>
-  </div>
-</clr-dropdown>
--- a/src/clarity-seed/src/app/project/filter-project/filter-project.component.ts
+++ b/src/clarity-seed/src/app/project/filter-project/filter-project.component.ts
@ -1,23 +0,0 @@
-import { Component, Output, EventEmitter } from '@angular/core';
-
-export const projectTypes = [
-  { 'key' : 0, 'value': 'My Projects' },
-  { 'key' : 1, 'value': 'Public Projects'}
-];
-
-@Component({
-  selector: 'filter-project',
-  templateUrl: 'filter-project.component.html'
-})
-export class FilterProjectComponent {
-
-  @Output() filter = new EventEmitter<number>();
-  types = projectTypes;
-  currentType = projectTypes[0];
-
-  doFilter(type: number) {
-    console.log('Filtered projects by:' + type);
-    this.currentType = projectTypes.find(item=>item.key === type);
-    this.filter.emit(type);
-  }
-}
--- a/src/clarity-seed/src/app/project/list-project/list-project.component.html
+++ b/src/clarity-seed/src/app/project/list-project/list-project.component.html
@ -1,10 +1,10 @@
-<clr-datagrid [(clrDgSelected)]="selected">
+<clr-datagrid>
  <clr-dg-column>Name</clr-dg-column>
  <clr-dg-column>Public/Private</clr-dg-column>
  <clr-dg-column>Repositories</clr-dg-column>
  <clr-dg-column>Creation time</clr-dg-column>
  <clr-dg-column>Description</clr-dg-column> 
-  <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p" [(clrDgSelected)]="p.selected">
+  <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p">
    <!--<clr-dg-action-overflow>
      <button class="action-item" (click)="onEdit(p)">Edit</button>
      <button class="action-item" (click)="onDelete(p)">Delete</button>
@ -19,9 +19,6 @@
        <action-project (togglePublic)="toggleProject($event)" (deleteProject)="deleteProject($event)" [project]="p"></action-project>
      </span>
    </clr-dg-cell>
-  
-    
-  
  </clr-dg-row>
  <clr-dg-footer>{{ (projects ? projects.length : 0) }} item(s)</clr-dg-footer>
 </clr-datagrid>
--- a/src/clarity-seed/src/app/project/list-project/list-project.component.ts
+++ b/src/clarity-seed/src/app/project/list-project/list-project.component.ts
@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, Input } from '@angular/core';
 import { Project } from '../project';
 import { ProjectService } from '../project.service';

@ -9,53 +9,17 @@ import { ProjectService } from '../project.service';
 })
 export class ListProjectComponent {

-   projects: Project[];
-   errorMessage: string;
+   @Input() projects: Project[];

-   selected = [];
-
-   @Output() actionPerform = new EventEmitter<boolean>();
-
-   constructor(private projectService: ProjectService) {}
-
-   retrieve(name: string, isPublic: number): void {
-     this.projectService
-         .listProjects(name, isPublic)
-         .subscribe(
-           response => this.projects = response,
-           error => this.errorMessage = <any>error);
-   }
+   @Output() toggle = new EventEmitter<Project>();
+   @Output() delete = new EventEmitter<Project>();

   toggleProject(p: Project) {
-     this.projectService
-         .toggleProjectPublic(p.project_id, p.public)
-         .subscribe(
-           response=>console.log(response),
-           error=>console.log(error)
-         );
+     this.toggle.emit(p);
   }

   deleteProject(p: Project) {
-     this.projectService
-         .deleteProject(p.project_id)
-         .subscribe(
-           response=>{
-             console.log(response);
-             this.actionPerform.emit(true);
-           },
-           error=>console.log(error)
-         );
+     this.delete.emit(p);
   }

-   deleteSelectedProjects() {
-     this.selected.forEach(p=>this.deleteProject(p));
-   }
-
-   onEdit(p: Project) {
-
-   }
-
-   onDelete(p: Project) {
-
-   }
 }
--- a/src/clarity-seed/src/app/project/member/member.component.html
+++ b/src/clarity-seed/src/app/project/member/member.component.html
@ -1,12 +1,12 @@
 <div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
    <div class="row flex-items-xs-between">
-      <div class="col-xs-4">
-        <button class="btn btn-sm" (click)="openAddMemberModal()">new user</button>
+      <div class="col-xs-4 flex-xs-middle">
+        <button class="btn btn-link" (click)="openAddMemberModal()"><clr-icon shape="add"></clr-icon> new user</button>
        <add-member [projectId]="projectId" (added)="addedMember($event)"></add-member>
      </div>
-      <div class="col-xs-4">
-        <input type="text" placeholder="Search for users" #searchMember (keyup.enter)="doSearch(searchMember.value)">
+      <div class="col-xs-4 flex-xs-middle">
+        <clr-icon shape="filter" style="position: relative; left: 15px;"></clr-icon><input style="padding-left: 20px;" type="text" placeholder="Search for users" #searchMember (keyup.enter)="doSearch(searchMember.value)">
      </div>
    </div>
    <clr-datagrid>
--- a/src/clarity-seed/src/app/project/member/member.component.ts
+++ b/src/clarity-seed/src/app/project/member/member.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';

 import { SessionUser } from '../../shared/session-user';
 import { Member } from './member';
@ -30,7 +30,7 @@ export class MemberComponent implements OnInit {
  @ViewChild(AddMemberComponent)
  addMemberComponent: AddMemberComponent;

-  constructor(private route: ActivatedRoute, private memberService: MemberService, private messageService: MessageService) {
+  constructor(private route: ActivatedRoute, private router: Router, private memberService: MemberService, private messageService: MessageService) {
    //Get current user from registered resolver.
    this.route.data.subscribe(data=>this.currentUser = <SessionUser>data['memberResolver']);    
  }
@ -40,7 +40,10 @@ export class MemberComponent implements OnInit {
        .listMembers(projectId, username)
        .subscribe(
          response=>this.members = response,
-          error=>console.log(error)
+          error=>{
+            this.router.navigate(['/harbor', 'projects']);
+            this.messageService.announceMessage('Failed to get project member with project ID:' + projectId);
+          }
        );
  }

--- a/src/clarity-seed/src/app/project/project-detail/project-detail.component.html
+++ b/src/clarity-seed/src/app/project/project-detail/project-detail.component.html
@ -1,4 +1,4 @@
-<h1 class="display-in-line">Project 01</h1><h6 class="display-in-line project-title">PROJECT</h6>
+<h1 class="display-in-line">{{currentProject.name}}</h1>
 <nav class="subnav">
  <ul class="nav">
    <li class="nav-item">
--- a/src/clarity-seed/src/app/project/project-detail/project-detail.component.ts
+++ b/src/clarity-seed/src/app/project/project-detail/project-detail.component.ts
@ -1,8 +1,18 @@
 import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Project } from '../project';

@Component({
    selector: 'project-detail',
    templateUrl: "project-detail.component.html",
    styleUrls: [ 'project-detail.css' ]
 })
-export class ProjectDetailComponent {}
+export class ProjectDetailComponent {
+
+  currentProject: Project;
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+    this.route.data.subscribe(data=>this.currentProject = <Project>data['projectResolver']);
+  }
+}
--- a/src/clarity-seed/src/app/project/project-routing-resolver.service.ts
+++ b/src/clarity-seed/src/app/project/project-routing-resolver.service.ts
@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
+
+import { Project } from './project';
+import { ProjectService } from './project.service';
+
+@Injectable()
+export class ProjectRoutingResolver implements Resolve<Project>{
+
+  constructor(private projectService: ProjectService, private router: Router) {}
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Project> {
+    let projectId = route.params['id'];
+    return this.projectService
+               .getProject(projectId)
+               .then(project=> {
+                 if(project) {
+                   return project;
+                 } else {
+                   this.router.navigate(['/harbor', 'projects']);
+                   return null;
+                 }
+               });
+  } 
+}
--- a/src/clarity-seed/src/app/project/project-routing.module.ts
+++ b/src/clarity-seed/src/app/project/project-routing.module.ts
@ -11,6 +11,7 @@ import { MemberComponent } from './member/member.component';
 import { AuditLogComponent } from '../log/audit-log.component';

 import { BaseRoutingResolver } from '../base/base-routing-resolver.service';
+import { ProjectRoutingResolver } from './project-routing-resolver.service';

 const projectRoutes: Routes = [
  {
@ -31,7 +32,7 @@ const projectRoutes: Routes = [
        path: 'projects/:id',
        component: ProjectDetailComponent,
        resolve: {
-          projectResolver: BaseRoutingResolver
+          projectResolver: ProjectRoutingResolver
        },
        children: [
          { path: 'repository', component: RepositoryComponent },
@ -42,7 +43,12 @@ const projectRoutes: Routes = [
              memberResolver: BaseRoutingResolver
            }
          },
-          { path: 'log', component: AuditLogComponent }
+          { 
+            path: 'log', component: AuditLogComponent,
+            resolve: {
+              auditLogResolver: BaseRoutingResolver
+            }   
+          }
        ]
      }
    ]
--- a/src/clarity-seed/src/app/project/project.component.html
+++ b/src/clarity-seed/src/app/project/project.component.html
@ -1,15 +1,23 @@
-<h3>Projects</h3>
+<h1>Projects</h1>
 <div class="row flex-items-xs-between">
  <div class="col-xs-4">
-    <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>New Project</button>
-    <button class="btn btn-link" (click)="deleteSelectedProjects()"><clr-icon shape="close"></clr-icon>Delete</button>
+    <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> New Project</button>
    <create-project (create)="createProject($event)" (openModal)="openModal($event)"></create-project>
  </div>
-  <div class="col-xs-4">
-    <filter-project (filter)="filterProjects($event)"></filter-project>
-    <search-project (search)="searchProjects($event)"></search-project>
+  <div class="col-xs-5">
+    <clr-dropdown [clrMenuPosition]="'bottom-left'">
+      <button class="btn btn-sm btn-link" clrDropdownToggle>
+        {{projectTypes[currentFilteredType]}}
+        <clr-icon shape="caret down"></clr-icon>
+      </button>
+      <div class="dropdown-menu">
+        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(0)">{{projectTypes[0]}}</a>
+        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1]}}</a>
+      </div>
+    </clr-dropdown>
+    <clr-icon shape="filter" style="position: relative; left: 15px;"></clr-icon><input style="padding-left: 20px;" type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearchProjects(searchProject.value)" >
  </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <list-project (actionPerform)="actionPerform($event)"></list-project>
+    <list-project [projects]="changedProjects" (toggle)="toggleProject($event)" (delete)="deleteProject($event)"></list-project>
  </div>
 </div>
--- a/src/clarity-seed/src/app/project/project.component.ts
+++ b/src/clarity-seed/src/app/project/project.component.ts
@ -2,9 +2,17 @@ import { Component, OnInit, ViewChild } from '@angular/core';

 import { Router }  from '@angular/router';

-import { ListProjectComponent } from './list-project/list-project.component';
+import { Project } from './project';
+import { ProjectService } from './project.service';
+
 import { CreateProjectComponent } from './create-project/create-project.component';

+import { ListProjectComponent } from './list-project/list-project.component';
+
+import { MessageService } from '../global-message/message.service';
+
+export const types: {} = { 0: 'My Projects', 1: 'Public Projects'};
+
@Component({
    selector: 'project',
    templateUrl: 'project.component.html',
@ -12,45 +20,74 @@ import { CreateProjectComponent } from './create-project/create-project.componen
 })
 export class ProjectComponent implements OnInit {
    
-    @ViewChild(ListProjectComponent)
-    listProjects: ListProjectComponent;
+  selected = [];
+  changedProjects: Project[];
+  projectTypes = types;
+  
+  @ViewChild(CreateProjectComponent)
+  creationProject: CreateProjectComponent;

-    @ViewChild(CreateProjectComponent)
-    creationProject: CreateProjectComponent;
+  @ViewChild(ListProjectComponent)
+  listProject: ListProjectComponent;

-    lastFilteredType: number = 0;
+  currentFilteredType: number = 0;
+  lastFilteredType: number = 0;

-    openModal(): void {
-      this.creationProject.newProject();
+  constructor(private projectService: ProjectService, private messageService: MessageService){}
+
+  ngOnInit(): void {
+    this.retrieve('', this.lastFilteredType);
+  }
+
+  retrieve(name: string, isPublic: number): void {
+    this.projectService
+        .listProjects(name, isPublic)
+        .subscribe(
+          response => this.changedProjects = response,
+          error => this.messageService.announceMessage(error));
+  }
+
+  openModal(): void {
+    this.creationProject.newProject();
+  }
+  
+  createProject(created: boolean) {
+    if(created) {
+      this.retrieve('', this.lastFilteredType);
    }
+  }

-    deleteSelectedProjects(): void {
-      this.listProjects.deleteSelectedProjects();
-    }
+  doSearchProjects(projectName: string): void {
+    console.log('Search for project name:' + projectName);
+    this.retrieve(projectName, this.lastFilteredType);
+  }

-    createProject(created: boolean): void {
-      console.log('Project has been created:' + created);
-      this.listProjects.retrieve('', 0);
-    }
+  doFilterProjects(filteredType: number): void {
+    console.log('Filter projects with type:' + types[filteredType]);
+    this.lastFilteredType = filteredType;
+    this.currentFilteredType = filteredType;
+    this.retrieve('', this.lastFilteredType);
+  }

-    filterProjects(type: number): void {
-      this.lastFilteredType = type;
-      this.listProjects.retrieve('', type);
-      console.log('Projects were filtered by:' + type);
-      
-    }
+  toggleProject(p: Project) {
+    this.projectService
+        .toggleProjectPublic(p.project_id, p.public)
+        .subscribe(
+          response=>console.log('Successful toggled project_id:' + p.project_id),
+          error=>this.messageService.announceMessage(error)
+        );
+  }

-    searchProjects(projectName: string): void {
-      console.log('Search for project name:' + projectName);
-      this.listProjects.retrieve(projectName, this.lastFilteredType);
-    }
-
-    actionPerform(performed: boolean): void {
-      this.listProjects.retrieve('', 0);
-    }
-
-    ngOnInit(): void {
-      this.listProjects.retrieve('', 0); 
-    }
+  deleteProject(p: Project) {
+    this.projectService
+        .deleteProject(p.project_id)
+        .subscribe(
+          response=>{
+            console.log('Successful delete project_id:' + p.project_id);
+            this.retrieve('', this.lastFilteredType);
+          },
+          error=>console.log(error)
+        );
+  }

 }
--- a/src/clarity-seed/src/app/project/project.module.ts
+++ b/src/clarity-seed/src/app/project/project.module.ts
@ -7,18 +7,19 @@ import { LogModule } from '../log/log.module';

 import { ProjectComponent } from './project.component';
 import { CreateProjectComponent } from './create-project/create-project.component';
-import { SearchProjectComponent } from './search-project/search-project.component';
-import { FilterProjectComponent } from './filter-project/filter-project.component';
 import { ActionProjectComponent } from './action-project/action-project.component';
 import { ListProjectComponent } from './list-project/list-project.component';
+
 import { ProjectDetailComponent } from './project-detail/project-detail.component';

 import { MemberComponent } from './member/member.component';
 import { AddMemberComponent } from './member/add-member/add-member.component';
+
 import { ProjectRoutingModule } from './project-routing.module';

 import { ProjectService } from './project.service';
 import { MemberService } from './member/member.service';
+import { ProjectRoutingResolver } from './project-routing-resolver.service';

@NgModule({
  imports: [ 
@ -31,16 +32,14 @@ import { MemberService } from './member/member.service';
  declarations: [ 
    ProjectComponent,
    CreateProjectComponent,
-    SearchProjectComponent,
-    FilterProjectComponent,
    ActionProjectComponent,
    ListProjectComponent,
    ProjectDetailComponent,
    MemberComponent,
    AddMemberComponent
  ],
-  exports: [ ListProjectComponent ],
-  providers: [ ProjectService, MemberService ]
+  exports: [ ProjectComponent ],
+  providers: [ ProjectRoutingResolver, ProjectService, MemberService ]
 })
 export class ProjectModule {
  
--- a/src/clarity-seed/src/app/project/project.service.ts
+++ b/src/clarity-seed/src/app/project/project.service.ts
@ -22,6 +22,14 @@ export class ProjectService extends BaseService {
    super();
  }

+  getProject(projectId: number): Promise<Project> {
+    return this.http
+               .get(url_prefix + `/api/projects/${projectId}`)
+               .toPromise()
+               .then(response=>response.json() as Project)
+               .catch(error=>Observable.throw(error));
+  }
+
  listProjects(name: string, isPublic: number): Observable<Project[]>{    
    return this.http
               .get(url_prefix + `/api/projects?project_name=${name}&is_public=${isPublic}`, this.options)
--- a/src/clarity-seed/src/app/project/project.ts
+++ b/src/clarity-seed/src/app/project/project.ts
@ -29,5 +29,4 @@ export class Project {
    update_time: Date;
    current_user_role_id: number;
    repo_count: number;
-    selected: boolean;
 }
--- a/src/clarity-seed/src/app/project/search-project/search-project.component.html
+++ b/src/clarity-seed/src/app/project/search-project/search-project.component.html
@ -1 +0,0 @@
-<input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearch(searchProject.value)" >
--- a/src/clarity-seed/src/app/project/search-project/search-project.component.ts
+++ b/src/clarity-seed/src/app/project/search-project/search-project.component.ts
@ -1,13 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-  selector: 'search-project',
-  templateUrl: 'search-project.component.html'
-})
-export class SearchProjectComponent {
-  @Output() search = new EventEmitter<string>();
-
-  doSearch(projectName) {
-    this.search.emit(projectName);
-  }
-}
--- a/src/clarity-seed/src/app/shared/filter/filter.component.css
+++ b/src/clarity-seed/src/app/shared/filter/filter.component.css
@ -0,0 +1,4 @@
+.filter-icon {
+    position: relative;
+    right: -12px;
+}
--- a/src/clarity-seed/src/app/shared/filter/filter.component.html
+++ b/src/clarity-seed/src/app/shared/filter/filter.component.html
@ -0,0 +1,4 @@
+<span>
+    <clr-icon shape="filter" size="12" class="is-solid filter-icon"></clr-icon>
+    <input type="text" style="padding-left: 15px;" (keyup)="valueChange()" placeholder="{{placeHolder}}" [(ngModel)]="currentValue"/>
+</span>
--- a/src/clarity-seed/src/app/shared/filter/filter.component.ts
+++ b/src/clarity-seed/src/app/shared/filter/filter.component.ts
@ -0,0 +1,43 @@
+import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+
+
+@Component({
+    selector: 'grid-filter',
+    templateUrl: 'filter.component.html',
+    styleUrls: ['filter.component.css']
+})
+
+export class FilterComponent implements OnInit{
+    private placeHolder: string = "";
+    private currentValue: string = "";
+    private leadingSpacesAdded: boolean = false;
+    private filerAction: Function;
+
+    private filterTerms = new Subject<string>();
+
+    @Output("filter") private filterEvt = new EventEmitter<string>();
+
+    @Input("filterPlaceholder")
+    public set flPlaceholder(placeHolder: string) {
+        this.placeHolder = placeHolder;
+    }
+
+    ngOnInit(): void {
+        this.filterTerms
+        .debounceTime(300)
+        .distinctUntilChanged()
+        .subscribe(terms => {
+            this.filterEvt.emit(terms);
+        });
+    }
+
+    valueChange(): void {
+        //Send out filter terms
+        this.filterTerms.next(this.currentValue.trim());
+    }
+}
--- a/src/clarity-seed/src/app/shared/harbor-action-overflow/harbor-action-overflow.html
+++ b/src/clarity-seed/src/app/shared/harbor-action-overflow/harbor-action-overflow.html
@ -0,0 +1,10 @@
+<span style="float: right; margin-right: 24px;">
+<clr-dropdown [clrMenuPosition]="'bottom-right'" [clrCloseMenuOnItemClick]="true" style="position: absolute;">
+    <button clrDropdownToggle>
+    <clr-icon shape="ellipses-vertical"></clr-icon>
+  </button>
+    <div class="dropdown-menu">
+        <ng-content></ng-content>
+    </div>
+</clr-dropdown>
+</span>
--- a/src/clarity-seed/src/app/shared/harbor-action-overflow/harbor-action-overflow.ts
+++ b/src/clarity-seed/src/app/shared/harbor-action-overflow/harbor-action-overflow.ts
@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: "harbor-action-overflow",
+    templateUrl: "harbor-action-overflow.html"
+})
+
+export class HarborActionOverflow {
+}
--- a/src/clarity-seed/src/app/shared/max-length-ext.directive.ts
+++ b/src/clarity-seed/src/app/shared/max-length-ext.directive.ts
@ -7,7 +7,7 @@ export function maxLengthExtValidator(length: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const value: string = control.value
        if (!value || value.trim() === "") {
-            return { 'maxLengthExt': 0 };
+            return null;
        }

        const regExp = new RegExp(assiiChars, 'i');
@ -16,7 +16,7 @@ export function maxLengthExtValidator(length: number): ValidatorFn {

        for (var i = 0; i < len; i++) {
            if (regExp.test(value[i])) {
-                count += 2;
+                count += 3;
            } else {
                count++;
            }
@ -42,7 +42,6 @@ export class MaxLengthExtValidatorDirective implements Validator, OnChanges {
        } else {
            this.valFn = Validators.nullValidator;
        }
-        console.info(changes, this.maxLengthExt);
    }

    validate(control: AbstractControl): { [key: string]: any } {
--- a/src/clarity-seed/src/app/shared/shared.module.ts
+++ b/src/clarity-seed/src/app/shared/shared.module.ts
@ -1,26 +1,30 @@
 import { NgModule } from '@angular/core';
 import { CoreModule } from '../core/core.module';
-import { AccountModule } from '../account/account.module';
+//import { AccountModule } from '../account/account.module';

 import { SessionService } from '../shared/session.service';
 import { MessageComponent } from '../global-message/message.component';
 import { MessageService } from '../global-message/message.service';
 import { MaxLengthExtValidatorDirective } from './max-length-ext.directive';
+import { FilterComponent } from './filter/filter.component';
+import { HarborActionOverflow } from './harbor-action-overflow/harbor-action-overflow';

@NgModule({
  imports: [
-    CoreModule,
-    AccountModule
+    CoreModule
  ],
  declarations: [
    MessageComponent,
-    MaxLengthExtValidatorDirective
+    MaxLengthExtValidatorDirective,
+    FilterComponent,
+    HarborActionOverflow
  ],
  exports: [
    CoreModule,
-    AccountModule,
    MessageComponent,
-    MaxLengthExtValidatorDirective
+    MaxLengthExtValidatorDirective,
+    FilterComponent,
+    HarborActionOverflow
  ],
  providers: [SessionService, MessageService]
 })
--- a/src/clarity-seed/src/app/user/new-user-form.component.html
+++ b/src/clarity-seed/src/app/user/new-user-form.component.html
@ -0,0 +1,72 @@
+<div>
+    <form #newUserFrom="ngForm" class="form">
+        <section class="form-block">
+            <div class="form-group">
+                <label for="username" class="col-md-4 required">Username</label>
+                <label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="usernameInput.invalid && (usernameInput.dirty || usernameInput.touched)">
+                <input type="text" required pattern='[^"~#$%]+' maxLengthExt="20" #usernameInput="ngModel" name="username" [(ngModel)]="newUser.username" id="username" size="46">
+                <span class="tooltip-content">
+                    Username is required and should match the following rules:Not contain '"~#$%"' and length less than 20
+                </span>
+                </label>
+            </div>
+            <div class="form-group">
+                <label for="email" class="col-md-4 required">Email</label>
+                <label for="email" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="eamilInput.invalid && (eamilInput.dirty || eamilInput.touched)">
+                      <input name="email" type="text" #eamilInput="ngModel" [(ngModel)]="newUser.email" 
+                      required 
+                      pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' id="email" size="46">
+                      <span class="tooltip-content">
+                          Email should be a valid email address like name@example.com
+                      </span>
+                    </label>
+            </div>
+            <div class="form-group">
+                <label for="realname" class="col-md-4 required">Full name</label>
+                <label for="realname" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="fullNameInput.invalid && (fullNameInput.dirty || fullNameInput.touched)">
+                      <input type="text" name="realname" #fullNameInput="ngModel" [(ngModel)]="newUser.realname" required maxLengthExt="20" id="realname" size="46">
+                      <span class="tooltip-content">
+                          Max length of full name is 20
+                      </span>
+                    </label>
+            </div>
+            <div class="form-group">
+                <label for="newPassword" class="required">New Password</label>
+                <label for="newPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="newPassInput.invalid && (newPassInput.dirty || newPassInput.touched)">
+                <input type="password" id="newPassword" placeholder="Enter new password"
+                    required
+                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$"
+                    name="newPassword"
+                    [(ngModel)]="newUser.password"
+                    #newPassInput="ngModel" size="46">
+                <span class="tooltip-content">
+                    Password should be at least 7 characters with 1 uppercase, 1 lowercase letter and 1 number
+                </span>
+            </label>
+            </div>
+            <div class="form-group">
+                <label for="confirmPassword" class="required">Confirm Password</label>
+                <label for="confirmPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right" [class.invalid]="(confirmPassInput.invalid && (confirmPassInput.dirty || confirmPassInput.touched)) || (!confirmPassInput.invalid && confirmPassInput.value != newPassInput.value)">
+                <input type="password" id="confirmPassword" placeholder="Confirm new password"
+                    required
+                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{7,}$"
+                    name="confirmPassword"
+                    [(ngModel)]="confirmedPwd"
+                    #confirmPassInput="ngModel" size="46">
+                <span class="tooltip-content">
+                    Password should be at least 7 characters with 1 uppercase, 1 lowercase letter and 1 number and same with new password
+                </span>
+            </label>
+            </div>
+            <div class="form-group">
+                <label for="comment" class="col-md-4">Comments</label>
+                <label for="comment" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-right" [class.invalid]="commentInput.invalid && (commentInput.dirty || commentInput.touched)">
+                <input type="text" #commentInput="ngModel" name="comment" [(ngModel)]="newUser.comment" maxLengthExt="20" id="comment" size="46">
+                <span class="tooltip-content">
+                    Length of comment should be less than 20
+                </span>
+                </label>
+            </div>
+        </section>
+    </form>
+</div>
--- a/src/clarity-seed/src/app/user/new-user-form.component.ts
+++ b/src/clarity-seed/src/app/user/new-user-form.component.ts
@ -0,0 +1,52 @@
+import { Component, ViewChild, AfterViewChecked, Output, EventEmitter } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { User } from './user';
+
+@Component({
+    selector: 'new-user-form',
+    templateUrl: 'new-user-form.component.html'
+})
+
+export class NewUserFormComponent implements AfterViewChecked {
+    newUser: User = new User();
+    confirmedPwd: string = "";
+
+    newUserFormRef: NgForm;
+    @ViewChild("newUserFrom") newUserForm: NgForm;
+
+    //Notify the form value changes
+    @Output() valueChange = new EventEmitter<boolean>();
+
+    public get isValid(): boolean {
+        let pwdEqualStatus = true;
+        if(this.newUserForm.controls["confirmPassword"] && 
+        this.newUserForm.controls["newPassword"]){
+            pwdEqualStatus = this.newUserForm.controls["confirmPassword"].value === this.newUserForm.controls["newPassword"].value;
+        }
+        return this.newUserForm && 
+        this.newUserForm.valid && pwdEqualStatus;
+    }
+
+    ngAfterViewChecked(): void {
+        if (this.newUserFormRef != this.newUserForm) {
+            this.newUserFormRef = this.newUserForm;
+            if (this.newUserFormRef) {
+                this.newUserFormRef.valueChanges.subscribe(data => {
+                    this.valueChange.emit(true);
+                });
+            }
+        }
+    }
+
+    //Return the current user data
+    getData(): User {
+        return this.newUser;
+    }
+
+    reset(): void {
+        if(this.newUserForm){
+            this.newUserForm.reset();
+        }
+    }
+}
--- a/src/clarity-seed/src/app/user/new-user-modal.component.html
+++ b/src/clarity-seed/src/app/user/new-user-modal.component.html
@ -0,0 +1,19 @@
+<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalSize]="'lg'">
+    <h3 class="modal-title">Add User</h3>
+    <div class="modal-body">
+        <new-user-form (valueChange)="formValueChange($event)"></new-user-form>
+        <div style="height: 30px;"></div>
+        <clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [(clrAlertClosed)]="alertClose">
+            <div class="alert-item">
+                <span class="alert-text">
+                   {{errorMessage}}
+                </span>
+            </div>
+        </clr-alert>
+    </div>
+    <div class="modal-footer">
+        <span class="spinner spinner-inline" style="top:8px;" [hidden]="inProgress === false"> </span>
+        <button type="button" class="btn btn-outline" (click)="close()">Cancel</button>
+        <button type="button" class="btn btn-primary" [disabled]="!isValid || inProgress" (click)="create()">Ok</button>
+    </div>
+</clr-modal>
--- a/src/clarity-seed/src/app/user/new-user-modal.component.ts
+++ b/src/clarity-seed/src/app/user/new-user-modal.component.ts
@ -0,0 +1,106 @@
+import { Component, ViewChild, Output,EventEmitter } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { NewUserFormComponent } from './new-user-form.component';
+import { User } from './user';
+
+import { SessionService } from '../shared/session.service';
+import { UserService } from './user.service';
+
+@Component({
+    selector: "new-user-modal",
+    templateUrl: "new-user-modal.component.html"
+})
+
+export class NewUserModalComponent {
+    opened: boolean = false;
+    alertClose: boolean = true;
+    private error: any;
+    private onGoing: boolean = false;
+
+    @Output() addNew = new EventEmitter<User>();
+
+    constructor(private session: SessionService,
+        private userService: UserService) { }
+
+    @ViewChild(NewUserFormComponent)
+    private newUserForm: NewUserFormComponent;
+
+    private getNewUser(): User {
+        return this.newUserForm.getData();
+    }
+
+    public get inProgress(): boolean {
+        return this.onGoing;
+    }
+
+    public get isValid(): boolean {
+        return this.newUserForm.isValid;
+    }
+
+    public get errorMessage(): string {
+        if (this.error) {
+            if (this.error.message) {
+                return this.error.message;
+            } else {
+                if (this.error._body) {
+                    return this.error._body;
+                }
+            }
+        }
+        return "";
+    }
+
+    formValueChange(flag: boolean): void {
+        if (!this.alertClose) {
+            this.alertClose = true;//If alert is shown, then close it
+        }
+    }
+
+    open(): void {
+        this.opened = true;
+    }
+
+    close(): void {
+        this.newUserForm.reset();//Reset form
+        this.opened = false;
+    }
+
+    //Create new user
+    create(): void {
+        //Double confirm everything is ok
+        //Form is valid
+        if(!this.isValid){
+            return;
+        }
+
+        //We have new user data
+        let u = this.getNewUser();
+        if(!u){
+            return;
+        }
+
+        //Session is ok and role is matched
+        let account = this.session.getCurrentUser();
+        if(!account || account.has_admin_role === 0){
+            return;
+        }
+
+        //Start process
+        this.onGoing = true;
+
+        this.userService.addUser(u)
+        .then(() => {
+            this.onGoing = false;
+            //TODO:
+            //As no response data returned, can not add it to list directly
+
+            this.addNew.emit(u);
+            this.close();
+        })
+        .catch(error => {
+            this.onGoing = false;
+            this.error = error;
+        });
+    }
+}
--- a/src/clarity-seed/src/app/user/user.component.css
+++ b/src/clarity-seed/src/app/user/user.component.css
@ -0,0 +1,32 @@
+.custom-h2 {
+    margin-top: 0px !important;
+}
+
+.custom-add-button {
+    font-size: medium;
+    margin-left: -12px;
+}
+
+.filter-icon {
+    position: relative;
+    right: -12px;
+}
+
+.filter-pos {
+    float: right;
+    margin-right: 24px;
+    position: relative;
+    top: 8px;
+}
+
+.action-panel-pos {
+    position: relative;
+    top: 20px;
+}
+
+.refresh-btn {
+    position: absolute;
+    right: -4px;
+    top: 8px;
+    cursor: pointer;
+}
--- a/src/clarity-seed/src/app/user/user.component.html
+++ b/src/clarity-seed/src/app/user/user.component.html
@ -0,0 +1,37 @@
+<div>
+    <h2 class="custom-h2">Users</h2>
+    <div class="action-panel-pos">
+        <span>
+            <clr-icon shape="plus" class="is-highlight" size="24"></clr-icon>
+            <button type="submit" class="btn btn-link custom-add-button" (click)="addNewUser()">USER</button>
+        </span>
+        <grid-filter class="filter-pos" filterPlaceholder="Filter users" (filter)="doFilter($event)"></grid-filter>
+        <span class="refresh-btn" (click)="refreshUser()">
+            <clr-icon shape="refresh" [hidden]="inProgress" ng-disabled="inProgress"></clr-icon>
+            <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
+        </span>
+    </div>
+    <div>
+        <clr-datagrid>
+            <clr-dg-column>Name</clr-dg-column>
+            <clr-dg-column>Administrator</clr-dg-column>
+            <clr-dg-column>Email</clr-dg-column>
+            <clr-dg-column>Registration time</clr-dg-column>
+            <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
+                <clr-dg-cell>{{user.username}}</clr-dg-cell>
+                <clr-dg-cell>{{user.has_admin_role?"Yes":"No"}}</clr-dg-cell>
+                <clr-dg-cell>{{user.email}}</clr-dg-cell>
+                <clr-dg-cell>
+                    {{user.creation_time}}
+                    <harbor-action-overflow>
+                        <a href="javascript:void(0)" class="dropdown-item" (click)="changeAdminRole(user)">{{user.has_admin_role?"Disable administrator":"Enable administrator"}}</a>
+                        <div class="dropdown-divider"></div>
+                        <a href="javascript:void(0)" class="dropdown-item" (click)="deleteUser(user.user_id)">Delete</a>
+                    </harbor-action-overflow>
+                </clr-dg-cell>
+            </clr-dg-row>
+            <clr-dg-footer>{{users.length}} users</clr-dg-footer>
+        </clr-datagrid>
+    </div>
+    <new-user-modal (addNew)="addUserToList($event)"></new-user-modal>
+</div>
--- a/src/clarity-seed/src/app/user/user.component.ts
+++ b/src/clarity-seed/src/app/user/user.component.ts
@ -1,7 +1,121 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import 'rxjs/add/operator/toPromise';
+
+import { UserService } from './user.service';
+import { User } from './user';
+import { NewUserModalComponent } from './new-user-modal.component';

@Component({
  selector: 'harbor-user',
-  templateUrl: 'user.component.html'
+  templateUrl: 'user.component.html',
+  styleUrls: ['user.component.css'],
+
+  providers: [UserService]
 })
-export class UserComponent {}
+
+export class UserComponent implements OnInit {
+  users: User[] = [];
+  originalUsers: Promise<User[]>;
+  private onGoing: boolean = false;
+
+  @ViewChild(NewUserModalComponent)
+  private newUserDialog: NewUserModalComponent;
+
+  constructor(private userService: UserService) { }
+
+  private isMatchFilterTerm(terms: string, testedItem: string): boolean {
+    return testedItem.indexOf(terms) != -1;
+  }
+
+  public get inProgress(): boolean {
+    return this.onGoing;
+  }
+
+  ngOnInit(): void {
+    this.refreshUser();
+  }
+
+  //Filter items by keywords
+  doFilter(terms: string): void {
+    this.originalUsers.then(users => {
+      if (terms.trim() === "") {
+        this.users = users;
+      } else {
+        this.users = users.filter(user => {
+          return this.isMatchFilterTerm(terms, user.username);
+        })
+      }
+    });
+  }
+
+  //Disable the admin role for the specified user
+  changeAdminRole(user: User): void {
+    //Double confirm user is existing
+    if (!user || user.user_id === 0) {
+      return;
+    }
+
+    //Value copy
+    let updatedUser: User = Object.assign({}, user);
+
+    if (updatedUser.has_admin_role === 0) {
+      updatedUser.has_admin_role = 1;//Set as admin
+    } else {
+      updatedUser.has_admin_role = 0;//Set as none admin
+    }
+
+    this.userService.updateUser(updatedUser)
+      .then(() => {
+        //Change view now
+        user.has_admin_role = updatedUser.has_admin_role;
+      })
+      .catch(error => console.error(error))//TODO:
+  }
+
+  //Delete the specified user
+  deleteUser(userId: number): void {
+    if (userId === 0) {
+      return;
+    }
+
+    this.userService.deleteUser(userId)
+      .then(() => {
+        //Remove it from current user list
+        //and then view refreshed
+        this.originalUsers.then(users => {
+          this.users = users.filter(user => user.user_id != userId);
+        });
+      })
+      .catch(error => console.error(error));//TODO:
+  }
+
+  //Refresh the user list
+  refreshUser(): void {
+    //Start to get
+    this.onGoing = true;
+
+    this.originalUsers = this.userService.getUsers()
+      .then(users => {
+        this.onGoing = false;
+
+        this.users = users;
+        return users;
+      })
+      .catch(error => {
+        this.onGoing = false;
+        console.error(error);//TODO:
+      });
+  }
+
+  //Add new user
+  addNewUser(): void {
+    this.newUserDialog.open();
+  }
+
+  //Add user to the user list
+  addUserToList(user: User): void {
+    //Currently we can only add it by reloading all
+    this.refreshUser();
+  }
+
+}
--- a/src/clarity-seed/src/app/user/user.module.ts
+++ b/src/clarity-seed/src/app/user/user.module.ts
@ -1,15 +1,21 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { UserComponent } from './user.component';
+import { NewUserFormComponent } from './new-user-form.component';
+import { NewUserModalComponent } from './new-user-modal.component';
+
@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [
-    UserComponent
+    UserComponent,
+    NewUserFormComponent,
+    NewUserModalComponent
  ],
  exports: [
-    UserComponent
+    UserComponent,
+    NewUserFormComponent
  ]
 })
 export class UserModule {
--- a/src/clarity-seed/src/app/user/user.service.ts
+++ b/src/clarity-seed/src/app/user/user.service.ts
@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http, RequestOptions } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+import { User } from './user';
+
+const userMgmtEndpoint = '/api/users';
+
+/**
+ * Define related methods to handle account and session corresponding things
+ * 
+ * @export
+ * @class SessionService
+ */
+@Injectable()
+export class UserService {
+    private httpOptions = new RequestOptions({
+        headers: new Headers({
+            "Content-Type": 'application/json'
+        })
+    });
+
+    constructor(private http: Http) { }
+
+    //Handle the related exceptions
+    private handleError(error: any): Promise<any> {
+        return Promise.reject(error.message || error);
+    }
+
+    //Get the user list
+    getUsers(): Promise<User[]> {
+        return this.http.get(userMgmtEndpoint, this.httpOptions).toPromise()
+        .then(response => response.json() as User[])
+        .catch(error => this.handleError(error));
+    }
+
+    //Add new user
+    addUser(user: User): Promise<any> {
+        return this.http.post(userMgmtEndpoint, JSON.stringify(user), this.httpOptions).toPromise()
+        .then(() => null)
+        .catch(error => this.handleError(error));
+    }
+
+    //Delete the specified user
+    deleteUser(userId: number): Promise<any> {
+        return this.http.delete(userMgmtEndpoint+"/"+userId, this.httpOptions)
+        .toPromise()
+        .then(() => null)
+        .catch(error => this.handleError(error));
+    }
+
+    //Update user to enable/disable the admin role
+    updateUser(user: User): Promise<any> {
+        return this.http.put(userMgmtEndpoint+"/"+user.user_id, JSON.stringify(user), this.httpOptions)
+        .toPromise()
+        .then(() => null)
+        .catch(error => this.handleError(error));
+    }
+}
--- a/src/clarity-seed/src/app/user/user.ts
+++ b/src/clarity-seed/src/app/user/user.ts
@ -0,0 +1,15 @@
+/**
+ * For user management
+ * 
+ * @export
+ * @class User
+ */
+export class User {
+    user_id: number;
+    username: string;
+    email: string;
+    password?: string;
+    comment?: string;
+    has_admin_role: number;
+    creation_time: string;
+}
				`@ -1 +0,0 @@`
				`<input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearch(searchProject.value)" >`