Add SSO buttons to login dialog

SSO login buttons are dynamically added based on the authentication
provider config received from backend API.

src/app/components/shared/login/login.component.html

@@ -25,6 +25,9 @@
   <button id="focus_button_user" class="login" mat-flat-button type="submit" aria-labelledby="login-description">
     {{ 'login.login' | translate }}
   </button>
+  <button *ngFor="let provider of ssoProviders" (click)="loginViaSso(provider.id)" class="sso" mat-flat-button type="button">
+    {{ 'login.login-with' | translate }} {{ provider.title }}
+  </button>
   <button id="focus_button_guest" (click)="guestLogin()" class="guest" mat-flat-button type="button" aria-labelledby="guest-login-description"
           matTooltip="{{'login.guest-login-tooltip' | translate}}">
     {{ 'login.guest-login' | translate }}

src/app/components/shared/login/login.component.ts

@@ -10,6 +10,7 @@ import { UserActivationComponent } from '../../home/_dialogs/user-activation/use
 import { PasswordResetComponent } from '../../home/_dialogs/password-reset/password-reset.component';
 import { RegisterComponent } from '../../home/_dialogs/register/register.component';
 import { EventService } from '../../../services/util/event.service';
+import { AuthenticationProviderType } from '../../../models/api-config';
 
 export class LoginErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -42,6 +43,7 @@ export class LoginComponent implements OnInit, OnChanges {
               public notificationService: NotificationService,
               public dialog: MatDialog,
               public eventService: EventService,
+              private apiConfigService: ApiConfigService,
               @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
@@ -64,6 +66,16 @@ export class LoginComponent implements OnInit, OnChanges {
     }
   }
 
+  get ssoProviders() {
+    return this.providers(AuthenticationProviderType.SSO);
+  }
+
+  providers(type?: AuthenticationProviderType) {
+    return (type != null)
+        ? this.apiConfigService.getAuthProviders().filter((p) => p.type === type)
+        : this.apiConfigService.getAuthProviders();
+  }
+
   activateUser(): void {
     this.dialog.open(UserActivationComponent, {
       width: '350px',
@@ -97,6 +109,10 @@ export class LoginComponent implements OnInit, OnChanges {
     this.authenticationService.guestLogin(this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful));
   }
 
+  loginViaSso(providerId: string): void {
+    this.authenticationService.loginViaSso(providerId, this.role).subscribe(loginSuccessful => this.checkLogin(loginSuccessful));
+  }
+
   private checkLogin(loginSuccessful: string) {
     if (loginSuccessful === 'true') {
       this.translationService.get('login.login-successful').subscribe(message => {

src/assets/i18n/home/de.json

@@ -109,6 +109,7 @@
     "header": "Anmelden",
     "input-incorrect": "Bitte prüfe deine Eingaben.",
     "login": "Anmelden mit Konto",
+    "login-with": "Anmelden mit",
     "login-data-incorrect": "Benutzername oder Passwort falsch",
     "login-description": "Mit den eingegebenen Kontodaten anmelden",
     "login-successful": "Anmeldung erfolgreich",

src/assets/i18n/home/en.json

@@ -111,6 +111,7 @@
     "header": "Log in",
     "input-incorrect": "Please check your data.",
     "login": "Log in with account",
+    "login-with": "Log in with",
     "login-data-incorrect": "Username or password incorrect",
     "login-description": "Log in with the entered account data",
     "login-successful": "Login successful",