From 09e3e00bacc8f17a04613d648d9fba7a565c9539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 31 Mar 2020 17:24:25 +0200
Subject: [PATCH] MOBILE-3389 login: Style new errors on login

---
 src/assets/lang/en.json                       |  4 +-
 src/core/login/lang/en.json                   |  2 +-
 src/core/login/pages/site-help/site-help.html |  4 +-
 src/core/login/pages/site-help/site-help.scss |  5 +++
 src/core/login/pages/site/site.html           | 39 +++++++++++--------
 src/core/login/pages/site/site.scss           | 16 ++++++++
 src/core/login/pages/site/site.ts             |  4 +-
 src/lang/en.json                              |  2 +-
 8 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 src/core/login/pages/site-help/site-help.scss

diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index dc5a9f227..e33e9f8ab 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -1331,7 +1331,7 @@
     "core.block.blocks": "Blocks",
     "core.browser": "Browser",
     "core.cancel": "Cancel",
-    "core.cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
+    "core.cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
     "core.cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
     "core.captureaudio": "Record audio",
     "core.capturedimage": "Taken picture.",
@@ -1707,7 +1707,7 @@
     "core.login.emailnotmatch": "Emails do not match",
     "core.login.erroraccesscontrolalloworigin": "The cross-origin call you're trying to perform has been rejected. Please check https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium",
     "core.login.errordeletesite": "An error occurred while deleting this site. Please try again.",
-    "core.login.errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. Please use the URL of your school or organization's site.",
+    "core.login.errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. <strong>Please use the URL of your school or organization's site.</strong>",
     "core.login.errorupdatesite": "An error occurred while updating the site's token.",
     "core.login.faqcannotconnectanswer": "Please, contact your site administrator.",
     "core.login.faqcannotconnectquestion": "I typed my site address correctly but I still can't connect.",
diff --git a/src/core/login/lang/en.json b/src/core/login/lang/en.json
index e6a0d6e2f..3624b1063 100644
--- a/src/core/login/lang/en.json
+++ b/src/core/login/lang/en.json
@@ -24,7 +24,7 @@
     "emailnotmatch": "Emails do not match",
     "erroraccesscontrolalloworigin": "The cross-origin call you're trying to perform has been rejected. Please check https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium",
     "errordeletesite": "An error occurred while deleting this site. Please try again.",
-    "errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. Please use the URL of your school or organization's site.",
+    "errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. <strong>Please use the URL of your school or organization's site.</strong>",
     "errorupdatesite": "An error occurred while updating the site's token.",
     "faqcannotconnectanswer": "Please, contact your site administrator.",
     "faqcannotconnectquestion": "I typed my site address correctly but I still can't connect.",
diff --git a/src/core/login/pages/site-help/site-help.html b/src/core/login/pages/site-help/site-help.html
index 48dcf8eb7..2aa5a8247 100644
--- a/src/core/login/pages/site-help/site-help.html
+++ b/src/core/login/pages/site-help/site-help.html
@@ -14,7 +14,9 @@
         <ion-item text-wrap>
             <h2><b>{{ 'core.login.faqwhatisurlquestion' | translate }}</b></h2>
         </ion-item>
-        <ion-item text-wrap [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
+        <ion-item text-wrap>
+            <div [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
+            </div>
         </ion-item>
         <ion-item text-wrap>
             <h2><b>{{ 'core.login.faqcannotconnectquestion' | translate }}</b></h2>
diff --git a/src/core/login/pages/site-help/site-help.scss b/src/core/login/pages/site-help/site-help.scss
new file mode 100644
index 000000000..01699c80f
--- /dev/null
+++ b/src/core/login/pages/site-help/site-help.scss
@@ -0,0 +1,5 @@
+page-core-login-site-help {
+    .content {
+        background-color: $white;
+    }
+}
\ No newline at end of file
diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html
index 8660611f8..007e3ecdd 100644
--- a/src/core/login/pages/site/site.html
+++ b/src/core/login/pages/site/site.html
@@ -49,25 +49,32 @@
         </div>
 
         <!-- Error. -->
-        <ion-card padding *ngIf="errorMessage">
-            <ion-item>
-                <h3>{{ 'core.whoops' | translate }}</h3>
-                <button ion-button icon-only item-end (click)="hideLoginIssue()" [attr.aria-label]="'core.hide' | translate">
-                    <ion-icon name="close"></ion-icon>
-                </button>
-            </ion-item>
-            <p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
-            <p>{{ 'core.login.problemconnectingerror' | translate }}</p>
-            <p padding>{{ errorUrl }}</p>
-            <p>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</p>
-            <h3>{{ 'core.login.stillcantconnect' | translate }}</h3>
-            <p>{{ 'core.login.contactyouradministrator' | translate }}</p>
-            <p>{{ 'core.whoissiteadmin' | translate }}</p>
-        </ion-card>
+        <div padding-top *ngIf="errorMessage" >
+            <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.login.problemconnectingerror' | translate }}</p>
+                        <p padding>{{ errorUrl }}</p>
+                        <p><strong>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</strong></p>
+                    </ng-container>
+                </ion-card-content>
+                <ion-card-header>
+                    {{ 'core.login.stillcantconnect' | translate }}
+                </ion-card-header>
+                <ion-card-content>
+                    <p>{{ 'core.login.contactyouradministrator' | translate }}</p>
+                    <p>{{ 'core.whoissiteadmin' | translate }}</p>
+                </ion-card-content>
+            </ion-card>
+        </div>
 
         <!-- Help. -->
         <ion-list>
-            <a ion-item text-center (click)="showHelp()">
+            <a ion-item text-center (click)="showHelp()" detail-none>
                 {{ 'core.needhelp' | translate }}
             </a>
         </ion-list>
diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss
index 53fafed91..8003ae361 100644
--- a/src/core/login/pages/site/site.scss
+++ b/src/core/login/pages/site/site.scss
@@ -10,4 +10,20 @@ ion-app.app-root page-core-login-site {
             background-color: $searchbar-ios-toolbar-input-background;
         }
     }
+
+    .core-site-error {
+        background: $red-light;
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+        user-select: text;
+
+        p, ion-card-header {
+            color: $red-dark;
+            user-select: text;
+        }
+        ion-card-header {
+            font-weight: bold;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/core/login/pages/site/site.ts b/src/core/login/pages/site/site.ts
index d88fc5bf9..bb007a557 100644
--- a/src/core/login/pages/site/site.ts
+++ b/src/core/login/pages/site/site.ts
@@ -104,7 +104,7 @@ export class CoreLoginSitePage {
         url = url.trim();
 
         if (url.match(/^(https?:\/\/)?campus\.example\.edu/)) {
-            this.showLoginIssue(url, this.translate.instant('core.login.errorexampleurl'));
+            this.showLoginIssue(null, this.translate.instant('core.login.errorexampleurl'));
 
             return;
         }
@@ -179,7 +179,7 @@ export class CoreLoginSitePage {
     /**
      * Hide the login error.
      */
-    hideLoginIssue(): void {
+    protected hideLoginIssue(): void {
         this.errorUrl = null;
         this.errorMessage = null;
     }
diff --git a/src/lang/en.json b/src/lang/en.json
index 2e932a7f8..3b9ccff0f 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -12,7 +12,7 @@
     "back": "Back",
     "browser": "Browser",
     "cancel": "Cancel",
-    "cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
+    "cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
     "cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
     "captureaudio": "Record audio",
     "capturedimage": "Taken picture.",