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

main
Dani Palou 2020-03-31 16:22:34 +02:00
parent fdb6150e57
commit 9693cda987
8 changed files with 112 additions and 18 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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,6 +176,14 @@ 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.
*
@ -171,12 +191,8 @@ export class CoreLoginSitePage {
* @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);
}
/**

View File

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