Commit 59bea0e3 authored by Steven Zou's avatar Steven Zou
Browse files

implement harbor shell related things with authorization support

parent 87679380
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { RouterModule } from '@angular/router';
import { CoreModule } from '../core/core.module';
import { SignInComponent } from './sign-in/sign-in.component';
import { PasswordSettingComponent } from './password/password-setting.component';
import { PasswordSettingService } from './password/password-setting.service';
@NgModule({
imports: [
SharedModule,
CoreModule,
RouterModule
],
declarations: [SignInComponent],
exports: [SignInComponent]
declarations: [SignInComponent, PasswordSettingComponent],
exports: [SignInComponent, PasswordSettingComponent],
providers: [PasswordSettingService]
})
export class AccountModule { }
\ No newline at end of file
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'forgot-password',
templateUrl: "forgot-password.component.html"
})
export class ForgotPasswordComponent {
// constructor(private router: Router){}
}
\ No newline at end of file
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'reset-password',
templateUrl: "reset-password.component.html"
})
export class ResetPasswordComponent {
// constructor(private router: Router){}
}
\ No newline at end of file
......@@ -97,8 +97,7 @@ export class SignInComponent implements AfterViewChecked {
//Trigger the signin action
signIn(): void {
//Should validate input firstly
if (!this.validate()) {
console.info("return");
if (!this.validate() || this.signInStatus === signInStatusOnGoing) {
return;
}
......@@ -113,14 +112,18 @@ export class SignInComponent implements AfterViewChecked {
//Validate the sign-in session
this.session.retrieveUser()
.then(() => {
.then(user => {
//Routing to the right location
let nextRoute = ["/harbor", "dashboard"];
let nextRoute = ["/harbor", "projects"];
this.router.navigate(nextRoute);
})
.catch(this.handleError);
.catch(error => {
this.handleError(error);
});
})
.catch(this.handleError);
.catch(error => {
this.handleError(error);
});
}
//Help user navigate to the sign up
......
<p>Placeholder for signup</p>
\ No newline at end of file
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'sign-up',
templateUrl: "sign-up.component.html"
})
export class SignUpComponent {
// constructor(private router: Router){}
}
\ No newline at end of file
......@@ -4,25 +4,23 @@ import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ClarityModule } from 'clarity-angular';
import { AppComponent } from './app.component';
import { AccountModule } from './account/account.module';
import { BaseModule } from './base/base.module';
import { HarborRoutingModule } from './harbor-routing.module';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
CoreModule,
AccountModule,
SharedModule,
BaseModule,
HarborRoutingModule
],
providers: [],
bootstrap: [ AppComponent ]
bootstrap: [AppComponent]
})
export class AppModule {
}
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop">
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop" [clrModalSize]="'lg'">
<h3 class="modal-title">Accout Settings</h3>
<div class="modal-body">
<form>
......
......@@ -5,12 +5,21 @@ import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { ProjectComponent } from '../project/project.component';
import { BaseRoutingResolver } from './base-routing-resolver.service';
const baseRoutes: Routes = [
{
path: 'harbor', component: HarborShellComponent,
{
path: 'harbor',
component: HarborShellComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'projects', component: ProjectComponent }
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'projects',
component: ProjectComponent
}
]
}];
......@@ -18,7 +27,9 @@ const baseRoutes: Routes = [
imports: [
RouterModule.forChild(baseRoutes)
],
exports: [ RouterModule ]
exports: [RouterModule],
providers: [BaseRoutingResolver]
})
export class BaseRoutingModule {
......
<clr-main-container>
<navigator (showAccountSettingsModal)="openModal($event)" (searchEvt)="doSearch($event)"></navigator>
<navigator (showAccountSettingsModal)="openModal($event)" (searchEvt)="doSearch($event)" (showPwdChangeModal)="openModal($event)"></navigator>
<global-message></global-message>
<div class="content-container">
<div class="content-area" [class.container-override]="showSearch">
......@@ -26,4 +26,5 @@
</nav>
</div>
</clr-main-container>
<account-settings-modal></account-settings-modal>
\ No newline at end of file
<account-settings-modal></account-settings-modal>
<password-setting (pwdChange)="watchPwdChange($event)"></password-setting>
\ No newline at end of file
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Router, ActivatedRoute } from '@angular/router';
import { SessionService } from '../../shared/session.service';
import { ModalEvent } from '../modal-event';
import { SearchEvent } from '../search-event';
import { modalAccountSettings, modalPasswordSetting } from '../modal-events.const';
import { AccountSettingsModalComponent } from '../account-settings/account-settings-modal.component';
import { SearchResultComponent } from '../global-search/search-result.component';
import { PasswordSettingComponent } from '../../account/password/password-setting.component';
import { NavigatorComponent } from '../navigator/navigator.component';
@Component({
selector: 'harbor-shell',
......@@ -22,18 +24,22 @@ export class HarborShellComponent implements OnInit {
@ViewChild(SearchResultComponent)
private searchResultComponet: SearchResultComponent;
@ViewChild(PasswordSettingComponent)
private pwdSetting: PasswordSettingComponent;
@ViewChild(NavigatorComponent)
private navigator: NavigatorComponent;
//To indicator whwther or not the search results page is displayed
//We need to use this property to do some overriding work
private isSearchResultsOpened: boolean = false;
constructor(private session: SessionService) { }
constructor(private route: ActivatedRoute) { }
ngOnInit() {
let cUser = this.session.getCurrentUser();
if (!cUser) {
//Try to update the session
this.session.retrieveUser();
}
this.route.data.subscribe(data => {
//dummy
});
}
public get showSearch(): boolean {
......@@ -43,8 +49,12 @@ export class HarborShellComponent implements OnInit {
//Open modal dialog
openModal(event: ModalEvent): void {
switch (event.modalName) {
case "account-settings":
case modalAccountSettings:
this.accountSettingsModal.open();
break;
case modalPasswordSetting:
this.pwdSetting.open();
break;
default:
break;
}
......@@ -63,8 +73,15 @@ export class HarborShellComponent implements OnInit {
//Search results page closed
//remove the related ovevriding things
searchClose(event: boolean): void {
if(event){
if (event) {
this.isSearchResultsOpened = false;
}
}
//Watch password whether changed
watchPwdChange(event: any): void {
if (event) {
this.navigator.logOut(true);
}
}
}
\ No newline at end of file
......@@ -7,15 +7,22 @@
</div>
<global-search (searchEvt)="transferSearchEvent($event)"></global-search>
<div class="header-actions">
<clr-dropdown [clrMenuPosition]="'bottom-left'" class="dropdown">
<div *ngIf="!isSessionValid">
<a href="javascript:void(0)" class="nav-link nav-text sign-in-override" routerLink="/sign-in" routerLinkActive="active">Sign In</a>
<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)="open()">Account Setting</a>
<a href="javascript:void(0)" clrDropdownItem>Log out</a>
<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">
......
import { Component, Output, EventEmitter } from '@angular/core';
import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalEvent } from '../modal-event';
import { SearchEvent } from '../search-event';
import { modalAccountSettings, modalPasswordSetting } from '../modal-events.const';
import { SessionUser } from '../../shared/session-user';
import { SessionService } from '../../shared/session.service';
@Component({
selector: 'navigator',
templateUrl: "navigator.component.html"
templateUrl: "navigator.component.html",
styleUrls: ["navigator.component.css"]
})
export class NavigatorComponent {
export class NavigatorComponent implements OnInit {
// constructor(private router: Router){}
@Output() showAccountSettingsModal = new EventEmitter<ModalEvent>();
@Output() searchEvt = new EventEmitter<SearchEvent>();
@Output() showPwdChangeModal = new EventEmitter<ModalEvent>();
private sessionUser: SessionUser = null;
constructor(private session: SessionService, private router: Router) { }
ngOnInit(): void {
this.sessionUser = this.session.getCurrentUser();
}
public get isSessionValid(): boolean {
return this.sessionUser != null;
}
//Open the account setting dialog
open():void {
openAccountSettingsModal(): void {
this.showAccountSettingsModal.emit({
modalName:"account-settings",
modalName: modalAccountSettings,
modalFlag: true
});
}
//Open change password dialog
openChangePwdModal(): void {
this.showPwdChangeModal.emit({
modalName: modalPasswordSetting,
modalFlag: true
});
}
......@@ -25,4 +52,20 @@ export class NavigatorComponent {
transferSearchEvent(evt: SearchEvent): void {
this.searchEvt.emit(evt);
}
//Log out system
logOut(reSignIn: boolean): 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"]);
}
})
.catch()//TODO:
}
}
\ No newline at end of file
......@@ -3,9 +3,16 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SignInComponent } from './account/sign-in/sign-in.component';
import { HarborShellComponent } from './base/harbor-shell/harbor-shell.component';
import { BaseRoutingResolver } from './base/base-routing-resolver.service';
const harborRoutes: Routes = [
{ path: '', redirectTo: '/sign-in', pathMatch: 'full' },
{
path: 'harbor',
component: HarborShellComponent
},
{ path: '', redirectTo: '/harbor', pathMatch: 'full' },
{ path: 'sign-in', component: SignInComponent }
];
......@@ -13,7 +20,7 @@ const harborRoutes: Routes = [
imports: [
RouterModule.forRoot(harborRoutes)
],
exports: [ RouterModule ]
exports: [RouterModule]
})
export class HarborRoutingModule {
......
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HarborShellComponent} from '../base/harbor-shell/harbor-shell.component';
import { HarborShellComponent } from '../base/harbor-shell/harbor-shell.component';
import { ProjectComponent } from './project.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';
......@@ -10,14 +10,29 @@ import { ReplicationComponent } from '../replication/replication.component';
import { MemberComponent } from './member/member.component';
import { AuditLogComponent } from '../log/audit-log.component';
import { BaseRoutingResolver } from '../base/base-routing-resolver.service';
const projectRoutes: Routes = [
{ path: 'harbor',
component: HarborShellComponent,
{
path: 'harbor',
component: HarborShellComponent,
resolve: {
harborResolver: BaseRoutingResolver
},
children: [
{ path: 'projects', component: ProjectComponent },
{
path: 'projects/:id',
{
path: 'projects',
component: ProjectComponent,
resolve: {
projectsResolver: BaseRoutingResolver
}
},
{
path: 'projects/:id',
component: ProjectDetailComponent,
resolve: {
projectResolver: BaseRoutingResolver
},
children: [
{ path: 'repository', component: RepositoryComponent },
{ path: 'replication', component: ReplicationComponent },
......@@ -33,6 +48,6 @@ const projectRoutes: Routes = [
imports: [
RouterModule.forChild(projectRoutes)
],
exports: [ RouterModule ]
exports: [RouterModule]
})
export class ProjectRoutingModule {}
\ No newline at end of file
export class ProjectRoutingModule { }
\ No newline at end of file
......@@ -2,7 +2,10 @@ import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { SessionUser } from './session-user';
const currentUserEndpint = "/api/users/current";
const signOffEndpoint = "/log_out";
/**
* Define related methods to handle account and session corresponding things
*
......@@ -11,7 +14,7 @@ const currentUserEndpint = "/api/users/current";
*/
@Injectable()
export class SessionService {
currentUser: any = null;
currentUser: SessionUser = null;
private headers = new Headers({
"Content-Type": 'application/json'
......@@ -22,22 +25,41 @@ export class SessionService {
/**
* Get the related information of current signed in user from backend
*
* @returns {Promise<any>}
* @returns {Promise<SessionUser>}
*
* @memberOf SessionService
*/
retrieveUser(): Promise<any> {
retrieveUser(): Promise<SessionUser> {
return this.http.get(currentUserEndpint, { headers: this.headers }).toPromise()
.then(response => this.currentUser = response.json())
.then(response => {
this.currentUser = response.json() as SessionUser;
return this.currentUser;
})
.catch(error => {
console.log("An error occurred when getting current user ", error);//TODO: Will replaced with general error handler
console.log("An error occurred when getting current user ", error);//TODO
return Promise.reject(error);
})
}
/**
* For getting info
*/
getCurrentUser(): any {
getCurrentUser(): SessionUser {
return this.currentUser;
}
/**
* Log out the system
*/
signOff(): Promise<any> {
return this.http.get(signOffEndpoint, { headers: this.headers }).toPromise()
.then(() => {
//Destroy current session cache
this.currentUser = null;
}) //Nothing returned
.catch(error => {
console.log("An error occurred when signing off ", error);//TODO
return Promise.reject(error);
})
}
}
\ No newline at end of file
import { NgModule } from '@angular/core';
import { CoreModule } from '../core/core.module';
import { AccountModule } from '../account/account.module';
import { SessionService } from '../shared/session.service';
import { MessageComponent } from '../global-message/message.component';
......@@ -7,13 +8,15 @@ import { MessageService } from '../global-message/message.service';
@NgModule({
imports: [
CoreModule
CoreModule,
AccountModule
],
declarations: [
MessageComponent
],
exports: [
CoreModule,
AccountModule,
MessageComponent
],
providers: [SessionService, MessageService]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment