Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Add error type for security #1011

Merged
merged 4 commits into from
Aug 30, 2017
Merged

Add error type for security #1011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c03696f
Initial commit
Blackbaud-JeffDye Aug 23, 2017
83b1eec
Now using correct base64
Blackbaud-JeffDye Aug 23, 2017
fd2a89e
Merge branch 'master' into error-security
Aug 29, 2017
85b0118
Merge branch 'master' into error-security
Blackbaud-SteveBrush Aug 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions skyux-spa-visual-tests/src/app/error/error-visual.component.html
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/app/components/error/error-demo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ <h3>Pre-defined error types</h3>
<option value="broken">Broken</option>
<option value="notfound">NotFound</option>
<option value="construction">Construction</option>
<option value="security">Security</option>
</select>
<sky-error [errorType]="errorType">
<sky-error-action>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/error/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
[isOptional]="true"
>
An attribute to specify a set of pre-defined values for the image, title, and description. The valid options are <code>broken</code>,
<code>not-found</code>, and <code>construction</code>.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comparison used in the component is this.errorType.toLowerCase() === 'notfound', so just wanted to update the docs accordingly

<code>notfound</code>, <code>construction</code>, and <code>security</code>.
</sky-demo-page-property>

</sky-demo-page-properties>
Expand Down
4 changes: 4 additions & 0 deletions src/locales/resources_en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,10 @@
"_description": "The error component title message for the not found error type",
"message": "Sorry, we can't reach that page."
},
"error_component_security_title": {
"_description": "The error component title message for the security error type",
"message": "You don't have permission to access that page."
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a placeholder, please let me know what the suggested text is for the title (and if there should be a description too).

},
"error_description_broken": {
"_description": "Text used for the error description to when page is broken.",
"message": "Try to refresh this page or come back later."
Expand Down
2 changes: 2 additions & 0 deletions src/modules/error/error.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
</div>
<div *ngIf="showConstructionImage()" class="sky-error-construction-image">
</div>
<div *ngIf="showSecurityImage()" class="sky-error-security-image">
</div>

<ng-content select="sky-error-image"></ng-content>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/modules/error/error.component.scss
View file
Open in desktop

Large diffs are not rendered by default.

45 changes: 43 additions & 2 deletions src/modules/error/error.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,14 @@ describe('Error component', () => {
expect(el.querySelector('.sky-error-broken-image')).toExist();
expect(el.querySelector('.sky-error-notfound-image')).not.toExist();
expect(el.querySelector('.sky-error-construction-image')).not.toExist();
expect(el.querySelector('.sky-error-security-image')).not.toExist();

expect(el.querySelector('.sky-error-title')).toHaveText(title);
expect(el.querySelector('.sky-error-description')).toHaveText(description);
expect(el.querySelector('.sky-error-action button')).toHaveText('Refresh');
});

it('error type notfound displays correct image, title, description, and action text', () => {
it('error type notfound displays correct image, title, and action text', () => {
let html = `
<sky-error errorType="notfound">
<sky-error-action>
Expand Down Expand Up @@ -84,12 +85,13 @@ describe('Error component', () => {
expect(el.querySelector('.sky-error-broken-image')).not.toExist();
expect(el.querySelector('.sky-error-notfound-image')).toExist();
expect(el.querySelector('.sky-error-construction-image')).not.toExist();
expect(el.querySelector('.sky-error-security-image')).not.toExist();

expect(el.querySelector('.sky-error-title')).toHaveText(title);
expect(el.querySelector('.sky-error-action button')).toHaveText('Refresh');
});

it('error type construction displays correct image, title, description, and action text', () => {
it('error type construction displays correct image, title, and action text', () => {
let html = `
<sky-error errorType="construction">
<sky-error-action>
Expand Down Expand Up @@ -138,6 +140,43 @@ describe('Error component', () => {
expect(el.querySelector('.sky-error-action button')).toHaveText('Refresh');
});

it('error type security displays correct image, title, description, and action text', () => {
let html = `
<sky-error errorType="security">
<sky-error-action>
<button type="submit" class="sky-btn sky-btn-primary" (click)="customAction()">
Refresh
</button>
</sky-error-action>
</sky-error>`;

let fixture = TestBed
.overrideComponent(
ErrorTestComponent,
{
set: {
template: html
}
}
)
.createComponent(ErrorTestComponent);

let el = fixture.nativeElement;

fixture.detectChanges();

let title = 'You don\'t have permission to access that page.';

// check image
expect(el.querySelector('.sky-error-broken-image')).not.toExist();
expect(el.querySelector('.sky-error-notfound-image')).not.toExist();
expect(el.querySelector('.sky-error-construction-image')).not.toExist();
expect(el.querySelector('.sky-error-security-image')).toExist();

expect(el.querySelector('.sky-error-title')).toHaveText(title);
expect(el.querySelector('.sky-error-action button')).toHaveText('Refresh');
});

it('error type custom displays correct image, title, description, and action text', () => {
let html = `
<sky-error>
Expand Down Expand Up @@ -170,6 +209,7 @@ describe('Error component', () => {
expect(el.querySelector('.sky-error-broken-image')).not.toExist();
expect(el.querySelector('.sky-error-notfound-image')).not.toExist();
expect(el.querySelector('.sky-error-construction-image')).not.toExist();
expect(el.querySelector('.sky-error-security-image')).not.toExist();

expect(el.querySelector('.sky-error-image-container')).toHaveText('test image');
expect(el.querySelector('.sky-error-title')).toHaveText('test title');
Expand Down Expand Up @@ -245,6 +285,7 @@ describe('Error component', () => {
expect(el.querySelector('.sky-error-broken-image')).not.toExist();
expect(el.querySelector('.sky-error-notfound-image')).not.toExist();
expect(el.querySelector('.sky-error-construction-image')).not.toExist();
expect(el.querySelector('.sky-error-security-image')).not.toExist();

expect(el.querySelector('.sky-error-image-container')).toHaveText('test image');
expect(el.querySelector('.sky-error-title')).toHaveText('test title');
Expand Down
8 changes: 8 additions & 0 deletions src/modules/error/error.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export class SkyErrorComponent implements OnInit {
} else if (this.errorType.toLowerCase() === 'construction') {
this.title = this.resources.getString('error_component_construction_title');
this.description = this.resources.getString('error_component_construction_description');

} else if (this.errorType.toLowerCase() === 'security') {
this.title = this.resources.getString('error_component_security_title');
this.description = undefined;
}
}

Expand All @@ -58,4 +62,8 @@ export class SkyErrorComponent implements OnInit {
return this.errorType && this.errorType.toLowerCase() === 'construction';
}

public showSecurityImage() {
return this.errorType && this.errorType.toLowerCase() === 'security';
}

}