MOBILE-3389 login: Improve error messages and help in login

Author: dpalou

src/assets/img/login/faq_url.png

@@ -1707,7 +1707,17 @@
     "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.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.",
+    "core.login.faqsetupsiteanswer": "Visit {{$link}} to check out the different options you have to create your own Moodle site.",
+    "core.login.faqsetupsitelinktitle": "Get started.",
+    "core.login.faqsetupsitequestion": "I want to set up my own Moodle site.",
+    "core.login.faqtestappanswer": "To test the app in a Moodle Demo Site, type \"teacher\" or \"student\" in the \"Your site address\" field and click the \"Connect!\" button.",
+    "core.login.faqtestappquestion": "I just want to test the app, what can I do?",
+    "core.login.faqwhatisurlanswer": "<p>Every organisation or school has their own custom address for their Moodle site.</p><p>To find the address of the Moodle site you want to connect to, do the following:</p><ol><li>Open a web browser and go to your school's or organisation's Moodle site login page</li><li>At the top of the page, on the address bar, you will see the URL of your Moodle site. E.g. \"campus.example.edu\".{{$image}}</li><li>Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"</li><li>Now you can log into your site, using your username and password</li>",
+    "core.login.faqwhatisurlquestion": "What is the URL of my Moodle site? How can I find my school’s site?",
     "core.login.findyoursite": "Find your site",
     "core.login.firsttime": "Is this your first time here?",
     "core.login.forcepasswordchangenotice": "You must change your password to proceed.",
@@ -1736,7 +1746,6 @@
     "core.login.mobileservicesnotenabled": "Mobile access is not enabled on your site. Please contact your site administrator if you think it should be enabled.",
     "core.login.mustconfirm": "You need to confirm your account",
     "core.login.newaccount": "New account",
-    "core.login.newsitedescription": "Please enter the URL of your Moodle site. Note that it might not be configured to work with this app.",
     "core.login.notloggedin": "You need to be logged in.",
     "core.login.password": "Password",
     "core.login.passwordforgotten": "Forgotten password",
@@ -1762,7 +1771,7 @@
     "core.login.selectacountry": "Select a country",
     "core.login.selectsite": "Please select your site:",
     "core.login.signupplugindisabled": "{{$a}} is not enabled.",
-    "core.login.siteaddress": "Site address",
+    "core.login.siteaddress": "Your site address",
     "core.login.sitehasredirect": "Your site contains at least one HTTP redirect. The app cannot follow redirects, this could be the issue that's preventing the app from connecting to your site.",
     "core.login.siteinmaintenance": "Your site is in maintenance mode",
     "core.login.sitepolicynotagreederror": "Site policy not agreed.",
@@ -1816,6 +1825,7 @@
     "core.more": "more",
     "core.mygroups": "My groups",
     "core.name": "Name",
+    "core.needhelp": "Need help?",
     "core.networkerroriframemsg": "This content is not available offline. Please connect to the internet and try again.",
     "core.networkerrormsg": "There was a problem connecting to the site. Please check your connection and try again.",
     "core.never": "Never",
@@ -2090,6 +2100,7 @@
     "core.warningofflinedatadeleted": "Offline data from {{component}} '{{name}}' has been deleted. {{error}}",
     "core.whatisyourage": "What is your age?",
     "core.wheredoyoulive": "In which country do you live?",
+    "core.whoissiteadmin": "\"Site Administrators\" are the people who manage the Moodle at your school/university/company or learning organisation. If you don't know how to contact them, please contact your teachers/trainers.",
     "core.whoops": "Oops!",
     "core.whyisthishappening": "Why is this happening?",
     "core.whyisthisrequired": "Why is this required?",

src/assets/lang/en.json

@@ -24,7 +24,17 @@
     "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.",
     "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.",
+    "faqsetupsiteanswer": "Visit {{$link}} to check out the different options you have to create your own Moodle site.",
+    "faqsetupsitelinktitle": "Get started.",
+    "faqsetupsitequestion": "I want to set up my own Moodle site.",
+    "faqtestappanswer": "To test the app in a Moodle Demo Site, type \"teacher\" or \"student\" in the \"Your site address\" field and click the \"Connect!\" button.",
+    "faqtestappquestion": "I just want to test the app, what can I do?",
+    "faqwhatisurlanswer": "<p>Every organisation or school has their own custom address for their Moodle site.</p><p>To find the address of the Moodle site you want to connect to, do the following:</p><ol><li>Open a web browser and go to your school's or organisation's Moodle site login page</li><li>At the top of the page, on the address bar, you will see the URL of your Moodle site. E.g. \"campus.example.edu\".{{$image}}</li><li>Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"</li><li>Now you can log into your site, using your username and password</li>",
+    "faqwhatisurlquestion": "What is the URL of my Moodle site? How can I find my school’s site?",
     "findyoursite": "Find your site",
     "firsttime": "Is this your first time here?",
     "forcepasswordchangenotice": "You must change your password to proceed.",
