just some design stuff

src/app/about/about.component.html

 <div class="page-body">
-  <div class="sheetofpaper">
-    <div class="intro-main">
-      <p>Das <a href="http://www.iqb.hu-berlin.de" target="_blank">Institut zur Qualitätsentwicklung im Bildungswesen</a>
-      betreibt auf diesen Seiten eine Pilotanwendung für das computerbasierte Leistungstesten von
-      Schülerinnen und Schülern. Der Zugang zu einem Test ist nur möglich, wenn Sie von Testverantwortlichen
-      Zugangsdaten erhalten haben. Es sind keine weiteren Seiten öffentlich verfügbar.</p>
+  <div fxLayout="row" fxLayoutAlign="center start">
+    <mat-card fxFlex="0 2 500px">
+      <mat-card-title>IQB-Testcenter - Impressum/Datenschutz</mat-card-title>
 
-      <p>Die mit diesem Testsystem erhobenen Daten sind vertraulich und enthalten grundsätzlich keinen direkten
-        Personenbezug. Es werden z. B. nie Namen gespeichert. Um Auskünfte zu einer bestimmten Studie
-        zu erhalten, wenden Sie sich bitte an das <a href="mailto:mechtel@iqb.hu-berlin.de?subject=Zum%20IQB-Testsystem">
-        IQB</a>. Wir benötigen dazu den ungefähren Testzeitraum und das Bundesland, in dem die Studie
-        durchgeführt wurde.</p>
+      <!-- - - - - - - - - - - - - - - - - -->
+      <mat-card-content>
+        <p>Das <a href="http://www.iqb.hu-berlin.de" target="_blank">Institut zur Qualitätsentwicklung im Bildungswesen</a>
+        betreibt auf diesen Seiten eine Pilotanwendung für das computerbasierte Leistungstesten von
+        Schülerinnen und Schülern. Der Zugang zu einem Test ist nur möglich, wenn Sie von Testverantwortlichen
+        Zugangsdaten erhalten haben. Es sind keine weiteren Seiten öffentlich verfügbar.</p>
 
-      <!--<tc-statustext></tc-statustext>-->
+        <p>Die mit diesem Testsystem erhobenen Daten sind vertraulich und enthalten grundsätzlich keinen direkten
+          Personenbezug. Es werden z. B. nie Namen gespeichert. Um Auskünfte zu einer bestimmten Studie
+          zu erhalten, wenden Sie sich bitte an das <a href="mailto:mechtel@iqb.hu-berlin.de?subject=Zum%20IQB-Testsystem">
+          IQB</a>. Wir benötigen dazu den ungefähren Testzeitraum und das Bundesland, in dem die Studie
+          durchgeführt wurde.</p>
 
-      <ul>
-        <li>Programmname: {{ appName }}</li>
-        <li>Programmversion: {{ appVersion }}</li>
-        <li>Copyright: {{ appPublisher }}</li>
-      </ul>
+        <!--<tc-statustext></tc-statustext>-->
 
