Commit e3751287 authored by Jie Yuan's avatar Jie Yuan
Browse files

add svmon angular code

parent 557c4475
Pipeline #12 canceled with stages
import { AppPage } from './app.po';
describe('svmon-gui App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login/login.component';
import { AAILoginComponent } from './auth/login/aailogin.component';
import { TableComponent } from './dashboard/table/table.component';
import {SiteComponent} from './dashboard/site/site.component';
import {DashboardGuard} from './guards/dashboard-guard.service';
import {AuthGuard} from '../svmongui-shared/services/Auth/auth-guard.service';
import {ServiceCompComponent} from './dashboard/serviceComponent/serviceComp.component';
import {ServiceComponentGuard} from './guards/serviceComponent-guard.service';
const appRoutes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{ path: 'login', component: LoginComponent },
{ path: 'aailogin', component: AAILoginComponent },
{ path: 'dashboard', canActivateChild: [DashboardGuard], canActivate: [AuthGuard], component: TableComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full'}
]
},
{ path: 'dashboard/site', canActivate: [DashboardGuard], component: SiteComponent},
{ path: 'dashboard/servComponent', canActivate: [ServiceComponentGuard], component: ServiceCompComponent},
{ path: '**', redirectTo: 'login'}
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: false } // <-- debugging purposes only
)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
/*
header, main, footer {
margin-left: 100px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
margin-left: 0;
}
}
@media (min-width: 992px) and (max-width: 1010px) {
header, main, footer {
margin-left: 160px;
}
}
@media (min-width: 1010px) and (max-width: 1075px) {
header, main, footer {
margin-left: 150px;
}
}
@media (min-width: 1075px) and (max-width: 1300px) {
header, main, footer {
margin-left: 140px;
}
}
*/
.sideBarContainer{
height: 100vh;
}
.contentRight{
padding-left: 300px;
}
.contentFull{
}
.header {
background: violet;
align-items: center;
color: white;
display: flex;
padding: 1em;
}
.headerToggle {
background: transparent;
border: 0.15rem solid white;
border-left: 0;
border-right: 0;
cursor: pointer;
font-size: 0;
height: 1.5rem;
margin-right: 1rem;
position: relative;
width: 2rem;
}
<!--
<div class="container">
&lt;!&ndash; Header &ndash;&gt;
<div class="row">
<div class = "col-xs-12 col-sm-12 col-md-12">
<header class="main-header" role="banner">
<app-header></app-header>
</header>
</div>
</div>
&lt;!&ndash; Router body &ndash;&gt;
<div class="row">
<div class = "col-xs-12 col-sm-12 col-md-12">
<main>
<router-outlet></router-outlet>
</main>
</div>
</div>
<div class="row">
<div class = "col-xs-12 col-sm-12 col-md-12">
<footer>
</footer>
</div>
</div>
</div>
-->
<!-- Container for sidebar(s) + page content -->
<ng-sidebar-container class="sideBarContainer">
<ng-sidebar [(opened)]="opened" #sidebar>
<app-sidebar (authenticated)="authenticated"></app-sidebar>
</ng-sidebar>
<div ng-sidebar-content [class]="contentClass">
<header>
<app-header></app-header>
</header>
<section class="mainBody">
<router-outlet></router-outlet>
</section>
</div>
</ng-sidebar-container>
\ No newline at end of file
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
}));
});
import {AfterViewInit, Component, EventEmitter, OnInit, OnDestroy, OnChanges, SimpleChanges} from '@angular/core';
import {SideBarNotifierService} from '../svmongui-shared/services/SideBarNotifier/sideBarNotifier.service';
import {HeaderComponent} from '../svmongui-shared/components/header/header.component';
import {AuthService} from '../svmongui-shared/services/Auth/auth.service';
import { SidebarComponent } from '../svmongui-shared/components/sidebar/sidebar.component';
import {SharedService} from './sharedService';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
//export class AppComponent {
title = 'SVMON';
public opened = false;
/** The class of the content **/
public contentClass = '';
public toggleSideBarEvent = new EventEmitter<Boolean>();
constructor(
private sideBarNotifier: SideBarNotifierService, private authService: AuthService ) {
console.log('in app constructor');
//this.opened = sharedService.opend;
if (this.authService.isAuthenticated){
this.opened = false;
this.setContentClass();
} else {
this.opened = true;
this.setContentClass();
}
//this.toggleSidebar();
}
//constructor (private authService: AuthService) {
//}
ngAfterViewInit() {
this.sideBarNotifier.sideBarToggled.subscribe( data => {
console.log('Toggled');
this.toggleSidebar();
console.log(data);
console.log("app after view init");
});
}
public toggleSidebar () {
if ( this.authService.isAuthenticated ) {
this.opened = !this.opened;
this.setContentClass();
}
}
//Sets the class content acording if the sidebar is opened or closed
private setContentClass() {
//We want to move the content to the right if the sidebar is opened
if (this.opened) {
this.contentClass = 'contentRight';
} else {
this.contentClass = 'contentFull';
}
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {DashboardModule} from './dashboard/dashboard.module';
import { AuthModule } from './auth/auth.module';
import {SiteService} from '../svmongui-shared/services/Site/site.service';
import {ServiceComponentService} from '../svmongui-shared/services/ServiceComponent/ServiceComponent.service';
import {ConfigParameterService} from '../svmongui-shared/services/ConfigParameter/ConfigParameter.service';
import {SvmonguiSharedModule} from '../svmongui-shared/svmongui-shared.module';
import {AuthGuard} from '../svmongui-shared/services/Auth/auth-guard.service';
import {AuthService} from '../svmongui-shared/services/Auth/auth.service';
import {DashboardGuard} from './guards/dashboard-guard.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {SidebarModule} from 'ng-sidebar';
import {SideBarNotifierService} from '../svmongui-shared/services/SideBarNotifier/sideBarNotifier.service';
import {ServiceComponentGuard} from './guards/serviceComponent-guard.service';
import {SharedService} from './sharedService';
const MODULES = [
AuthModule,
DashboardModule,
SvmonguiSharedModule
];
const PAGE_MODULES = [
];
const NATIVE_SERVICES = [
];
const SERVICES = [
SiteService,
ServiceComponentService,
ConfigParameterService,
DashboardGuard,
AuthGuard,
AuthService,
ServiceComponentGuard,
SideBarNotifierService,
SharedService
];
const COMPONENTS = [
];
const PIPES = [];
const DIRECTIVES = [];
@NgModule({
declarations: [
AppComponent,
// ...MODULES,
COMPONENTS,
PIPES,
DIRECTIVES,
...PAGE_MODULES,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SidebarModule.forRoot(),
...MODULES,
...PAGE_MODULES
],
providers: [
...SERVICES,
...NATIVE_SERVICES
] ,
entryComponents: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { AAILoginComponent } from './login/aailogin.component';
import {SvmonguiSharedModule} from '../../svmongui-shared/svmongui-shared.module';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
CommonModule,
SvmonguiSharedModule
],
declarations: [LoginComponent, AAILoginComponent]
})
export class AuthModule { }
<div class="container">
<div class="card card-container">
<button class="btn btn-sm btn-secondary btn-block" (click)="ConfirmWithB2Access()">Confirmation with AAI</button>
<!-- <button class="btn btn-sm btn-secondary btn-block" href="https://localhost:8443/login">Login with AAI</button> -->
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import {Router} from '@angular/router';
import {AuthService} from '../../../svmongui-shared/services/Auth/auth.service';
import { HttpParams } from '@angular/common/http';
import { constructDependencies } from '@angular/core/src/di/reflective_provider';
import { HttpClient , HttpXsrfTokenExtractor, HttpHeaders } from '@angular/common/http';
import { DefaultUrlHandlingStrategy } from '@angular/router/src/url_handling_strategy';
import { PARAMETERS } from '@angular/core/src/util/decorators';
@Component({
selector: 'app-aailogin',
templateUrl: './aailogin.component.html',
styleUrls: ['./aailogin.component.css']
})
export class AAILoginComponent implements OnInit {
private token = '';
constructor(private authService: AuthService, public router: Router ) {
const parameters = new URLSearchParams(window.location.search);
this.token = parameters.get('AccessToken');
console.log(this.token);
console.log('ccccc');
}
ngOnInit() {
}
ConfirmWithB2Access(): void {
this.authService.aaiAuthentication( this.token);
console.log(this.token);
console.log('aai token');
}
}
/*
* Specific styles of signin component
*/
/*
* General styles
*/
body, html {
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));
}
.card-container.card {
max-width: 350px;
padding: 40px 40px;
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
/*
* Card component
*/
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
.reauth-email {
display: block;
color: #404040;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
border-color: rgb(104, 145, 162);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
.forgot-password {
color: rgb(104, 145, 162);
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
color: rgb(12, 97, 33);
}