MOBILE-3458 login: Show qr when configured

src/config.json

@@ -81,6 +81,7 @@
     "siteurl": "",
     "sitename": "",
     "multisitesdisplay": "",
+    "onlyallowlistedsites": false,
     "skipssoconfirmation": false,
     "forcedefaultlanguage": false,
     "privacypolicy": "https:\/\/moodle.net\/moodle-app-privacy\/",

src/core/login/login.scss

@@ -105,4 +105,10 @@ ion-app.app-root page-core-login-site {
             background: transparent;
         }
     }
+
+    .core-login-site-qrcode-separator {
+        text-align: center;
+        margin-top: 12px;
+        font-size: 1.2em;
+    }
 }

src/core/login/pages/credentials/credentials.html

@@ -34,6 +34,16 @@
             <div padding>
                 <button ion-button block [disabled]="siteChecked && !isBrowserSSO && !credForm.valid" class="core-login-login-button">{{ 'core.login.loginbutton' | translate }}</button>
             </div>
+
+            <ng-container *ngIf="showScanQR">
+                <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
+                <ion-item class="core-login-site-qrcode">
+                    <a ion-button block color="light" margin-top icon-start (click)="showInstructionsAndScanQR()">
+                        <core-icon name="fa-qrcode" aria-hidden="true"></core-icon>
+                        {{ 'core.scanqr' | translate }}
+                    </a>
+                </ion-item>
+            </ng-container>
         </form>
 
         <!-- Forgotten password button. -->

src/core/login/pages/credentials/credentials.ts

@@ -16,12 +16,14 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { CoreAppProvider } from '@providers/app';
+import { CoreUtils } from '@providers/utils/utils';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreLoginHelperProvider } from '../../providers/helper';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CoreConfigConstants } from '../../../../configconstants';
+import { CoreCustomURLSchemes } from '@providers/urlschemes';
 
 /**
  * Page to enter the user credentials.
@@ -47,6 +49,7 @@ export class CoreLoginCredentialsPage {
     isBrowserSSO = false;
     isFixedUrlSet = false;
     showForgottenPassword = true;
+    showScanQR: boolean;
 
     protected siteConfig;
     protected eventThrown = false;
@@ -74,6 +77,17 @@ export class CoreLoginCredentialsPage {
             username: [navParams.get('username') || '', Validators.required],
             password: ['', Validators.required]
         });
+
+        const canScanQR = CoreUtils.instance.canScanQR();
+        if (canScanQR) {
+            if (typeof CoreConfigConstants['displayqroncredentialscreen'] == 'undefined') {
+                this.showScanQR = this.loginHelper.isFixedUrlSet();
+            } else {
+                this.showScanQR = !!CoreConfigConstants['displayqroncredentialscreen'];
+            }
+        } else {
+            this.showScanQR = false;
+        }
     }
 
     /**
@@ -267,4 +281,46 @@ export class CoreLoginCredentialsPage {
     signup(): void {
         this.navCtrl.push('CoreLoginEmailSignupPage', { siteUrl: this.siteUrl });
     }
+
+    /**
+     * Show instructions and scan QR code.
+     */
+    showInstructionsAndScanQR(): void {
+        // Show some instructions first.
+        this.domUtils.showAlertWithOptions({
+            title: this.translate.instant('core.login.faqwhereisqrcode'),
+            message: this.translate.instant('core.login.faqwhereisqrcodeanswer',
+                {$image: CoreLoginHelperProvider.FAQ_QRCODE_IMAGE_HTML}),
+            buttons: [
+                {
+                    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.
+        const text = await CoreUtils.instance.scanQR();
+
+        if (text && CoreCustomURLSchemes.instance.isCustomURL(text)) {
+            try {
+                await CoreCustomURLSchemes.instance.handleCustomURL(text);
+            } catch (error) {
+                CoreCustomURLSchemes.instance.treatHandleCustomURLError(error);
+            }
+        }
+    }
 }

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

@@ -56,17 +56,6 @@
                     <ion-option *ngFor="let site of fixedSites" [value]="site.url">{{site.name}}</ion-option>
                 </ion-select>
             </ion-item>
-
-            <ng-container *ngIf="!fixedSites && showScanQR && !hasSites && !enteredSiteUrl">
-                <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
-                <ion-item class="core-login-site-qrcode">
-                    <a ion-button block color="light" margin-top icon-start (click)="showInstructionsAndScanQR()">
-                        <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. -->
@@ -85,6 +74,16 @@
             <a *ngFor="let site of fixedSites" ion-button block (click)="connect($event, site.url)" [title]="site.name" margin-bottom>{{site.name}}</a>
         </div>
 
+        <ng-container *ngIf="showScanQR && !hasSites && !enteredSiteUrl">
+            <div class="core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
+            <ion-item class="core-login-site-qrcode">
+                <a ion-button block color="light" margin-top icon-start (click)="showInstructionsAndScanQR()">
+                    <core-icon name="fa-qrcode" aria-hidden="true"></core-icon>
+                    {{ 'core.scanqr' | translate }}
+                </a>
+            </ion-item>
+        </ng-container>
+
         <!-- Help. -->
         <ion-list no-lines margin-top>
             <a ion-item text-center text-wrap class="core-login-need-help" (click)="showHelp()" detail-none>

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

@@ -129,10 +129,4 @@ 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

@@ -80,7 +80,6 @@ export class CoreLoginSitePage {
             protected textUtils: CoreTextUtilsProvider) {
 
         this.showKeyboard = !!navParams.get('showKeyboard');
-        this.showScanQR = this.utils.canScanQR();
 
         let url = '';
 
@@ -103,6 +102,9 @@ export class CoreLoginSitePage {
             });
         }
 
+        this.showScanQR = this.utils.canScanQR() && (typeof CoreConfigConstants['displayqronsitescreen'] == 'undefined' ||
+            !!CoreConfigConstants['displayqronsitescreen']);
+
         this.siteForm = fb.group({
             siteUrl: [url, this.moodleUrlValidator()]
         });