From 9c2133bd73407b5b3058761c26b34699df540b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 8 Sep 2023 15:08:40 +0200
Subject: [PATCH] MOBILE-4201 login: Show error message if check site fails

---
 .../login/pages/credentials/credentials.html  | 144 ++++++++++--------
 .../login/pages/credentials/credentials.ts    |  14 +-
 2 files changed, 86 insertions(+), 72 deletions(-)

diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 8ba3874ff..451709a7f 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -20,82 +20,92 @@
 </ion-header>
 <ion-content class="ion-padding limited-width">
     <core-loading [hideUntil]="pageLoaded">
-        <div class="ion-text-wrap ion-text-center core-login-info-box">
-            <div class="core-login-site">
-                <div class="core-login-site-logo">
-                    <!-- Show site logo or a default image. -->
-                    <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
-                    <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+        <ng-container *ngIf="!siteCheckError">
+            <div class="ion-text-wrap ion-text-center core-login-info-box">
+                <div class="core-login-site">
+                    <div class="core-login-site-logo">
+                        <!-- Show site logo or a default image. -->
+                        <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
+                        <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+                    </div>
+
+                    <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
+                        <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                    </h2>
+                    <p class="core-siteurl">{{siteUrl}}</p>
                 </div>
 
-                <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
-                    <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-                </h2>
-                <p class="core-siteurl">{{siteUrl}}</p>
+                <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3"
+                    [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
+                    <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
+                </core-login-exceeded-attempts>
             </div>
 
-            <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3"
-                [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
-                <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
-            </core-login-exceeded-attempts>
-        </div>
-
-        <div class="core-login-methods">
-            <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
-                <ion-item>
-                    <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
-                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
-                        autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
-                    </ion-input>
-                </ion-item>
-                <ion-item class="ion-margin-bottom">
-                    <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
-                    <core-show-password name="password">
-                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                            formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+            <div class="core-login-methods">
+                <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
+                    <ion-item>
+                        <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
+                        <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
+                            formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
                             required="true">
                         </ion-input>
-                    </core-show-password>
+                    </ion-item>
+                    <ion-item class="ion-margin-bottom">
+                        <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                        <core-show-password name="password">
+                            <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                                formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+                                required="true">
+                            </ion-input>
+                        </core-show-password>
+                    </ion-item>
+                    <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
+                        class="ion-margin core-login-login-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                    </ion-button>
+                    <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
+                    <input type="submit" class="core-submit-hidden-enter" />
+
+                    <!-- Forgotten password option. -->
+                    <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+                        class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+                        {{ 'core.login.forgotten' | translate }}
+                    </ion-button>
+                </form>
+
+                <ng-container *ngIf="isBrowserSSO">
+                    <ion-button expand="block" (click)="openBrowserSSO()"
+                        class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                    <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+                </ng-container>
+
+
+                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
+            </div>
+
+            <div class="core-login-sign-up" *ngIf="canSignup || authInstructions">
+                <h2>{{ 'core.login.firsttime' | translate }}</h2>
+
+                <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
+                    <ion-label>
+                        <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
+                    </ion-label>
                 </ion-item>
-                <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
-                    class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                </ion-button>
-                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
-                <input type="submit" class="core-submit-hidden-enter" />
-
-                <!-- Forgotten password option. -->
-                <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                    class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                    {{ 'core.login.forgotten' | translate }}
-                </ion-button>
-            </form>
-
-            <ng-container *ngIf="isBrowserSSO">
-                <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
-                </ion-button>
-                <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-            </ng-container>
 
 
-            <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
-        </div>
+            </div>
+            <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
+                {{ 'core.login.startsignup' | translate }}
+            </ion-button>
+        </ng-container>
+        <core-empty-box *ngIf="siteCheckError" icon="fas-circle-exclamation" [message]="siteCheckError">
+            <ion-button expand="block" (click)="checkSite()" fill="outline">
+                {{ 'core.tryagain' | translate }}
+            </ion-button>
+        </core-empty-box>
 
-        <div class="core-login-sign-up" *ngIf="canSignup || authInstructions">
-            <h2>{{ 'core.login.firsttime' | translate }}</h2>
-
-            <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
-                <ion-label>
-                    <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
-                </ion-label>
-            </ion-item>
-
-
-        </div>
-        <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
-            {{ 'core.login.startsignup' | translate }}
-        </ion-button>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/login/pages/credentials/credentials.ts b/src/core/features/login/pages/credentials/credentials.ts
index e4dcd3d65..bbb601aab 100644
--- a/src/core/features/login/pages/credentials/credentials.ts
+++ b/src/core/features/login/pages/credentials/credentials.ts
@@ -60,6 +60,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
     supportConfig?: CoreUserSupportConfig;
     exceededAttemptsHTML?: SafeHtml | string | null;
     siteConfig?: CoreSitePublicConfigResponse;
+    siteCheckError = '';
 
     protected siteCheck?: CoreSiteCheckResponse;
     protected eventThrown = false;
@@ -103,7 +104,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             password: ['', Validators.required],
         });
 
-        await this.checkSite(this.siteUrl);
+        await this.checkSite();
 
         if (CorePlatform.isIOS() && !this.isBrowserSSO) {
             // Make iOS auto-fill work. The field that isn't focused doesn't get updated, do it manually.
@@ -143,18 +144,17 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
      * Get site config and check if it requires SSO login.
      * This should be used only if a fixed URL is set, otherwise this check is already performed in CoreLoginSitePage.
      *
-     * @param siteUrl Site URL to check.
      * @returns Promise resolved when done.
      */
-    protected async checkSite(siteUrl: string): Promise<void> {
+    async checkSite(): Promise<void> {
         this.pageLoaded = false;
 
         // If the site is configured with http:// protocol we force that one, otherwise we use default mode.
-        const protocol = siteUrl.indexOf('http://') === 0 ? 'http://' : undefined;
+        const protocol = this.siteUrl.indexOf('http://') === 0 ? 'http://' : undefined;
 
         try {
             if (!this.siteCheck) {
-                this.siteCheck = await CoreSites.checkSite(siteUrl, protocol);
+                this.siteCheck = await CoreSites.checkSite(this.siteUrl, protocol);
             }
 
             this.siteUrl = this.siteCheck.siteUrl;
@@ -162,9 +162,13 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
 
             await this.treatSiteConfig();
 
+            this.siteCheckError = '';
+
             // Check if user needs to authenticate in a browser.
             this.isBrowserSSO = CoreLoginHelper.isSSOLoginNeeded(this.siteCheck.code);
         } catch (error) {
+            this.siteCheckError = CoreDomUtils.getErrorMessage(error) || 'Error loading site';
+
             CoreDomUtils.showErrorModal(error);
         } finally {
             this.pageLoaded = true;