Skip to content

GitLab

feudalWebpage
feudalWebpage
Commit 28a9f76a authored by Lukas Burgey's avatar Lukas Burgey
Browse files
Options

Rework the sshkeys app

parent 0a36c483
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 148 deletions
src/app/app.module.ts
View file @ 28a9f76a
......@@ -21,6 +21,7 @@ import { SnackBarService } from './snackbar.service';
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';
......@@ -45,6 +46,7 @@ import { VoDataComponent } from './vo-data/vo-data.component';
DialoguesModule,
MaterialModule,
SharedModule,
SshkeysModule,
],
declarations: [
AppComponent,
......
src/app/body/body.component.html
View file @ 28a9f76a
<div class="body" class="mat-typography" class="body" >
<div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;">
<mat-tab-group>
<mat-tab-group *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<mat-tab label="Your VOs">
<div class="mat-typography" class="body">
<h3>Your Virtual Organisations</h3>
......@@ -33,5 +33,19 @@
</mat-tab>
-->
</mat-tab-group>
<ng-template #noCredentials>
<div class="mat-typography">
<div style="margin-bottom: 50px;">
<p>
Before you can start using FEUDAL you need to upload an SSH public key.
Please do so below.
</p>
<p>
Once you have uploaded a key, the SSH Key Management will be available in the toolbar above.
</p>
</div>
<app-sshkeys></app-sshkeys>
</div>
</ng-template>
</div>
</div>
src/app/dialogues/account/account.component.html
View file @ 28a9f76a
......@@ -8,64 +8,7 @@
</button>
</div>
<div class="mat-typography" style="margin-bottom: 50px;">
<h2>Key Management</h2>
<p>
These are your currently uploaded SSH public keys.
</p>
<div style="margin-bottom: 35px;">
<mat-table [dataSource]="sshKeyTable">
<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="key">
<mat-header-cell *matHeaderCellDef>Key</mat-header-cell>
<mat-cell style="font-size: 11px;" *matCellDef="let element">{{ element.key }}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
<mat-cell *matCellDef="let element">
<button *ngIf="keyDeleteable(element)" mat-icon-button matTooltip="Delete key" (click)="userService.removeSshKey(element)">
<mat-icon>delete_forever</mat-icon>
</button>
<button *ngIf="!keyDeleteable(element)" mat-icon-button matTooltip="This key is provided by the Proxy. It cannot be deleted." [disabled]="true" (click)="userService.removeSshKey(element)">
<mat-icon>delete_forever</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>
</div>
<!-- uploading section -->
<div style="height: 80px;">
<div *ngIf="upload; else notUploading">
<form (ngSubmit)="uploadKey()" #sshKeyForm="ngForm">
<mat-form-field>
<input matInput placeholder="Name" required [(ngModel)]="formKey.name" name="name">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Key" required [(ngModel)]="formKey.key" name="key"></textarea>
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!sshKeyForm.form.valid">
Upload key
</button>
<button mat-icon-button type="button" (click)="resetKeyUpload()" matTooltip="Abort key upload">
<mat-icon>cancel</mat-icon>
</button>
</form>
</div>
<ng-template #notUploading>
<p>
You can upload more SSH public keys to use for accessing services.
</p>
<button mat-raised-button color="primary" (click)="upload = true">
Upload more
</button>
</ng-template>
</div>
</div>
<app-sshkeys></app-sshkeys>
<div class="mat-typography">
<h2>Account Management</h2>
......
src/app/dialogues/account/account.component.ts
View file @ 28a9f76a
import { Component, OnInit } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UserService } from '../../user.service';
import { ProfileComponent } from '../profile/profile.component';
import { SSHKey, NewSSHKey } from '../../types/types.module';
import { SSHKeysDataSource } from './sshkeys-data-source';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
......@@ -15,28 +11,18 @@ import { SSHKeysDataSource } from './sshkeys-data-source';
})
export class AccountComponent implements OnInit {
columns = ['name', 'key', 'action'];
// ssh upload form
// does the user want to upload a key?
upload: boolean;
formKey: NewSSHKey;
sshKeyTable: DataSource<SSHKey>;
// account deletion form
sure: boolean = false;
constructor(
public userService: UserService,
public dialog: MatDialog,
private dialog: MatDialog,
) {
this.resetKeyUpload();
}
ngOnInit() {
this.sshKeyTable = new SSHKeysDataSource(this.userService);
}
public openProfile(user) {
......@@ -51,20 +37,4 @@ export class AccountComponent implements OnInit {
);
}
resetKeyUpload() {
this.upload = false;
this.formKey = {
name: '',
key: '',
}
}
uploadKey() {
this.userService.uploadSshKey(this.formKey);
this.resetKeyUpload();
}
keyDeleteable(key: SSHKey): boolean {
return key.name !== "unity_key";
}
}
src/app/dialogues/dialogues.module.ts
View file @ 28a9f76a
......@@ -16,12 +16,16 @@ import { MessageComponent } from './message/message.component';
//providers
import { DialogService } from './dialog.service';
import { SshkeysModule } from '../sshkeys/sshkeys.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule,
SharedModule,
SshkeysModule,
],
declarations: [
QuestionnaireComponent,
......
src/app/dialogues/ssh-keys/ssh-keys.component.html deleted 100644 → 0
View file @ 0a36c483
<div class="mat-typography">
<h3>Key Management</h3>
<div style="margin-bottom: 25px;">
<div *ngIf="userService.user.ssh_keys.length > 0; then key_list else upload_note"></div>
</div>
<div *ngIf="upload; then uploading else not_uploading"></div>
</div>
<ng-template #key_list>
<mat-table [dataSource]="userService.sshKeyTable()">
<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="key">
<mat-header-cell *matHeaderCellDef>Key</mat-header-cell>
<mat-cell style="font-size: 11px;" *matCellDef="let element">{{ element.key }}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Action</mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button matTooltip="Delete key" (click)="deleteKey(element)">
<mat-icon>delete_forever</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>
</ng-template>
<ng-template #upload_note>
<p>
You have no uploaded keys. Please upload an SSH public key.
</p>
</ng-template>
<ng-template #uploading>
<button mat-icon-button (click)="upload = true"><mat-icon>add</mat-icon></button>
</ng-template>
<ng-template #not_uploading>
<form (ngSubmit)="uploadKey()" #sshKeyForm="ngForm">
<mat-form-field>
<input matInput placeholder="Name" required [(ngModel)]="formKey.name" name="name">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Key" required [(ngModel)]="formKey.key" name="key"></textarea>
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!sshKeyForm.form.valid">Submit</button>
</form>
</ng-template>
src/app/dialogues/account/sshkeys-data-source.ts → src/app/sshkeys/sshkeys-data-source.ts
View file @ 28a9f76a
import { CollectionViewer, DataSource } from "@angular/cdk/collections";
import { Observable } from 'rxjs';
import { UserService } from '../../user.service';
import { SSHKey } from '../../types/types.module';
import { UserService } from '../user.service';
import { SSHKey } from '../types/types.module';
export class SSHKeysDataSource implements DataSource<SSHKey> {
......
src/app/sshkeys/sshkeys.component.html 0 → 100644
View file @ 28a9f76a
<input type="file" #file style="display: none;" (change)="onFilesAdded()" accept=".pub"/>
<div class="mat-typography" style="margin-bottom: 50px;">
<h2>SSH Key Management</h2>
<p>
These are your current SSH public keys.
</p>
<div style="margin-bottom: 50px;">
<mat-table [dataSource]="sshKeys">
<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="key">
<mat-header-cell *matHeaderCellDef>Key</mat-header-cell>
<mat-cell style="font-size: 11px;" *matCellDef="let element">{{ element.key }}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
<mat-cell *matCellDef="let element">
<button *ngIf="keyDeleteable(element)" mat-icon-button matTooltip="Delete key" (click)="userService.removeSshKey(element)">
<mat-icon>delete_forever</mat-icon>
</button>
<button *ngIf="!keyDeleteable(element)" mat-icon-button matTooltip="This key is provided by the Proxy. It cannot be deleted." [disabled]="true" (click)="userService.removeSshKey(element)">
<mat-icon>delete_forever</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columns"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>
</div>
<!-- uploading section -->
<div>
<div *ngIf="upload; else notUploading">
<form (ngSubmit)="uploadKey()" #sshKeyForm="ngForm">
<mat-form-field>
<input matInput placeholder="Name" required [(ngModel)]="formKey.name" name="name">
</mat-form-field>
<mat-form-field>
<textarea matInput placeholder="Key" required [(ngModel)]="formKey.key" name="key"></textarea>
</mat-form-field>
<button mat-raised-button color="primary" type="submit" [disabled]="!sshKeyForm.form.valid">
Submit key
</button>
<button mat-icon-button type="button" (click)="resetKeyUpload()" matTooltip="Abort key submission">
<mat-icon>cancel</mat-icon>
</button>
</form>
</div>
<ng-template #notUploading>
<p>
You can upload or enter more SSH public keys to use for accessing services.
</p>
<button mat-raised-button color="primary" (click)="upload = true" style="margin-right: 15px;">
Enter key
</button>
<button mat-raised-button color="primary" (click)="addFiles()">
Upload File
</button>
</ng-template>
</div>
</div>
src/app/sshkeys/sshkeys.component.spec.ts 0 → 100644
View file @ 28a9f76a
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SshkeysComponent } from './sshkeys.component';
describe('SshkeysComponent', () => {
let component: SshkeysComponent;
let fixture: ComponentFixture<SshkeysComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SshkeysComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SshkeysComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/sshkeys/sshkeys.component.ts 0 → 100644
View file @ 28a9f76a
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { UserService } from '../user.service';
import { SSHKey, NewSSHKey } from '../types/types.module';
import { SSHKeysDataSource } from './sshkeys-data-source';
@Component({
selector: 'app-sshkeys',
templateUrl: './sshkeys.component.html',
styleUrls: ['./sshkeys.component.css']
})
export class SshkeysComponent implements OnInit {
@ViewChild('file') file;
public files: Set<File> = new Set();
// for the ssh key table
columns = ['name', 'key', 'action'];
sshKeys: DataSource<SSHKey>;
// ssh upload form
// does the user want to upload a key?
upload: boolean;
public formKey: NewSSHKey;
constructor(
public userService: UserService,
) { }
ngOnInit() {
this.sshKeys = new SSHKeysDataSource(this.userService);
this.resetKeyUpload();
}
resetKeyUpload() {
this.upload = false;
this.formKey = {
name: '',
key: '',
}
}
uploadKey() {
const formData = new FormData()
formData.append('type', 'add');
formData.append('name', this.formKey.name);
formData.append('key', this.formKey.key);
this.userService.uploadSshKey(formData);
this.resetKeyUpload();
}
keyDeleteable(key: SSHKey): boolean {
return key.name !== "unity_key";
}
addFiles() {
this.file.nativeElement.click();
}
onFilesAdded() {
const files: { [key: string]: File } = this.file.nativeElement.files;
for (let key in files) {
if (!isNaN(parseInt(key))) {
this.files.add(files[key]);
}
}
this.files.forEach(
file => {
const formData = new FormData();
formData.append('type', 'add');
formData.append('name', file.name);
formData.append('file', file, file.name);
this.userService.uploadSshKey(formData);
}
);
}
}
src/app/sshkeys/sshkeys.module.ts 0 → 100644
View file @ 28a9f76a
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { UserService } from '../user.service';
import { MaterialModule } from '../material/material.module';
import { SharedModule } from '../shared/shared.module';
import { SshkeysComponent } from './sshkeys.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
MaterialModule,
SharedModule,
],
declarations: [
SshkeysComponent,
],
providers: [
UserService,
],
exports: [
SshkeysComponent,
],
})
export class SshkeysModule { }
src/app/user.service.ts
View file @ 28a9f76a
......@@ -258,13 +258,8 @@ export class UserService {
);
}
public uploadSshKey(key: NewSSHKey) {
console.log('Uploading key:', key);
const body = {
'type': 'add',
'key': key,
};
return this.http.post<SSHKey>('/backend/api/sshkey', body).subscribe(
public uploadSshKey(formData: FormData): void {
this.http.post<SSHKey>('/backend/api/sshkey', formData).subscribe(
(newKey: SSHKey) => {
this.sshKeys.push(newKey);
this.sshKeys$.next(this.sshKeys);
......
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