Restructure login component

src/app/app.module.ts

@@ -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

+
+.body {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	margin-left: 50px;
+	margin-right: 50px;
+}

src/app/body/body.component.html

-<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

+
+.header-bar {
+	width: 100%;
+}
+
+.header-bar>* {
+	float: right;
+}

src/app/header/header.component.html

@@ -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

 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

-
-:host {
-	width: 100%;
-}
-
-:host>* {
-	float: right;
-}

src/app/login/login.component.html

-<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

-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

-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;
-        }
-      );
-    }
-  }
-}