Swagger module

web-app/src/app/routing.module.ts

@@ -13,6 +13,9 @@ const appRoutes: Routes =[{
   },{
     path: 'profile',
     loadChildren: () => import('./user/profile/profile.module').then(m => m.ProfileModule)
+  },{
+    path: 'swagger',
+    loadChildren: () => import('./swagger/swagger.module').then(m => m.SwaggerModule)
   },{
     path: '',
     redirectTo: 'landing',

web-app/src/app/swagger/swagger.component.html

@@ -0,0 +1,11 @@
+<mat-toolbar color="primary">
+  <div class="container">
+    <button mat-icon-button (click)="onBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+
+    <span class="title">Mage Swagger API</span>
+  </div>
+</mat-toolbar>
+
+<div class="swagger-container"></div>

web-app/src/app/swagger/swagger.component.scss

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.title  {
+  margin-left: 16px;
+}

web-app/src/app/swagger/swagger.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SwaggerComponent } from './swagger.component';
+
+describe('SwaggerComponent', () => {
+  let component: SwaggerComponent;
+  let fixture: ComponentFixture<SwaggerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SwaggerComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SwaggerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-app/src/app/swagger/swagger.component.ts

@@ -0,0 +1,46 @@
+import { AfterViewInit, Component, ElementRef } from '@angular/core';
+import { LocalStorageService } from '../http/local-storage.service';
+import SwaggerUI from 'swagger-ui';
+import { Router } from '@angular/router';
+
+const DisableAuthorizePlugin = function () {
+  return {
+    wrapComponents: {
+      AuthorizeBtnContainer: () => () => null,
+      ServersContainer: () => () => null,
+      authorizeOperationBtn: () => () => null
+    }
+  };
+};
+
+@Component({
+  selector: 'swagger',
+  templateUrl: './swagger.component.html',
+  styleUrls: ['./swagger.component.scss']
+})
+export class SwaggerComponent implements AfterViewInit {
+
+  constructor(
+    private el: ElementRef,
+    private router: Router,
+    private localStorageService: LocalStorageService
+  ) {
+  }
+
+  ngAfterViewInit() {
+    SwaggerUI({
+      url: '/api/docs/openapi.yaml',
+      domNode: this.el.nativeElement.querySelector('.swagger-container'),
+      deepLinking: false,
+      plugins: [DisableAuthorizePlugin],
+      requestInterceptor: (request) => {
+        request.headers['Authorization'] = `Bearer ${this.localStorageService.getToken()}`
+        return request
+      },
+    });
+  }
+
+  onBack() : void {
+    this.router.navigate(['about']);
+  }
+}

web-app/src/app/swagger/swagger.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from "@angular/core";
+import { SwaggerComponent } from "./swagger.component";
+import { RouterModule, Routes } from "@angular/router";
+import { MatIconModule } from "@angular/material/icon";
+import { CommonModule } from "@angular/common";
+import { MatButtonModule } from "@angular/material/button";
+import { MatToolbarModule } from "@angular/material/toolbar";
+
+const routes: Routes = [{
+  path: '',
+  component: SwaggerComponent
+}];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule
+  ]
+})
+class AngularModule { }
+
+@NgModule({
+  declarations: [
+    SwaggerComponent
+  ],
+  imports: [
+    AngularModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [ RouterModule ]
+})
+export class SwaggerModule {
+}