Merge pull request #119 from sourcefuse/GH-118

feat(arc-saas): integrate keycloak login

Author: yeshamavani

projects/arc-lib/src/lib/core/auth/auth.service.ts

@@ -1,7 +1,7 @@
-import { HttpHeaders } from '@angular/common/http';
-import { Inject, Injectable } from '@angular/core';
-import { Router } from '@angular/router';
-import { APP_CONFIG } from '@project-lib/app-config';
+import {HttpHeaders} from '@angular/common/http';
+import {Inject, Injectable} from '@angular/core';
+import {Router} from '@angular/router';
+import {APP_CONFIG} from '@project-lib/app-config';
 
 import {
   CoreAuthModule,
@@ -18,20 +18,20 @@ import {
   GetTokenCommand,
   GetCurrentUserCommand,
 } from '@project-lib/core/auth';
-import { SignUpAdapter } from '@project-lib/core/auth/adapters/signup-adapter.service';
-import { CreateExternalUserCommand } from '@project-lib/core/auth/commands/create-external-user.command';
-import { CreateTokenCommand } from '@project-lib/core/auth/commands/create-token.command';
+import {SignUpAdapter} from '@project-lib/core/auth/adapters/signup-adapter.service';
+import {CreateExternalUserCommand} from '@project-lib/core/auth/commands/create-external-user.command';
+import {CreateTokenCommand} from '@project-lib/core/auth/commands/create-token.command';
 import {
   AuthTokenSkipHeader,
   ErrToastSkipHeader,
 } from '@project-lib/core/constants';
-import { IAnyObject } from '@project-lib/core/i-any-object';
+import {IAnyObject} from '@project-lib/core/i-any-object';
 import {
   AnyAdapter,
   ApiService,
   UserSessionStoreService,
 } from '@project-lib/core/index';
-import { NgxPermissionsService } from 'ngx-permissions';
+import {NgxPermissionsService} from 'ngx-permissions';
 import {
   Observable,
   switchMap,
@@ -66,7 +66,7 @@ export class AuthService {
     private readonly anyAdapter: AnyAdapter,
     private readonly permissionsService: NgxPermissionsService,
     @Inject(APP_CONFIG) private readonly appConfig: IAnyObject,
-  ) { }
+  ) {}
 
   public isLoggedIn(): Observable<boolean> {
     return this.currentUser().pipe(
@@ -342,8 +342,26 @@ export class AuthService {
       }),
     );
   }
+  loginViaKeycloak(): void {
+    const form = document.createElement('form');
+    form.method = 'POST';
+    form.action = `${this.appConfig.baseApiUrl}${this.appConfig.authServiceUrl}/auth/keycloak`;
+    form.style.display = 'none';
 
+    const clientId = document.createElement('input');
+    clientId.type = 'hidden';
+    clientId.name = 'client_id';
+    clientId.value = this.appConfig.clientId;
+    form.appendChild(clientId);
 
+    const clientSecret = document.createElement('input');
+    clientSecret.type = 'hidden';
+    clientSecret.name = 'client_secret';
+    clientSecret.value = this.appConfig.publicKey;
+    form.appendChild(clientSecret);
+    document.body.appendChild(form);
+    form.submit();
+  }
   loginViaCognito(): void {
     const form = document.createElement('form');
     form.method = 'POST';
@@ -380,7 +398,7 @@ export class AuthService {
     const clientSecret = document.createElement('input');
     clientSecret.type = 'hidden';
     clientSecret.name = 'logout_uri';
-    clientSecret.value = this.appConfig.publicKey;;
+    clientSecret.value = this.appConfig.publicKey;
     form.appendChild(clientSecret);
     document.body.appendChild(form);
     form.submit();

projects/saas-ui/src/app/shared/auth/login/login.component.html

@@ -14,15 +14,27 @@ <h2 class="head-wrapper">Multi Tenancy SaaS Application</h2>
 
       <!-- Social login button -->
       <div class="btn">
-        <button
-          class="btn-wrapper"
-          nbButton
-          size="medium"
-          shape="round"
-          (click)="loginViaCognito()"
-        >
-          Sign In with Amazon Cognito
-        </button>
+        <div class="idp-wrapper">
+          <button
+            class="btn-wrapper"
+            nbButton
+            size="medium"
+            shape="round"
+            (click)="loginViaCognito()"
+          >
+            Sign In with Amazon Cognito
+          </button>
+          <button
+            class="btn-wrapper"
+            nbButton
+            size="medium"
+            shape="round"
+            (click)="loginViaKeycloak()"
+          >
+            Sign In with Keycloak
+          </button>
+        </div>
+
         <p>OR</p>
         <button
           nbButton
@@ -31,7 +43,7 @@ <h2 class="head-wrapper">Multi Tenancy SaaS Application</h2>
           shape="round"
           (click)="withoutLogin()"
         >
-          Registration
+          Sign Up
         </button>
       </div>
     </div>

projects/saas-ui/src/app/shared/auth/login/login.component.scss

@@ -55,6 +55,16 @@
   width: 25px;
 }
 .btn{
+  .idp-wrapper {
+    display: inline-grid;
+    grid-gap: 15px; 
+
+    @media (max-width: 575px) {
+      display: flex;            
+      flex-direction: column;    
+      align-items: center;        
+    }
+  }
   .btn-wrapper{
   color: #ffffff !important;
   background: #f00a18 !important;

projects/saas-ui/src/app/shared/auth/login/login.component.ts

@@ -63,6 +63,9 @@ export class LoginComponent extends RouteComponentBaseDirective {
     this.authService.loginViaCognito();
   }
 
+  loginViaKeycloak() {
+    this.authService.loginViaKeycloak();
+  }
   withoutLogin() {
     this.router.navigate(['/tenant/add-lead']);
   }