MOBILE-3389 login: Style new errors on login

main
Pau Ferrer Ocaña 2020-03-31 17:24:25 +02:00
parent 9693cda987
commit 09e3e00bac
8 changed files with 53 additions and 23 deletions

View File

@ -1331,7 +1331,7 @@
"core.block.blocks": "Blocks",
"core.browser": "Browser",
"core.cancel": "Cancel",
"core.cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
"core.cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
"core.cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
"core.captureaudio": "Record audio",
"core.capturedimage": "Taken picture.",
@ -1707,7 +1707,7 @@
"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.errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. <strong>Please use the URL of your school or organization's site.</strong>",
"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.",

View File

@ -24,7 +24,7 @@
"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.",
"errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. <strong>Please use the URL of your school or organization's site.</strong>",
"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.",

View File

@ -14,7 +14,9 @@
<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 text-wrap>
<div [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
</div>
</ion-item>
<ion-item text-wrap>
<h2><b>{{ 'core.login.faqcannotconnectquestion' | translate }}</b></h2>

View File

@ -0,0 +1,5 @@
page-core-login-site-help {
.content {
background-color: $white;
}
}

View File

@ -49,25 +49,32 @@
</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>
<div padding-top *ngIf="errorMessage" >
<ion-card class="core-site-error">
<ion-card-header>
{{ 'core.whoops' | translate }}
</ion-card-header>
<ion-card-content>
<p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
<ng-container *ngIf="errorUrl">
<p>{{ 'core.login.problemconnectingerror' | translate }}</p>
<p padding>{{ errorUrl }}</p>
<p><strong>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</strong></p>
</ng-container>
</ion-card-content>
<ion-card-header>
{{ 'core.login.stillcantconnect' | translate }}
</ion-card-header>
<ion-card-content>
<p>{{ 'core.login.contactyouradministrator' | translate }}</p>
<p>{{ 'core.whoissiteadmin' | translate }}</p>
</ion-card-content>
</ion-card>
</div>
<!-- Help. -->
<ion-list>
<a ion-item text-center (click)="showHelp()">
<a ion-item text-center (click)="showHelp()" detail-none>
{{ 'core.needhelp' | translate }}
</a>
</ion-list>

View File

@ -10,4 +10,20 @@ ion-app.app-root page-core-login-site {
background-color: $searchbar-ios-toolbar-input-background;
}
}
.core-site-error {
background: $red-light;
margin-left: 0;
margin-right: 0;
width: 100%;
user-select: text;
p, ion-card-header {
color: $red-dark;
user-select: text;
}
ion-card-header {
font-weight: bold;
}
}
}

View File

@ -104,7 +104,7 @@ export class CoreLoginSitePage {
url = url.trim();
if (url.match(/^(https?:\/\/)?campus\.example\.edu/)) {
this.showLoginIssue(url, this.translate.instant('core.login.errorexampleurl'));
this.showLoginIssue(null, this.translate.instant('core.login.errorexampleurl'));
return;
}
@ -179,7 +179,7 @@ export class CoreLoginSitePage {
/**
* Hide the login error.
*/
hideLoginIssue(): void {
protected hideLoginIssue(): void {
this.errorUrl = null;
this.errorMessage = null;
}

View File

@ -12,7 +12,7 @@
"back": "Back",
"browser": "Browser",
"cancel": "Cancel",
"cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
"cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
"cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
"captureaudio": "Record audio",
"capturedimage": "Taken picture.",