[ADF-2795] SSO implicitflow (#3332)

* Enable OAUTH2

* Create SSO services

* SSO improvements

* Rollback sso login change

* Add SSO configuration from Setting component

* Refactoring

* Remove login ECM/BPM toggle and move use the userpreference instead of store

* fix host setting unit test

* Fix unit test missing instance

* use the Js api oauth

* add logout component and clean sso not used class

* fix dependencies cicle

* add translation settings

* fix style setting page

* clean

* JS APi should receive the oauth config from the userPreference and not from the config file

* change login if SSO is present

* missing spaces

* add sso test in login component

* add logout directive new properties test

* Improve host setting and remove library reference

* fix login test

* Remove unused code

* Fix authentication unit test

* fix authguard unit test

* fix csrf check login component

* fix unit test core and demo shell

* remove

lib/core/settings/host-settings.component.html

@@ -1,70 +1,97 @@
 <div class="adf-setting-container">
-    <div class="adf-setting-card-padding"></div>
     <mat-toolbar color="primary" class="adf-setting-toolbar">
         <h3>{{'CORE.HOST_SETTINGS.TITLE' | translate}}</h3>
     </mat-toolbar>
-
     <mat-card class="adf-setting-card">
-        <div *ngIf="providers==='ALL' || providers==='ECM'">
-            <mat-card-header>
-                <mat-card-subtitle>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                <mat-form-field class="full-width">
-                    <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
-                    <input matInput
-                           [formControl]="urlFormControlEcm"
-                           data-automation-id="ecmHost"
-                           type="text"
-                           (change)="onChangeECMHost($event)"
-                           tabindex="2"
-                           id="ecmHost"
-                           value="{{ecmHost}}"
-                           placeholder="http(s)://host|ip:port(/path)">
-                    <mat-error *ngIf="urlFormControlEcm.hasError('pattern')">
-                        {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
-                    </mat-error>
-                </mat-form-field>
-                <p>
-            </mat-card-content>
-        </div>
-        <p>
-        <div *ngIf="providers==='ALL' || providers==='BPM'">
-            <mat-card-header>
-                <mat-card-subtitle>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
+        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)">
+            <mat-form-field>
+                <mat-select placeholder="Provider" [formControl]="providers">
+                    <mat-option *ngFor="let provider of providersValues" [value]="provider.value">
+                        {{ provider.title }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
 
-                <mat-form-field class="full-width">
-                    <mat-icon class="adf-CORE.HOST_SETTINGS-link-icon" matPrefix>link</mat-icon>
-                    <input matInput
-                           [formControl]="urlFormControlBpm"
-                           data-automation-id="bpmHost"
-                           type="text"
-                           (change)="onChangeBPMHost($event)"
-                           tabindex="2"
-                           id="bpmHost"
-                           value="{{bpmHost}}"
-                           placeholder="http(s)://host|ip:port(/path)">
-                    <mat-error *ngIf="urlFormControlBpm.hasError('pattern')">
-                        {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
-                    </mat-error>
-                </mat-form-field>
-            </mat-card-content>
-        </div>
-        <mat-card-actions class="adf-CORE.HOST_SETTINGS-actions">
+            <ng-container *ngIf="isALL() || isECM()">
+                <mat-card-content>
+                    <mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}" >
+                        <mat-label>{{'CORE.HOST_SETTINGS.CS-HOST' | translate }}</mat-label>
+                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" tabindex="2" id="ecmHost" placeholder="http(s)://host|ip:port(/path)">
+                        <mat-error *ngIf="ecmHost.hasError('pattern')">
+                            {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
+                        </mat-error>
+                        <mat-error *ngIf="ecmHost.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <p>
+                </mat-card-content>
+            </ng-container>
 
-            <button mat-button onclick="window.history.back()" color="primary">
-                {{'CORE.HOST_SETTINGS.BACK' | translate }}
-            </button>
+            <ng-container *ngIf="isALL() || isOAUTH() || isBPM()">
+                <mat-card-content>
+                    <mat-form-field class="full-width" floatLabel="{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}">
+                        <mat-label>{{'CORE.HOST_SETTINGS.BP-HOST' | translate }}</mat-label>
+                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" tabindex="2" id="bpmHost" placeholder="http(s)://host|ip:port(/path)">
+                        <mat-error *ngIf="bpmHost.hasError('pattern')">
+                            {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
+                        </mat-error>
+                        <mat-error *ngIf="bpmHost.hasError('required')">
+                            {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                        </mat-error>
+                    </mat-form-field>
+                    <ng-container *ngIf="isOAUTH()">
+                    <div formGroupName="oauthConfig">
+                        <mat-form-field class="full-width" floatLabel="Auth Host">
+                            <mat-label>Auth Host</mat-label>
+                            <input matInput name="host" id="oauthHost" formControlName="host" placeholder="http(s)://host|ip:port(/path)" >
+                            <mat-error *ngIf="host.hasError('pattern')">
+                                {{ 'CORE.HOST_SETTINGS.NOT_VALID'| translate }}
+                            </mat-error>
+                            <mat-error *ngIf="host.hasError('required')">
+                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                            </mat-error>
+                        </mat-form-field>
+                        <mat-form-field class="full-width" floatLabel="Client Id">
+                            <mat-label>{{ 'CORE.HOST_SETTINGS.CLIENT'| translate }}d</mat-label>
+                            <input matInput name="clientId" id="clientId" formControlName="clientId" placeholder="Client Id">
+                            <mat-error *ngIf="clientId.hasError('required')">
+                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                            </mat-error>
+                        </mat-form-field>
 
-            <button mat-raised-button (click)="save($event)"
-                    [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')"
-                    color="primary">
-                {{'CORE.HOST_SETTINGS.APPLY' | translate }}
-            </button>
+                        <mat-form-field class="full-width" floatLabel="Scope">
+                            <mat-label>{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}</mat-label>
+                            <input matInput name="{{ 'CORE.HOST_SETTINGS.SCOPE'| translate }}" formControlName="scope" placeholder="Scope Id">
+                            <mat-error *ngIf="scope.hasError('required')">
+                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                            </mat-error>
+                        </mat-form-field>
 
-        </mat-card-actions>
+                        <label for="silentLogin">{{ 'CORE.HOST_SETTINGS.SILENT'| translate }}</label>
+                        <mat-slide-toggle class="full-width" name="silentLogin" [color]="'primary'" formControlName="silentLogin">
+                        </mat-slide-toggle>
+
+                        <mat-form-field class="full-width" floatLabel="Redirect Uri">
+                            <mat-label>{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}</mat-label>
+                            <input matInput placeholder="{{ 'CORE.HOST_SETTINGS.REDIRECT'| translate }}" name="redirectUri" formControlName="redirectUri">
+                            <mat-error *ngIf="redirectUri.hasError('required')">
+                                {{ 'CORE.HOST_SETTINGS.REQUIRED'| translate }}
+                            </mat-error>
+                        </mat-form-field>
+                    </div>
+                    </ng-container>
+                </mat-card-content>
+            </ng-container>
+            <mat-card-actions class="adf-actions">
+                <button mat-button (click)="onCancel()" color="primary">
+                    {{'CORE.HOST_SETTINGS.BACK' | translate }}
+                </button>
+                <button type="submit" id="host-button" tabindex="4" class="adf-login-button" mat-raised-button color="primary" data-automation-id="host-button"
+                    [disabled]="!form.valid">
+                    {{'CORE.HOST_SETTINGS.APPLY' | translate }}
+                </button>
+            </mat-card-actions>
+        </form>
     </mat-card>
-    <div class="adf-setting-card-padding"></div>
 </div>

lib/core/settings/host-settings.component.scss

@@ -5,12 +5,10 @@
         height: 100%;
         align-items: center;
 
-        .adf-setting-toolbar {
-            width: 600px;
-        }
-
         .adf-setting-container {
+            width: 800px;
             display: table;
+            margin: 0 auto;
             border-collapse: collapse;
             border-spacing: 0;
         }

lib/core/settings/host-settings.component.spec.ts

@@ -19,11 +19,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HostSettingsComponent } from './host-settings.component';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreTestingModule } from '../testing/core.testing.module';
+import { UserPreferencesService } from '../services/user-preferences.service';
 
 describe('HostSettingsComponent', () => {
 
     let fixture: ComponentFixture<HostSettingsComponent>;
     let component: HostSettingsComponent;
+    let userPreferences: UserPreferencesService;
+    let element: any;
 
     setupTestBed({
         imports: [CoreTestingModule]
@@ -32,96 +35,262 @@ describe('HostSettingsComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(HostSettingsComponent);
         component = fixture.componentInstance;
+        userPreferences = TestBed.get(UserPreferencesService);
+        element = fixture.nativeElement;
     });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should emit an error when the ECM url inserted is wrong', (done) => {
-        fixture.detectChanges();
+    describe('BPM ', () => {
 
-        component.error.subscribe((message: string) => {
-            expect(message).toEqual('CORE.HOST_SETTING.CS_URL_ERROR');
-            done();
+        let ecmUrlInput;
+        let bpmUrlInput;
+
+        beforeEach(() => {
+            userPreferences.providers = 'BPM';
+            fixture.detectChanges();
+            bpmUrlInput = element.querySelector('#bpmHost');
+            ecmUrlInput = element.querySelector('#ecmHost');
         });
 
-        const ecmUrlInput = fixture.nativeElement.querySelector('#ecmHost');
-        ecmUrlInput.value = 'wrong_url';
-
-        const event: any = {};
-        event.target = ecmUrlInput;
-        component.onChangeECMHost(event);
-    });
-
-    it('should emit ecmHostChange when the ECM url inserted is correct', (done) => {
-        fixture.detectChanges();
-        const url = 'http://localhost:9999/ecm';
-        component.ecmHostChange.subscribe((message: string) => {
-            expect(message).toEqual(url);
-            done();
+        afterEach(() => {
+            fixture.destroy();
         });
 
-        const ecmUrlInput = fixture.nativeElement.querySelector('#ecmHost');
-        ecmUrlInput.value = url;
+        it('should have a valid form when the url inserted is correct', (done) => {
+            const url = 'http://localhost:9999/bpm';
 
-        const event: any = {};
-        event.target = ecmUrlInput;
-        component.onChangeECMHost(event);
-    });
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('VALID');
+                done();
+            });
 
-    it('should emit an error when the BPM url inserted is wrong', (done) => {
-        fixture.detectChanges();
+            component.form.valueChanges.subscribe((values) => {
+                expect(values.bpmHost).toEqual(url);
+            });
 
-        component.error.subscribe((message: string) => {
-            expect(message).toEqual('CORE.HOST_SETTING.PS_URL_ERROR');
-            done();
+            bpmUrlInput.value = url;
+            bpmUrlInput.dispatchEvent(new Event('input'));
         });
 
-        const bpmUrlInput: any = fixture.nativeElement.querySelector('#bpmHost');
-        bpmUrlInput.value = 'wrong_url';
+        it('should have an invalid form when the inserted is wrong', (done) => {
+            const url = 'wrong';
 
-        const event: any = {};
-        event.target = bpmUrlInput;
-        component.onChangeBPMHost(event);
-    });
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.bpmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
 
-    it('should emit bpmHostChange when the BPM url inserted is correct', (done) => {
-        fixture.detectChanges();
-        const url = 'http://localhost:9999/bpm';
-
-        component.ecmHostChange.subscribe((message: string) => {
-            expect(message).toEqual(url);
-            done();
+            bpmUrlInput.value = url;
+            bpmUrlInput.dispatchEvent(new Event('input'));
         });
 
-        const ecmUrlInput = fixture.nativeElement.querySelector('#bpmHost');
-        ecmUrlInput.value = url;
+        it('should not render the ECM url config if setting provider is BPM', () => {
+            expect(ecmUrlInput).toEqual(null);
+            expect(bpmUrlInput).toBeDefined();
+        });
 
-        const event: any = {};
-        event.target = ecmUrlInput;
-        component.onChangeECMHost(event);
     });
 
-    it('should not render the ECM url config if setting provider is BPM', () => {
-        component.providers = 'BPM';
+    describe('ECM ', () => {
 
-        fixture.detectChanges();
+        let ecmUrlInput;
+        let bpmUrlInput;
 
-        const bpmUrlInput = fixture.nativeElement.querySelector('#bpmHost');
-        const ecmUrlInput = fixture.nativeElement.querySelector('#ecmHost');
-        expect(ecmUrlInput).toEqual(null);
-        expect(bpmUrlInput).toBeDefined();
+        beforeEach(() => {
+            userPreferences.providers = 'ECM';
+            fixture.detectChanges();
+            bpmUrlInput = element.querySelector('#bpmHost');
+            ecmUrlInput = element.querySelector('#ecmHost');
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should have a valid form when the url inserted is correct', (done) => {
+            const url = 'http://localhost:9999/ecm';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('VALID');
+                done();
+            });
+
+            ecmUrlInput.value = url;
+            ecmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when the url inserted is wrong', (done) => {
+            const url = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.ecmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            ecmUrlInput.value = url;
+            ecmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should not render the BPM url config if setting provider is BPM', () => {
+            expect(bpmUrlInput).toEqual(null);
+            expect(ecmUrlInput).toBeDefined();
+        });
     });
 
-    it('should hide the BPM url config if setting provider is ECM', () => {
-        component.providers = 'ECM';
+    describe('ALL ', () => {
 
-        fixture.detectChanges();
+        let ecmUrlInput;
+        let bpmUrlInput;
+
+        beforeEach(() => {
+            userPreferences.providers = 'ALL';
+            fixture.detectChanges();
+            bpmUrlInput = element.querySelector('#bpmHost');
+            ecmUrlInput = element.querySelector('#ecmHost');
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should have a valid form when the BPM and ECM url inserted are correct', (done) => {
+            const urlEcm = 'http://localhost:9999/ecm';
+            const urlBpm = 'http://localhost:9999/bpm';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('VALID');
+                done();
+            });
+
+            ecmUrlInput.value = urlEcm;
+            bpmUrlInput.value = urlBpm;
+            ecmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when one of the ECM url inserted is wrong', (done) => {
+            const url = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.ecmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            ecmUrlInput.value = url;
+            ecmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when one of the BPM url inserted is wrong', (done) => {
+            const url = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.bpmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            bpmUrlInput.value = url;
+            bpmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when both BPM and ECM url inserted are wrong', (done) => {
+            const url = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.bpmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            bpmUrlInput.value = url;
+            ecmUrlInput.value = url;
+            bpmUrlInput.dispatchEvent(new Event('input'));
+        });
 
-        const ecmUrlInput = fixture.nativeElement.querySelector('#ecmHost');
-        const bpmUrlInput = fixture.nativeElement.querySelector('#bpmHost');
-        expect(bpmUrlInput).toEqual(null);
-        expect(ecmUrlInput).toBeDefined();
     });
+
+    describe('OAUTH ', () => {
+
+        let ecmUrlInput;
+        let bpmUrlInput;
+        let oauthHostUrlInput;
+        let clientIdInput;
+
+        beforeEach(() => {
+            userPreferences.providers = 'OAUTH';
+            userPreferences.oauthConfig = {
+                host: 'http://localhost:6543',
+                redirectUri: '/',
+                silentLogin: false,
+                implicitFlow: true,
+                clientId: 'activiti',
+                scope: 'openid',
+                secret: ''
+            };
+            fixture.detectChanges();
+            bpmUrlInput = element.querySelector('#bpmHost');
+            oauthHostUrlInput = element.querySelector('#oauthHost');
+            clientIdInput = element.querySelector('#clientId');
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should have a valid form when the BPM is correct', (done) => {
+            const urlBpm = 'http://localhost:9999/bpm';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('VALID');
+                done();
+            });
+
+            bpmUrlInput.value = urlBpm;
+            bpmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when the url inserted is wrong', (done) => {
+            const url = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.bpmHost.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            bpmUrlInput.value = url;
+            bpmUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have an invalid form when the host is wrong', (done) => {
+            const hostUrl = 'wrong';
+
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.host.hasError('pattern')).toBeTruthy();
+                done();
+            });
+
+            oauthHostUrlInput.value = hostUrl;
+            oauthHostUrlInput.dispatchEvent(new Event('input'));
+        });
+
+        it('should have a required clientId an invalid form when the clientId is missing', (done) => {
+            component.form.statusChanges.subscribe((status: string) => {
+                expect(status).toEqual('INVALID');
+                expect(component.clientId.hasError('required')).toBeTruthy();
+                done();
+            });
+
+            clientIdInput.value = '';
+            clientIdInput.dispatchEvent(new Event('input'));
+        });
+
+    });
+
 });

lib/core/settings/host-settings.component.ts

@@ -15,12 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-import { LogService } from '../services/log.service';
-import { SettingsService } from '../services/settings.service';
-import { StorageService } from '../services/storage.service';
-import { TranslationService } from '../services/translation.service';
+import { Component, EventEmitter, Output, ViewEncapsulation, OnInit } from '@angular/core';
+import { Validators, FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
+import { UserPreferencesService } from '../services';
 
 @Component({
     selector: 'adf-host-settings',
@@ -31,20 +28,18 @@ import { TranslationService } from '../services/translation.service';
     styleUrls: ['host-settings.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class HostSettingsComponent {
+export class HostSettingsComponent implements OnInit {
 
     HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
 
-    ecmHost: string;
-    ecmHostTmp: string;
-    bpmHost: string;
-    bpmHostTmp: string;
-    urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
-    urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
+    providersValues = [
+        { title: 'ECM and BPM', value: 'ALL' },
+        { title: 'BPM', value: 'BPM' },
+        { title: 'ECM', value: 'ECM' },
+        { title: 'OAUTH', value: 'OAUTH' }
+    ];
 
-    /** Determines which configurations are shown. Possible valid values are "ECM", "BPM" or "ALL". */
-    @Input()
-    providers: string = 'ALL';
+    form: FormGroup;
 
     /** Emitted when the URL is invalid. */
     @Output()
@@ -54,56 +49,136 @@ export class HostSettingsComponent {
     @Output()
     ecmHostChange = new EventEmitter<string>();
 
+    @Output()
+    cancel = new EventEmitter<boolean>();
+
+    @Output()
+    success = new EventEmitter<boolean>();
+
     /** Emitted when the bpm host URL is changed. */
     @Output()
     bpmHostChange = new EventEmitter<string>();
 
-    constructor(private settingsService: SettingsService,
-                private storage: StorageService,
-                private logService: LogService,
-                private translationService: TranslationService) {
-        this.ecmHostTmp = this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
-        this.bpmHostTmp = this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
+    constructor(private fb: FormBuilder,
+                private userPreference: UserPreferencesService) {
     }
 
-    public onChangeECMHost(event: any): void {
-        let value = (<HTMLInputElement> event.target).value.trim();
-        if (value && this.isValidUrl(value)) {
-            this.logService.info(`ECM host: ${value}`);
-            this.ecmHostTmp = value;
-            this.ecmHostChange.emit(value);
-        } else {
-            this.translationService.get('CORE.HOST_SETTING.CS_URL_ERROR').subscribe((message) => {
-                this.error.emit(message);
+    ngOnInit() {
+
+        let providerSelected = this.userPreference.providers;
+
+        this.form = this.fb.group({
+            providers: [providerSelected, Validators.required],
+            ecmHost: [this.userPreference.ecmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]],
+            bpmHost: [this.userPreference.bpmHost, [Validators.required, Validators.pattern(this.HOST_REGEX)]]
+        });
+
+        const oAuthConfig = this.userPreference.oauthConfig;
+        if (oAuthConfig) {
+            const oauthGroup = this.fb.group( {
+                host: [oAuthConfig.host, [Validators.required, Validators.pattern(this.HOST_REGEX)]],
+                clientId: [oAuthConfig.clientId, Validators.required],
+                redirectUri: [oAuthConfig.redirectUri, Validators.required],
+                scope: [oAuthConfig.scope, Validators.required],
+                secret: oAuthConfig.secret,
+                silentLogin: oAuthConfig.silentLogin,
+                implicitFlow: oAuthConfig.implicitFlow
             });
+            this.form.addControl('oauthConfig', oauthGroup);
         }
+
     }
 
-    public onChangeBPMHost(event: any): void {
-        let value = (<HTMLInputElement> event.target).value.trim();
-        if (value && this.isValidUrl(value)) {
-            this.logService.info(`BPM host: ${value}`);
-            this.bpmHostTmp = value;
-            this.bpmHostChange.emit(value);
-        } else {
-            this.translationService.get('CORE.HOST_SETTING.PS_URL_ERROR').subscribe((message) => {
-                this.error.emit(message);
-            });
-        }
+    onCancel() {
+        this.cancel.emit(true);
     }
 
-    public save(event: KeyboardEvent): void {
-        if (this.bpmHost !== this.bpmHostTmp) {
-            this.storage.setItem(`bpmHost`, this.bpmHostTmp);
+    onSubmit(values: any) {
+        this.userPreference.providers = values.providers;
+        if (this.isBPM()) {
+            this.saveBPMValues(values);
+        } else if (this.isECM()) {
+            this.saveECMValues(values);
+        } else if (this.isALL()) {
+            this.saveECMValues(values);
+            this.saveBPMValues(values);
+        } else if (this.isOAUTH()) {
+            this.saveOAuthValues(values);
         }
-        if (this.ecmHost !== this.ecmHostTmp) {
-            this.storage.setItem(`ecmHost`, this.ecmHostTmp);
-        }
-        window.location.href = '/';
+        this.success.emit(true);
     }
 
-    isValidUrl(url: string) {
-        return /^(http|https):\/\/.*/.test(url);
+    saveOAuthValues(values: any) {
+        this.userPreference.oauthConfig = values.oauthConfig;
+        this.userPreference.bpmHost = values.bpmHost;
+    }
+
+    saveBPMValues(values: any) {
+        this.userPreference.bpmHost = values.bpmHost;
+    }
+
+    saveECMValues(values: any) {
+        this.userPreference.ecmHost = values.ecmHost;
+    }
+
+    isBPM(): boolean {
+        return this.providers.value === 'BPM';
+    }
+
+    isECM(): boolean {
+        return this.providers.value === 'ECM';
+    }
+
+    isALL(): boolean {
+        return this.providers.value === 'ALL';
+    }
+
+    isOAUTH(): boolean {
+        return this.providers.value === 'OAUTH';
+    }
+
+    get providers(): AbstractControl {
+        return this.form.get('providers');
+    }
+
+    get bpmHost(): AbstractControl {
+        return this.form.get('bpmHost');
+    }
+
+    get ecmHost(): AbstractControl {
+        return this.form.get('ecmHost');
+    }
+
+    get host(): AbstractControl {
+        return this.oauthConfig.get('host');
+    }
+
+    get clientId(): AbstractControl {
+        return this.oauthConfig.get('clientId');
+    }
+
+    get scope(): AbstractControl {
+        return this.oauthConfig.get('scope');
+    }
+
+    get secretId(): AbstractControl {
+        return this.oauthConfig.get('secretId');
+    }
+
+    get implicitFlow(): AbstractControl {
+        return this.oauthConfig.get('implicitFlow');
+    }
+
+    get silentLogin(): AbstractControl {
+        return this.oauthConfig.get('silentLogin');
+    }
+
+    get redirectUri(): AbstractControl {
+        return this.oauthConfig.get('redirectUri');
+    }
+
+    get oauthConfig(): AbstractControl {
+        return this.form.get('oauthConfig');
     }
 
 }