Security Definitions + other

demo/swagger.yaml

@@ -26,7 +26,6 @@ info:
     This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with  [W3C spec](https://www.w3.org/TR/cors/).
     And that allows cross-domain communication from the browser.
     All responses have a wildcard same-origin which makes them completely public and accessible to everyone, including any code on any site.
-
   version: 1.0.0
   title: Swagger Petstore
   termsOfService: 'http://swagger.io/terms/'

lib/components/ApiInfo/api-info.html

@@ -17,5 +17,5 @@
       <span *ngIf="!info.license.url"> {{info.license.name}} </span>
     </span>
   </p>
-  <p *ngIf="info.description" class="redoc-markdown-block" [innerHtml]="info['x-redoc-html-description'] | safe"> </p>
+  <dynamic-ng2-viewer [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
 </div>

lib/components/SecurityDefinitions/security-definitions.html

@@ -1,2 +1,40 @@
-<h1> Hello world </h1>
-<h2> {{message}} {{pointer}} </h2>
+<div class="security-definition" *ngFor="let def of defs">
+  <h2 class="sharable-header" attr.section="section/Authentication/{{def.name}}">
+    <a class="share-link" href="#section/Authentication/{{def.name}}"></a>{{def.name}}</h2>
+  <div [innerHTML]="def.details.description"></div>
+  <div class="redoc-markdown-block"> <!-- apply md styles to table -->
+    <table class="details">
+      <tr>
+        <th> Security scheme type: </th>
+        <td> {{def.details._displayType}} </td>
+      </tr>
+      <tr *ngIf="def.details.type === 'apiKey'">
+        <th> {{def.details.in}} parameter name:</th>
+        <td> {{def.details.name}} </td>
+      </tr>
+      <template [ngIf]="def.details.type === 'oauth2'">
+        <tr>
+          <th> OAuth2 Flow</th>
+          <td> {{def.details.flow}} </td>
+        </tr>
+        <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
+          <th> Authorization URL </th>
+          <td> {{def.details.authorizationUrl}} </td>
+        </tr>
+        <tr *ngIf="def.details.flow !== 'implicit'">
+          <th> Token URL </th>
+          <td> {{def.details.tokenUrl}} </td>
+        </tr>
+      </template>
+    </table>
+    <template [ngIf]="def.details.type === 'oauth2'">
+      <h3> OAuth2 Scopes </h3>
+      <table class="scopes">
+        <tr *ngFor="let scopeName of def.details.scopes | keys">
+          <th> {{scopeName}} </th>
+          <td> {{def.details.scopes[scopeName]}} </td>
+        </tr>
+      </table>
+    </template>
+  </div>
+</div>

lib/components/SecurityDefinitions/security-definitions.scss

@@ -1,28 +1,36 @@
 @import '../../shared/styles/variables';
 
-.api-info-header {
-  font-weight: normal;
+.security-definition:not(:last-of-type) {
+  border-bottom: 1px solid rgba($text-color, .3);
+  padding-bottom: 20px;
 }
 
-:host > div {
-  width: 60%;
-  padding: 40px;
-  box-sizing: border-box;
-
-  @media (max-width: $right-panel-squash-breakpoint) {
-    width: 100%;
-  }
+h2, h3 {
+  color: $secondary-color;
 }
 
-a.openapi-button {
-  padding: 3px 8px 4px 8px;
-  color: $primary-color;
-  border: 1px solid $primary-color;
-  margin-left: 0.5em;
-  font-weight: normal;
+:host h2 {
+  margin-top: 40px;
 }
 
-:host /deep/ [section] {
-  padding-top: 60px;
+h3 {
+  margin: 1em 0;
+  font-size: 1em;
+}
+
+:host .redoc-markdown-block table {
   margin-top: 20px;
 }
+
+table.details th, table.details td {
+  font-weight: bold;
+  width: 200px;
+  max-width: 50%;
+}
+
+table.details th {
+  text-align: left;
+  padding: 6px;
+  text-transform: capitalize;
+  font-weight: normal;
+}

lib/components/SecurityDefinitions/security-definitions.ts

@@ -1,7 +1,15 @@
 'use strict';
-import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, HostListener } from '@angular/core';
 import { SpecManager, BaseComponent } from '../base';
 
+import { ComponentParser } from '../../services/';
+
+const AUTH_TYPES = {
+  'oauth2': 'OAuth2',
+  'apiKey': 'API Key',
+  'basic': 'Basic Authorization'
+}
+
 @Component({
   selector: 'security-definitions',
   styleUrls: ['./security-definitions.css'],
@@ -11,12 +19,29 @@ import { SpecManager, BaseComponent } from '../base';
 export class SecurityDefinitions extends BaseComponent implements OnInit {
   info: any = {};
   specUrl: String;
-  message: string = 'Roman';
+  defs: any[];
+
+  static insertTagIntoDescription(md:string) {
+    if (ComponentParser.contains(md, 'security-definitions')) return md;
+    if (/^#\s?Authentication\s*$/mi.test(md)) return md;
+    return md + '\n# Authentication \n' + ComponentParser.build('security-definitions');
+  }
+
   constructor(specMgr:SpecManager) {
     super(specMgr);
   }
 
   init() {
+    this.componentSchema = this.componentSchema.securityDefinitions;
+    this.defs = Object.keys(this.componentSchema).map(name => {
+      let details = this.componentSchema[name];
+      details._displayType = AUTH_TYPES[details.type];
+      return {
+        name,
+        details
+      }
+    });
+
   }
 
   ngOnInit() {

lib/redoc.module.ts

@@ -2,19 +2,27 @@ import { NgModule, ErrorHandler } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { Redoc, SecurityDefinitions, REDOC_DIRECTIVES } from './components/index';
-import { REDOC_COMMON_DIRECTIVES } from './shared/components/index';
-import { REDOC_PIPES } from './utils/pipes';
+import { REDOC_COMMON_DIRECTIVES, DynamicNg2Wrapper } from './shared/components/index';
+import { REDOC_PIPES, KeysPipe } from './utils/pipes';
 import { CustomErrorHandler } from './utils/'
 
-import { OptionsService, MenuService,
-  ScrollService, Hash, WarningsService, AppStateService } from './services/';
+import {
+  OptionsService,
+  MenuService,
+  ScrollService,
+  Hash,
+  WarningsService,
+  AppStateService,
+  ComponentParser,
+  ContentProjector,
+  COMPONENT_PARSER_ALLOWED } from './services/';
 import { SpecManager } from './utils/spec-manager';
 
 @NgModule({
   imports: [ CommonModule ],
-  declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES],
+  declarations: [ REDOC_DIRECTIVES, REDOC_COMMON_DIRECTIVES, REDOC_PIPES ],
   bootstrap: [ Redoc ],
-  entryComponents: [SecurityDefinitions],
+  entryComponents: [ SecurityDefinitions, DynamicNg2Wrapper ],
   providers: [
     SpecManager,
     ScrollService,
@@ -23,7 +31,10 @@ import { SpecManager } from './utils/spec-manager';
     WarningsService,
     OptionsService,
     AppStateService,
-    { provide: ErrorHandler, useClass: CustomErrorHandler }
+    ComponentParser,
+    ContentProjector,
+    { provide: ErrorHandler, useClass: CustomErrorHandler },
+    { provide: COMPONENT_PARSER_ALLOWED, useValue: { 'security-definitions': SecurityDefinitions} }
   ],
   exports: [Redoc]
 })

lib/services/index.ts

@@ -8,3 +8,6 @@ export * from './hash.service';
 export * from './schema-normalizer.service';
 export * from './schema-helper.service';
 export * from './warnings.service';
+
+export * from './component-parser.service';
+export * from './content-projector.service';

lib/services/menu.service.ts

@@ -141,11 +141,12 @@ export class MenuService {
     let ptr = decodeURIComponent(hash.substr(namespace.length + 1));
     if (namespace === 'operation') {
       $el = this.getMethodElByOperId(ptr);
-    } else {
+    } else if (namespace === 'tag'){
       let sectionId = ptr.split('/')[0];
       ptr = ptr.substr(sectionId.length) || null;
       sectionId = namespace + (sectionId ? '/' + sectionId : '');
-      $el = this.getMethodElByPtr(ptr, sectionId);
+    } else {
+      $el = this.getMethodElByPtr(null, namespace + '/' + ptr);
     }
 
     if ($el) this.scrollService.scrollTo($el);