...
 
Commits (96)
DIST := dist
NM := node_modules
NG := $(NM)/.bin/ng
.PHONY: clean, dev, prod
all: prod
clean:
@rm -rf $(DIST)
cleaner:
@rm -rf $(NM) $(DIST)
$(NM):
@npm install
$(NG): $(NM)
dev: $(NG)
@$(NG) build --aot
watch: $(NG)
@$(NG) build --aot --watch
prod: $(NG)
@$(NG) build --aot --prod
watch-prod: $(NG)
@$(NG) build --aot --prod --watch
$(DIST): prod
......@@ -5,32 +5,14 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
## Installation
- Install node.js v10.x (see [nodesource](https://github.com/nodesource/distributions#debinstall))
- git clone https://git.scc.kit.edu/feudal/feudalWebpage
- cd feudalWebpage
- npm install
- node_modules/@angular/cli/bin/ng update --all
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
- `git clone https://git.scc.kit.edu/feudal/feudalWebpage $dir`
- `cd $dir`
- `npm install`
- Build the webpage
- `./node_modules/.bin/ng update --all`
- The built webpage is located in `$dir/dist`
- Make sure that nginx is configured to serve this directory
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"feudal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/static"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "feudal:build"
},
"configurations": {
"production": {
"browserTarget": "feudal:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "feudal:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"feudal-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "feudal:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "feudal",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"feudal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/static"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "feudal:build"
},
"configurations": {
"production": {
"browserTarget": "feudal:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "feudal:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"feudal-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "feudal:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "feudal",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
#!/bin/bash
if ! which npm &>/dev/null;
then
echo 'Please install node.js 10.x'
else
npm install
npm audit fix
./node_modules/@angular/cli/bin/ng build --prod
fi
This diff is collapsed.
......@@ -12,46 +12,42 @@
},
"private": true,
"dependencies": {
"@angular/animations": "6.1.1",
"@angular/cdk": "^6.4.2",
"@angular/common": "6.1.1",
"@angular/compiler": "6.1.1",
"@angular/core": "6.1.1",
"@angular/forms": "6.1.1",
"@angular/http": "6.1.1",
"@angular/material": "^6.4.2",
"@angular/platform-browser": "6.1.1",
"@angular/platform-browser-dynamic": "6.1.1",
"@angular/platform-server": "6.1.1",
"@angular/router": "6.1.1",
"@stomp/ng2-stompjs": "^4.0.1",
"core-js": "^2.5.7",
"@angular/animations": "7.2.10",
"@angular/cdk": "^7.3.5",
"@angular/common": "7.2.10",
"@angular/compiler": "7.2.10",
"@angular/core": "7.2.10",
"@angular/forms": "7.2.10",
"@angular/http": "7.2.10",
"@angular/material": "^7.3.5",
"@angular/platform-browser": "7.2.10",
"@angular/platform-browser-dynamic": "7.2.10",
"@stomp/ng2-stompjs": "^7.2.0",
"core-js": "^2.6.3",
"hammerjs": "^2.0.8",
"ngx-cookie-service": "^1.0.10",
"npm": "^6.2.0",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"zone.js": "^0.8.26"
"ngx-cookie-service": "^2.1.0",
"rxjs": "^6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "^6.1.2",
"@angular/compiler-cli": "6.1.1",
"@angular/language-service": "6.1.1",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~10.5.3",
"jasmine-core": "~3.1.0",
"@angular-devkit/build-angular": "^0.13.0",
"@angular/cli": "7.3.6",
"@angular/compiler-cli": "7.2.10",
"@types/jasmine": "^3.3.8",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^10.12.20",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.5",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.2.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "^2.9.2"
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.2",
"ts-node": "~8.0.2",
"tslint": "~5.12.1",
"typescript": "3.2.4"
}
}
<div *ngIf="(userService.userSrc() | async) as user" class="mat-typography" style="margin-bottom: 50px;">
<h2>User Info</h2>
<p>
You can inspect the user information we received about you.
</p>
<button mat-raised-button color="primary" (click)="profileDialog.open(user)">
Show User Info
</button>
</div>
<app-sshkeys></app-sshkeys>
<div class="mat-typography">
<h2>Account Management</h2>
<p class="mat-body-1">
You can delete your account. All deployments will be removed if you choose to do so. You will not be able to use the deployed credentials.
</p>
<p class="mat-body-2">
<mat-checkbox [(ngModel)]="sure" style="margin-right: 8px" [checked]="sure">
I'm sure I want to delete my data from the server.
</mat-checkbox>
<p>
<button mat-raised-button color="primary" (click)="userService.deleteUser()" [disabled]="!sure">
Delete
</button>
</p>
</div>
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UserService } from '../user.service';
import { ProfileDialogService } from '../dialogues/profile-dialog.service';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
// account deletion form
sure: boolean = false;
constructor(
public userService: UserService,
public profileDialog: ProfileDialogService,
) {
}
ngOnInit() {
}
}
<app-header></app-header>
<!--
<div class="outer">
<div class="inner">
<div class="mat-typography">
<app-body></app-body>
<header feudal-header></header>
<div class="body">
<div *ngIf="(userService.combiSrc() | async) as combi" style="max-width: 800px;" class="centered">
<div *ngIf="combi.user != undefined">
<div *ngIf="(userService.sshKeysSrc() | async)?.length > 0; else noCredentials">
<div style="margin-bottom: 50px;">
<h3>Your services</h3>
<div>
<mat-accordion *ngIf="combi.user.services.length > 0; else noServices">
<app-service *ngFor="let service of combi.user.services" [service]="service"></app-service>
</mat-accordion>
</div>
<ng-template #noServices>
<p>
You are not permitted to use any services.
</p>
</ng-template>
</div>
<div>
<h3>Your Virtual Organisations</h3>
<div>
<mat-accordion *ngIf="userService.extractVOs(combi).length > 0; else noVOs">
<app-vo-data *ngFor="let vo of userService.extractVOs(combi)" [vo]="vo"></app-vo-data>
</mat-accordion>
</div>
<ng-template #noVOs>
<p *ngIf="combi.prefs.showEmptyVOs">
You are not member in any Virtual Organisations.
</p>
<p *ngIf="!combi.prefs.showEmptyVOs">
You are not member in any Virtual Organisations or all your Virtual Organisations are empty.
</p>
</ng-template>
</div>
</div>
<ng-template #noCredentials>
<app-account></app-account>
</ng-template>
</div>
</div>
</div>
-->
<app-body></app-body>
<app-footer></app-footer>
<footer feudal-footer class="footer"></footer>
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 { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
selector: '[feudal-root]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() { }
constructor(
public userService: UserService,
) { }
}
import {NgModule,Pipe,PipeTransform} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule} from '@angular/forms';
import {JsonPipe} from '@angular/common';
import {HttpModule} from '@angular/http';
import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
// Other libs
import {StompRService} from '@stomp/ng2-stompjs';
import {CookieService} from 'ngx-cookie-service';
import { StompRService } from '@stomp/ng2-stompjs';
import { CookieService } from 'ngx-cookie-service';
// Our stuff
//
// services
import {UserService} from './user.service';
import {SnackBarService} from './snackbar.service';
import { UserService } from './user.service';
import { LanguageService } from './language.service';
import { SnackBarService } from './snackbar.service';
// imports
import {DialoguesModule} from './dialogues/dialogues.module';
import {MaterialModule} from './material/material.module';
import {SharedModule} from './shared/shared.module';
import { DialoguesModule } from './dialogues/dialogues.module';
import { MaterialModule } from './material/material.module';
import { SharedModule } from './shared/shared.module';
import { SshkeysModule } from './sshkeys/sshkeys.module';
// declarations
import {AppComponent} from './app.component';
import {BodyComponent} from './body/body.component';
import {ServiceComponent} from './service/service.component';
import {HeaderComponent} from './header/header.component';
import {FooterComponent} from './footer/footer.component';
import { VoComponent } from './vo/vo.component';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { VoDataComponent } from './vo-data/vo-data.component';
import { ServiceComponent } from './service/service.component';
import { StateComponent } from './state/state.component';
import { DeploymentActionRowComponent } from './deployment-action-row/deployment-action-row.component';
import { AccountComponent } from './account/account.component';
@NgModule({
imports: [
......@@ -39,28 +43,34 @@ import { VoComponent } from './vo/vo.component';
HttpClientModule,
HttpClientXsrfModule.withOptions({
cookieName: 'csrftoken',
headerName: 'HTTP_X_CSRFTOKEN',
headerName: 'X-CSRFToken',
}),
DialoguesModule,
MaterialModule,
SharedModule,
SshkeysModule,
],
declarations: [
AppComponent,
HeaderComponent,
BodyComponent,
FooterComponent,
VoDataComponent,
ServiceComponent,
VoComponent,
StateComponent,
DeploymentActionRowComponent,
AccountComponent,
],
providers: [
CookieService,
UserService,
LanguageService,
SnackBarService,
StompRService,
JsonPipe,
],
bootstrap: [AppComponent],
bootstrap: [
AppComponent,
],
})
export class AppModule {
constructor() {
......
.body {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}
<div class="body" class="mat-typography" class="body">
<mat-tab-group *ngIf="userService.loggedIn()">
<mat-tab label="Your VOs">
<div class="mat-typography" class="body">
<h2>Your Virtual Organisations</h2>
<mat-accordion *ngIf="userService.user.groups.length > 0">
<app-vo *ngFor="let group of userService.getGroups()" [group]="group" [deployment]="userService.getDeploymentByGroup(group)"></app-vo>
</mat-accordion>
<p *ngIf="userService.user.groups.length == 0">
You are not a member in any group.
</p>
</div>
</mat-tab>
<mat-tab label="Services">
<div class="mat-typography" class="body">
<h2>Available Services</h2>
<mat-accordion *ngIf="userService.services.length > 0">
<app-service *ngFor="let service of userService.services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service>
</mat-accordion>
<p *ngIf="userService.services.length === 0">
You have no available services.<br/>
This is due services requiring users to be member of a certain group.
</p>
</div>
</mat-tab>
</mat-tab-group>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MgmtComponent } from './body.component';
describe('MgmtComponent', () => {
let component: MgmtComponent;
let fixture: ComponentFixture<MgmtComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MgmtComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MgmtComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
@Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.css']
})
export class BodyComponent implements OnInit {
constructor(
public userService: UserService
) {
}
ngOnInit() {
}
}
<div [ngSwitch]="(deployment$ | async)?.state_target">
<span *ngSwitchCase="'not_deployed'" style="margin-right: 15px;">
You did not request access to services of this VO.
</span>
<span *ngSwitchCase="'deployed'" style="margin-right: 15px;">
You requested access to the services of this VO.
</span>
</div>
<div [ngSwitch]="(deployment$ | async)?.state_target">
<button *ngSwitchCase="'not_deployed'" (click)="changeDeployment('deployed')" mat-raised-button color="primary" matTooltip="Deploy credentials to these services">
Deploy my credentials
</button>
<button *ngSwitchCase="'deployed'" (click)="changeDeployment('not_deployed')" mat-raised-button color="primary" matTooltip="Remove credentials from these services">
Remove my credentials
</button>
<button *ngSwitchDefault (click)="changeDeployment('deployed')" mat-raised-button color="primary" matTooltip="Deploy credentials these services">
Deploy my credentials
</button>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SshKeysComponent } from './ssh-keys.component';
import { DeploymentActionRowComponent } from './deployment-action-row.component';
describe('SshKeysComponent', () => {
let component: SshKeysComponent;
let fixture: ComponentFixture<SshKeysComponent>;
describe('DeploymentActionRowComponent', () => {
let component: DeploymentActionRowComponent;
let fixture: ComponentFixture<DeploymentActionRowComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SshKeysComponent ]
declarations: [ DeploymentActionRowComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SshKeysComponent);
fixture = TestBed.createComponent(DeploymentActionRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
......
import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { Deployment, VO, Service } from '../types/types.module'
@Component({
selector: '[deployment-action-row]',
templateUrl: './deployment-action-row.component.html',
styleUrls: ['./deployment-action-row.component.css']
})
export class DeploymentActionRowComponent implements OnInit {
@Input() vo: VO;
@Input() service: Service;
@Input() deployment$: Observable<Deployment>;
constructor(
public userService: UserService,
) { }
ngOnInit() {
}
public changeDeployment(stateTarget: string): void {
if (this.vo != undefined) {
this.userService.patchDeployment('vo', stateTarget, this.vo.id);
return
}
if (this.service != undefined) {
this.userService.patchDeployment('service', stateTarget, this.service.id);
return
}
}
}
<div *ngIf="(userService.userSrc() | async) as user" class="mat-typography" style="margin-bottom: 50px;">
<h2>User Info</h2>
<p>
You can inspect the user information we received about you.
</p>
<button mat-raised-button mat-dialog-close color="primary" (click)="profileDialog.open(user)">
Show User Info
</button>
</div>
<app-sshkeys></app-sshkeys>
<app-preferences></app-preferences>
<div class="mat-typography">
<h3>Account Management</h3>
<h2>Account Management</h2>
<p class="mat-body-1">
You can delete your account. All deployments will be withdrawn if you choose to do so.
You can delete your account. All deployments will be removed if you choose to do so. You will not be able to use the deployed credentials.
</p>
<p class="mat-body-2">
<mat-checkbox [(ngModel)]="sure" style="margin-right: 8px" [checked]="sure">
I'm sure I want to delete my data from the server.
</mat-checkbox>
I'm sure I want to delete all my data from the server.
<p>
<button mat-raised-button mat-dialog-close color="primary" (click)="delete()" [disabled]="!sure">
<button mat-raised-button mat-dialog-close color="primary" (click)="userService.deleteUser()" [disabled]="!sure">
Delete
</button>
</p>
......
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AccountComponent } from './account.component';
describe('AccountComponent', () => {
let component: AccountComponent;
let fixture: ComponentFixture<AccountComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AccountComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { UserService } from '../../user.service';
import { ProfileDialogService } from '../profile-dialog.service';
import { User } from '../../types/types.module';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
public sure: boolean;
export class AccountComponent {
// account deletion form
public sure: boolean = false;
constructor(
public userService: UserService,
public profileDialog: ProfileDialogService,
) {
this.sure = false;
}
ngOnInit() {
}
delete() {
this.userService.deleteUser();
}
}
<div class="mat-typography">
<div *ngIf="(stateItem$ | async) as stateItem" class="mat-typography">
<div *ngIf="credentialCount > 0" style="margin-bottom: 50px;">
<h2>Credentials</h2>
<p>
You can access the service {{ service.name }} at {{ service.site[0].name }} using one of your credentials.
For access to the service {{ stateItem.service?.name }} at {{ stateItem.service.site?.name }} additional credentials are needed.
The additional credentials are listed below.
</p>
<div *ngIf="credentialCount > 0">
<p>
Additional information about accessing the service is displayed below.
</p>
<mat-table [dataSource]="table">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.value }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>
</div>
<mat-table [dataSource]="table">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element ? element.name : '' }}</mat-cell>
</ng-container>
<ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.value }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>
</div>
<div>
<h2>Key Information</h2>
<p>
These are the current states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
</p>
<table>
<thead>
<tr>
<td>State</td>
<td>Key</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let state of stateItem.credential_states">
<td>
<span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button>call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
</span>
{{ lang.printState(state.state) }}
</td>
<td style="font-size: 110%;">
{{ state.credential?.name }}
</td>
<td *ngIf="state.is_pending">
<span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
<span *ngIf="state.state_target === 'deployed'">
Key is being deployed
</span>
<span *ngIf="state.state_target === 'not_deployed'">
Key is being removed
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
import {Component, OnInit,Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';
import {MatTableDataSource} from '@angular/material';
import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs';
import { UserService } from '../../user.service';
import * as t from '../../types/types.module';
import { LanguageService } from '../../language.service';
import { DeploymentState, Service, CredentialState } from '../../types/types.module';
@Component({
selector: 'app-credentials',
......@@ -11,33 +13,35 @@ import * as t from '../../types/types.module';
styleUrls: ['./credentials.component.css']
})
export class CredentialsComponent implements OnInit {
public columns = ["name", "value"];
public stateItem: t.DeploymentStateItem;
public service: t.Service;
public credentialCount: number = 0;
public table: MatTableDataSource<any>;
constructor(
public userService: UserService,
@Inject(MAT_DIALOG_DATA) public data: any,
public lang: LanguageService,
@Inject(MAT_DIALOG_DATA) public stateItem$: Observable<DeploymentState>,
) {
this.stateItem = data.stateItem;
this.service = data.stateItem.service;
stateItem$.subscribe(
(stateItem: DeploymentState) => {
const credentialList = [];
for (const key in stateItem.credentials) {
if (stateItem.credentials.hasOwnProperty(key)) {
credentialList.push(
{
name: key,
value: stateItem.credentials[key],
}
);
}
}
this.credentialCount = credentialList.length;
this.table = new MatTableDataSource(credentialList);
}
);
}
ngOnInit() {
const credentialList = [];
for (const key in this.stateItem.credentials) {
if (this.stateItem.credentials.hasOwnProperty(key)) {
credentialList.push(
{
name: key,
value: this.stateItem.credentials[key],
}
);
}
}
this.credentialCount = credentialList.length;
this.table = new MatTableDataSource(credentialList);
}
}
import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ProfileComponent } from './profile/profile.component';
import { SshKeysComponent } from './ssh-keys/ssh-keys.component';
import { Observable } from 'rxjs';
import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { CredentialsComponent } from './credentials/credentials.component';
import { MessageComponent } from './message/message.component';
import * as t from '../types/types.module';
import { User, DeploymentState } from '../types/types.module';
@Injectable()
export class DialogService {
profileDialog: MatDialogRef<any>;
sshKeysDialog: MatDialogRef<any>;
accountDialog: MatDialogRef<any>;
questionnaireDialog: MatDialogRef<any>;
credentialsDialog: MatDialogRef<any>;
messageDialog: MatDialogRef<any>;
settings = {
width: '80%',
};
constructor(
public dialog: MatDialog,
private dialog: MatDialog,
) { }
public openProfile() {
this.profileDialog = this.dialog.open(
ProfileComponent,
this.settings,
);
}
public openSshKeys() {
this.sshKeysDialog = this.dialog.open(
SshKeysComponent,
this.settings,
);
settingsData(data?: any) {
return {
panelClass: 'scrolling-dialog',
data: data,
}
}
public openAccount() {
this.accountDialog = this.dialog.open(
AccountComponent,
this.settings,
this.settingsData(),
);
}
public openQuestionnaire(stateItem: t.DeploymentStateItem) {
public openQuestionnaire(state: Observable<DeploymentState>) {
this.questionnaireDialog = this.dialog.open(
QuestionnaireComponent,
{
data: {
stateItem: stateItem,
}
}
this.settingsData(state),
);
}