MOBILE-2995 login: Improve UX of QR scan

scripts/langindex.json

@@ -1333,6 +1333,8 @@
   "core.browser": "local_moodlemobileapp",
   "core.cancel": "moodle",
   "core.cannotconnect": "local_moodlemobileapp",
+  "core.cannotconnecttrouble": "local_moodlemobileapp",
+  "core.cannotconnectverify": "local_moodlemobileapp",
   "core.cannotdownloadfiles": "local_moodlemobileapp",
   "core.captureaudio": "local_moodlemobileapp",
   "core.capturedimage": "local_moodlemobileapp",
@@ -1721,6 +1723,8 @@
   "core.login.faqtestappquestion": "local_moodlemobileapp",
   "core.login.faqwhatisurlanswer": "local_moodlemobileapp",
   "core.login.faqwhatisurlquestion": "local_moodlemobileapp",
+  "core.login.faqwhereisqrcode": "local_moodlemobileapp",
+  "core.login.faqwhereisqrcodeanswer": "local_moodlemobileapp",
   "core.login.findyoursite": "local_moodlemobileapp",
   "core.login.firsttime": "moodle",
   "core.login.forcepasswordchangenotice": "moodle",
@@ -1759,8 +1763,6 @@
   "core.login.policyagreement": "moodle",
   "core.login.policyagreementclick": "moodle",
   "core.login.potentialidps": "auth",
-  "core.login.problemconnectingerror": "local_moodlemobileapp",
-  "core.login.problemconnectingerrorcontinue": "local_moodlemobileapp",
   "core.login.profileinvaliddata": "admin",
   "core.login.recaptchachallengeimage": "local_moodlemobileapp",
   "core.login.recaptchaexpired": "local_moodlemobileapp",
@@ -1789,6 +1791,8 @@
   "core.login.usernotaddederror": "error",
   "core.login.visitchangepassword": "local_moodlemobileapp",
   "core.login.webservicesnotenabled": "local_moodlemobileapp",
+  "core.login.youcanstillconnectwithcredentials": "local_moodlemobileapp",
+  "core.login.yourenteredsite": "local_moodlemobileapp",
   "core.lostconnection": "local_moodlemobileapp",
   "core.mainmenu.changesite": "local_moodlemobileapp",
   "core.mainmenu.help": "moodle",
@@ -1866,6 +1870,7 @@
   "core.previous": "moodle",
   "core.proceed": "moodle",
   "core.pulltorefresh": "local_moodlemobileapp",
+  "core.qrscanner": "local_moodlemobileapp",
   "core.question.answer": "question",
   "core.question.answersaved": "question",
   "core.question.cannotdeterminestatus": "local_moodlemobileapp",
@@ -1908,6 +1913,7 @@
   "core.retry": "local_moodlemobileapp",
   "core.save": "moodle",
   "core.savechanges": "assign",
+  "core.scanqr": "local_moodlemobileapp",
   "core.search": "moodle",
   "core.searching": "local_moodlemobileapp",
   "core.searchresults": "moodle",

src/assets/lang/en.json

@@ -1721,8 +1721,10 @@
     "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.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\".<br>{{$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.faqwhereisqrcode": "Where can I find the QR code?",
+    "core.login.faqwhereisqrcodeanswer": "<p>If your organisation has enabled it, you will find a QR code on the web site at the bottom of your user profile page.</p>{{$image}}",
     "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.",
@@ -1752,6 +1754,7 @@
     "core.login.mustconfirm": "You need to confirm your account",
     "core.login.newaccount": "New account",
     "core.login.notloggedin": "You need to be logged in.",
+    "core.login.or": "OR",
     "core.login.password": "Password",
     "core.login.passwordforgotten": "Forgotten password",
     "core.login.passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.",

src/core/login/lang/en.json

@@ -33,8 +33,10 @@
     "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>",
+    "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\".<br>{{$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?",
+    "faqwhereisqrcode": "Where can I find the QR code?",
+    "faqwhereisqrcodeanswer": "<p>If your organisation has enabled it, you will find a QR code on the web site at the bottom of your user profile page.</p>{{$image}}",
     "findyoursite": "Find your site",
     "firsttime": "Is this your first time here?",
     "forcepasswordchangenotice": "You must change your password to proceed.",
@@ -64,6 +66,7 @@
     "mustconfirm": "You need to confirm your account",
     "newaccount": "New account",
     "notloggedin": "You need to be logged in.",
+    "or": "OR",
     "password": "Password",
     "passwordforgotten": "Forgotten password",
     "passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.",

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

@@ -14,7 +14,7 @@
         <ion-item text-wrap>
             <h2><b>{{ 'core.login.faqwhatisurlquestion' | translate }}</b></h2>
         </ion-item>
