Commit 7f5a76f9 authored by Lukas Burgey's avatar Lukas Burgey

Add profile dialog service

Also duplicates the account component for use in and outside of
dialogues.
parent ae80fba2
<div *ngIf="(userService.subscribeUser() | 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() {
}
}
......@@ -26,6 +26,8 @@
</div>
</div>
<ng-template #noCredentials>
<app-account></app-account>
<!--
<div class="mat-typography">
<div style="margin-bottom: 50px;">
<p>
......@@ -38,6 +40,7 @@
</div>
<app-sshkeys></app-sshkeys>
</div>
-->
</ng-template>
</div>
</div>
......
......@@ -32,7 +32,7 @@ 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: [
......@@ -58,6 +58,7 @@ import { DeploymentActionRowComponent } from './deployment-action-row/deployment
ServiceComponent,
StateComponent,
DeploymentActionRowComponent,
AccountComponent,
],
providers: [
CookieService,
......
......@@ -3,7 +3,7 @@
<p>
You can inspect the user information we received about you.
</p>
<button mat-raised-button mat-dialog-close color="primary" (click)="openProfile(user)">
<button mat-raised-button mat-dialog-close color="primary" (click)="profileDialog.open(user)">
Show User Info
</button>
</div>
......
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Component, ViewChild } from '@angular/core';
import { UserService } from '../../user.service';
import { ProfileComponent } from '../profile/profile.component';
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 {
export class AccountComponent {
// account deletion form
sure: boolean = false;
public sure: boolean = false;
constructor(
public userService: UserService,
private dialog: MatDialog,
public profileDialog: ProfileDialogService,
) {
}
ngOnInit() {
}
public openProfile(user) {
this.dialog.open(
ProfileComponent,
{
panelClass: 'scrolling-dialog',
data: {
user: user,
}
}
);
}
}
......@@ -3,7 +3,6 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { ProfileComponent } from './profile/profile.component';
import { AccountComponent } from './account/account.component';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { CredentialsComponent } from './credentials/credentials.component';
......@@ -13,7 +12,6 @@ import { User, DeploymentState } from '../types/types.module';
@Injectable()
export class DialogService {
profileDialog: MatDialogRef<any>;
accountDialog: MatDialogRef<any>;
questionnaireDialog: MatDialogRef<any>;
credentialsDialog: MatDialogRef<any>;
......@@ -31,15 +29,6 @@ export class DialogService {
}
}
public openProfile(user: User) {
this.profileDialog = this.dialog.open(
ProfileComponent,
this.settingsData({
user: user,
}),
);
}
public openAccount() {
this.accountDialog = this.dialog.open(
AccountComponent,
......
......@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
// imports
import { MaterialModule } from '../material/material.module';
import { SharedModule } from '../shared/shared.module';
import { SshkeysModule } from '../sshkeys/sshkeys.module';
// declarations
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
......@@ -15,10 +16,9 @@ import { MessageComponent } from './message/message.component';
//providers
import { DialogService } from './dialog.service';
import { ProfileDialogService } from './profile-dialog.service';
import { SshkeysModule } from '../sshkeys/sshkeys.module';
@NgModule({
imports: [
CommonModule,
......@@ -43,6 +43,7 @@ import { SshkeysModule } from '../sshkeys/sshkeys.module';
],
providers: [
DialogService,
ProfileDialogService,
],
})
export class DialoguesModule { }
import { TestBed } from '@angular/core/testing';
import { ProfileDialogService } from './profile-dialog.service';
describe('ProfileDialogService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ProfileDialogService = TestBed.get(ProfileDialogService);
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { ProfileComponent } from './profile/profile.component';
import { User } from '../types/types.module';
@Injectable({
providedIn: 'root'
})
export class ProfileDialogService {
profileDialog: MatDialogRef<any>;
constructor(
private dialog: MatDialog,
) { }
public open(user: User) {
this.profileDialog = this.dialog.open(
ProfileComponent,
{
panelClass: 'scrolling-dialog',
data: user,
},
);
}
}
......@@ -2,6 +2,8 @@ import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatTableDataSource } from '@angular/material';
import {} from '@angular/material';
import { User } from '../../types/types.module';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
......@@ -11,7 +13,7 @@ export class ProfileComponent implements OnInit {
columns = ['name', 'info'];
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
@Inject(MAT_DIALOG_DATA) public user: User,
) { }
ngOnInit() {
......@@ -19,9 +21,9 @@ export class ProfileComponent implements OnInit {
dataSource(): MatTableDataSource<any> {
const userInfoList = [];
for (const key in this.data.user.userinfo) {
if (this.data.user.userinfo.hasOwnProperty(key)) {
userInfoList.push({name: key, info: this.data.user.userinfo[key]});
for (const key in this.user.userinfo) {
if (this.user.userinfo.hasOwnProperty(key)) {
userInfoList.push({name: key, info: this.user.userinfo[key]});
}
}
return new MatTableDataSource(userInfoList);
......
......@@ -8,10 +8,10 @@
<button mat-button mat-icon-button (click)="dialog.openAccount()">
<mat-icon>settings</mat-icon>
</button>
<button *ngIf="user.profile_name != undefined" mat-button (click)="dialog.openProfile(user)">
<button *ngIf="user.profile_name != undefined" mat-button (click)="profileDialog.open(user)">
{{ user.profile_name }}
</button>
<button *ngIf="user.profile_name == undefined" mat-button (click)="dialog.openProfile(user)">
<button *ngIf="user.profile_name == undefined" mat-button (click)="profileDialog.open(user)">
Profile
</button>
<button mat-raised-button color="accent" (click)="userService.logout()">
......
......@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import { IdpService } from '../idp.service';
import { DialogService } from '../dialogues/dialog.service';
import { ProfileDialogService } from '../dialogues/profile-dialog.service';
import { IdP } from '../types/types.module';
@Component({
......@@ -20,6 +21,7 @@ export class HeaderComponent implements OnInit {
constructor(
private idpService: IdpService,
public dialog: DialogService,
public profileDialog: ProfileDialogService,
public userService: UserService,
) {
this.idps$ = this.idpService.subscribeIdps();
......
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