Added my-account page with logout functionality

apps/mina-sidor-fa/src/app/app-routing.module.ts

@@ -53,10 +53,15 @@ const routes: Routes = [
     canActivate: [AuthGuard],
   },
   {
-    path: 'logout',
+    path: 'logga-ut',
     data: { title: 'Logga ut' },
     loadChildren: () => import('./pages/logout/logout.module').then(m => m.LogoutModule),
   },
+  {
+    path: 'mitt-konto',
+    data: { title: 'Mitt konto' },
+    loadChildren: () => import('./pages/my-account/my-account.module').then(m => m.MyAccountModule),
+  },
 ];
 
 if (!environment.production) {

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

@@ -1,8 +0,0 @@
-<digi-typography>
-  <section class="logout">
-    <h1>Du har nu loggats ut</h1>
-    <p>
-      <a [routerLink]="loginUrl">Logga in</a>
-    </p>
-  </section>
-</digi-typography>

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

@@ -0,0 +1,9 @@
+<msfa-layout>
+  <digi-typography>
+    <section class="my-account">
+      <h1>Mitt konto</h1>
+
+      <digi-ng-link-internal afText="Logga ut" afRoute="/logga-ut"></digi-ng-link-internal>
+    </section>
+  </digi-typography>
+</msfa-layout>

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

@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MyAccountComponent } from './my-account.component';
+
+describe('MyAccountComponent', () => {
+  let component: MyAccountComponent;
+  let fixture: ComponentFixture<MyAccountComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      void TestBed.configureTestingModule({
+        schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+        declarations: [MyAccountComponent],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'msfa-my-account',
+  templateUrl: './my-account.component.html',
+  styleUrls: ['./my-account.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MyAccountComponent {}

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

@@ -0,0 +1,18 @@
+import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { MyAccountComponent } from './my-account.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [MyAccountComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: MyAccountComponent }]),
+    LayoutModule,
+    DigiNgLinkInternalModule,
+  ],
+})
+export class MyAccountModule {}

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

@@ -6,10 +6,10 @@
   </div>
   <ul class="navigation__list msfa__hide-on-print">
     <li *ngIf="user" class="navigation__item">
-      <div class="navigation__user">
+      <a routerLink="/mitt-konto" class="navigation__link">
         <msfa-icon [icon]="iconType.USER" size="l"></msfa-icon>
         <span class="navigation__text">{{ user.fullName }}</span>
-      </div>
+      </a>
     </li>
     <li class="navigation__item">
       <a routerLink="/" class="navigation__link">

apps/mina-sidor-fa/src/app/shared/services/api/authentication.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { environment } from '@msfa-environment';
 import { AuthenticationResponse } from '@msfa-models/api/authentication.response.model';
 import { Authentication, mapAuthApiResponseToAuthenticationResult } from '@msfa-models/authentication.model';
@@ -69,7 +70,7 @@ export class AuthenticationService {
     return this._token$.getValue();
   }
 
-  constructor(private httpClient: HttpClient) {
+  constructor(private httpClient: HttpClient, private router: Router) {
     const localStorageData = this._getLocalStorageData();
 
     if (localStorageData) {
@@ -82,7 +83,9 @@ export class AuthenticationService {
     localStorage.removeItem('id_token');
     localStorage.removeItem('expires_at');
 
-    if (environment.environment !== 'local') {
+    if (environment.environment === 'local') {
+      void this.router.navigateByUrl(environment.logoutUrl);
+    } else {
       document.location.href = environment.logoutUrl;
     }
   }

apps/mina-sidor-fa/src/environments/environment.ts

@@ -4,7 +4,7 @@ export const environment: Environment = {
   environment: 'local',
   clientId: '',
   loginUrl: '/mock-login',
-  logoutUrl: '',
+  logoutUrl: '/mock-login',
   production: false,
   api: {
     url: '/api',