-      <p>
-          <em>Postanschrift:</em><br/>
-          Humboldt-Universität zu Berlin<br/>
-          Institut zur Qualitätsentwicklung im Bildungswesen<br/>
-          Unter den Linden 6<br/>
-          10099 Berlin</p>
-      <p>
-          <em>Sitz:</em><br/>
-          Luisenstr. 56<br/>
-          10117 Berlin<br/>
-          Tel: +49 [30] 2093 - 46500 (Zentrale)<br/>
-          Fax: +49 [30] 2093 - 46599<br/>
-          E-Mail: <a href="mailto:iqboffice@iqb.hu-berlin.de">iqboffice@iqb.hu-berlin.de</a>
-      </p>
-      <p>
-          <em>Name und Anschrift der Datenschutzbeauftragten</em><br/>
-          Frau Gesine Hoffmann-Holland<br/>
-          Tel: +49 (30) 2093-2591<br/>
-          E-Mail: datenschutz@uv.hu-berlin.de<br/>
-          <a href="http://www.hu-berlin.de/de/datenschutz" target="_blank">www.hu-berlin.de/de/datenschutz</a>
-      </p>
-    </div>
+        <ul>
+          <li>Programmname: {{ appName }}</li>
+          <li>Programmversion: {{ appVersion }}</li>
+          <li>Copyright: {{ appPublisher }}</li>
+        </ul>
+
+        <p>
+            <em>Postanschrift:</em><br/>
+            Humboldt-Universität zu Berlin<br/>
+            Institut zur Qualitätsentwicklung im Bildungswesen<br/>
+            Unter den Linden 6<br/>
+            10099 Berlin</p>
+        <p>
+            <em>Sitz:</em><br/>
+            Luisenstr. 56<br/>
+            10117 Berlin<br/>
+            Tel: +49 [30] 2093 - 46500 (Zentrale)<br/>
+            Fax: +49 [30] 2093 - 46599<br/>
+            E-Mail: <a href="mailto:iqboffice@iqb.hu-berlin.de">iqboffice@iqb.hu-berlin.de</a>
+        </p>
+        <p>
+            <em>Name und Anschrift der Datenschutzbeauftragten</em><br/>
+            Frau Gesine Hoffmann-Holland<br/>
+            Tel: +49 (30) 2093-2591<br/>
+            E-Mail: datenschutz@uv.hu-berlin.de<br/>
+            <a href="http://www.hu-berlin.de/de/datenschutz" target="_blank">www.hu-berlin.de/de/datenschutz</a>
+        </p>
+      </mat-card-content>
+    </mat-card>
   </div>
 </div>

src/app/about/about.component.ts

@@ -15,6 +15,6 @@ export class AboutComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.lds.pageTitle$.next('IQB-Testcenter - Impressum/Datenschutz');
+    this.lds.pageTitle$.next('');
   }
 }

src/app/app.module.ts

@@ -6,7 +6,8 @@ import { NgModule, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatTooltipModule, MatCardModule,
-  MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatTabsModule } from '@angular/material';
+  MatToolbarModule, MatIconModule, MatDialogModule, MatFormFieldModule, MatInputModule,
+  MatTabsModule, MatProgressSpinnerModule } from '@angular/material';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -37,6 +38,7 @@ import { ErrormsgComponent } from './errormsg/errormsg.component';
     MatTooltipModule,
     MatDialogModule,
     MatTabsModule,
+    MatProgressSpinnerModule,
     MatCardModule,
     FlexLayoutModule,
     ReactiveFormsModule,

src/app/start/start.component.css

 p.booklet_title {
-  font-size: 10pt;
+  font-size: 16pt;
   margin-bottom: 0px;
   height: 24px;
 }
@@ -12,6 +12,9 @@ p.booklet_status {
   margin-bottom: 18px;
 }
 
+.mat-card {
+  margin: 10px;
+}
 .status {
-  background-color: grey;
+  background-color: lightgrey;
 }

src/app/start/start.component.html

 <div class="page-body">
-  <div fxLayout="row" fxLayoutAlign="center stretch" fxLayoutGap="30px" style="padding: 30px;">
+    <div class="spinner-container" *ngIf="dataLoading">
+      <mat-spinner></mat-spinner>
+    </div>
+    <div fxLayout="row wrap" fxLayoutAlign="center stretch" style="padding: 30px;">
 
 
     <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
-    <mat-card fxFlex="350px" fxLayout="column" *ngIf="showLoginForm">
+    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="showLoginForm">
       <!-- - - - - - - - - - - - - - - - - -->
       <mat-card-title>Anmelden</mat-card-title>
       <mat-card-content>
@@ -22,7 +25,7 @@
     </mat-card>
 
     <!-- - - - - - - - - - - - - - - - - -->
-    <mat-card fxFlex="350px" fxLayout="column" *ngIf="showCodeForm">
+    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="showCodeForm">
       <mat-card-title>Anmelden</mat-card-title>
       <mat-card-content>
         <form [formGroup]="codeinputform" (ngSubmit)="codeinput()" *ngIf="" fxLayout="column">
@@ -33,40 +36,47 @@
       </mat-card-content>
       <mat-card-actions>
         <button mat-raised-button type="submit" [disabled]="codeinputform.invalid" color="primary">Weiter</button>
-      </mat-card-actions>
+        <button mat-raised-button color="foreground" (click)="changeLogin()">Test-Anmeldung ändern</button>
+    </mat-card-actions>
     </mat-card>
 
     <!-- - - - - - - - - - - - - - - - - -->
