alfresco-ng2-components/lib/core/settings/host-settings.component.html

<div class="adf-setting-container">
    <mat-toolbar color="primary" class="adf-setting-toolbar">
        <h3>{{'CORE.HOST_SETTINGS.TITLE' | translate}}</h3>
    </mat-toolbar>
    <mat-card class="adf-setting-card">
        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)">

            <mat-form-field floatLabel="{{'CORE.HOST_SETTINGS.PROVIDER' | translate }}" *ngIf="showSelectProviders">
                <mat-select  id="adf-provider-selector" placeholder="Provider" [formControl]="providersControl">
                    <mat-option *ngFor="let provider of providers" [value]="provider">
                        {{ provider }}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <div class="adf-authentication-type">
                <label> {{'CORE.HOST_SETTINGS.TYPE-AUTH' | translate }} : </label>
                <mat-radio-group formControlName="authType" >
                <mat-radio-button value="BASIC">{{'CORE.HOST_SETTINGS.BASIC' | translate }}
                </mat-radio-button>
                <mat-radio-button value="OAUTH">{{'CORE.HOST_SETTINGS.SSO' | translate }}
                </mat-radio-button>
            </mat-radio-group>
            </div>

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

            <ng-container *ngIf="isALL() || 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>
                </mat-card-content>
            </ng-container>

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

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

                    <label for="silentLogin">{{ 'CORE.HOST_SETTINGS.SILENT'| translate }}</label>
                    <mat-slide-toggle class="full-width" name="silentLogin" [color]="'primary'"
                                      formControlName="silentLogin">
                    </mat-slide-toggle>

                    <label for="implicitFlow">{{ 'CORE.HOST_SETTINGS.IMPLICIT-FLOW'| translate }}</label>
                    <mat-slide-toggle class="full-width" name="implicitFlow" [color]="'primary'"
                                      formControlName="implicitFlow">
                    </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-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>