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

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

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

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