MOBILE-3389 login: Style new errors on login

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.",

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.",

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>

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

@@ -0,0 +1,5 @@
+page-core-login-site-help {
+    .content {
+        background-color: $white;
+    }
+}

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

@@ -49,25 +49,32 @@
         </div>
 
         <!-- Error. -->
-        <ion-card padding *ngIf="errorMessage">
+        <div padding-top *ngIf="errorMessage" >
-            <ion-item>
+            <ion-card class="core-site-error">
-                <h3>{{ 'core.whoops' | translate }}</h3>
+                <ion-card-header>
-                <button ion-button icon-only item-end (click)="hideLoginIssue()" [attr.aria-label]="'core.hide' | translate">
+                    {{ 'core.whoops' | translate }}
-                    <ion-icon name="close"></ion-icon>
+                </ion-card-header>
-                </button>
+                <ion-card-content>
-            </ion-item>
+                    <p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
-            <p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
+                    <ng-container *ngIf="errorUrl">
-            <p>{{ 'core.login.problemconnectingerror' | translate }}</p>
+                        <p>{{ 'core.login.problemconnectingerror' | translate }}</p>
-            <p padding>{{ errorUrl }}</p>
+                        <p padding>{{ errorUrl }}</p>
-            <p>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</p>
+                        <p><strong>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</strong></p>
-            <h3>{{ 'core.login.stillcantconnect' | translate }}</h3>
+                    </ng-container>
-            <p>{{ 'core.login.contactyouradministrator' | translate }}</p>
+                </ion-card-content>
-            <p>{{ 'core.whoissiteadmin' | translate }}</p>
+                <ion-card-header>
-        </ion-card>
+                    {{ '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>

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;
+        }
+    }
 }

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;
     }

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.",