MOBILE-3389 login: Make error URL clickable

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

@@ -49,16 +49,16 @@
         </div>
 
         <!-- Error. -->
-        <div padding-top *ngIf="errorMessage" >
+        <div padding-top *ngIf="error" >
             <ion-card class="core-site-error">
                 <ion-card-header>
                     {{ 'core.whoops' | translate }}
                 </ion-card-header>
                 <ion-card-content>
-                    <p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
-                    <ng-container *ngIf="errorUrl">
+                    <p><core-format-text [text]="error.message" [filter]="false"></core-format-text></p>
+                    <ng-container *ngIf="error.url">
                         <p>{{ 'core.login.problemconnectingerror' | translate }}</p>
-                        <p padding>{{ errorUrl }}</p>
+                        <p padding><a [href]="error.fullUrl" core-link>{{ error.url }}</a></p>
                         <p><strong>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</strong></p>
                     </ng-container>
                 </ion-card-content>
@@ -73,8 +73,8 @@
         </div>
 
         <!-- Help. -->
-        <ion-list>
-            <a ion-item text-center (click)="showHelp()" detail-none>
+        <ion-list no-lines>
+            <a ion-item text-center class="core-login-need-help" (click)="showHelp()" detail-none>
                 {{ 'core.needhelp' | translate }}
             </a>
         </ion-list>

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

@@ -26,4 +26,8 @@ ion-app.app-root page-core-login-site {
             font-weight: bold;
         }
     }
+
+    .core-login-need-help {
+        text-decoration: underline;
+    }
 }

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

@@ -18,12 +18,33 @@ import { CoreAppProvider } from '@providers/app';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider, CoreSiteCheckResponse } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreUrlUtilsProvider } from '@providers/utils/url';
 import { CoreConfigConstants } from '../../../../configconstants';
 import { CoreLoginHelperProvider } from '../../providers/helper';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CoreUrl } from '@classes/utils/url';
 import { TranslateService } from '@ngx-translate/core';
 
+/**
+ * Data about an error when connecting to a site.
+ */
+type CoreLoginSiteError = {
+    /**
+     * The error message that ocurred.
+     */
+    message: string;
+
+    /**
+     * URL the user entered.
+     */
+    url?: string;
+
+    /**
+     * URL the user entered with protocol added if needed.
+     */
+    fullUrl?: string;
+};
+
 /**
  * Page to enter or select the site URL to connect to.
  */
@@ -42,8 +63,7 @@ export class CoreLoginSitePage {
     fixedDisplay = 'buttons';
     showKeyboard = false;
     filter = '';
-    errorUrl: string;
-    errorMessage: string;
+    error: CoreLoginSiteError;
 
     constructor(navParams: NavParams,
             protected navCtrl: NavController,
@@ -54,7 +74,8 @@ export class CoreLoginSitePage {
             protected modalCtrl: ModalController,
             protected domUtils: CoreDomUtilsProvider,
             protected eventsProvider: CoreEventsProvider,
-            protected translate: TranslateService) {
+            protected translate: TranslateService,
+            protected urlUtils: CoreUrlUtilsProvider) {
 
         this.showKeyboard = !!navParams.get('showKeyboard');
 
@@ -180,8 +201,7 @@ export class CoreLoginSitePage {
      * Hide the login error.
      */
     protected hideLoginIssue(): void {
-        this.errorUrl = null;
-        this.errorMessage = null;
+        this.error = null;
     }
 
     /**
@@ -191,8 +211,14 @@ export class CoreLoginSitePage {
      * @param error Error to display.
      */
     protected showLoginIssue(url: string, error: any): void {
-        this.errorUrl = url;
-        this.errorMessage = this.domUtils.getErrorMessage(error);
+        this.error = {
+            url: url,
+            message: this.domUtils.getErrorMessage(error),
+        };
+
+        if (url) {
+            this.error.fullUrl = this.urlUtils.isAbsoluteURL(url) ? url : 'https://' + url;
+        }
     }
 
     /**