-        <ion-item text-wrap>
+        <ion-item text-wrap class="core-login-faqwhatisurlanswer">
             <div [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
             </div>
         </ion-item>
@@ -36,5 +36,12 @@
         <ion-item text-wrap>
             <p>{{ 'core.login.faqtestappanswer' | translate }}</p>
         </ion-item>
+        <ion-item text-wrap *ngIf="canScanQR">
+            <h2><b>{{ 'core.login.faqwhereisqrcode' | translate }}</b></h2>
+        </ion-item>
+        <ion-item text-wrap *ngIf="canScanQR" class="core-login-faqwhereisqrcodeanswer">
+            <div [innerHTML]="'core.login.faqwhereisqrcodeanswer' | translate: {$image: qrCodeImageHtml}">
+            </div>
+        </ion-item>
     </ion-list>
 </ion-content>

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

@@ -2,4 +2,14 @@ page-core-login-site-help {
     .content {
         background-color: $white;
     }
+
+    .core-login-faqwhatisurlanswer img {
+        max-height: 50px;
+    }
+
+    .core-login-faqwhereisqrcodeanswer img {
+        max-height: 220px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
 }

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

@@ -15,6 +15,8 @@
 import { Component } from '@angular/core';
 import { IonicPage, ViewController } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
+import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreLoginHelperProvider } from '../../providers/helper';
 
 /**
  * Component that displays some help regarding the CoreLoginSitePage.
@@ -28,11 +30,16 @@ export class CoreLoginSiteHelpPage {
 
     urlImageHtml: string;
     setupLinkHtml: string;
+    qrCodeImageHtml: string;
+    canScanQR: boolean;
 
     constructor(protected viewCtrl: ViewController,
-            protected translate: TranslateService) {
+            protected translate: TranslateService,
+            protected utils: CoreUtilsProvider) {
 
-        this.urlImageHtml = '<img src="assets/img/login/faq_url.png" role="presentation">';
+        this.canScanQR = this.utils.canScanQR() && false; // @todo: Enable it for 3.9 release.
+        this.urlImageHtml = CoreLoginHelperProvider.FAQ_URL_IMAGE_HTML;
+        this.qrCodeImageHtml = CoreLoginHelperProvider.FAQ_QRCODE_IMAGE_HTML;
         this.setupLinkHtml = '<a href="https://moodle.com/getstarted/" title="' +
                 this.translate.instant('core.login.faqsetupsitelinktitle') + '">https://moodle.com/getstarted/</a>';
     }

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

@@ -48,10 +48,16 @@
                 </ion-select>
             </ion-item>
 
-            <a *ngIf="showScanQR" ion-button block color="light" margin-top icon-start (click)="scanQR()">
+            <ng-container *ngIf="!fixedSites && showScanQR && !hasSites">
+                <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
+                <ion-item>
+                    <a ion-button block color="light" margin-top icon-start (click)="scanQR()">
                         <core-icon name="fa-qrcode" aria-hidden="true"></core-icon>
                         {{ 'core.scanqr' | translate }}
                     </a>
+                </ion-item>
+            </ng-container>
+
         </form>
 
         <!-- Pick the site from a list of fixed sites. -->

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

@@ -115,4 +115,10 @@ ion-app.app-root page-core-login-site {
     .core-login-default-icon {
         filter: grayscale(100%);
     }
+
+    .core-login-site-qrcode-separator {
+        text-align: center;
+        margin-top: 12px;
+        font-size: 1.2em;
+    }
 }

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

@@ -237,7 +237,7 @@ export class CoreLoginSitePage {
      * Show a help modal.
      */
     showHelp(): void {
-        const modal = this.modalCtrl.create('CoreLoginSiteHelpPage');
+        const modal = this.modalCtrl.create('CoreLoginSiteHelpPage', {}, { cssClass: 'core-modal-fullscreen' });
         modal.present();
     }
 
@@ -362,8 +362,35 @@ export class CoreLoginSitePage {
         };
     }
 
+    /**
+     * Show instructions and scan QR code.
+     *
+     * @todo Use it in 3.9 release instead of scanQR.
+     */
+    showInstructionsAndScanQR(): void {
+        // Show some instructions first.
+        this.domUtils.showAlertWithButtons(
+            this.translate.instant('core.login.faqwhereisqrcode'),
+            this.translate.instant('core.login.faqwhereisqrcodeanswer', {$image: CoreLoginHelperProvider.FAQ_QRCODE_IMAGE_HTML}),
+            [
+                {
+                    text: this.translate.instant('core.cancel'),
+                    role: 'cancel'
+                },
+                {
+                    text: this.translate.instant('core.next'),
+                    handler: (): void => {
+                        this.scanQR();
+                    }
+                },
+            ]
+        );
+    }
+
     /**
      * Scan a QR code and put its text in the URL input.
+     *
+     * @return Promise resolved when done.
      */
     async scanQR(): Promise<void> {
         // Scan for a QR code.

src/core/login/providers/helper.ts

@@ -75,6 +75,8 @@ export interface CoreLoginSSOData {
 @Injectable()
 export class CoreLoginHelperProvider {
     static OPEN_COURSE = 'open_course';
+    static FAQ_URL_IMAGE_HTML = '<img src="assets/img/login/faq_url.png" role="presentation">';
+    static FAQ_QRCODE_IMAGE_HTML = '<img src="assets/img/login/faq_qrcode.png" role="presentation">';
 
     protected logger;
     protected isSSOConfirmShown = false;