From f35ed90aec9e70d8c5bd261efe1ebfca95ded909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 1 Jul 2020 15:30:40 +0200
Subject: [PATCH] MOBILE-3463 login: Add url and sitefinder options for
 multisite

---
 src/core/login/pages/site/site.html | 104 ++++++++++++++++------------
 src/core/login/pages/site/site.ts   |   8 +--
 2 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html
index c466aa73a..d67e749e9 100644
--- a/src/core/login/pages/site/site.html
+++ b/src/core/login/pages/site/site.html
@@ -14,65 +14,77 @@
         <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 ion-list [formGroup]="siteForm" (ngSubmit)="connect($event, siteForm.value.siteUrl)" *ngIf="!fixedSites || siteSelector == '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 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 *ngIf="siteSelector == 'url'">
+                    <ion-item>
+                        <ion-label stacked><h2>{{ 'core.login.siteaddress' | translate }}</h2></ion-label>
+                        <ion-input name="url" type="url" placeholder="https://campus.example.edu" formControlName="siteUrl" [core-auto-focus]="showKeyboard"></ion-input>
+                    </ion-item>
+                </ng-container>
+                <ng-container *ngIf="siteSelector != 'url'">
+                    <ion-item>
+                        <ion-label stacked><h2>{{ 'core.login.siteaddress' | translate }}</h2></ion-label>
+                        <ion-input name="url" placeholder="https://campus.example.edu" formControlName="siteUrl" [core-auto-focus]="showKeyboard" (ionChange)="searchSite($event, siteForm.value.siteUrl)"></ion-input>
+                    </ion-item>
+
+                    <ion-list [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>
+                        <button ion-item *ngIf="enteredSiteUrl" (click)="connect($event, enteredSiteUrl.url)" [attr.aria-label]="'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>
+                        </button>
+
+                        <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>
+                            <button ion-item *ngFor="let site of sites" (click)="connect($event, site.url, site)" [attr.aria-label]="site.name" detail-push>
+                                <ion-thumbnail item-start>
+                                    <img [src]="site.imageurl" *ngIf="site.imageurl" onError="this.src='assets/icon/icon.png'">
+                                    <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>
+                            </button>
+                        </div>
+                    </ion-list>
+
+                    <div *ngIf="!hasSites && loadingSites" class="core-login-site-nolist-loading"><ion-spinner></ion-spinner></div>
+                </ng-container>
             </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>
-                <button ion-item *ngIf="enteredSiteUrl" (click)="connect($event, enteredSiteUrl.url)" [attr.aria-label]="'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>
-                </button>
-
-                <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>
-                    <button ion-item *ngFor="let site of sites" (click)="connect($event, site.url, site)" [attr.aria-label]="site.name" detail-push>
-                        <ion-thumbnail item-start>
-                            <img [src]="site.imageurl" *ngIf="site.imageurl" onError="this.src='assets/icon/icon.png'">
-                            <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>
-                    </button>
-                </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-item *ngIf="fixedSites && siteSelector == '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 *ngIf="(fixedSites && siteSelector == 'select') || (!fixedSites && siteSelector == 'url')" 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>
+        <ng-container *ngIf="fixedSites">
+            <!-- Pick the site from a list of fixed sites. -->
+            <ion-list *ngIf="siteSelector == 'list' || siteSelector == '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="siteSelector == '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>
+            <!-- Display them using buttons. -->
+            <div *ngIf="siteSelector == '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>
+        </ng-container>
 
         <ng-container *ngIf="showScanQR && !hasSites && !enteredSiteUrl">
             <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
diff --git a/src/core/login/pages/site/site.ts b/src/core/login/pages/site/site.ts
index 9845898cc..e9d43091b 100644
--- a/src/core/login/pages/site/site.ts
+++ b/src/core/login/pages/site/site.ts
@@ -53,7 +53,7 @@ export class CoreLoginSitePage {
     siteForm: FormGroup;
     fixedSites: CoreLoginSiteInfo[];
     filteredSites: CoreLoginSiteInfo[];
-    fixedDisplay = 'buttons';
+    siteSelector = 'sitefinder';
     showKeyboard = false;
     filter = '';
     sites: CoreLoginSiteInfoExtended[] = [];
@@ -82,14 +82,14 @@ export class CoreLoginSitePage {
         this.showKeyboard = !!navParams.get('showKeyboard');
 
         let url = '';
+        this.siteSelector = CoreConfigConstants.multisitesdisplay;
 
         // Load fixed sites if they're set.
         if (this.loginHelper.hasSeveralFixedSites()) {
             this.fixedSites = <any[]> this.loginHelper.getFixedSites();
-            this.fixedDisplay = CoreConfigConstants.multisitesdisplay;
             // Autoselect if not defined.
-            if (['list', 'listnourl', 'select', 'buttons'].indexOf(this.fixedDisplay) < 0) {
-                this.fixedDisplay = this.fixedSites.length > 8 ? 'list' : (this.fixedSites.length > 3 ? 'select' : 'buttons');
+            if (['list', 'listnourl', 'select', 'buttons'].indexOf(this.siteSelector) < 0) {
+                this.siteSelector = this.fixedSites.length > 8 ? 'list' : (this.fixedSites.length > 3 ? 'select' : 'buttons');
             }
             this.filteredSites = this.fixedSites;
             url = this.fixedSites[0].url;