<ion-header> <ion-navbar core-back-button> <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title> <ion-buttons end> <button ion-button icon-only [navPush]="'CoreSettingsListPage'" [attr.aria-label]="'core.mainmenu.appsettings' | translate"> <ion-icon name="cog"></ion-icon> </button> <button ion-button icon-only (click)="showHelp()" [attr.aria-label]="'core.help' | translate"> <ion-icon name="help-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header> <ion-content class="core-center-view"> <div class="box"> <div text-center padding> <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation"> </div> <form ion-list [formGroup]="siteForm" (ngSubmit)="connect($event, siteForm.value.siteUrl)" *ngIf="!fixedSites || fixedDisplay == 'select'"> <!-- Form to input the site URL if there are no fixed sites. --> <ng-container *ngIf="!fixedSites"> <p padding>{{ 'core.login.newsitedescription' | translate }}</p> <ion-item> <ion-input type="url" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" formControlName="siteUrl" [core-auto-focus]="showKeyboard"></ion-input> </ion-item> </ng-container> <ion-item *ngIf="fixedSites && fixedDisplay == 'select'" margin-vertical text-wrap> <ion-label stacked for="siteSelect">{{ 'core.login.selectsite' | translate }}</ion-label> <ion-select formControlName="siteUrl" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" interface="action-sheet"> <ion-option *ngFor="let site of fixedSites" [value]="site.url">{{site.name}}</ion-option> </ion-select> </ion-item> <button ion-button block [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button> </form> <!-- Pick the site from a list of fixed sites. --> <ion-list *ngIf="fixedSites && (fixedDisplay == 'list' || fixedDisplay == 'listnourl')"> <ion-item no-lines><h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2></ion-item> <ion-searchbar *ngIf="fixedSites.length > 4" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.login.findyoursite' | translate"></ion-searchbar> <ion-item *ngFor="let site of filteredSites" (click)="connect($event, site.url)" [title]="site.name" detail-push text-wrap> <h2>{{site.name}}</h2> <p *ngIf="fixedDisplay == 'list'">{{site.url}}</p> </ion-item> </ion-list> <!-- Display them using buttons. --> <div *ngIf="fixedSites && fixedDisplay == 'buttons'"> <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p> <a *ngFor="let site of fixedSites" ion-button block (click)="connect($event, site.url)" [title]="site.name" margin-bottom>{{site.name}}</a> </div> </div> </ion-content>