From 5aec4767196a80f9e662adb8a613cf6e0fb395c0 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 17 Nov 2021 12:06:37 +0100 Subject: [PATCH] feat(login): Added login page within application with links to CIAM login-functionality. (TV-595) Merge in TEA/mina-sidor-fa-web from feature/TV-595-ciam-login-page to develop Squashed commit of the following: commit 7796cbc958bfb14dccb6cfc329fb223b66643af1 Author: Erik Tiekstra Date: Wed Nov 17 09:46:47 2021 +0100 Using guard to check if user is logged in commit 43b9fca3d0d640b5c9711ec9837222ac2df5c782 Author: Erik Tiekstra Date: Wed Nov 17 08:32:10 2021 +0100 Added link-button as logout link to my account commit ab40fae0d4741ee30af146a41ce254c6c7f6658a Author: Erik Tiekstra Date: Wed Nov 17 08:25:04 2021 +0100 Refactored authentication a bit commit d1c75864f2a0b1867b372655e81e37b28a067503 Merge: 45f35088 8f05343e Author: Erik Tiekstra Date: Wed Nov 17 07:04:32 2021 +0100 Merge branch 'develop' into feature/TV-595-ciam-login-page commit 45f3508811de2842af1c095ff72949b619d5bc8d Author: Erik Tiekstra Date: Tue Nov 16 16:28:44 2021 +0100 Added resolve to check if user already is logged in when navigating to login page commit 44b212fb1e0eab7fdb823a8f41ea0d780c920ee0 Merge: 56ed0e57 54ac27ef Author: Erik Tiekstra Date: Tue Nov 16 13:58:58 2021 +0100 Merge branch 'develop' into feature/TV-595-ciam-login-page commit 56ed0e57fb3f19c4c41ec3fe676db41ed5831557 Author: Erik Tiekstra Date: Tue Nov 16 13:48:53 2021 +0100 Implemented custom login page commit 27a514758d73d685e80a37e490646a759783d1f5 Author: Erik Tiekstra Date: Tue Nov 16 11:51:57 2021 +0100 WIP --- .../src/app/app-routing.module.ts | 7 +++ apps/mina-sidor-fa/src/app/app.component.ts | 2 +- .../src/app/pages/login/login.component.html | 48 +++++++++++++++++ .../src/app/pages/login/login.component.scss | 36 +++++++++++++ .../app/pages/login/login.component.spec.ts | 30 +++++++++++ .../src/app/pages/login/login.component.ts | 15 ++++++ .../src/app/pages/login/login.module.ts | 20 +++++++ .../my-account/my-account.component.html | 4 +- .../app/pages/my-account/my-account.module.ts | 4 +- .../components/icon/icon.component.html | 7 +++ .../shared/components/icon/icon.component.ts | 1 + .../components/layout/layout.component.html | 2 +- .../components/layout/layout.component.ts | 1 - .../src/app/shared/enums/icon-type.enum.ts | 1 + .../src/app/shared/guards/auth.guard.ts | 48 +++++++---------- .../shared/guards/skip-if-logged-in.guard.ts | 19 +++++++ .../services/api/authentication.service.ts | 47 ++++++++-------- .../shared/services/{api => }/idle.service.ts | 5 +- libs/styles/src/mixins/_buttons.scss | 54 ++++++++++++------- .../link-button/link-button.component.html | 19 ++++++- .../link-button/link-button.component.scss | 12 ++--- .../src/link-button/link-button.component.ts | 15 ++++-- 22 files changed, 302 insertions(+), 95 deletions(-) create mode 100644 apps/mina-sidor-fa/src/app/pages/login/login.component.html create mode 100644 apps/mina-sidor-fa/src/app/pages/login/login.component.scss create mode 100644 apps/mina-sidor-fa/src/app/pages/login/login.component.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/login/login.component.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/login/login.module.ts create mode 100644 apps/mina-sidor-fa/src/app/shared/guards/skip-if-logged-in.guard.ts rename apps/mina-sidor-fa/src/app/shared/services/{api => }/idle.service.ts (94%) diff --git a/apps/mina-sidor-fa/src/app/app-routing.module.ts b/apps/mina-sidor-fa/src/app/app-routing.module.ts index f6fe619..1659717 100644 --- a/apps/mina-sidor-fa/src/app/app-routing.module.ts +++ b/apps/mina-sidor-fa/src/app/app-routing.module.ts @@ -6,6 +6,7 @@ import { environment } from '@msfa-environment'; import { AuthGuard } from '@msfa-guards/auth.guard'; import { OrganizationGuard } from '@msfa-guards/organization.guard'; import { RoleGuard } from '@msfa-guards/role.guard'; +import { SkipIfLoggedInGuard } from '@msfa-guards/skip-if-logged-in.guard'; const activeFeatures: Feature[] = environment.activeFeatures; @@ -16,6 +17,12 @@ const routes: Routes = [ loadChildren: () => import('./pages/start/start.module').then(m => m.StartModule), canActivate: [AuthGuard, OrganizationGuard], }, + { + path: 'logga-in', + data: { title: 'Logga in' }, + loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule), + canActivate: [SkipIfLoggedInGuard], + }, { path: 'logga-ut', data: { title: 'Logga ut' }, diff --git a/apps/mina-sidor-fa/src/app/app.component.ts b/apps/mina-sidor-fa/src/app/app.component.ts index cf3fc21..6362df5 100644 --- a/apps/mina-sidor-fa/src/app/app.component.ts +++ b/apps/mina-sidor-fa/src/app/app.component.ts @@ -5,7 +5,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { APPLICATION_CLOSED_TIME_STAMP } from '@msfa-constants/local-storage-keys'; import { environment } from '@msfa-environment'; import { AuthenticationService } from '@msfa-services/api/authentication.service'; -import { IdleService } from '@msfa-services/api/idle.service'; +import { IdleService } from '@msfa-services/idle.service'; import { Observable } from 'rxjs'; import { filter, map, switchMap } from 'rxjs/operators'; diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.html b/apps/mina-sidor-fa/src/app/pages/login/login.component.html new file mode 100644 index 0000000..95324c0 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.html @@ -0,0 +1,48 @@ + + + + + diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.scss b/apps/mina-sidor-fa/src/app/pages/login/login.component.scss new file mode 100644 index 0000000..1cc7a37 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.scss @@ -0,0 +1,36 @@ +@import 'mixins/list'; +@import 'variables/gutters'; + +.login { + &__content { + display: flex; + justify-content: space-between; + gap: $digi--layout--gutter--xxl; + } + + &__sub-heading { + margin: 0; + } + + &__cta-wrapper { + @include msfa__reset-list; + min-width: 24rem; + display: flex; + flex-direction: column; + gap: $digi--layout--gutter; + } + + &__help { + max-width: 50%; + display: flex; + flex-direction: column; + gap: $digi--layout--gutter; + } + + &__links { + @include msfa__reset-list; + display: flex; + flex-direction: column; + gap: $digi--layout--gutter--s; + } +} diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/login/login.component.spec.ts new file mode 100644 index 0000000..8398812 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.spec.ts @@ -0,0 +1,30 @@ +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + declarations: [LoginComponent], + imports: [RouterTestingModule, HttpClientTestingModule], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.component.ts b/apps/mina-sidor-fa/src/app/pages/login/login.component.ts new file mode 100644 index 0000000..5c61a44 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/login/login.component.ts @@ -0,0 +1,15 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { environment } from '@msfa-environment'; + +@Component({ + selector: 'msfa-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class LoginComponent { + private readonly _baseLoginUrl = `${environment.ciam.loginUrl}&client_id=${environment.ciam.clientId}&redirect_uri=${window.location.origin}&template=msfa`; + mobileBankIdLink = `${this._baseLoginUrl}&acr_values=bankid-mobile`; + bankIdLink = `${this._baseLoginUrl}&acr_values=bankid`; + passwordLink = `${this._baseLoginUrl}&acr_values=password`; +} diff --git a/apps/mina-sidor-fa/src/app/pages/login/login.module.ts b/apps/mina-sidor-fa/src/app/pages/login/login.module.ts new file mode 100644 index 0000000..565533e --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/login/login.module.ts @@ -0,0 +1,20 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { IconModule } from '@msfa-shared/components/icon/icon.module'; +import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; +import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; +import { LoginComponent } from './login.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [LoginComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: LoginComponent }]), + LayoutModule, + UiLinkButtonModule, + IconModule, + ], +}) +export class LoginModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html index 2f19ef0..91c02c9 100644 --- a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html +++ b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.html @@ -4,10 +4,10 @@
diff --git a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts index 697bb72..502d19d 100644 --- a/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts @@ -1,4 +1,3 @@ -import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -7,6 +6,8 @@ import { IconModule } from '@msfa-shared/components/icon/icon.module'; import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module'; import { RolesDialogModule } from '@msfa-shared/components/roles-dialog/roles-dialog.module'; +import { UiLinkButtonModule } from '@ui/link-button/link-button.module'; +import { UiSkeletonModule } from '@ui/skeleton/skeleton.module'; import { MyAccountComponent } from './my-account.component'; @NgModule({ @@ -21,6 +22,7 @@ import { MyAccountComponent } from './my-account.component'; OrganizationPickerFormModule, RolesDialogModule, HideTextModule, + UiLinkButtonModule, ], }) export class MyAccountModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html b/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html index 80fbd8c..96f3f33 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/icon/icon.component.html @@ -1,4 +1,11 @@