Vmeda.Online/src/core/login/pages/site/site.html

<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'core.login.connecttomoodle' | translate }}</ion-title>

        <ion-buttons end>
            <button ion-button icon-only navPush="CoreAppSettingsPage" [attr.aria-label]="'core.settings.appsettings' | translate">
                <core-icon name="fa-cogs"></core-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <div>
        <div text-center padding margin-bottom [class.hidden]="hasSites || enteredSiteUrl" class="core-login-site-logo">
            <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'" #siteFormEl>
            <!-- Form to input the site URL if there are no fixed sites. -->
            <ng-container *ngIf="!fixedSites">
                <ion-item>
                    <ion-label stacked><h2>{{ 'core.login.siteaddress' | translate }}</h2></ion-label>
                    <ion-input type="url" name="url" placeholder="https://campus.example.edu" formControlName="siteUrl" [core-auto-focus]="showKeyboard" (ionChange)="searchSite($event, siteForm.value.siteUrl)"></ion-input>
                </ion-item>
            </ng-container>

            <ion-list *ngIf="!fixedSites" [class.hidden]="!hasSites && !enteredSiteUrl" class="core-login-site-list">
                <ion-item no-lines class="core-login-site-list-title"><h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2></ion-item>
                <ion-item *ngIf="enteredSiteUrl" (click)="connect($event, enteredSiteUrl.url)" [title]="'core.login.connect' | translate" detail-push class="core-login-entered-site">
                    <ion-thumbnail item-start>
                        <core-icon name="fa-pencil"></core-icon>
                    </ion-thumbnail>
                    <h2 text-wrap>{{ 'core.login.yourenteredsite' | translate }}</h2>
                    <p>{{enteredSiteUrl.noProtocolUrl}}</p>
                </ion-item>

                <div class="core-login-site-list-found" [class.hidden]="!hasSites" [class.dimmed]="loadingSites">
                    <div *ngIf="loadingSites" class="core-login-site-list-loading"><ion-spinner></ion-spinner></div>
                    <ion-item *ngFor="let site of sites" (click)="connect($event, site.url, site)" [title]="site.name" detail-push>
                        <ion-thumbnail item-start>
                            <img [src]="site.imageurl" *ngIf="site.imageurl">
                            <img src="assets/icon/icon.png" *ngIf="!site.imageurl" class="core-login-default-icon">
                        </ion-thumbnail>
                        <h2 text-wrap>{{site.name}}<ng-container *ngIf="site.alias"> ({{site.alias}})</ng-container></h2>
                        <p>{{site.noProtocolUrl}}</p>
                        <p *ngIf="site.country || site.city" text-wrap><ng-container *ngIf="site.city">{{site.city}} - </ng-container>{{site.country}}</p>
                    </ion-item>
                </div>
            </ion-list>

            <div *ngIf="!fixedSites && !hasSites && loadingSites" class="core-login-site-nolist-loading"><ion-spinner></ion-spinner></div>

            <!-- Pick the site from a list of fixed sites. -->
            <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>

            <ng-container *ngIf="!fixedSites && showScanQR && !hasSites && !enteredSiteUrl">
                <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
                <ion-item>
                    <a ion-button block color="light" margin-top icon-start (click)="scanQR()">
                        <core-icon name="fa-qrcode" aria-hidden="true"></core-icon>
                        {{ 'core.scanqr' | translate }}
                    </a>
                </ion-item>
            </ng-container>

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

        <!-- Help. -->
        <ion-list no-lines margin-top>
            <a ion-item text-center text-wrap class="core-login-need-help" (click)="showHelp()" detail-none>
                {{ 'core.needhelp' | translate }}
            </a>
        </ion-list>
    </div>
</ion-content>