Skip to content

Commit

Permalink
feat(stark-ui): implement stark-session-card in stark session pages
Browse files Browse the repository at this point in the history 
ISSUES CLOSED: #718

BREAKING CHANGE: Refactor of Session Pages (login / logout / sessionExpired / preloading).

  - **stark-ui:** css on these components to change the default Stark logo will no longer work and should be refactored.
    For example adding this to `src/styles/styles.scss`
```SCSS
.stark-app-logo i {
  background-image: url("/assets/path-to-your-logo.png");
  background-size: contain;
}
```
  • Loading branch information
@carlo-nomes
carlo-nomes committed Mar 11, 2019
1 parent 4a1db25 commit debe387
Show file tree
Hide file tree
Showing 12 changed files with 92 additions and 136 deletions.
42 changes: 10 additions & 32 deletions packages/stark-ui/src/modules/session-ui/pages/login/_login-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,21 @@
/* stark-ui: src/modules/session-ui/pages/login/_login-page.component.scss */

.stark-login-page {
max-height: 95%;
display: flex;
flex-direction: column;
.mat-card-content {
a {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;

& content {
display: block;
overflow-y: auto;
}

& .dialog-title {
font-size: 2em;
}

& ul {
margin: 0;
padding: 0;
list-style: none;

& a {
display: block;
padding: 8px;
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: solid 1px $divider-color;

&:hover {
background-color: $offwhite;
background-color: rgba(0, 0, 0, 0.1);
}
}

& h3 {
font-weight: bold;
}

& p {
margin: 0;
.mat-list-text h3 {
font-weight: bold;
}
}
}
}
Expand Down
29 changes: 12 additions & 17 deletions packages/stark-ui/src/modules/session-ui/pages/login/login-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
<div class="stark-session-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<h2 class="dialog-title" translate>STARK.LOGIN.TITLE</h2>
<div *ngIf="userProfilesAvailable()">
<ul>
<li *ngFor="let user of users; trackBy: trackItemFn">
<a (click)="authenticateUser(user)">
<h3>{{ user.firstName }} {{ user.lastName }}</h3>
<p>({{ getUserRoles(user) }})</p>
</a>
</li>
</ul>
</div>
<div *ngIf="!userProfilesAvailable()" translate>STARK.LOGIN.NO_PROFILE</div>
</content>
</div>
<stark-session-card cardTitle="STARK.LOGIN.TITLE">
<mat-list *ngIf="userProfilesAvailable()">
<ng-container *ngFor="let user of users; trackBy: trackItemFn; let i = index">
<a mat-list-item (click)="authenticateUser(user)">
<h3 mat-line>{{ user.firstName }} {{ user.lastName }}</h3>
<p mat-line>({{ getUserRoles(user) }})</p>
</a>
<mat-divider *ngIf="i !== users.length - 1"></mat-divider>
</ng-container>
</mat-list>
<div *ngIf="!userProfilesAvailable()" translate>STARK.LOGIN.NO_PROFILE</div>
</stark-session-card>
18 changes: 15 additions & 3 deletions packages/stark-ui/src/modules/session-ui/pages/login/login-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/* tslint:disable:completed-docs */
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { RawParams } from "@uirouter/core";
import { CommonModule } from "@angular/common";
import { MatCardModule } from "@angular/material/card";
import { MatListModule } from "@angular/material/list";
import { MatDividerModule } from "@angular/material/divider";
import {
STARK_LOGGING_SERVICE,
STARK_ROUTING_SERVICE,
Expand All @@ -15,7 +19,8 @@ import {
MockStarkUserService
} from "@nationalbankbelgium/stark-core/testing";
import { TranslateModule } from "@ngx-translate/core";
import { RawParams } from "@uirouter/core";
import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
import { StarkSessionCardComponent } from "../../components/session-card/session-card.component";
import { StarkLoginPageComponent } from "./login-page.component";

describe("LoginPageComponent", () => {
Expand All @@ -38,8 +43,15 @@ describe("LoginPageComponent", () => {

beforeEach(async(() => {
return TestBed.configureTestingModule({
declarations: [StarkLoginPageComponent],
imports: [CommonModule, TranslateModule.forRoot()],
declarations: [StarkSessionCardComponent, StarkLoginPageComponent],
imports: [
CommonModule,
MatCardModule,
MatDividerModule,
MatListModule,
StarkAppLogoModule,
TranslateModule.forRoot()
],
providers: [
{ provide: STARK_LOGGING_SERVICE, useValue: mockLogger },
{ provide: STARK_ROUTING_SERVICE, useValue: mockRoutingService },
Expand Down
7 changes: 1 addition & 6 deletions packages/stark-ui/src/modules/session-ui/pages/preloading/_preloading-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
/* stark-ui: src/modules/session-ui/pages/preloading/_preloading-page.component.scss */

.stark-preloading-page {
& .stark-session-ui-page {
margin: 16px auto;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
}
text-align: center;
}

/* END stark-ui: src/modules/session-ui/pages/preloading/_preloading-page.component.scss */
36 changes: 13 additions & 23 deletions packages/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
<div class="stark-session-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<div *ngIf="!userFetchingFailed">
<div class="stark-loading-icon"></div>
<h1 translate>STARK.PRELOADING.FETCHING_USER_PROFILE</h1>
</div>
<div *ngIf="userFetchingFailed">
<h2 translate>STARK.PRELOADING.FETCHING_USER_PROFILE_FAILURE</h2>
<h2 translate>STARK.PRELOADING.CONTACT_IT_SUPPORT</h2>
<h3><span translate>STARK.PRELOADING.CORRELATION_ID</span>: {{ correlationId }}</h3>
<button
mat-button
mat-raised-button
color="primary"
(click)="reload()"
[attr.aria-label]="'STARK.PRELOADING.RELOAD' | translate"
>
<span translate>STARK.PRELOADING.RELOAD</span>
</button>
</div>
</content>
</div>
<stark-session-card [cardTitle]="userFetchingFailed && 'STARK.PRELOADING.FETCHING_USER_PROFILE_FAILURE'" aria-busy="true" aria-live="polite">
<ng-container *ngIf="!userFetchingFailed">
<div class="stark-loading-icon"></div>
<h1 translate>STARK.PRELOADING.FETCHING_USER_PROFILE</h1>
</ng-container>
<ng-container *ngIf="userFetchingFailed">
<h2 translate>STARK.PRELOADING.CONTACT_IT_SUPPORT</h2>
<h3><span translate>STARK.PRELOADING.CORRELATION_ID</span>: {{ correlationId }}</h3>
<button mat-button mat-raised-button color="primary" (click)="reload()" [attr.aria-label]="'STARK.PRELOADING.RELOAD' | translate">
<span translate>STARK.PRELOADING.RELOAD</span>
</button>
</ng-container>
</stark-session-card>
13 changes: 8 additions & 5 deletions packages/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/* tslint:disable:completed-docs */
import { async, ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
import { of, throwError } from "rxjs";
import { TranslateModule } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
import {
STARK_LOGGING_SERVICE,
STARK_ROUTING_SERVICE,
Expand All @@ -14,9 +18,8 @@ import {
MockStarkSessionService,
MockStarkUserService
} from "@nationalbankbelgium/stark-core/testing";
import { TranslateModule } from "@ngx-translate/core";
import { MatButtonModule } from "@angular/material/button";
import { of, throwError } from "rxjs";
import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
import { StarkSessionCardComponent } from "../../components/session-card/session-card.component";
import { StarkPreloadingPageComponent } from "./preloading-page.component";

describe("PreloadingPageComponent", () => {
Expand All @@ -31,8 +34,8 @@ describe("PreloadingPageComponent", () => {

beforeEach(async(() => {
return TestBed.configureTestingModule({
declarations: [StarkPreloadingPageComponent],
imports: [CommonModule, MatButtonModule, TranslateModule.forRoot()],
declarations: [StarkSessionCardComponent, StarkPreloadingPageComponent],
imports: [CommonModule, MatButtonModule, MatCardModule, StarkAppLogoModule, TranslateModule.forRoot(), StarkAppLogoModule],
providers: [
{ provide: STARK_LOGGING_SERVICE, useValue: mockLogger },
{ provide: STARK_ROUTING_SERVICE, useValue: mockRoutingService },
Expand Down
9 changes: 2 additions & 7 deletions ...tark-ui/src/modules/session-ui/pages/session-expired/_session-expired-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,9 @@
/* stark-ui: src/modules/session-ui/pages/session-expired/_session-expired-page.component.scss */

.stark-session-expired-page {
& .stark-session-ui-page {
margin: 16px auto;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
}
text-align: center;

& p {
p {
text-align: left;
line-height: 1.5;
}
Expand Down
23 changes: 6 additions & 17 deletions ...stark-ui/src/modules/session-ui/pages/session-expired/session-expired-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,7 @@
<div class="stark-session-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<h2 translate>STARK.SESSION_EXPIRED.TITLE</h2>
<stark-session-card cardTitle="STARK.SESSION_EXPIRED.TITLE">
<p class="md-body-1" translate>STARK.SESSION_EXPIRED.MESSAGE</p>

<p class="md-body-1" translate>STARK.SESSION_EXPIRED.MESSAGE</p>

<button
color="primary"
mat-button
mat-raised-button
(click)="reload()"
[attr.aria-label]="'STARK.SESSION_EXPIRED.RELOAD' | translate"
>
<span translate>STARK.SESSION_EXPIRED.RELOAD</span>
</button>
</content>
</div>
<button color="primary" mat-button mat-raised-button (click)="reload()" [attr.aria-label]="'STARK.SESSION_EXPIRED.RELOAD' | translate">
<span translate>STARK.SESSION_EXPIRED.RELOAD</span>
</button>
</stark-session-card>
14 changes: 9 additions & 5 deletions ...rk-ui/src/modules/session-ui/pages/session-expired/session-expired-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
/* tslint:disable:completed-docs */
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { TranslateModule } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { STARK_APP_CONFIG, STARK_LOGGING_SERVICE, StarkApplicationConfig } from "@nationalbankbelgium/stark-core";
import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
import { TranslateModule } from "@ngx-translate/core";
import { STARK_APP_CONFIG, STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE,StarkApplicationConfig } from "@nationalbankbelgium/stark-core";
import { MockStarkLoggingService,MockStarkRoutingService } from "@nationalbankbelgium/stark-core/testing";
import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
import { StarkSessionCardComponent } from "../../components/session-card/session-card.component";
import { StarkSessionExpiredPageComponent } from "./session-expired-page.component";

describe("SessionExpiredPageComponent", () => {
Expand All @@ -18,9 +21,10 @@ describe("SessionExpiredPageComponent", () => {

beforeEach(async(() => {
return TestBed.configureTestingModule({
declarations: [StarkSessionExpiredPageComponent],
imports: [CommonModule, MatButtonModule, TranslateModule.forRoot()],
declarations: [StarkSessionCardComponent, StarkSessionExpiredPageComponent],
imports: [CommonModule, MatButtonModule, MatCardModule, StarkAppLogoModule, TranslateModule.forRoot(), StarkAppLogoModule],
providers: [
{ provide: STARK_ROUTING_SERVICE, useValue: MockStarkRoutingService },
{ provide: STARK_LOGGING_SERVICE, useValue: mockLogger },
{ provide: STARK_APP_CONFIG, useValue: mockStarkAppConfig }
]
Expand Down
7 changes: 1 addition & 6 deletions .../stark-ui/src/modules/session-ui/pages/session-logout/_session-logout-page.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,7 @@
/* stark-ui: src/modules/session-ui/pages/session-logout/_session-logout-page.component.scss */

.stark-session-logout-page {
& .stark-session-ui-page {
margin: 16px auto;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
}
text-align: center;
}

/* END stark-ui: src/modules/session-ui/pages/session-logout/_session-logout-page.component.scss */
15 changes: 5 additions & 10 deletions ...s/stark-ui/src/modules/session-ui/pages/session-logout/session-logout-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
<div class="stark-session-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<content>
<h2 translate>STARK.SESSION_LOGOUT.TITLE</h2>

<button mat-button mat-raised-button color="primary" (click)="logon()" [attr.aria-label]="'STARK.SESSION_LOGOUT.LOGIN' | translate">
<span translate>STARK.SESSION_LOGOUT.LOGIN</span>
</button>
</content>
</div>
<stark-session-card cardTitle="STARK.SESSION_LOGOUT.TITLE">
<button mat-button mat-raised-button color="primary" (click)="logon()" [attr.aria-label]="'STARK.SESSION_LOGOUT.LOGIN' | translate">
<span translate>STARK.SESSION_LOGOUT.LOGIN</span>
</button>
</stark-session-card>
15 changes: 10 additions & 5 deletions ...tark-ui/src/modules/session-ui/pages/session-logout/session-logout-page.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
/* tslint:disable:completed-docs */
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { CommonModule } from "@angular/common";
import { STARK_APP_CONFIG, STARK_LOGGING_SERVICE, StarkApplicationConfig } from "@nationalbankbelgium/stark-core";
import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
import { TranslateModule } from "@ngx-translate/core";
import { CommonModule } from "@angular/common";
import { MatCardModule } from "@angular/material/card";
import { STARK_APP_CONFIG, STARK_LOGGING_SERVICE, STARK_ROUTING_SERVICE, StarkApplicationConfig } from "@nationalbankbelgium/stark-core";
import { MockStarkLoggingService, MockStarkRoutingService } from "@nationalbankbelgium/stark-core/testing";
import { StarkAppLogoModule } from "@nationalbankbelgium/stark-ui";
import { StarkSessionCardComponent } from "../../components/session-card/session-card.component";
import { StarkSessionLogoutPageComponent } from "./session-logout-page.component";

describe("SessionLogoutPageComponent", () => {
Expand All @@ -16,10 +19,12 @@ describe("SessionLogoutPageComponent", () => {

beforeEach(async(() => {
const mockLogger: MockStarkLoggingService = new MockStarkLoggingService();

return TestBed.configureTestingModule({
declarations: [StarkSessionLogoutPageComponent],
imports: [CommonModule, TranslateModule.forRoot()],
declarations: [StarkSessionCardComponent, StarkSessionLogoutPageComponent],
imports: [CommonModule, MatCardModule, TranslateModule.forRoot(), StarkAppLogoModule],
providers: [
{ provide: STARK_ROUTING_SERVICE, useValue: MockStarkRoutingService },
{ provide: STARK_LOGGING_SERVICE, useValue: mockLogger },
{ provide: STARK_APP_CONFIG, useValue: mockStarkAppConfig }
]
Expand Down

0 comments on commit debe387

Please sign in to comment.