Skip to content

Commit 09e3e00

Browse files
committed
MOBILE-3389 login: Style new errors on login
1 parent 9693cda commit 09e3e00

File tree

8 files changed

+53
-23
lines changed

8 files changed

+53
-23
lines changed

src/assets/lang/en.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1331,7 +1331,7 @@
13311331
"core.block.blocks": "Blocks",
13321332
"core.browser": "Browser",
13331333
"core.cancel": "Cancel",
1334-
"core.cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
1334+
"core.cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
13351335
"core.cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
13361336
"core.captureaudio": "Record audio",
13371337
"core.capturedimage": "Taken picture.",
@@ -1707,7 +1707,7 @@
17071707
"core.login.emailnotmatch": "Emails do not match",
17081708
"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",
17091709
"core.login.errordeletesite": "An error occurred while deleting this site. Please try again.",
1710-
"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.",
1710+
"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>",
17111711
"core.login.errorupdatesite": "An error occurred while updating the site's token.",
17121712
"core.login.faqcannotconnectanswer": "Please, contact your site administrator.",
17131713
"core.login.faqcannotconnectquestion": "I typed my site address correctly but I still can't connect.",

src/core/login/lang/en.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"emailnotmatch": "Emails do not match",
2525
"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",
2626
"errordeletesite": "An error occurred while deleting this site. Please try again.",
27-
"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.",
27+
"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>",
2828
"errorupdatesite": "An error occurred while updating the site's token.",
2929
"faqcannotconnectanswer": "Please, contact your site administrator.",
3030
"faqcannotconnectquestion": "I typed my site address correctly but I still can't connect.",

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
<ion-item text-wrap>
1515
<h2><b>{{ 'core.login.faqwhatisurlquestion' | translate }}</b></h2>
1616
</ion-item>
17-
<ion-item text-wrap [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
17+
<ion-item text-wrap>
18+
<div [innerHTML]="'core.login.faqwhatisurlanswer' | translate: {$image: urlImageHtml}">
19+
</div>
1820
</ion-item>
1921
<ion-item text-wrap>
2022
<h2><b>{{ 'core.login.faqcannotconnectquestion' | translate }}</b></h2>
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
page-core-login-site-help {
2+
.content {
3+
background-color: $white;
4+
}
5+
}

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

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -49,25 +49,32 @@ <h2>{{site.name}}</h2>
4949
</div>
5050

5151
<!-- Error. -->
52-
<ion-card padding *ngIf="errorMessage">
53-
<ion-item>
54-
<h3>{{ 'core.whoops' | translate }}</h3>
55-
<button ion-button icon-only item-end (click)="hideLoginIssue()" [attr.aria-label]="'core.hide' | translate">
56-
<ion-icon name="close"></ion-icon>
57-
</button>
58-
</ion-item>
59-
<p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
60-
<p>{{ 'core.login.problemconnectingerror' | translate }}</p>
61-
<p padding>{{ errorUrl }}</p>
62-
<p>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</p>
63-
<h3>{{ 'core.login.stillcantconnect' | translate }}</h3>
64-
<p>{{ 'core.login.contactyouradministrator' | translate }}</p>
65-
<p>{{ 'core.whoissiteadmin' | translate }}</p>
66-
</ion-card>
52+
<div padding-top *ngIf="errorMessage" >
53+
<ion-card class="core-site-error">
54+
<ion-card-header>
55+
{{ 'core.whoops' | translate }}
56+
</ion-card-header>
57+
<ion-card-content>
58+
<p><core-format-text [text]="errorMessage" [filter]="false"></core-format-text></p>
59+
<ng-container *ngIf="errorUrl">
60+
<p>{{ 'core.login.problemconnectingerror' | translate }}</p>
61+
<p padding>{{ errorUrl }}</p>
62+
<p><strong>{{ 'core.login.problemconnectingerrorcontinue' | translate }}</strong></p>
63+
</ng-container>
64+
</ion-card-content>
65+
<ion-card-header>
66+
{{ 'core.login.stillcantconnect' | translate }}
67+
</ion-card-header>
68+
<ion-card-content>
69+
<p>{{ 'core.login.contactyouradministrator' | translate }}</p>
70+
<p>{{ 'core.whoissiteadmin' | translate }}</p>
71+
</ion-card-content>
72+
</ion-card>
73+
</div>
6774

6875
<!-- Help. -->
6976
<ion-list>
70-
<a ion-item text-center (click)="showHelp()">
77+
<a ion-item text-center (click)="showHelp()" detail-none>
7178
{{ 'core.needhelp' | translate }}
7279
</a>
7380
</ion-list>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,20 @@ ion-app.app-root page-core-login-site {
1010
background-color: $searchbar-ios-toolbar-input-background;
1111
}
1212
}
13+
14+
.core-site-error {
15+
background: $red-light;
16+
margin-left: 0;
17+
margin-right: 0;
18+
width: 100%;
19+
user-select: text;
20+
21+
p, ion-card-header {
22+
color: $red-dark;
23+
user-select: text;
24+
}
25+
ion-card-header {
26+
font-weight: bold;
27+
}
28+
}
1329
}

src/core/login/pages/site/site.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class CoreLoginSitePage {
104104
url = url.trim();
105105

106106
if (url.match(/^(https?:\/\/)?campus\.example\.edu/)) {
107-
this.showLoginIssue(url, this.translate.instant('core.login.errorexampleurl'));
107+
this.showLoginIssue(null, this.translate.instant('core.login.errorexampleurl'));
108108

109109
return;
110110
}
@@ -179,7 +179,7 @@ export class CoreLoginSitePage {
179179
/**
180180
* Hide the login error.
181181
*/
182-
hideLoginIssue(): void {
182+
protected hideLoginIssue(): void {
183183
this.errorUrl = null;
184184
this.errorMessage = null;
185185
}

src/lang/en.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"back": "Back",
1313
"browser": "Browser",
1414
"cancel": "Cancel",
15-
"cannotconnect": "Cannot connect: Verify that you have correctly typed the URL and that your site uses Moodle {{$a}} or later.",
15+
"cannotconnect": "<strong>Cannot connect</strong>: Verify that you have correctly typed your site address.",
1616
"cannotdownloadfiles": "File downloading is disabled. Please contact your site administrator.",
1717
"captureaudio": "Record audio",
1818
"capturedimage": "Taken picture.",

0 commit comments

Comments
 (0)