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

<div class="adf-setting-container">
    <mat-card class="adf-setting-card">
        <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" >
                <mat-radio-button value="BASIC">Basic Authentication</mat-radio-button>
                <mat-radio-button value="OAUTH">SSO</mat-radio-button>
            </mat-radio-group>
            </div>

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

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

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

            <ng-container *ngIf="isOAUTH()">
                <div 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>
            </ng-container>
            <mat-card-actions align="end">
                <button mat-button (click)="onCancel()">Back</button>
                <button type="submit" class="adf-login-button" mat-button
                        color="primary" data-automation-id="settings-apply-button"
                        [disabled]="!form.valid">Apply</button>
            </mat-card-actions>
        </form>
    </mat-card>
</div>