feat(authorization): Implemented guards to avoid unauthorized access. (TV-515)

Squashed commit of the following:

commit 86aa3af3f54be4ef5bfb99baece6654a7fba204f
Merge: f3258e8 1e45fb5
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 9 05:42:46 2021 +0200

    Merge branch 'develop' into feature/TV-515-authorization-flow

commit f3258e8c6e3d51f21ec619e09c82b2d0f581bde9
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 16:43:44 2021 +0200

    Fixed tests

commit 91bfea1baa297f34769a33972fd61481dfa31197
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:55:13 2021 +0200

    Removed unused pages

commit d4a92fbde9d6255d8406abc23fe1479658035787
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:51:25 2021 +0200

    Updated some styling

commit dc75656ff96ff0358a2dd0a8b090b4b4938b8323
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:35:04 2021 +0200

    Refactured guards by separating organizations into its own guard

commit 24f3a0a2d821930bd682b854f98e1c9816ece08c
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 15:33:53 2021 +0200

    Readded search on employees

commit f1890b104c48d6dd6e263b730dbdafbc2a6fbf0f
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:59:24 2021 +0200

    Added RoleGuard to pages needing a guard

commit ef4b37e3dcc8fe26eef1bb813cfb35727ba691be
Merge: 07bca2a b06436a
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 14:06:34 2021 +0200

    Merge branch 'develop' into feature/TV-515-authorization-flow

commit 07bca2a84d0ec970188c284ba4b950312cec57cb
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Wed Sep 8 13:26:50 2021 +0200

    Added check for navigation

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

@@ -1,9 +1,29 @@
 <msfa-layout>
   <digi-typography>
     <section class="my-account">
-      <h1>Mitt konto</h1>
+      <header class="my-account__header">
+        <h1>Mitt konto</h1>
+        <a class="my-account__logout" routerLink="/logga-ut">
+          <msfa-icon [icon]="IconType.LOGOUT"></msfa-icon>
+          Logga ut
+        </a>
+      </header>
 
-      <digi-ng-link-internal afText="Logga ut" afRoute="/logga-ut"></digi-ng-link-internal>
+      <main *ngIf="user$ | async as user; else loadingRef">
+        <p>Här kan du se dina uppgifter.</p>
+
+        <h2>Mina roller</h2>
+        <ul class="my-account__roles">
+          <li class="my-account__role" *ngFor="let role of user.roles">
+            <digi-icon-check-circle class="msfa__digi-icon my-account__authorization-icon"></digi-icon-check-circle>
+            {{role.name}}
+          </li>
+        </ul>
+      </main>
     </section>
   </digi-typography>
 </msfa-layout>
+
+<ng-template #loadingRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar kontoinformation"></digi-ng-skeleton-base>
+</ng-template>

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.scss

@@ -0,0 +1,32 @@
+@import 'mixins/buttons';
+@import 'mixins/list';
+@import 'variables/gutters';
+
+.my-account {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__logout {
+    @include msfa__button('secondary');
+  }
+
+  &__roles {
+    @include msfa__reset-list;
+    display: flex;
+    flex-direction: column;
+    gap: $digi--layout--gutter--s;
+  }
+
+  &__role {
+    display: flex;
+    align-items: center;
+    gap: $digi--layout--gutter--s;
+  }
+
+  &__authorization-icon {
+    color: var(--digi--ui--color--border--success);
+  }
+}

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.spec.ts

@@ -1,5 +1,7 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+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 { MyAccountComponent } from './my-account.component';
 
 describe('MyAccountComponent', () => {
@@ -9,8 +11,9 @@ describe('MyAccountComponent', () => {
   beforeEach(
     waitForAsync(() => {
       void TestBed.configureTestingModule({
-        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA],
         declarations: [MyAccountComponent],
+        imports: [HttpClientTestingModule, RouterTestingModule],
       }).compileComponents();
     })
   );

apps/mina-sidor-fa/src/app/pages/my-account/my-account.component.ts

@@ -1,4 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconType } from '@msfa-enums/icon-type.enum';
+import { User } from '@msfa-models/user.model';
+import { UserService } from '@msfa-services/api/user.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'msfa-my-account',
@@ -6,4 +10,9 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./my-account.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MyAccountComponent {}
+export class MyAccountComponent {
+  user$: Observable<User> = this.userService.user$;
+  readonly IconType = IconType;
+
+  constructor(private userService: UserService) {}
+}

apps/mina-sidor-fa/src/app/pages/my-account/my-account.module.ts

@@ -1,7 +1,8 @@
-import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 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 { MyAccountComponent } from './my-account.component';
 
@@ -12,7 +13,8 @@ import { MyAccountComponent } from './my-account.component';
     CommonModule,
     RouterModule.forChild([{ path: '', component: MyAccountComponent }]),
     LayoutModule,
-    DigiNgLinkInternalModule,
+    IconModule,
+    DigiNgSkeletonBaseModule,
   ],
 })
 export class MyAccountModule {}