added UI support for "no security" as a viable security requirement. F…

…ixes #482 Signed-off-by: Eric Wittmann <eric.wittmann@gmail.com>
Apicurio · Oct 31, 2018 · 6532f4f · 6532f4f
1 parent 740141d
commit 6532f4f
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 8 deletions.
diff --git a/...p/pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.css b/...p/pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.css
@@ -6,6 +6,10 @@
   padding-top: 24px;
 }
 
+.security-scheme-list .list-group-item.anonymous {
+  border-bottom: 1px dashed #999;
+}
+
 .security-scheme-list .list-group-item-heading .type::before {
   content: '(';
 }

diff --git a/.../pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.html b/.../pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.html
@@ -29,12 +29,35 @@ <h1>No Security Schemes Found</h1>
                 </div>
 
                 <!-- Select from list of Schemes -->
+                <div class="list-group-item anonymous" [class.active]="anonEnabled" *ngIf="schemes.length > 0">
+                    <div class="list-group-item-header">
+                        <div class="list-view-pf-expand" [style.visibility]="'hidden'">
+                            <span class="fa fa-angle-right"></span>
+                        </div>
+                        <div class="list-view-pf-checkbox">
+                            <input type="checkbox" [checked]="anonEnabled" (change)="setAnon($event.target.checked)">
+                        </div>
+                        <div class="list-view-pf-main-info" (click)="setAnon(!anonEnabled)">
+                            <div class="list-view-pf-body">
+                                <div class="list-view-pf-description">
+                                    <div class="list-group-item-heading">
+                                        <span class="name">No Security</span>
+                                        <span class="type">anonymous</span>
+                                    </div>
+                                </div>
+                                <div class="list-view-pf-additional-info">
+                                    <div class="list-group-item-text">Allow access to the API without authentication (cannot be <strong>combined</strong> with other security).</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div class="list-group-item" *ngFor="let scheme of schemes" [class.active]="isChecked(scheme)"
                      [class.list-view-pf-expand-active]="isExpanded(scheme)">
                     <div class="list-group-item-header">
                         <div class="list-view-pf-expand" [style.visibility]="canExpand(scheme) ? 'visible' : 'hidden'">
-                                    <span class="fa fa-angle-right" [class.fa-angle-down]="isExpanded(scheme)"
-                                          (click)="toggleExpansion(scheme)"></span>
+                            <span class="fa fa-angle-right" [class.fa-angle-down]="isExpanded(scheme)"
+                                  (click)="toggleExpansion(scheme)"></span>
                         </div>
                         <div class="list-view-pf-checkbox">
                             <input type="checkbox" [checked]="isChecked(scheme)" (change)="toggleSecurityScheme(scheme, $event.target.checked)">

diff --git a/...pp/pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.ts b/...pp/pages/apis/{apiId}/editor/_components/editors/security-requirement-editor.component.ts
@@ -64,6 +64,7 @@ export class SecurityRequirementEditorComponent extends EntityEditor<OasSecurity
     public _expanded: any;
 
     protected model: SecurityRequirementData;
+    protected anonEnabled: boolean = false;
     protected schemes: OasSecurityScheme[];
     protected scopeCache: any;
 
@@ -87,15 +88,21 @@ export class SecurityRequirementEditorComponent extends EntityEditor<OasSecurity
      */
     public initializeModelFromEntity(entity: OasSecurityRequirement): void {
         let names: string[] = entity.securityRequirementNames();
-        names.forEach( name => {
-            this.model[name] = entity.scopes(name);
-        });
+        if (names.length === 0) {
+            this.anonEnabled = true;
+        } else {
+            names.forEach( name => {
+                this.model[name] = entity.scopes(name);
+            });
+        }
     }
 
     /**
      * Initializes the editor's data model to an empty state.
      */
     public initializeModel(): void {
+        this.anonEnabled = false;
+        this.model = {};
     }
 
     /**
@@ -109,14 +116,26 @@ export class SecurityRequirementEditorComponent extends EntityEditor<OasSecurity
         return event;
     }
 
+    /**
+     * Enables/disable anonymous access.
+     * @param isAnon
+     */
+    public setAnon(isAnon: boolean): void {
+        this.anonEnabled = isAnon;
+        if (isAnon) {
+            // anonymous access is mutually exclusive with all other security types
+            this.model = {};
+        }
+    }
+
     /**
      * Returns true if the editor is currently valid.
      */
     public isValid(): boolean {
         for (let n in this.model) {
             return true;
         }
-        return false;
+        return this.anonEnabled;
     }
 
     /**
@@ -189,6 +208,8 @@ export class SecurityRequirementEditorComponent extends EntityEditor<OasSecurity
             enable = !this.isChecked(scheme);
         }
         if (enable) {
+            // any other security scheme is mutually exclusive with anonymous access
+            this.anonEnabled = false;
             this.model[scheme.schemeName()] = [];
             if (this.canExpand(scheme)) {
                 this.expand(scheme);

diff --git a/.../apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.css b/.../apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.css
@@ -17,3 +17,7 @@
     float: right;
     padding-right: 15px;
 }
+
+.security-requirement .requirement-label.no-security {
+    font-style: italic;
+}
diff --git a/...apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.html b/...apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.html
@@ -46,8 +46,10 @@
             <div class="security-requirement" *ngFor="let requirement of securityRequirements()">
                 <div class="name">
                     <validation-problem [model]="requirement" [shallow]="true"></validation-problem>
-                    <span class="fa fa-lock fa-fw"></span>
-                    <span class="requirement-label">{{ requirement.securityRequirementNames().join(", ") }}</span>
+                    <span class="fa fa-lock fa-fw" *ngIf="!isAnonSecurity(requirement)"></span>
+                    <span class="fa fa-unlock fa-fw" *ngIf="isAnonSecurity(requirement)"></span>
+                    <span class="requirement-label" *ngIf="!isAnonSecurity(requirement)">{{ requirement.securityRequirementNames().join(", ") }}</span>
+                    <span class="requirement-label no-security" *ngIf="isAnonSecurity(requirement)">No Security</span>
                 </div>
                 <div class="actions">
                     <div class="dropdown dropdown-kebab-pf">

diff --git a/...s/apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.ts b/...s/apis/{apiId}/editor/_components/forms/shared/security-requirements-section.component.ts
@@ -140,4 +140,13 @@ export class SecurityRequirementsSectionComponent implements OnInit {
         }
     }
 
+    /**
+     * Returns true if the given security requirement represents "anonymous" access (no security).
+     * @param requirement
+     */
+    public isAnonSecurity(requirement: OasSecurityRequirement): boolean {
+        let schemes: string[] = requirement.securityRequirementNames();
+        return !schemes || schemes.length === 0;
+    }
+
 }