Skip to content

Commit bb8ec2d

Browse files
mrin9mrin9
committed
fixes 1005 - do not show inputs in the authentication section when allowTry = false
1 parent 0dae9b8 commit bb8ec2d

File tree

3 files changed

+107
-87
lines changed

3 files changed

+107
-87
lines changed

‎src/templates/focused-endpoint-template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function focusedEndpointTemplate() {
6666
if (focusElId.startsWith('overview') && this.showInfo === 'true') {
6767
focusedTemplate = overviewTemplate.call(this);
6868
} else if (focusElId === 'auth' && this.allowAuthentication === 'true') {
69-
focusedTemplate = securitySchemeTemplate.call(this);
69+
focusedTemplate = securitySchemeTemplate.call(this, this.allowTry);
7070
} else if (focusElId === 'servers' && this.allowServerSelection === 'true') {
7171
focusedTemplate = serverTemplate.call(this);
7272
} else if (focusElId === 'operations-top') {

‎src/templates/main-body-template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function mainBodyTemplate(isMini = false, pathsExpanded = false)
8787
: html`
8888
${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}
8989
${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}
90-
${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}
90+
${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this, this.allowTry) : ''}
9191
<div id='operations-top' class='observe-me'>
9292
<slot name='operations-top'></slot>
9393
</div>

‎src/templates/security-scheme-template.js‎

Lines changed: 105 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ async function onInvokeOAuthFlow(securitySchemeId, flowType, authUrl, tokenUrl,
256256

257257
/* eslint-disable indent */
258258

259-
function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header', receiveTokenInOptions = undefined) {
259+
function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, authFlow, defaultScopes = [], receiveTokenIn = 'header', receiveTokenInOptions = undefined, allowTry = 'true') {
260260
let { authorizationUrl, tokenUrl, refreshUrl } = authFlow;
261261
const pkceOnly = authFlow['x-pkce-only'] || false;
262262
const isUrlAbsolute = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0);
@@ -329,59 +329,60 @@ function oAuthFlowTemplate(flowName, clientId, clientSecret, securitySchemeId, a
329329
<span class="mono-font">${scopeAndDescr[0]}</span>
330330
${scopeAndDescr[0] !== scopeAndDescr[1] ? ` - ${scopeAndDescr[1] || ''}` : ''}
331331
</label>
332-
</div>
333-
`)}
334-
</div>
335-
`
332+
</div>`)
333+
}
334+
</div>`
336335
: ''
337336
}
338-
${flowName === 'password'
337+
${flowName === 'password' && allowTry === 'true'
339338
? html`
340339
<div style="margin:5px 0">
341340
<input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-user" part="textbox textbox-username" id="input-${securitySchemeId}-${flowName}-api-key-user">
342341
<input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} api-key-password" style = "margin:0 5px;" part="textbox textbox-password" id="input-${securitySchemeId}-${flowName}-api-key-password">
343342
</div>`
344343
: ''
345344
}
346-
<div>
347-
${flowName === 'authorizationCode'
348-
? html`
349-
<div style="margin: 16px 0 4px">
350-
<input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked ?disabled=${pkceOnly}>
351-
<label for="${securitySchemeId}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
352-
Send Proof Key for Code Exchange (PKCE)
353-
</label>
354-
</div>
355-
`
356-
: ''
357-
}
358-
<input type="text" part="textbox textbox-auth-client-id" value = "${clientId || ''}" placeholder="client-id" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} oauth-client-id">
359-
${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
360-
? html`
361-
<input
362-
id="${securitySchemeId}-${flowName}-oauth-client-secret"
363-
type="password" part="textbox textbox-auth-client-secret"
364-
value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false"
365-
class="oauth2 ${flowName} ${securitySchemeId}
366-
oauth-client-secret"
367-
style = "margin:0 5px;${pkceOnly ? 'display:none;' : ''}"
368-
>
369-
<select style="margin-right:5px;${pkceOnly ? 'display:none;' : ''}" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
370-
${(!receiveTokenInOptions || receiveTokenInOptions.includes('header')) ? html`<option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>` : ''}
371-
${(!receiveTokenInOptions || receiveTokenInOptions.includes('request-body')) ? html` <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>` : ''}
372-
</select>`
373-
: ''
374-
}
375-
${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' || flowName === 'password'
376-
? html`
377-
<button class="m-btn thin-border" part="btn btn-outline"
378-
@click="${(e) => { onInvokeOAuthFlow.call(this, securitySchemeId, flowName, authorizationUrl, tokenUrl, e); }}"
379-
> GET TOKEN </button>`
380-
: ''
381-
}
382-
</div>
383-
<div class="oauth-resp-display red-text small-font-size"></div>
384-
`
345+
${allowTry === 'true'
346+
? html`
347+
<div>
348+
${flowName === 'authorizationCode'
349+
? html`
350+
<div style="margin: 16px 0 4px">
351+
<input type="checkbox" part="checkbox checkbox-auth-scope" id="${securitySchemeId}-pkce" checked ?disabled=${pkceOnly}>
352+
<label for="${securitySchemeId}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
353+
Send Proof Key for Code Exchange (PKCE)
354+
</label>
355+
</div>`
356+
: ''
357+
}
358+
<input type="text" part="textbox textbox-auth-client-id" value = "${clientId || ''}" placeholder="client-id" spellcheck="false" class="oauth2 ${flowName} ${securitySchemeId} oauth-client-id">
359+
${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'password'
360+
? html`
361+
<input
362+
id="${securitySchemeId}-${flowName}-oauth-client-secret"
363+
type="password" part="textbox textbox-auth-client-secret"
364+
value = "${clientSecret || ''}" placeholder="client-secret" spellcheck="false"
365+
class="oauth2 ${flowName} ${securitySchemeId}
366+
oauth-client-secret"
367+
style = "margin:0 5px;${pkceOnly ? 'display:none;' : ''}"
368+
>
369+
<select style="margin-right:5px;${pkceOnly ? 'display:none;' : ''}" class="${flowName} ${securitySchemeId} oauth-send-client-secret-in">
370+
${(!receiveTokenInOptions || receiveTokenInOptions.includes('header')) ? html`<option value = 'header' .selected = ${receiveTokenIn === 'header'} > Authorization Header </option>` : ''}
371+
${(!receiveTokenInOptions || receiveTokenInOptions.includes('request-body')) ? html` <option value = 'request-body' .selected = ${receiveTokenIn === 'request-body'}> Request Body </option>` : ''}
372+
</select>`
373+
: ''
374+
}
375+
${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' || flowName === 'password'
376+
? html`
377+
<button class="m-btn thin-border" part="btn btn-outline"
378+
@click="${(e) => { onInvokeOAuthFlow.call(this, securitySchemeId, flowName, authorizationUrl, tokenUrl, e); }}"
379+
> GET TOKEN </button>`
380+
: ''
381+
}
382+
</div>
383+
<div class="oauth-resp-display red-text small-font-size"></div>`
384+
: ''
385+
}`
385386
: ''
386387
}
387388
</div>
@@ -402,24 +403,30 @@ function removeApiKey(securitySchemeId) {
402403
this.requestUpdate();
403404
}
404405

405-
export default function securitySchemeTemplate() {
406+
export default function securitySchemeTemplate(allowTry = 'true') {
406407
if (!this.resolvedSpec) { return ''; }
408+
// eslint-disable-next-line no-console
409+
console.log('allowTry: ', allowTry);
407410
const providedApiKeys = this.resolvedSpec.securitySchemes?.filter((v) => (v.finalKeyValue));
408411
if (!providedApiKeys) {
409412
return;
410413
}
411414
return html`
412415
<section id='auth' part="section-auth" style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;" class = 'observe-me ${'read focused'.includes(this.renderStyle) ? 'section-gap--read-mode' : 'section-gap '}'>
413416
<div class='sub-title regular-font'> AUTHENTICATION </div>
414-
415-
<div class="small-font-size" style="display:flex; align-items: center; min-height:30px">
416-
${providedApiKeys.length > 0
417-
? html`
418-
<div class="blue-text"> ${providedApiKeys.length} API key applied </div>
419-
<div style="flex:1"></div>
420-
<button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>CLEAR ALL API KEYS</button>`
421-
: html`<div class="red-text">No API key applied</div>`
422-
}
417+
${allowTry === 'true'
418+
? html`
419+
<div class="small-font-size" style="display:flex; align-items: center; min-height:30px">
420+
${providedApiKeys.length > 0
421+
? html`
422+
<div class="blue-text"> ${providedApiKeys.length} API key applied </div>
423+
<div style="flex:1"></div>
424+
<button class="m-btn thin-border" part="btn btn-outline" @click=${() => { onClearAllApiKeys.call(this); }}>CLEAR ALL API KEYS</button>`
425+
: html`<div class="red-text">No API key applied</div>`
426+
}
427+
`
428+
: ''
429+
}
423430
</div>
424431
${this.resolvedSpec.securitySchemes && this.resolvedSpec.securitySchemes.length > 0
425432
? html`
@@ -433,7 +440,7 @@ export default function securitySchemeTemplate() {
433440
<span style="font-weight:bold; font-size:var(--font-size-regular)">${v.typeDisplay}</span>
434441
${v.finalKeyValue
435442
? html`
436-
<span class='blue-text'> ${v.finalKeyValue ? 'Key Applied' : ''} </span>
443+
<span class='blue-text'> ${v.finalKeyValue ? 'Key Applied' : ''} </span>
437444
<button class="m-btn thin-border small" part="btn btn-outline" @click=${() => { removeApiKey.call(this, v.securitySchemeId); }}>REMOVE</button>
438445
`
439446
: ''
@@ -442,47 +449,59 @@ export default function securitySchemeTemplate() {
442449
${v.description ? html`<div class="m-markdown"> ${unsafeHTML(marked(v.description || ''))}</div>` : ''}
443450
${(v.type.toLowerCase() === 'apikey')
444451
? html`
445-
<div style="margin-bottom:5px"> Send <code>${v.name}</code> in <code>${v.in}</code> </div>
446-
<div style="max-height:28px;">
447-
${v.in !== 'cookie'
448-
? html`
449-
<input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
450-
<button class="m-btn thin-border" style = "margin-left:5px;" part = "btn btn-outline"
451-
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
452-
${v.finalKeyValue ? 'UPDATE' : 'SET'}
453-
</button>`
454-
: html`<span class="gray-text" style="font-size::var(--font-size-small)"> cookies cannot be set from here</span>`
455-
}
456-
</div>`
452+
<div style="margin-bottom:5px"> Send <code>${v.name}</code> in <code>${v.in}</code></div>
453+
${allowTry === 'true'
454+
? html`
455+
<div style="max-height:28px;">
456+
${v.in !== 'cookie'
457+
? html`
458+
<input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
459+
<button class="m-btn thin-border" style = "margin-left:5px;" part = "btn btn-outline"
460+
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
461+
${v.finalKeyValue ? 'UPDATE' : 'SET'}
462+
</button>`
463+
: html`<span class="gray-text" style="font-size::var(--font-size-small)"> cookies cannot be set from here</span>`
464+
}
465+
</div>`
466+
: ''
467+
}`
457468
: ''
458469
}
459470
${v.type.toLowerCase() === 'http' && v.scheme?.toLowerCase() === 'basic'
460471
? html`
461472
<div style="margin-bottom:5px">
462473
Send <code>Authorization</code> in <code>header</code> containing the word <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
463474
</div>
464-
<div>
465-
<input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px" id = "input-${v.type}-${v.securitySchemeId}-api-key-user">
466-
<input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;" id = "input-${v.type}-${v.securitySchemeId}-api-key-password">
467-
<button class="m-btn thin-border"
468-
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
469-
part = "btn btn-outline"
470-
>
471-
${v.finalKeyValue ? 'UPDATE' : 'SET'}
472-
</button>
473-
</div>`
475+
${allowTry === 'true'
476+
? html`
477+
<div>
478+
<input type="text" value = "${v.user}" placeholder="username" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-user" style="width:100px" id = "input-${v.type}-${v.securitySchemeId}-api-key-user">
479+
<input type="password" value = "${v.password}" placeholder="password" spellcheck="false" class="${v.type} ${v.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;" id = "input-${v.type}-${v.securitySchemeId}-api-key-password">
480+
<button class="m-btn thin-border"
481+
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}"
482+
part = "btn btn-outline"
483+
>
484+
${v.finalKeyValue ? 'UPDATE' : 'SET'}
485+
</button>
486+
</div>`
487+
: ''
488+
}`
474489
: ''
475490
}
476491
${v.type.toLowerCase() === 'http' && v.scheme?.toLowerCase() === 'bearer'
477492
? html`
478493
<div style="margin-bottom:5px"> Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and token value</div>
479-
<div style="max-height:28px;">
480-
<input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
481-
<button class="m-btn thin-border" style = "margin-left:5px;" part = "btn btn-outline"
482-
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
483-
${v.finalKeyValue ? 'UPDATE' : 'SET'}
484-
</button>
485-
</div>`
494+
${allowTry === 'true'
495+
? html`
496+
<div style="max-height:28px;">
497+
<input type = "text" value = "${v.value}" class="${v.type} ${v.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false" id = "${v.type}-${v.securitySchemeId}-api-key-input">
498+
<button class="m-btn thin-border" style = "margin-left:5px;" part = "btn btn-outline"
499+
@click="${(e) => { onApiKeyChange.call(this, v.securitySchemeId, e); }}">
500+
${v.finalKeyValue ? 'UPDATE' : 'SET'}
501+
</button>
502+
</div>`
503+
: ''
504+
}`
486505
: ''
487506
}
488507
</td>
@@ -502,6 +521,7 @@ export default function securitySchemeTemplate() {
502521
(v.flows[f]['x-default-scopes'] || v['x-default-scopes']),
503522
(v.flows[f]['x-receive-token-in'] || v['x-receive-token-in']),
504523
(v.flows[f]['x-receive-token-in-options'] || v['x-receive-token-in-options']),
524+
allowTry,
505525
))}
506526
</td>
507527
</tr>

0 commit comments

Comments
 (0)