-    <mat-card fxFlex="350px" fxLayout="column" *ngIf="showBookletButtons">
+    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="showBookletButtons">
       <mat-card-title>Bitte wählen</mat-card-title>
       <mat-card-content>
         <div fxLayout="row" fxLayoutGap="10px" fxLayout="column">
           <p *ngIf="bookletlist.length === 0">
             Für diese Anmeldung wurde kein Test gefunden.
           </p>
-          <button mat-raised-button class="bookletselectbutton" (click)="buttonStartTest(b)"
+          <button mat-raised-button color="primary" (click)="buttonStartTest(b)"
             [disabled]="!b.isEnabled" *ngFor="let b of bookletlist">
               <p class="booklet_title">{{b.label}}</p>
               <p class="booklet_status">{{b.statustxt}}</p>
           </button>
         </div>
       </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="foreground" (click)="changeLogin()">Test-Anmeldung ändern</button>
+        <button mat-raised-button color="foreground" *ngIf="validCodes.length > 1" (click)="changeCode()">Personen-Code ändern</button>
+      </mat-card-actions>
     </mat-card>
 
     <!-- - - - - - - - - - - - - - - - - -->
-    <mat-card fxFlex="350px" fxLayout="column" *ngIf="showTestRunningButtons">
-      <mat-card-title>Bitte Testheft wählen</mat-card-title>
+    <mat-card fxFlex="0 0 400px" fxLayout="column" *ngIf="showTestRunningButtons">
+      <mat-card-title>Ein Testheft ist gestartet</mat-card-title>
       <mat-card-content>
         <div fxLayout="column" fxLayoutGap="20px">
           <button mat-raised-button color="primary" [routerLink]="['/t']">Zum Test zurückkehren</button>
           <button mat-raised-button color="primary" (click)="buttonEndTest()">{{ testEndButtonText }}</button>
+          <button mat-raised-button color="foreground" (click)="changeLogin()">Test-Anmeldung ändern</button>
+          <button mat-raised-button color="foreground" *ngIf="validCodes.length > 1" (click)="changeCode()">Personen-Code ändern</button>
         </div>
       </mat-card-content>
     </mat-card>
 
     <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
     <!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
-    <mat-card fxFlex="30%" fxLayout="column" class="status">
+    <mat-card fxFlex="0 2 400px" fxLayout="column" class="status">
       <mat-card-title>IQB-Testcenter</mat-card-title>
 
       <!-- - - - - - - - - - - - - - - - - -->
@@ -114,9 +124,6 @@
 
       </mat-card-content>
       <mat-card-actions>
-        <button mat-raised-button color="foreground" *ngIf="!showLoginForm" (click)="changeLogin()">Test-Anmeldung ändern</button>
-        <button mat-raised-button color="foreground" *ngIf="validCodes.length > 1" (click)="changeCode()">Personen-Code ändern</button>
-        <p *ngIf="!showLoginForm || validCodes.length > 1">&nbsp;</p>
         <button mat-raised-button color="foreground" [routerLink]="['/about']">Impressum/Datenschutz</button>
       </mat-card-actions>
     </mat-card>

src/app/start/start.component.ts

@@ -13,6 +13,8 @@ import { FormGroup, FormBuilder, FormArray, FormControl, Validators, ReactiveFor
   styleUrls: ['./start.component.css']
 })
 export class StartComponent implements OnInit {
+  private dataLoading = false;
+
   // for template
   private showLoginForm = true;
   private loginStatusText = ['nicht angemeldet'];
@@ -99,11 +101,13 @@ export class StartComponent implements OnInit {
 
   // # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
   testtakerlogin() {
+    this.dataLoading = true;
     this.bs.login(this.testtakerloginform.get('testname').value, this.testtakerloginform.get('testpw').value).subscribe(
       loginTokenUntyped => {
         if (loginTokenUntyped instanceof ServerError) {
           const e = loginTokenUntyped as ServerError;
           this.lds.globalErrorMsg$.next(e);
+          this.dataLoading = false;
           // no change in other data
         } else {
           this.validCodes = [];
@@ -152,6 +156,7 @@ export class StartComponent implements OnInit {
                   this.bookletlist = this.getStartButtonData();
                 }
               }
+              this.dataLoading = false;
             });
           }
       }