alfresco-ng2-components/demo-shell/src/app/components/settings/host-settings.component.html

<div class="adf-setting-container">
    <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
        <mat-form-field *ngIf="showSelectProviders">
            <mat-select id="adf-provider-selector" [formControl]="providersControl">
                <mat-option *ngFor="let provider of providers" [value]="provider">
                    {{ provider }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <div class="adf-authentication-type">
            <div>Authentication type:</div>
            <mat-radio-group formControlName="authType" class="adf-authentication-radio-group">
                <mat-radio-button value="BASIC" class="adf-authentication-radio-button">Basic Authentication</mat-radio-button>
                <mat-radio-button value="OAUTH" class="adf-authentication-radio-button">SSO</mat-radio-button>
            </mat-radio-group>
        </div>

        <mat-form-field *ngIf="isALL() || isECM()" class="adf-full-width">
            <mat-label>Content Services URL</mat-label>
            <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
            <mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
            <mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
        </mat-form-field>

        <mat-form-field *ngIf="isALL() || isBPM()" class="adf-full-width">
            <mat-label>Process Services URL</mat-label>
            <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
            <mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
            <mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
        </mat-form-field>

        <mat-form-field *ngIf="isOAUTH()" class="adf-full-width">
            <mat-label>Identity Host</mat-label>
            <input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
            <mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
            <mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
        </mat-form-field>

        <div *ngIf="isOAUTH()" formGroupName="oauthConfig">
            <mat-form-field class="adf-full-width">
                <mat-label>Auth Host</mat-label>
                <input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
                <mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
                <mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
            </mat-form-field>

            <mat-form-field class="adf-full-width">
                <mat-label>Client ID</mat-label>
                <input matInput name="clientId" id="clientId" formControlName="clientId">
                <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
            </mat-form-field>

            <mat-form-field class="adf-full-width">
                <mat-label>Scope Id</mat-label>
                <input matInput name="Scope" formControlName="scope">
                <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
            </mat-form-field>

            <mat-form-field class="adf-full-width">
                <mat-label>Secret</mat-label>
                <input matInput name="Secret" formControlName="secret">
                <mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
            </mat-form-field>

            <mat-label>Silent Login</mat-label>
            <mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
            </mat-slide-toggle>

            <mat-label>Implicit Flow</mat-label>
            <mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
            </mat-slide-toggle>

            <ng-container *ngIf="supportsCodeFlow">
                <mat-label>Code Flow</mat-label>
                <mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
                </mat-slide-toggle>
            </ng-container>

            <mat-form-field class="adf-full-width">
                <mat-label>Redirect URI</mat-label>
                <input matInput  name="redirectUri" formControlName="redirectUri">
                <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
            </mat-form-field>

            <mat-form-field class="adf-full-width">
                <mat-label>Redirect URI Logout</mat-label>
                <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
            </mat-form-field>

            <mat-form-field class="adf-full-width">
                <mat-label>Public urls silent Login</mat-label>
                <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
            </mat-form-field>
        </div>

        <div class="adf-host-settings-actions">
            <button mat-button (click)="onCancel()">Back</button>
            <button type="submit"
                    mat-button
                    color="primary"
                    data-automation-id="settings-apply-button"
                    [disabled]="!form.valid">Apply</button>
        </div>
    </form>
</div>