Commit d3d8ddb1 authored by Lukas Burgey's avatar Lukas Burgey

Restructure login component

parent 17af6f10
...@@ -24,10 +24,9 @@ import {SharedModule} from './shared/shared.module'; ...@@ -24,10 +24,9 @@ import {SharedModule} from './shared/shared.module';
// declarations // declarations
import {AppComponent} from './app.component'; import {AppComponent} from './app.component';
import {BodyComponent} from './body/body.component'; import {BodyComponent} from './body/body.component';
import {LoginComponent} from './login/login.component';
import {ServiceComponent} from './service/service.component'; import {ServiceComponent} from './service/service.component';
import { HeaderComponent } from './header/header.component'; import {HeaderComponent} from './header/header.component';
import { FooterComponent } from './footer/footer.component'; import {FooterComponent} from './footer/footer.component';
@NgModule({ @NgModule({
...@@ -50,7 +49,6 @@ import { FooterComponent } from './footer/footer.component'; ...@@ -50,7 +49,6 @@ import { FooterComponent } from './footer/footer.component';
HeaderComponent, HeaderComponent,
BodyComponent, BodyComponent,
FooterComponent, FooterComponent,
LoginComponent,
ServiceComponent, ServiceComponent,
], ],
providers: [ providers: [
......
.body {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}
<div *ngIf="userService.loggedIn()" class="mat-typography" style="margin: 30px 20px 0px 20px;"> <div class="body">
<div style="padding-bottom: 30px;"> <div *ngIf="userService.loggedIn()" class="mat-typography">
<h2>Services</h2> <div style="padding-bottom: 30px;">
<mat-accordion *ngIf="userService.services.length > 0"> <h2>Services</h2>
<app-service *ngFor="let service of userService.services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service> <mat-accordion *ngIf="userService.services.length > 0">
</mat-accordion> <app-service *ngFor="let service of userService.services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service>
<p *ngIf="userService.services.length === 0"> </mat-accordion>
You have no available services.<br/> <p *ngIf="userService.services.length === 0">
This is due services requiring users to be member of a certain group. You have no available services.<br/>
</p> This is due services requiring users to be member of a certain group.
</div> </p>
<div *ngIf="userService.groupsParsed" style="padding-bottom: 30px;"> </div>
<h2>Virtual Organisations</h2> <div *ngIf="userService.groupsParsed" style="padding-bottom: 30px;">
<mat-accordion *ngIf="userService.groupMap.size > 0"> <h2>Virtual Organisations</h2>
<div *ngFor="let group of userService.groupMap.keys()"> <mat-accordion *ngIf="userService.groupMap.size > 0">
<h3>{{ group.name }}</h3> <div *ngFor="let group of userService.groupMap.keys()">
<p *ngFor="let service of userService.groupMap.get(key)"> <h3>{{ group.name }}</h3>
{{ service | json }} <p *ngFor="let service of userService.groupMap.get(key)">
</p> {{ service | json }}
</div> </p>
</mat-accordion> </div>
<p *ngIf="userService.groupMap.size == 0"> </mat-accordion>
You are not a member in any groups. <p *ngIf="userService.groupMap.size == 0">
</p> You are not a member in any groups.
</p>
</div>
</div> </div>
</div> </div>
.header-bar {
width: 100%;
}
.header-bar>* {
float: right;
}
...@@ -3,6 +3,35 @@ ...@@ -3,6 +3,35 @@
<h1> <h1>
Federated User Credential Deployment Portal Federated User Credential Deployment Portal
</h1> </h1>
<app-login></app-login> <div class="header-bar">
<span *ngIf="userService.loggedIn() ? false : true">
<form *ngIf="idps"
(ngSubmit)="userService.login(selectedIdP)" #loginForm="ngForm">
<mat-form-field>
<mat-select name="idp" required [(ngModel)]="selectedIdP">
<mat-option *ngFor="let idp of idps" [value]="idp">
{{ idp.name }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button [disabled]="!loginForm.form.valid" color="accent" type="submit">Login</button>
</form>
</span>
<span *ngIf="userService.loggedIn()">
<button mat-button mat-icon-button (click)="dialog.openAccount()">
<mat-icon>settings</mat-icon>
</button>
<button mat-button mat-icon-button (click)="dialog.openSshKeys()">
<mat-icon>vpn_key</mat-icon>
</button>
<button *ngIf="userService.user != null" mat-button (click)="dialog.openProfile()">
{{ userService.user?.email }}
</button>
<button *ngIf="userService.user == null" mat-button (click)="dialog.openProfile()">
Profile
</button>
<button mat-raised-button color="accent" (click)="userService.logout()">Logout</button>
</span>
</div>
</mat-toolbar-row> </mat-toolbar-row>
</mat-toolbar> </mat-toolbar>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { AllAuthInfo, IdP } from '../types/types.module';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrls: ['./header.component.css'] styleUrls: ['./header.component.css']
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
public idps: IdP[];
public selectedIdP: IdP;
constructor() { } constructor(
public userService: UserService,
) {
if (!userService.loggedIn()) {
this.userService.getIdPPreference().subscribe(
(allAuthInfo: AllAuthInfo) => {
if (allAuthInfo === null) {
return;
}
this.idps = allAuthInfo.idps;
this.selectedIdP = allAuthInfo.selected;
}
);
}
}
ngOnInit() { ngOnInit() {
} }
} }
:host {
width: 100%;
}
:host>* {
float: right;
}
<div>
<span *ngIf="userService.loggedIn() ? false : true">
<form *ngIf="idps"
(ngSubmit)="userService.login(selectedIdP)" #loginForm="ngForm">
<mat-form-field>
<mat-select name="idp" required [(ngModel)]="selectedIdP">
<mat-option *ngFor="let idp of idps" [value]="idp">
{{ idp.name }}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button [disabled]="!loginForm.form.valid" color="accent" type="submit">Login</button>
</form>
</span>
<span *ngIf="userService.loggedIn()">
<button mat-button mat-icon-button (click)="dialog.openAccount()">
<mat-icon>settings</mat-icon>
</button>
<button mat-button mat-icon-button (click)="dialog.openSshKeys()">
<mat-icon>vpn_key</mat-icon>
</button>
<button *ngIf="userService.user != null" mat-button (click)="dialog.openProfile()">
{{ userService.user?.email }}
</button>
<button *ngIf="userService.user == null" mat-button (click)="dialog.openProfile()">
Profile
</button>
<button mat-raised-button color="accent" (click)="userService.logout()">Logout</button>
</span>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LoginComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
import { DialogService } from '../dialogues/dialog.service';
import { UserService } from '../user.service';
import { AllAuthInfo, IdP } from '../types/types.module';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
private profileDialog;
public idps: IdP[];
public selectedIdP: IdP;
constructor(
public userService: UserService,
public dialog: DialogService,
) {
if (!userService.loggedIn()) {
this.userService.getIdPPreference().subscribe(
(allAuthInfo: AllAuthInfo) => {
if (allAuthInfo === null) {
return;
}
this.idps = allAuthInfo.idps;
this.selectedIdP = allAuthInfo.selected;
}
);
}
}
}
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