Merge pull request #1423 from vmware/fix/user_profile_dropdown

Refine the related menu

harbor-app/src/app/account/account-settings/account-settings-modal.component.html

@@ -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>
@@ -36,7 +36,7 @@
         <clr-alert [clrAlertType]="'alert-danger'" [clrAlertClosable]="true" [hidden]='errorMessage === ""'>
             <div class="alert-item">
                 <span class="alert-text">
-                   This alert indicates success.
+                   {{errorMessage}}
                 </span>
             </div>
         </clr-alert>

harbor-app/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],

harbor-app/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 => {

harbor-app/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>
+            <button [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>
             <a href="javascript:void(0)" class="signup" (click)="signUp()">Sign up for an account</a>
         </div>
     </form>

harbor-app/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: [],

harbor-app/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,

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

@@ -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>

harbor-app/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);
-        }
-    }
 }

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

@@ -19,10 +19,11 @@
               <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)="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(false)">Log out</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)="logOut()">Log out</a>
             </div>
         </clr-dropdown>
         <clr-dropdown class="dropdown bottom-left">
@@ -37,16 +38,5 @@
                 <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>
-            </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>About</a>
-            </div>
-        </clr-dropdown>
     </div>
 </clr-header>

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

@@ -54,17 +54,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
-                    //Naviagte to the sign in route
+                this.router.navigate(["/sign-in"]);
-                    this.router.navigate(["/sign-in"]);
-                } else {
-                    //Naviagte to the default route
-                    this.router.navigate(["/harbor"]);
-                }
             })
             .catch()//TODO:
     }

harbor-app/src/app/shared/max-length-ext.directive.ts

@@ -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++;
             }

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

@@ -1,6 +1,6 @@
 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';
@@ -10,7 +10,7 @@ import { MaxLengthExtValidatorDirective } from './max-length-ext.directive';
 @NgModule({
   imports: [
     CoreModule,
-    AccountModule
+    //AccountModule
   ],
   declarations: [
     MessageComponent,
@@ -18,7 +18,7 @@ import { MaxLengthExtValidatorDirective } from './max-length-ext.directive';
   ],
   exports: [
     CoreModule,
-    AccountModule,
+   // AccountModule,
     MessageComponent,
     MaxLengthExtValidatorDirective
   ],