Commit 079cca5f authored by Steven Zou's avatar Steven Zou
Browse files

merge latest ui code to fix block issues

parent 4d5b6d81
......@@ -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 => {
......
......@@ -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 => {
......
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 => {
......
......@@ -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{
......
......@@ -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
......@@ -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);
}
})
......
......@@ -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;
......
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
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
......@@ -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]
......
......@@ -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
......@@ -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">
......
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
......@@ -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">
......
......@@ -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 {
......
......@@ -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
......@@ -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 {
......
......@@ -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> {