@@ -53,7 +63,6 @@
     "mobileservicesnotenabled": "Mobile access is not enabled on your site. Please contact your site administrator if you think it should be enabled.",
     "mustconfirm": "You need to confirm your account",
     "newaccount": "New account",
-    "newsitedescription": "Please enter the URL of your Moodle site. Note that it might not be configured to work with this app.",
     "notloggedin": "You need to be logged in.",
     "password": "Password",
     "passwordforgotten": "Forgotten password",
@@ -79,7 +88,7 @@
     "selectacountry": "Select a country",
     "selectsite": "Please select your site:",
     "signupplugindisabled": "{{$a}} is not enabled.",
-    "siteaddress": "Site address",
+    "siteaddress": "Your site address",
     "sitehasredirect": "Your site contains at least one HTTP redirect. The app cannot follow redirects, this could be the issue that's preventing the app from connecting to your site.",
     "siteinmaintenance": "Your site is in maintenance mode",
     "sitepolicynotagreederror": "Site policy not agreed.",

src/core/login/lang/en.json

@@ -10,5 +10,29 @@
     </ion-navbar>
 </ion-header>
 <ion-content padding>
-    <core-format-text [text]="'core.login.helpmelogin' | translate" [filter]="false"></core-format-text>
+    <ion-list>
+        <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>
+        <ion-item text-wrap>
+            <h2><b>{{ 'core.login.faqcannotconnectquestion' | translate }}</b></h2>
+        </ion-item>
+        <ion-item text-wrap>
+            <p>{{ 'core.login.faqcannotconnectanswer' | translate }} {{ 'core.whoissiteadmin' | translate }}</p>
+        </ion-item>
+        <ion-item text-wrap>
+            <h2><b>{{ 'core.login.faqsetupsitequestion' | translate }}</b></h2>
+        </ion-item>
+        <ion-item text-wrap>
+            <p><core-format-text [text]="'core.login.faqsetupsiteanswer' | translate:{$link: setupLinkHtml}" [filter]="false"></core-format-text></p>
+        </ion-item>
+        <ion-item text-wrap>
+            <h2><b>{{ 'core.login.faqtestappquestion' | translate }}</b></h2>
+        </ion-item>
+        <ion-item text-wrap>
+            <p>{{ 'core.login.faqtestappanswer' | translate }}</p>
+        </ion-item>
+    </ion-list>
 </ion-content>

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

@@ -14,6 +14,7 @@
 
 import { Component } from '@angular/core';
 import { IonicPage, ViewController } from 'ionic-angular';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Component that displays some help regarding the CoreLoginSitePage.
