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 @@