persist auth, if enabled

Author: ruchevits

docs/specs/temp.yaml

@@ -15,6 +15,15 @@ paths:
                 type: object
                 $ref: "#/components/schemas/person"
 components:
+  securitySchemes:
+    JWT:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+    ApiKey:
+      type: apiKey
+      in: header
+      name: API_TOKEN
   schemas:
     person:
       type: object

index.html

@@ -48,6 +48,7 @@
   allow-authentication	= "true"
   update-route="false"
   match-type="regex"
+  persist-auth="true"
 ></rapi-doc>
 <!--
   <rapi-doc-mini

src/rapidoc-mini.js

@@ -49,6 +49,7 @@ export default class RapiDocMini extends LitElement {
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       showSummaryWhenCollapsed: { type: String, attribute: 'show-summary-when-collapsed' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
 
       // Schema Styles
       schemaStyle: { type: String, attribute: 'schema-style' },
@@ -166,6 +167,7 @@ export default class RapiDocMini extends LitElement {
     if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
     if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }
 
     if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }

src/rapidoc.js

@@ -63,6 +63,7 @@ export default class RapiDoc extends LitElement {
       defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },
       responseAreaHeight: { type: String, attribute: 'response-area-height' },
       fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },
+      persistAuth: { type: String, attribute: 'persist-auth' },
       onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },
 
       // Schema Styles
@@ -434,6 +435,7 @@ export default class RapiDoc extends LitElement {
     this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];
     this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
+    if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
     if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '300px';

src/templates/security-scheme-template.js

@@ -6,6 +6,8 @@ import { marked } from 'marked';
 const codeVerifier = '731DB1C3F7EA533B85E29492D26AA-1234567890-1234567890';
 const codeChallenge = '4FatVDBJKPAo4JgLLaaQFMUcQPn5CrPRvLlaob9PTYc'; // Base64 encoded SHA-256
 
+const localStorageKey = 'rapidoc';
+
 export function applyApiKey(securitySchemeId, username = '', password = '', providedApikeyVal = '') {
   const securityObj = this.resolvedSpec.securitySchemes?.find((v) => (v.securitySchemeId === securitySchemeId));
   if (!securityObj) {
@@ -17,6 +19,7 @@ export function applyApiKey(securitySchemeId, username = '', password = '', prov
       finalApiKeyValue = `Basic ${btoa(`${username}:${password}`)}`;
     }
   } else if (providedApikeyVal) {
+    securityObj.value = providedApikeyVal;
     finalApiKeyValue = `${securityObj.scheme?.toLowerCase() === 'bearer' ? 'Bearer ' : ''}${providedApikeyVal}`;
   }
   if (finalApiKeyValue) {
@@ -37,6 +40,14 @@ export function onClearAllApiKeys() {
   this.requestUpdate();
 }
 
+function getPersistedApiKeys() {
+  return JSON.parse(localStorage.getItem(localStorageKey)) || {};
+}
+
+function setPersistedApiKeys(obj) {
+  localStorage.setItem(localStorageKey, JSON.stringify(obj));
+}
+
 function onApiKeyChange(securitySchemeId) {
   let apiKeyValue = '';
   const securityObj = this.resolvedSpec.securitySchemes.find((v) => (v.securitySchemeId === securitySchemeId));
@@ -51,6 +62,11 @@ function onApiKeyChange(securitySchemeId) {
         apiKeyValue = trEl.querySelector('.api-key-input').value.trim();
         applyApiKey.call(this, securitySchemeId, '', '', apiKeyValue);
       }
+      if (this.persistAuth === 'true') {
+        const rapidocLs = getPersistedApiKeys.call(this);
+        rapidocLs[securitySchemeId] = securityObj;
+        setPersistedApiKeys.call(this, rapidocLs);
+      }
     }
   }
 }
@@ -339,8 +355,28 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
   `;
 }
 
+function removeApiKey(securitySchemeId) {
+  const securityObj = this.resolvedSpec.securitySchemes?.find((v) => (v.securitySchemeId === securitySchemeId));
+  securityObj.user = '';
+  securityObj.password = '';
+  securityObj.value = '';
+  securityObj.finalKeyValue = '';
+  if (this.persistAuth === 'true') {
+    const rapidocLs = getPersistedApiKeys.call(this);
+    delete rapidocLs[securityObj.securitySchemeId];
+    setPersistedApiKeys.call(this, rapidocLs);
+  }
+  this.requestUpdate();
+}
+
 export default function securitySchemeTemplate() {
   if (!this.resolvedSpec) { return ''; }
+  if (this.persistAuth === 'true') {
+    const rapidocLs = getPersistedApiKeys.call(this);
+    Object.values(rapidocLs).forEach((p) => {
+      applyApiKey.call(this, p.securitySchemeId, p.username, p.password, p.value);
+    });
+  }
   const providedApiKeys = this.resolvedSpec.securitySchemes?.filter((v) => (v.finalKeyValue));
   if (!providedApiKeys) {
     return;
@@ -369,7 +405,7 @@ export default function securitySchemeTemplate() {
                   ${v.finalKeyValue
                     ? html`
                       <span class='blue-text'>  ${v.finalKeyValue ? 'Key Applied' : ''} </span>
-                      <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { v.finalKeyValue = ''; this.requestUpdate(); }}>REMOVE</button>
+                      <button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { removeApiKey.call(this, v.securitySchemeId); }}>REMOVE</button>
                       `
                     : ''
                   }