@@ -24,7 +25,17 @@ import { IonicPage, ViewController } from 'ionic-angular';
     templateUrl: 'site-help.html',
 })
 export class CoreLoginSiteHelpPage {
-    constructor(private viewCtrl: ViewController) { }
+
+    urlImageHtml: string;
+    setupLinkHtml: string;
+
+    constructor(protected viewCtrl: ViewController,
+            protected translate: TranslateService) {
+
+        this.urlImageHtml = '<img src="assets/img/login/faq_url.png" role="presentation">';
+        this.setupLinkHtml = '<a href="https://moodle.com/getstarted/" title="' +
+                this.translate.instant('core.login.faqsetupsitelinktitle') + '">https://moodle.com/getstarted/</a>';
+    }
 
     /**
      * Close help modal.

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

@@ -6,9 +6,6 @@
             <button ion-button icon-only navPush="CoreAppSettingsPage" [attr.aria-label]="'core.settings.appsettings' | translate">
                 <core-icon name="fa-cogs"></core-icon>
             </button>
-            <button ion-button icon-only (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
-                <ion-icon name="help-circle"></ion-icon>
-            </button>
         </ion-buttons>
     </ion-navbar>
 </ion-header>
@@ -20,9 +17,9 @@
         <form ion-list [formGroup]="siteForm" (ngSubmit)="connect($event, siteForm.value.siteUrl)" *ngIf="!fixedSites || fixedDisplay == 'select'" #siteFormEl>
             <!-- Form to input the site URL if there are no fixed sites. -->
             <ng-container *ngIf="!fixedSites">
-                <p padding>{{ 'core.login.newsitedescription' | translate }}</p>
                 <ion-item>
-                    <ion-input type="url" name="url" placeholder="{{ 'core.login.siteaddress' | translate }}" formControlName="siteUrl" [core-auto-focus]="showKeyboard"></ion-input>
+                    <ion-label stacked><h2>{{ 'core.login.siteaddress' | translate }}</h2></ion-label>
+                    <ion-input type="url" name="url" placeholder="https://campus.example.edu" formControlName="siteUrl" [core-auto-focus]="showKeyboard"></ion-input>
                 </ion-item>
             </ng-container>
 
@@ -50,5 +47,29 @@ <h2>{{site.name}}</h2>
             <p class="padding no-padding-bottom">{{ 'core.login.selectsite' | translate }}</p>
             <a *ngFor="let site of fixedSites" ion-button block (click)="connect($event, site.url)" [title]="site.name" margin-bottom>{{site.name}}</a>
         </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>
+
+        <!-- Help. -->
+        <ion-list>
+            <a ion-item text-center (click)="showHelp()">
+                {{ 'core.needhelp' | translate }}
+            </a>
+        </ion-list>
     </div>
 </ion-content>

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

@@ -22,6 +22,7 @@ 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';
 
 /**
  * Page to enter or select the site URL to connect to.
@@ -41,6 +42,8 @@ export class CoreLoginSitePage {
     fixedDisplay = 'buttons';
     showKeyboard = false;
     filter = '';
+    errorUrl: string;
+    errorMessage: string;
 
     constructor(navParams: NavParams,
             protected navCtrl: NavController,
@@ -50,7 +53,8 @@ export class CoreLoginSitePage {
             protected loginHelper: CoreLoginHelperProvider,
             protected modalCtrl: ModalController,
             protected domUtils: CoreDomUtilsProvider,
-            protected eventsProvider: CoreEventsProvider) {
+            protected eventsProvider: CoreEventsProvider,
+            protected translate: TranslateService) {
 
         this.showKeyboard = !!navParams.get('showKeyboard');
 
@@ -99,6 +103,14 @@ export class CoreLoginSitePage {
 
         url = url.trim();
 
+        if (url.match(/^(https?:\/\/)?campus\.example\.edu/)) {
+            this.showLoginIssue(url, this.translate.instant('core.login.errorexampleurl'));
+
+            return;
+        }
+
+        this.hideLoginIssue();
+
         const modal = this.domUtils.showModalLoading(),
             siteData = this.sitesProvider.getDemoSiteData(url);
 
@@ -164,19 +176,23 @@ export class CoreLoginSitePage {
         modal.present();
     }
 
+    /**
+     * Hide the login error.
+     */
+    hideLoginIssue(): void {
+        this.errorUrl = null;
+        this.errorMessage = null;
+    }
+
     /**
      * Show an error that aims people to solve the issue.
      *
      * @param url The URL the user was trying to connect to.
      * @param error Error to display.
      */
     protected showLoginIssue(url: string, error: any): void {
-        const modal = this.modalCtrl.create('CoreLoginSiteErrorPage', {
-            siteUrl: url,
-            issue: this.domUtils.getErrorMessage(error)
-        });
-
-        modal.present();
+        this.errorUrl = url;
+        this.errorMessage = this.domUtils.getErrorMessage(error);
     }
 
     /**

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

@@ -167,6 +167,7 @@
     "more": "more",
     "mygroups": "My groups",
     "name": "Name",
+    "needhelp": "Need help?",
     "networkerroriframemsg": "This content is not available offline. Please connect to the internet and try again.",
     "networkerrormsg": "There was a problem connecting to the site. Please check your connection and try again.",
     "never": "Never",
@@ -293,6 +294,7 @@
     "warningofflinedatadeleted": "Offline data from {{component}} '{{name}}' has been deleted. {{error}}",
     "whatisyourage": "What is your age?",
     "wheredoyoulive": "In which country do you live?",
+    "whoissiteadmin": "\"Site Administrators\" are the people who manage the Moodle at your school/university/company or learning organisation. If you don't know how to contact them, please contact your teachers/trainers.",
     "whoops": "Oops!",
     "whyisthishappening": "Why is this happening?",
     "whyisthisrequired": "Why is this required?",