diff --git a/scripts/langindex.json b/scripts/langindex.json index c275a91ed..19eabe1cf 100644 --- a/scripts/langindex.json +++ b/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", diff --git a/src/assets/img/login/faq_qrcode.png b/src/assets/img/login/faq_qrcode.png new file mode 100644 index 000000000..cc936b168 Binary files /dev/null and b/src/assets/img/login/faq_qrcode.png differ diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json index e939777b9..7e4902eba 100644 --- a/src/assets/lang/en.json +++ b/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": "

Every organisation or school has their own custom address for their Moodle site.

To find the address of the Moodle site you want to connect to, do the following:

  1. Open a web browser and go to your school's or organisation's Moodle site login page
  2. 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}}
  3. Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"
  4. Now you can log into your site, using your username and password
    5. ", + "core.login.faqwhatisurlanswer": "

    Every organisation or school has their own custom address for their Moodle site.

    To find the address of the Moodle site you want to connect to, do the following:

    1. Open a web browser and go to your school's or organisation's Moodle site login page
    2. 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}}
    3. Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"
    4. Now you can log into your site, using your username and password
      5. ", "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": "

      If your organisation has enabled it, you will find a QR code on the web site at the bottom of your user profile page.

      {{$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.", diff --git a/src/core/login/lang/en.json b/src/core/login/lang/en.json index fae8f54da..dc38595fd 100644 --- a/src/core/login/lang/en.json +++ b/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": "

      Every organisation or school has their own custom address for their Moodle site.

      To find the address of the Moodle site you want to connect to, do the following:

      1. Open a web browser and go to your school's or organisation's Moodle site login page
      2. 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}}
      3. Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"
      4. Now you can log into your site, using your username and password
        5. ", + "faqwhatisurlanswer": "

        Every organisation or school has their own custom address for their Moodle site.

        To find the address of the Moodle site you want to connect to, do the following:

        1. Open a web browser and go to your school's or organisation's Moodle site login page
        2. 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}}
        3. Copy the address (do not copy the /login and what comes after), paste it into the Moodle App and click \"Connect!\"
        4. Now you can log into your site, using your username and password
          5. ", "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": "

          If your organisation has enabled it, you will find a QR code on the web site at the bottom of your user profile page.

          {{$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.", diff --git a/src/core/login/pages/site-help/site-help.html b/src/core/login/pages/site-help/site-help.html index 2aa5a8247..21ed2c8b7 100644 --- a/src/core/login/pages/site-help/site-help.html +++ b/src/core/login/pages/site-help/site-help.html @@ -14,7 +14,7 @@

          {{ 'core.login.faqwhatisurlquestion' | translate }}

           - + @@ -36,5 +36,12 @@

          {{ 'core.login.faqtestappanswer' | translate }}

           + +

          {{ 'core.login.faqwhereisqrcode' | translate }}

          +           + diff --git a/src/core/login/pages/site-help/site-help.scss b/src/core/login/pages/site-help/site-help.scss index 01699c80f..4f651c797 100644 --- a/src/core/login/pages/site-help/site-help.scss +++ b/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; + } } \ No newline at end of file diff --git a/src/core/login/pages/site-help/site-help.ts b/src/core/login/pages/site-help/site-help.ts index eb489e3c2..4f6825377 100644 --- a/src/core/login/pages/site-help/site-help.ts +++ b/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 = ''; + 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 = 'https://moodle.com/getstarted/'; } diff --git a/src/core/login/pages/site/site.html b/src/core/login/pages/site/site.html index 637c8c90e..feaa73b99 100644 --- a/src/core/login/pages/site/site.html +++ b/src/core/login/pages/site/site.html @@ -48,10 +48,16 @@           - - - {{ 'core.scanqr' | translate }} - + + + + + + {{ 'core.scanqr' | translate }} + + + + diff --git a/src/core/login/pages/site/site.scss b/src/core/login/pages/site/site.scss index 31fcbd528..85bc01d69 100644 --- a/src/core/login/pages/site/site.scss +++ b/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; + } } diff --git a/src/core/login/pages/site/site.ts b/src/core/login/pages/site/site.ts index 474c9f523..eec309a4c 100644 --- a/src/core/login/pages/site/site.ts +++ b/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(); } @@ -346,24 +346,51 @@ export class CoreLoginSitePage { * @return {ValidatorFn} Validation results. */ protected moodleUrlValidator(): ValidatorFn { - return (control: AbstractControl): {[key: string]: any} | null => { - const value = control.value.trim(); - let valid = value.length >= 3 && CoreUrl.isValidMoodleUrl(value); + return (control: AbstractControl): {[key: string]: any} | null => { + const value = control.value.trim(); + let valid = value.length >= 3 && CoreUrl.isValidMoodleUrl(value); - if (!valid) { - const demo = !!this.getDemoSiteData(value); + if (!valid) { + const demo = !!this.getDemoSiteData(value); - if (demo) { - valid = true; + if (demo) { + valid = true; + } } - } - return valid ? null : {siteUrl: {value: control.value}}; - }; + return valid ? null : {siteUrl: {value: control.value}}; + }; + } + + /** + * 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 { // Scan for a QR code. diff --git a/src/core/login/providers/helper.ts b/src/core/login/providers/helper.ts index a1d31aa0e..1bd6a43f6 100644 --- a/src/core/login/providers/helper.ts +++ b/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 = ''; + static FAQ_QRCODE_IMAGE_HTML = ''; protected logger; protected isSSOConfirmShown = false;