feat(authorization): Added unauthorized page. (TV-531)

Squashed commit of the following:

commit 67b70e2e2ece4df73be91dc7f3234543c933d12a
Merge: aabf1cc 26a56fd
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:01:09 2021 +0200

    Merge branch 'develop' into feature/TV-531

commit aabf1cc4050b45ef055780dece9462ca121d343a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:00:15 2021 +0200

    Added unauthorized page

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({
+  routes.push(
-    path: 'mock-login',
+    {
-    data: { title: 'Mock login' },
+      path: 'mock-login',
-    loadChildren: () => import('./pages/mock-login/mock-login.module').then(m => m.MockLoginModule),
+      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({

apps/mina-sidor-fa/src/app/pages/page-not-found/page-not-found.component.html

@@ -1,12 +1,9 @@
-<msfa-layout>
+<msfa-layout [showBreadCrumbs]="false">
   <digi-typography>
     <section class="page-not-found">
       <h1>Oj då! Vi kan inte hitta sidan.</h1>
       <p>Det kan bero på att länken du använder är felaktig eller att sidan inte längre finns.</p>
-      <a class="msfa__link msfa__link--with-icon msfa__link--ignore-visited" routerLink="/">
+      <msfa-back-link route="/">Tillbaka till startsidan</msfa-back-link>
-        <digi-icon-arrow-left class="msfa__digi-icon"></digi-icon-arrow-left>
-        Gå tillbaka till startsidan
-      </a>
     </section>
   </digi-typography>
 </msfa-layout>

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 {}

apps/mina-sidor-fa/src/app/pages/unauthorized/unauthorized.component.html

@@ -0,0 +1,12 @@
+<msfa-layout>
+  <digi-typography>
+    <section class="unauthorized">
+      <h1>Du saknar behörigheter!</h1>
+      <p>
+        Det verkar som att du saknar behörigheter att komma in på sidan. Kontakta verksamhetens
+        behörighetsadministratör.
+      </p>
+      <msfa-back-link route="/">Tillbaka till startsidan</msfa-back-link>
+    </section>
+  </digi-typography>
+</msfa-layout>

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<UnauthorizedComponent>;
+
+  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();
+  });
+});

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 {}

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 {}

apps/mina-sidor-fa/src/app/shared/components/back-link/back-link.component.scss

@@ -1,11 +1,5 @@
-.back-link {
+@import 'mixins/link';
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  font-weight: var(--digi--typography--font-weight--semibold);
-  gap: var(--digi--layout--gutter--xs);
 
-  &:hover {
+.back-link {
-    text-decoration: underline;
+  @include msfa-link(true);
-  }
 }

apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html

@@ -8,6 +8,7 @@
   <msfa-sidebar class="msfa__sidebar"></msfa-sidebar>
   <main id="msfa-main-content" class="msfa__content">
     <digi-ng-navigation-breadcrumbs
+      *ngIf="showBreadCrumbs"
       class="msfa__breadcrumbs"
       [afItems]="breadcrumbsItems"
     ></digi-ng-navigation-breadcrumbs>

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: '/',

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',
 };

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);
+      }
+    }
+  }
+}

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;
+    @include msfa-link(false);
-    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);
-    }
 
     &--ignore-visited:visited {
-      color: var(--digi--typography--color--link);
+      @include msfa-link(true);
-
-      &:hover {
-        color: var(--digi--typography--color--link--active);
-      }
     }
   }
 }