Skip to content

GitLab

Commit d3d8ddb1 authored by Lukas Burgey's avatar Lukas Burgey
Browse files
Options

Restructure login component

parent 17af6f10
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 127 deletions
src/app/app.module.ts
View file @ d3d8ddb1
......@@ -24,10 +24,9 @@ import {SharedModule} from './shared/shared.module';
// declarations
import {AppComponent} from './app.component';
import {BodyComponent} from './body/body.component';
import {LoginComponent} from './login/login.component';
import {ServiceComponent} from './service/service.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import {HeaderComponent} from './header/header.component';
import {FooterComponent} from './footer/footer.component';
@NgModule({
......@@ -50,7 +49,6 @@ import { FooterComponent } from './footer/footer.component';
HeaderComponent,
BodyComponent,
FooterComponent,
LoginComponent,
ServiceComponent,
],
providers: [
......
src/app/body/body.component.css
View file @ d3d8ddb1
.body {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}
src/app/body/body.component.html
View file @ d3d8ddb1
<div *ngIf="userService.loggedIn()" class="mat-typography" style="margin: 30px 20px 0px 20px;">
<div style="padding-bottom: 30px;">
<h2>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>
<div *ngIf="userService.groupsParsed" style="padding-bottom: 30px;">
<h2>Virtual Organisations</h2>
<mat-accordion *ngIf="userService.groupMap.size > 0">
<div *ngFor="let group of userService.groupMap.keys()">
<h3>{{ group.name }}</h3>
<p *ngFor="let service of userService.groupMap.get(key)">
{{ service | json }}
</p>
</div>
</mat-accordion>
<p *ngIf="userService.groupMap.size == 0">
You are not a member in any groups.
</p>
<div class="body">
<div *ngIf="userService.loggedIn()" class="mat-typography">
<div style="padding-bottom: 30px;">
<h2>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>
<div *ngIf="userService.groupsParsed" style="padding-bottom: 30px;">
<h2>Virtual Organisations</h2>
<mat-accordion *ngIf="userService.groupMap.size > 0">
<div *ngFor="let group of userService.groupMap.keys()">
<h3>{{ group.name }}</h3>
<p *ngFor="let service of userService.groupMap.get(key)">
{{ service | json }}
</p>
</div>
</mat-accordion>
<p *ngIf="userService.groupMap.size == 0">
You are not a member in any groups.
</p>
</div>
</div>
</div>
src/app/header/header.component.css
View file @ d3d8ddb1
.header-bar {
width: 100%;
}
.header-bar>* {
float: right;
}
src/app/header/header.component.html
View file @ d3d8ddb1
......@@ -3,6 +3,35 @@
<h1>
Federated User Credential Deployment Portal
</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>
src/app/header/header.component.ts
View file @ d3d8ddb1
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { AllAuthInfo, IdP } from '../types/types.module';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
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() {
}
}
src/app/login/login.component.css deleted 100644 → 0
View file @ 17af6f10
:host {
width: 100%;
}
:host>* {
float: right;
}
src/app/login/login.component.html deleted 100644 → 0
View file @ 17af6f10
<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>
src/app/login/login.component.spec.ts deleted 100644 → 0
View file @ 17af6f10
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();
});
});
src/app/login/login.component.ts deleted 100644 → 0
View file @ 17af6f10
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