MOBILE-3401 sites: Show always the site you've written

src/core/login/pages/site-onboarding/site-onboarding.html

@@ -6,7 +6,7 @@
             </button>
         </ion-buttons>
         <ion-buttons end>
-            <button ion-button (click)="skip($event)">
+            <button ion-button (click)="skip($event)" [attr.aria-label]="'core.skip' | translate">
                 {{'core.skip' | translate}}
             </button>
         </ion-buttons>

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

@@ -11,7 +11,7 @@
 </ion-header>
 <ion-content padding>
     <div>
-        <div text-center padding margin-bottom [class.hidden]="hasSites" class="core-login-site-logo">
+        <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>
@@ -23,19 +23,28 @@
                 </ion-item>
             </ng-container>
 
-            <ion-list *ngIf="!fixedSites" [class.hidden]="!hasSites" class="core-login-site-list" [class.dimmed]="loadingSites">
+            <ion-list *ngIf="!fixedSites" [class.hidden]="!hasSites && !enteredSiteUrl" class="core-login-site-list">
-                <div *ngIf="loadingSites" class="core-login-site-list-loading"><ion-spinner></ion-spinner></div>
+                <ion-item no-lines class="core-login-site-list-title"><h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2></ion-item>
-                <ion-item no-lines class="core-login-site-list-title" *ngIf="onlyWrittenSite"><h2 class="item-heading">{{ 'core.login.selectsite' | translate }}</h2></ion-item>
+                <ion-item *ngIf="enteredSiteUrl" (click)="connect($event, enteredSiteUrl.url)" [title]="enteredSiteUrl.name" detail-push class="core-login-entered-site">
-                <ion-item *ngFor="let site of sites" (click)="connect($event, site.url, site)" [title]="site.name" detail-push [class.core-login-entered-site]="!site.fromWS">
+                    <ion-thumbnail item-start>
+                        <core-icon name="fa-pencil"></core-icon>
+                    </ion-thumbnail>
+                    <h2 text-wrap>{{enteredSiteUrl.name}}</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>
-                        <core-icon name="fa-pencil" *ngIf="!site.imageurl && !site.fromWS"></core-icon>
                             <img [src]="site.imageurl" *ngIf="site.imageurl">
-                        <img src="assets/icon/icon.png" *ngIf="!site.imageurl && site.fromWS" class="core-login-default-icon">
+                            <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>
@@ -48,7 +57,7 @@
                 </ion-select>
             </ion-item>
 
-            <ng-container *ngIf="!fixedSites && showScanQR && !hasSites">
+            <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()">

src/core/login/pages/site/site.scss

@@ -43,7 +43,8 @@ ion-app.app-root page-core-login-site {
     }
 
     .core-login-site-logo,
-    .core-login-site-list {
+    .core-login-site-list,
+    .core-login-site-list-found {
         transition-delay: 0s;
         visibility: visible;
         opacity: 1;
@@ -59,7 +60,7 @@ ion-app.app-root page-core-login-site {
         }
     }
 
-    .core-login-site-list.dimmed {
+    .core-login-site-list-found.dimmed {
         pointer-events: none;
         position: relative;
     }

src/core/login/pages/site/site.ts

@@ -34,7 +34,6 @@ import { TranslateService } from '@ngx-translate/core';
  * Extended data for UI implementation.
  */
 type CoreLoginSiteInfoExtended = CoreLoginSiteInfo & {
-    fromWS?: boolean; // If the site came from the WS call.
     noProtocolUrl?: string; // Url wihtout protocol.
     country?: string; // Based on countrycode.
 };
@@ -60,9 +59,9 @@ export class CoreLoginSitePage {
     sites: CoreLoginSiteInfoExtended[] = [];
     hasSites = false;
     loadingSites = false;
-    onlyWrittenSite = false;
     searchFnc: Function;
     showScanQR: boolean;
+    enteredSiteUrl: CoreLoginSiteInfoExtended;
 
     constructor(navParams: NavParams,
             protected navCtrl: NavController,
@@ -108,33 +107,19 @@ export class CoreLoginSitePage {
             siteUrl: [url, this.moodleUrlValidator()]
         });
 
-        this.searchFnc = this.utils.debounce(async (search: string, isValid: boolean = false) => {
+        this.searchFnc = this.utils.debounce(async (search: string) => {
             search = search.trim();
 
             if (search.length >= 3) {
-                this.onlyWrittenSite = false;
-
                 // Update the sites list.
                 this.sites = await this.sitesProvider.findSites(search);
 
                 // UI tweaks.
                 this.sites.forEach((site) => {
                     site.noProtocolUrl = CoreUrl.removeProtocol(site.url);
-                    site.fromWS = true;
                     site.country = this.utils.getCountryName(site.countrycode);
                 });
 
-                // If it's a valid URL, add it.
-                if (isValid) {
-                    this.onlyWrittenSite = !!this.sites.length;
-                    this.sites.unshift({
-                        url: search,
-                        fromWS: false,
-                        name: this.translate.instant('core.login.yourenteredsite'),
-                        noProtocolUrl: CoreUrl.removeProtocol(search),
-                    });
-                }
-
                 this.hasSites = !!this.sites.length;
             } else {
                 // Not reseting the array to allow animation to be displayed.
@@ -268,7 +253,7 @@ export class CoreLoginSitePage {
         error = this.domUtils.getErrorMessage(error);
 
         if (error == this.translate.instant('core.cannotconnecttrouble')) {
-            const found = this.sites.find((site) => site.fromWS && site.url == url);
+            const found = this.sites.find((site) => site.url == url);
 
             if (!found) {
                 error += ' ' + this.translate.instant('core.cannotconnectverify');
@@ -311,7 +296,19 @@ export class CoreLoginSitePage {
     searchSite(e: Event, search: string): void {
         this.loadingSites = true;
 
-        this.searchFnc(search.trim(), this.siteForm.valid);
+        search = search.trim();
+
+        if (this.siteForm.valid && search.length >= 3) {
+            this.enteredSiteUrl = {
+                url: search,
+                name: this.translate.instant('core.login.yourenteredsite'),
+                noProtocolUrl: CoreUrl.removeProtocol(search),
+            };
+        } else {
+            this.enteredSiteUrl = null;
+        }
+
+        this.searchFnc(search.trim());
     }
 
     /**