From b06436adee1c5ac254e1881020a1d8ec9e9e18ec Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 8 Sep 2021 14:06:07 +0200 Subject: [PATCH] feat(authorization): Added unauthorized page. (TV-531) Squashed commit of the following: commit 67b70e2e2ece4df73be91dc7f3234543c933d12a Merge: aabf1cc 26a56fd Author: Erik Tiekstra Date: Wed Sep 8 14:01:09 2021 +0200 Merge branch 'develop' into feature/TV-531 commit aabf1cc4050b45ef055780dece9462ca121d343a Author: Erik Tiekstra Date: Wed Sep 8 14:00:15 2021 +0200 Added unauthorized page --- .../src/app/app-routing.module.ts | 30 ++++++++++++------- .../page-not-found.component.html | 7 ++--- .../page-not-found/page-not-found.module.ts | 8 ++++- .../unauthorized/unauthorized.component.html | 12 ++++++++ .../unauthorized/unauthorized.component.scss | 0 .../unauthorized.component.spec.ts | 29 ++++++++++++++++++ .../unauthorized/unauthorized.component.ts | 9 ++++++ .../pages/unauthorized/unauthorized.module.ts | 18 +++++++++++ .../back-link/back-link.component.scss | 12 ++------ .../components/layout/layout.component.html | 1 + .../components/layout/layout.component.ts | 3 +- .../src/app/shared/constants/navigation.ts | 1 + .../src/styles/mixins/_link.scss | 21 +++++++++++++ apps/mina-sidor-fa/src/styles/styles.scss | 20 ++----------- 14 files changed, 127 insertions(+), 44 deletions(-) create mode 100644 apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html create mode 100644 apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.scss create mode 100644 apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.spec.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.ts create mode 100644 apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.module.ts create mode 100644 apps/mina-sidor-fa/src/styles/mixins/_link.scss 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 61a3c94..7a7e5a2 100644 --- a/apps/mina-sidor-fa/src/app/app-routing.module.ts +++ b/apps/mina-sidor-fa/src/app/app-routing.module.ts @@ -46,12 +46,6 @@ const routes: Routes = [ loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsModule), canActivate: [AuthGuard], }, - { - path: 'releases', - data: { title: 'Releaser' }, - loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule), - canActivate: [AuthGuard], - }, { path: 'logga-ut', data: { title: 'Logga ut' }, @@ -70,14 +64,28 @@ const routes: Routes = [ loadChildren: () => import('./pages/my-account/my-account.module').then(m => m.MyAccountModule), canActivate: [AuthGuard], }, + { + path: 'obehorig', + data: { title: 'Saknar behörighet' }, + loadChildren: () => import('./pages/unauthorized/unauthorized.module').then(m => m.UnauthorizedModule), + canActivate: [], + }, ]; if (!environment.production) { - routes.push({ - path: 'mock-login', - data: { title: 'Mock login' }, - loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule), - }); + routes.push( + { + path: 'mock-login', + data: { title: 'Mock login' }, + loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule), + }, + { + path: 'releases', + data: { title: 'Releaser' }, + loadChildren: () => import('./pages/releases/releases.module').then(m => m.ReleasesModule), + canActivate: [AuthGuard], + } + ); } routes.push({ diff --git a/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html b/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html index 0b8e649..bc928cf 100644 --- a/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html +++ b/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html @@ -1,12 +1,9 @@ - +

Oj då! Vi kan inte hitta sidan.

Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.

- - - Gå tillbaka till startsidan - + Tillbaka till startsidan
diff --git a/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.module.ts b/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.module.ts index 45652be..7a3abb3 100644 --- a/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.module.ts +++ b/apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.module.ts @@ -1,12 +1,18 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module'; import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; import { PageNotFoundComponent } from './page-not-found.component'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [PageNotFoundComponent], - imports: [CommonModule, RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]), LayoutModule], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: PageNotFoundComponent }]), + LayoutModule, + BackLinkModule, + ], }) export class PageNotFoundModule {} diff --git a/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html new file mode 100644 index 0000000..d01376c --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html @@ -0,0 +1,12 @@ + + +
+

Du saknar behörigheter!

+

+ Det verkar som att du saknar behörigheter att komma in på sidan. Kontakta verksamhetens + behörighetsadministratör. +

+ Tillbaka till startsidan +
+ + diff --git a/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.scss b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.spec.ts new file mode 100644 index 0000000..429b36f --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.spec.ts @@ -0,0 +1,29 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { UnauthorizedComponent } from './unauthorized.component'; + +describe('UnauthorizedComponent', () => { + let component: UnauthorizedComponent; + let fixture: ComponentFixture; + + beforeEach( + waitForAsync(() => { + void TestBed.configureTestingModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [UnauthorizedComponent], + imports: [RouterTestingModule], + }).compileComponents(); + }) + ); + + beforeEach(() => { + fixture = TestBed.createComponent(UnauthorizedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.ts b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.ts new file mode 100644 index 0000000..ae81811 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.ts @@ -0,0 +1,9 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'msfa-unauthorized', + templateUrl: './unauthorized.component.html', + styleUrls: ['./unauthorized.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class UnauthorizedComponent {} diff --git a/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.module.ts b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.module.ts new file mode 100644 index 0000000..99428e6 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.module.ts @@ -0,0 +1,18 @@ +import { CommonModule } from '@angular/common'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module'; +import { LayoutModule } from '@msfa-shared/components/layout/layout.module'; +import { UnauthorizedComponent } from './unauthorized.component'; + +@NgModule({ + schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [UnauthorizedComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: UnauthorizedComponent }]), + LayoutModule, + BackLinkModule, + ], +}) +export class UnauthorizedModule {} diff --git a/apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss b/apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss index 224c563..bd35a07 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss @@ -1,11 +1,5 @@ -.back-link { - display: inline-flex; - align-items: center; - text-decoration: none; - font-weight: var(--digi--typography--font-weight--semibold); - gap: var(--digi--layout--gutter--xs); +@import 'mixins/link'; - &:hover { - text-decoration: underline; - } +.back-link { + @include msfa-link(true); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html index cf0dce1..6cdffa6 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html @@ -8,6 +8,7 @@
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.ts index da203d8..5dec4fa 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.ts @@ -1,5 +1,5 @@ import { NavigationBreadcrumbsItem } from '@af/digi-ng/_navigation/navigation-breadcrumbs'; -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive'; @@ -17,6 +17,7 @@ import { filter, switchMap } from 'rxjs/operators'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class LayoutComponent extends UnsubscribeDirective { + @Input() showBreadCrumbs = true; private startBreadcrumb: NavigationBreadcrumbsItem = { text: 'Start', routerLink: '/', diff --git a/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts b/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts index af5cb52..6358176 100644 --- a/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts +++ b/apps/mina-sidor-fa/src/app/shared/constants/navigation.ts @@ -7,4 +7,5 @@ export const NAVIGATION = { 'planera-aktiviteter': 'Planera aktiviteter', 'mitt-konto': 'Mitt konto', 'skapa-personalkonto': 'Skapa personalkonto', + obehorig: 'Saknar behörigheter', }; diff --git a/apps/mina-sidor-fa/src/styles/mixins/_link.scss b/apps/mina-sidor-fa/src/styles/mixins/_link.scss new file mode 100644 index 0000000..2f9d56b --- /dev/null +++ b/apps/mina-sidor-fa/src/styles/mixins/_link.scss @@ -0,0 +1,21 @@ +@mixin msfa-link($ignore-visited: false) { + display: inline-flex; + align-items: center; + text-decoration: none; + font-weight: var(--digi--typography--font-weight--semibold); + gap: var(--digi--layout--gutter--xs); + + &:hover { + text-decoration: underline; + } + + @if $ignore-visited { + &:visited { + color: var(--digi--typography--color--link); + + &:hover { + color: var(--digi--typography--color--link--active); + } + } + } +} diff --git a/apps/mina-sidor-fa/src/styles/styles.scss b/apps/mina-sidor-fa/src/styles/styles.scss index f3c7da1..26b52b0 100644 --- a/apps/mina-sidor-fa/src/styles/styles.scss +++ b/apps/mina-sidor-fa/src/styles/styles.scss @@ -1,6 +1,7 @@ @import '@digi/core/dist/digi/digi.css'; @import 'mixins/a11y'; @import 'mixins/icon'; +@import 'mixins/link'; @keyframes spinning { from { @@ -82,25 +83,10 @@ dl { } &__link { - display: inline-flex; - align-items: center; - text-decoration: none; - font-weight: var(--digi--typography--font-weight--semibold); - - &:hover { - text-decoration: underline; - } - - &--with-icon { - gap: var(--digi--layout--gutter--xs); - } + @include msfa-link(false); &--ignore-visited:visited { - color: var(--digi--typography--color--link); - - &:hover { - color: var(--digi--typography--color--link--active); - } + @include msfa-link(true); } } }