<ion-header> <ion-navbar> <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title> <ion-buttons end> <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 id="mm-login-site" class="mm-center-view"> <form class="mm-view-content" [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl)"> <ion-list class="box"> <div class="text-center" padding> <img src="assets/img/logo.png" class="avatar-full moodle-logo" role="presentation"> </div> <!-- Form to input the site URL if there are no fixed sites. --> <div *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></ion-input> </ion-item> </div> <!-- Pick the site from a list of fixed sites. --> <div *ngIf="fixedSites" text-wrap> <!-- Display them using a select. --> <ion-item *ngIf="!displayAsButtons"> <!-- @todo: Display label and select in different lines. --> <ion-label for="siteSelect">{{ 'core.login.selectsite' | translate }}</ion-label> <ion-select formControlName="siteUrl" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}"> <ion-option *ngFor="let site of fixedSites" [value]="site.url">{{site.name}}</ion-option> </ion-select> </ion-item> <!-- Display them using buttons. --> <div *ngIf="displayAsButtons"> <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p> <a *ngFor="let site of fixedSites" ion-button block (click)="connect(site.url)" title="{{site.name}}">{{site.name}}</a> </div> </div> <div *ngIf="!fixedSites || !displayAsButtons"> <button ion-button block color="primary" [disabled]="!siteForm.valid">{{ 'core.login.connect' | translate }}</button> </div> </ion-list> </form> </ion-content>