EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2995 login: Improve UX of QR scan

main
Dani Palou 2020-04-23 11:28:31 +02:00
parent 2b57c9485d
commit 3923c796f8
11 changed files with 99 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/langindex.json
View File

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

BIN
src/assets/img/login/faq_qrcode.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

5
src/assets/lang/en.json
View File

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

5
src/core/login/lang/en.json
View File

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

9
src/core/login/pages/site-help/site-help.html
View File

@ -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>

10
src/core/login/pages/site-help/site-help.scss
View File

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

11
src/core/login/pages/site-help/site-help.ts
View File

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

14
src/core/login/pages/site/site.html
View File

@ -48,10 +48,16 @@
</ion-select>
</ion-item>
<a *ngIf="showScanQR" 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>
<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. -->

6
src/core/login/pages/site/site.scss
View File

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

49
src/core/login/pages/site/site.ts
View File

@ -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<void> {
// Scan for a QR code.

2
src/core/login/providers/helper.ts
View File

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