merge latest ui code to fix block issues

src/ui_ng/src/app/account/account-settings/account-settings-modal.component.ts

@@ -118,7 +118,7 @@ export class AccountSettingsModalComponent implements OnInit, AfterViewChecked {
         this.session.updateAccountSettings(this.account)
             .then(() => {
                 this.isOnCalling = false;
-                this.close();
+                this.opened = false;
                 this.msgService.announceMessage(200, "PROFILE.SAVE_SUCCESS", AlertType.SUCCESS);
             })
             .catch(error => {

src/ui_ng/src/app/account/password/password-setting.component.ts

@@ -117,7 +117,7 @@ export class PasswordSettingComponent implements AfterViewChecked {
             })
             .then(() => {
                 this.onCalling = false;
-                this.close();
+                this.opened = false;
                 this.msgService.announceMessage(200, "CHANGE_PWD.SAVE_SUCCESS", AlertType.SUCCESS);
             })
             .catch(error => {

src/ui_ng/src/app/account/password/password-setting.service.ts

 import { Injectable } from '@angular/core';
-import { Headers, Http, RequestOptions } from '@angular/http';
+import { Headers, Http, RequestOptions, URLSearchParams } from '@angular/http';
 import 'rxjs/add/operator/toPromise';
 
 import { PasswordSetting } from './password-setting';
@@ -52,10 +52,18 @@ export class PasswordSettingService {
             return Promise.reject("Invalid reset uuid or password");
         }
 
-        return this.http.post(resetPasswordEndpoint, JSON.stringify({
-            "reset_uuid": uuid,
-            "password": newPassword
-        }), this.options)
+        let formHeaders = new Headers({
+            "Content-Type": 'application/x-www-form-urlencoded'
+        });
+        let formOptions: RequestOptions = new RequestOptions({
+            headers: formHeaders
+        });
+        
+        let body: URLSearchParams = new URLSearchParams();
+        body.set("reset_uuid", uuid);
+        body.set("password", newPassword);
+
+        return this.http.post(resetPasswordEndpoint, body.toString(), formOptions)
             .toPromise()
             .then(response => response)
             .catch(error => {

src/ui_ng/src/app/account/password/reset-password.component.ts

@@ -44,7 +44,9 @@ export class ResetPasswordComponent implements OnInit{
     }
 
     public getValidationState(key: string): boolean {
-        return this.validationState && this.validationState[key];
+        return this.validationState && 
+        this.validationState[key] &&
+        key === 'reNewPassword'?this.samePassword():true;
     }
 
     public open(): void {
@@ -76,10 +78,12 @@ export class ResetPasswordComponent implements OnInit{
         this.onGoing = true;
         this.pwdService.resetPassword(this.resetUuid, this.password)
         .then(() => {
+            this.onGoing = false;
             this.resetOk = true;
             this.inlineAlert.showInlineSuccess({message:'RESET_PWD.RESET_OK'});
         })
         .catch(error => {
+            this.onGoing = false;
             if(accessErrorHandler(error, this.msgService)){
                 this.close();
             }else{

src/ui_ng/src/app/account/sign-in/sign-in.component.html

@@ -31,9 +31,9 @@
                 {{ 'SIGN_IN.INVALID_MSG' | translate }}
             </div>
             <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
-            <a href="javascript:void(0)" class="signup" (click)="signUp()">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
+            <a href="javascript:void(0)" class="signup" (click)="signUp()" *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
         </div>
     </form>
 </div>
-<sign-up #signupDialog></sign-up>>
+<sign-up #signupDialog></sign-up>
 <forgot-password #forgotPwdDialog></forgot-password>
\ No newline at end of file

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

@@ -10,6 +10,9 @@ import { SignUpComponent } from '../sign-up/sign-up.component';
 import { harborRootRoute } from '../../shared/shared.const';
 import { ForgotPasswordComponent } from '../password/forgot-password.component';
 
+import { AppConfigService } from '../../app-config.service';
+import { AppConfig } from '../../app-config';
+
 //Define status flags for signing in states
 export const signInStatusNormal = 0;
 export const signInStatusOnGoing = 1;
@@ -23,6 +26,7 @@ export const signInStatusError = -1;
 
 export class SignInComponent implements AfterViewChecked, OnInit {
     private redirectUrl: string = "";
+    private appConfig: AppConfig = new AppConfig();
     //Form reference
     signInForm: NgForm;
     @ViewChild('signInForm') currentForm: NgForm;
@@ -41,13 +45,19 @@ export class SignInComponent implements AfterViewChecked, OnInit {
     constructor(
         private router: Router,
         private session: SessionService,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private appConfigService: AppConfigService
     ) { }
 
     ngOnInit(): void {
+        this.appConfig = this.appConfigService.getConfig();
         this.route.queryParams
             .subscribe(params => {
                 this.redirectUrl = params["redirect_url"] || "";
+                let isSignUp = params["sign_up"] || "";
+                if (isSignUp != "") {
+                    this.signUp();//Open sign up
+                }
             });
     }
 
@@ -65,6 +75,12 @@ export class SignInComponent implements AfterViewChecked, OnInit {
         return this.currentForm.form.valid;
     }
 
+    //Whether show the 'sign up' link
+    public get selfSignUp(): boolean {
+        return this.appConfig.auth_mode === 'db_auth'
+            && this.appConfig.self_registration;
+    }
+
     //General error handler
     private handleError(error) {
         //Set error status
@@ -124,7 +140,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {
                 if (this.redirectUrl === "") {
                     //Routing to the default location
                     this.router.navigateByUrl(harborRootRoute);
-                }else{
+                } else {
                     this.router.navigateByUrl(this.redirectUrl);
                 }
             })

src/ui_ng/src/app/account/sign-up/sign-up.component.ts

@@ -9,6 +9,8 @@ import { UserService } from '../../user/user.service';
 import { errorHandler } from '../../shared/shared.utils';
 import { InlineAlertComponent } from '../../shared/inline-alert/inline-alert.component';
 
+import { Modal } from 'clarity-angular';
+
 @Component({
     selector: 'sign-up',
     templateUrl: "sign-up.component.html"
@@ -30,6 +32,9 @@ export class SignUpComponent {
     @ViewChild(InlineAlertComponent)
     private inlienAlert: InlineAlertComponent;
 
+    @ViewChild(Modal)
+    private modal: Modal;
+
     private getNewUser(): User {
         return this.newUserForm.getData();
     }
@@ -55,7 +60,7 @@ export class SignUpComponent {
     open(): void {
         this.newUserForm.reset();//Reset form
         this.formValueChanged = false;
-        this.opened = true;
+        this.modal.open();
     }
 
     close(): void {
@@ -74,7 +79,7 @@ export class SignUpComponent {
     }
 
     confirmCancel(): void {
-        this.opened = false;
+        this.modal.close();
     }
 
     //Create new user
@@ -97,7 +102,7 @@ export class SignUpComponent {
         this.userService.addUser(u)
             .then(() => {
                 this.onGoing = false;
-                this.close();
+                this.modal.close();
             })
             .catch(error => {
                 this.onGoing = false;

src/ui_ng/src/app/app-config.service.ts

+import { Injectable } from '@angular/core';
+import { Headers, Http, RequestOptions } from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+
+import { AppConfig } from './app-config';
+
+export const systemInfoEndpoint = "/api/systeminfo";
+/**
+ * Declare service to handle the bootstrap options
+ * 
+ * 
+ * @export
+ * @class GlobalSearchService
+ */
+@Injectable()
+export class AppConfigService {
+    private headers = new Headers({
+        "Content-Type": 'application/json'
+    });
+    private options = new RequestOptions({
+        headers: this.headers
+    });
+
+    //Store the application configuration
+    private configurations: AppConfig = new AppConfig();
+
+    constructor(private http: Http) { }
+
+    public load(): Promise<AppConfig> {
+        return this.http.get(systemInfoEndpoint, this.options).toPromise()
+        .then(response => this.configurations = response.json() as AppConfig)
+        .catch(error => {
+            //Catch the error
+            console.error("Failed to load bootstrap options with error: ", error);
+        });
+    }
+
+    public getConfig(): AppConfig {
+        return this.configurations;
+    }
+}
\ No newline at end of file

src/ui_ng/src/app/app-config.ts

+export class AppConfig {
+    constructor(){
+        //Set default value
+        this.with_notary = false;
+        this.with_admiral = false;
+        this.admiral_endpoint = "";
+        this.auth_mode = "db_auth";
+        this.registry_url = "";
+        this.project_creation_restriction = "everyone";
+        this.self_registration = true;
+    }
+    
+    with_notary: boolean;
+    with_admiral: boolean;
+    admiral_endpoint: string;
+    auth_mode: string;
+    registry_url: string;
+    project_creation_restriction: string;
+    self_registration: boolean;
+}
\ No newline at end of file

src/ui_ng/src/app/app.module.ts

@@ -16,17 +16,14 @@ import { MyMissingTranslationHandler } from './i18n/missing-trans.handler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { Http } from '@angular/http';
 
-import { SessionService } from './shared/session.service';
+import { AppConfigService } from './app-config.service';
 
 export function HttpLoaderFactory(http: Http) {
     return new TranslateHttpLoader(http, 'ng/i18n/lang/', '-lang.json');
 }
 
-export function initConfig(session: SessionService) {
-    return () => {
-        console.info("app init here");
-        return Promise.resolve(true);
-    };
+export function initConfig(configService: AppConfigService) {
+    return () => configService.load();
 }
 
 @NgModule({
@@ -51,10 +48,12 @@ export function initConfig(session: SessionService) {
             }
         })
     ],
-    providers: [{
+    providers: [
+        AppConfigService,
+        {
         provide: APP_INITIALIZER,
         useFactory: initConfig,
-        deps: [SessionService],
+        deps: [AppConfigService],
         multi: true
     }],
     bootstrap: [AppComponent]

src/ui_ng/src/app/base/navigator/navigator.component.css

@@ -17,4 +17,13 @@
 
 .lang-selected {
     font-weight: bold;
+}
+
+.nav-divider {
+    display: inline-block;
+    width: 1px;
+    height: 40px;
+    background-color: #fafafa;
+    position: relative;
+    top: 10px;
 }
\ No newline at end of file

src/ui_ng/src/app/base/navigator/navigator.component.html

@@ -5,12 +5,19 @@
             <span class="title">Harbor</span>
         </a>
     </div>
+    <div class="header-nav">
+        <a href="{{admiralLink}}" class="nav-link" *ngIf="isIntegrationMode"><span class="nav-text">Management</span></a>
+        <a href="javascript:void(0)" routerLink="/harbor/dashboard" class="active nav-link" *ngIf="isIntegrationMode"><span class="nav-text">Registry</span></a>
+    </div>
     <global-search></global-search>
     <div class="header-actions">
+        <a href="javascript:void(0)" class="nav-link nav-text" routerLink="/sign-in" routerLinkActive="active" *ngIf="isSessionValid === false">{{'SIGN_IN.HEADER_LINK' | translate}}</a>
+        <div class="nav-divider" *ngIf="!isSessionValid"></div>
+        <a href="javascript:void(0)" class="nav-link nav-text" (click)="openSignUp()" *ngIf="isSessionValid === false">{{'SIGN_UP.TITLE' | translate}}</a>
         <clr-dropdown class="dropdown bottom-left">
-            <button class="nav-icon" clrDropdownToggle style="width: 90px;">
+            <button class="nav-icon" clrDropdownToggle style="width: 98px;">
                 <clr-icon shape="world" style="left:-8px;"></clr-icon>
-                <span>{{currentLang}}</span>
+                <span style="padding-right: 8px;">{{currentLang}}</span>
                 <clr-icon shape="caret down"></clr-icon>
             </button>
             <div class="dropdown-menu">

src/ui_ng/src/app/base/navigator/navigator.component.ts

-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, Output, EventEmitter, OnInit, Inject } from '@angular/core';
+import { Router, NavigationExtras } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
 import { ModalEvent } from '../modal-event';
@@ -9,7 +9,10 @@ import { SessionUser } from '../../shared/session-user';
 import { SessionService } from '../../shared/session.service';
 import { CookieService } from 'angular2-cookie/core';
 
-import { supportedLangs, enLang, languageNames } from '../../shared/shared.const';
+import { supportedLangs, enLang, languageNames, signInRoute } from '../../shared/shared.const';
+
+import { AppConfigService } from '../../app-config.service';
+import { AppConfig } from '../../app-config';
 
 @Component({
     selector: 'navigator',
@@ -24,12 +27,14 @@ export class NavigatorComponent implements OnInit {
 
     private sessionUser: SessionUser = null;
     private selectedLang: string = enLang;
+    private appConfig: AppConfig = new AppConfig();
 
     constructor(
         private session: SessionService,
         private router: Router,
         private translate: TranslateService,
-        private cookie: CookieService) { }
+        private cookie: CookieService,
+        private appConfigService: AppConfigService) { }
 
     ngOnInit(): void {
         this.sessionUser = this.session.getCurrentUser();
@@ -39,6 +44,8 @@ export class NavigatorComponent implements OnInit {
             //Keep in cookie for next use
             this.cookie.put("harbor-lang", langChange.lang);
         });
+
+        this.appConfig = this.appConfigService.getConfig();
     }
 
     public get isSessionValid(): boolean {
@@ -53,6 +60,19 @@ export class NavigatorComponent implements OnInit {
         return languageNames[this.selectedLang];
     }
 
+    public get isIntegrationMode(): boolean {
+        return this.appConfig.with_admiral && this.appConfig.admiral_endpoint.trim() != "";
+    }
+
+    public get admiralLink(): string {
+        let routeSegments = [this.appConfig.admiral_endpoint,
+        "?registry_url=",
+        encodeURIComponent(window.location.href)
+        ];
+
+        return routeSegments.join("");
+    }
+
     matchLang(lang: string): boolean {
         return lang.trim() === this.selectedLang;
     }
@@ -94,12 +114,12 @@ export class NavigatorComponent implements OnInit {
 
     //Switch languages
     switchLanguage(lang: string): void {
-        if (supportedLangs.find(supportedLang => supportedLang === lang.trim())){
+        if (supportedLangs.find(supportedLang => supportedLang === lang.trim())) {
             this.translate.use(lang);
-        }else{
+        } else {
             this.translate.use(enLang);//Use default
             //TODO:
-            console.error('Language '+lang.trim()+' is not suppoted');
+            console.error('Language ' + lang.trim() + ' is not suppoted');
         }
         //Try to switch backend lang
         //this.session.switchLanguage(lang).catch(error => console.error(error));
@@ -107,12 +127,20 @@ export class NavigatorComponent implements OnInit {
 
     //Handle the home action
     homeAction(): void {
-        if(this.sessionUser != null){
+        if (this.sessionUser != null) {
             //Navigate to default page
             this.router.navigate(['harbor']);
-        }else{
+        } else {
             //Naviagte to signin page
             this.router.navigate(['sign-in']);
         }
     }
+
+    openSignUp(): void {
+        let navigatorExtra: NavigationExtras = {
+            queryParams: { "sign_up": true }
+        };
+
+        this.router.navigate([signInRoute], navigatorExtra);
+    }
 }
\ No newline at end of file

src/ui_ng/src/app/config/auth/config-auth.component.html

@@ -3,10 +3,9 @@
         <div class="form-group">
             <label for="authMode">{{'CONFIG.AUTH_MODE' | translate }}</label>
             <div class="select">
-                <select id="authMode" name="authMode" [disabled]="disabled(currentConfig.auth_mode)
-" [(ngModel)]="currentConfig.auth_mode.value">
+                <select id="authMode" name="authMode" [disabled]="disabled(currentConfig.auth_mode)" [(ngModel)]="currentConfig.auth_mode.value">
                     <option value="db_auth">{{'CONFIG.AUTH_MODE_DB' | translate }}</option>
-                    <option value="ldap">{{'CONFIG.AUTH_MODE_LDAP' | translate }}</option>
+                    <option value="ldap_auth">{{'CONFIG.AUTH_MODE_LDAP' | translate }}</option>
                 </select>
             </div>
             <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right">

src/ui_ng/src/app/config/auth/config-auth.component.ts

@@ -20,7 +20,7 @@ export class ConfigurationAuthComponent {
     public get showLdap(): boolean {
         return this.currentConfig &&
             this.currentConfig.auth_mode &&
-            this.currentConfig.auth_mode.value === 'ldap';
+            this.currentConfig.auth_mode.value === 'ldap_auth';
     }
 
     private disabled(prop: any): boolean {

src/ui_ng/src/app/config/config.component.html

@@ -55,4 +55,6 @@
     <button type="button" class="btn btn-primary" (click)="save()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.SAVE' | translate}}</button>
     <button type="button" class="btn btn-outline" (click)="cancel()" [disabled]="!isValid() || !hasChanges()">{{'BUTTON.CANCEL' | translate}}</button>
     <button type="button" class="btn btn-outline" (click)="testMailServer()" *ngIf="showTestServerBtn" [disabled]="!isMailConfigValid()">{{'BUTTON.TEST_MAIL' | translate}}</button>
+    <button type="button" class="btn btn-outline" (click)="testLDAPServer()" *ngIf="showLdapServerBtn" [disabled]="!isLDAPConfigValid()">{{'BUTTON.TEST_LDAP' | translate}}</button>
+    <span class="spinner spinner-inline" [hidden]="!testingInProgress"></span>
 </div>
\ No newline at end of file

src/ui_ng/src/app/config/config.component.ts

@@ -15,6 +15,8 @@ import { DeletionMessage } from '../shared/deletion-dialog/deletion-message'
 import { ConfigurationAuthComponent } from './auth/config-auth.component';
 import { ConfigurationEmailComponent } from './email/config-email.component';
 
+import { AppConfigService } from '../app-config.service';
+
 const fakePass = "fakepassword";
 
 @Component({
@@ -28,6 +30,7 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
     private currentTabId: string = "";
     private originalCopy: Configuration;
     private confirmSub: Subscription;
+    private testingOnGoing: boolean = false;
 
     @ViewChild("repoConfigFrom") repoConfigForm: NgForm;
     @ViewChild("systemConfigFrom") systemConfigForm: NgForm;
@@ -37,7 +40,8 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
     constructor(
         private msgService: MessageService,
         private configService: ConfigurationService,
-        private confirmService: DeletionDialogService) { }
+        private confirmService: DeletionDialogService,
+        private appConfigService: AppConfigService) { }
 
     ngOnInit(): void {
         //First load
@@ -58,6 +62,10 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         return this.onGoing;
     }
 
+    public get testingInProgress(): boolean {
+        return this.testingOnGoing;
+    }
+
     public isValid(): boolean {
         return this.repoConfigForm &&
             this.repoConfigForm.valid &&
@@ -82,6 +90,16 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
         return this.currentTabId === 'config-email';
     }
 
+    public get showLdapServerBtn(): boolean {
+        return this.currentTabId === 'config-auth' &&
+            this.allConfig.auth_mode &&
+            this.allConfig.auth_mode.value === "ldap_auth";
+    }
+
+    public isLDAPConfigValid(): boolean {
+        return this.authConfig && this.authConfig.isValid();
+    }
+
     public tabLinkChanged(tabLink: any) {
         this.currentTabId = tabLink.id;
     }
@@ -105,6 +123,10 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
                     //or force refresh by calling service.
                     //HERE we choose force way
                     this.retrieveConfig();
+
+                    //Reload bootstrap option
+                    this.appConfigService.load().catch(error=> console.error("Failed to reload bootstrap option with error: ", error));
+
                     this.msgService.announceMessage(response.status, "CONFIG.SAVE_SUCCESS", AlertType.SUCCESS);
                 })
                 .catch(error => {
@@ -150,7 +172,46 @@ export class ConfigurationComponent implements OnInit, OnDestroy {
      * @memberOf ConfigurationComponent
      */
     public testMailServer(): void {
+        let mailSettings = {};
+        let allChanges = this.getChanges();
+        for (let prop in allChanges) {
+            if (prop.startsWith("email_")) {
+                mailSettings[prop] = allChanges[prop];
+            }
+        }
 
+        this.testingOnGoing = true;
+        this.configService.testMailServer(mailSettings)
+            .then(response => {
+                this.testingOnGoing = false;
+                this.msgService.announceMessage(200, "CONFIG.TEST_MAIL_SUCCESS", AlertType.SUCCESS);
+            })
+            .catch(error => {
+                this.testingOnGoing = false;
+                this.msgService.announceMessage(error.status, errorHandler(error), AlertType.WARNING);
+            });
+    }
+
+    public testLDAPServer(): void {
+        let ldapSettings = {};
+        let allChanges = this.getChanges();
+        for (let prop in allChanges) {
+            if (prop.startsWith("ldap_")) {
+                ldapSettings[prop] = allChanges[prop];
+            }
+        }
+
+        console.info(ldapSettings);
+        this.testingOnGoing = true;
+        this.configService.testLDAPServer(ldapSettings)
+            .then(respone => {
+                this.testingOnGoing = false;
+                this.msgService.announceMessage(200, "CONFIG.TEST_LDAP_SUCCESS", AlertType.SUCCESS);
+            })
+            .catch(error => {
+                this.testingOnGoing = false;
+                this.msgService.announceMessage(error.status, errorHandler(error), AlertType.WARNING);
+            });
     }
 
     private retrieveConfig(): void {

src/ui_ng/src/app/config/config.service.ts

@@ -5,6 +5,8 @@ import 'rxjs/add/operator/toPromise';
 import { Configuration } from './config';
 
 const configEndpoint = "/api/configurations";
+const emailEndpoint = "/api/email/ping";
+const ldapEndpoint = "/api/ldap/ping";
 
 @Injectable()
 export class ConfigurationService {
@@ -30,4 +32,18 @@ export class ConfigurationService {
         .then(response => response)
         .catch(error => Promise.reject(error));
     }
+
+    public testMailServer(mailSettings: any): Promise<any> {